From 97c4398d600d5365f4a9bb62f3f546247a76a4aa Mon Sep 17 00:00:00 2001
From: Amirhossein Alibakhshi <amir78729@gmail.com>
Date: Wed, 5 Feb 2025 19:29:25 +0330
Subject: [PATCH] docs(icons): improve icon preview

---
 .idea/jsonSchemas.xml                                  |  2 +-
 .vscode/settings.json                                  |  5 ++---
 docs/components/[component].paths.ts                   |  5 +----
 docs/icons.md                                          |  7 ++++++-
 docs/internals/components/DocIconGrid.ts               | 10 +++++++---
 docs/sidebar.ts                                        |  2 +-
 .../schema.json => interactive-demo.schema.json}       |  0
 pnpm-lock.yaml                                         |  7 -------
 scripts/generate-docs-metadata.ts                      |  5 +----
 internals/doc-helpers/types.ts => types/docs.ts        |  0
 10 files changed, 19 insertions(+), 24 deletions(-)
 rename internals/{doc-helpers/schema.json => interactive-demo.schema.json} (100%)
 rename internals/doc-helpers/types.ts => types/docs.ts (100%)

diff --git a/.idea/jsonSchemas.xml b/.idea/jsonSchemas.xml
index 1b9405f6..126098c5 100644
--- a/.idea/jsonSchemas.xml
+++ b/.idea/jsonSchemas.xml
@@ -7,7 +7,7 @@
           <value>
             <SchemaInfo>
               <option name="name" value="Interactive Demo Schema" />
-              <option name="relativePathToSchema" value="https://raw.githubusercontent.com/Tap30/web-components/refs/heads/main/internals/doc-helpers/schema.json" />
+              <option name="relativePathToSchema" value="https://raw.githubusercontent.com/Tap30/web-components/refs/heads/main/internals/interactive-demo.schema.json" />
               <option name="patterns">
                 <list>
                   <Item>
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 30827521..55fad73c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,9 +1,8 @@
 {
     "json.schemas": [
-    { 
+    {
       "fileMatch": [ "packages/web-components/src/**/doc/interactive-demo.config.json" ],
-      "url": "https://raw.githubusercontent.com/Tap30/web-components/refs/heads/main/internals/doc-helpers/schema.json"
+      "url": "https://raw.githubusercontent.com/Tap30/web-components/refs/heads/main/internals/interactive-demo.schema.json"
     }
   ]
 }
-  
\ No newline at end of file
diff --git a/docs/components/[component].paths.ts b/docs/components/[component].paths.ts
index cc4f83b8..6d603f8a 100644
--- a/docs/components/[component].paths.ts
+++ b/docs/components/[component].paths.ts
@@ -1,10 +1,7 @@
 import fs from "node:fs";
 import path from "node:path";
-import {
-  type Component,
-  type Metadata,
-} from "../../internals/doc-helpers/types.ts";
 import { getFileMeta } from "../../scripts/utils.ts";
+import { type Component, type Metadata } from "../../types/docs.ts";
 import {
   codify,
   getFormattedImportUsageString,
diff --git a/docs/icons.md b/docs/icons.md
index 397e0436..1632cecd 100644
--- a/docs/icons.md
+++ b/docs/icons.md
@@ -1,7 +1,7 @@
 ---
 prev: false
 next: false
-outline: false
+outline: "deep"
 ---
 
 <style>
@@ -55,6 +55,11 @@ outline: false
   padding: 6px;
 }
 
+.icon-item:focus-visible {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: 2px;
+}
+
 .icon-item svg {
  color: currentcolor;
   fill: currentcolor;
diff --git a/docs/internals/components/DocIconGrid.ts b/docs/internals/components/DocIconGrid.ts
index 6926d1ad..80e26317 100644
--- a/docs/internals/components/DocIconGrid.ts
+++ b/docs/internals/components/DocIconGrid.ts
@@ -93,7 +93,10 @@ export class DocIconGrid extends LitElement {
     this._showModal = true;
     this._selectedIcon = icon;
     scrollLock.disableBodyScroll(this._iconModal);
-    this._focusTrapper?.activate();
+
+    void this.updateComplete.then(() => {
+      this._focusTrapper?.activate();
+    });
   };
 
   private _getSvg(iconPaths?: SVGPathInfo[]) {
@@ -142,7 +145,7 @@ export class DocIconGrid extends LitElement {
         aria-hidden="true"
         class=${classMap({
           "modal-overlay": true,
-          open: !!this._showModal,
+          open: this._showModal,
         })}
         @click=${this._closeModal}
       ></div>
@@ -154,9 +157,10 @@ export class DocIconGrid extends LitElement {
         aria-modal="true"
         class=${classMap({
           modal: true,
-          open: !!this._selectedIcon,
+          open: this._showModal,
         })}
         @click=${(e: Event) => e.stopPropagation()}
+        ?inert=${!this._showModal}
       >
         <header
           style="display:flex; justify-content:space-between; align-items: center;"
diff --git a/docs/sidebar.ts b/docs/sidebar.ts
index e9b7deb5..efbbf26f 100644
--- a/docs/sidebar.ts
+++ b/docs/sidebar.ts
@@ -1,8 +1,8 @@
 import fs from "fs";
 import path from "node:path";
 import { type DefaultTheme } from "vitepress";
-import { type Metadata } from "../internals/doc-helpers/types.ts";
 import { getFileMeta } from "../scripts/utils.ts";
+import { type Metadata } from "../types/docs.ts";
 
 const { dirname } = getFileMeta(import.meta.url);
 
diff --git a/internals/doc-helpers/schema.json b/internals/interactive-demo.schema.json
similarity index 100%
rename from internals/doc-helpers/schema.json
rename to internals/interactive-demo.schema.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a12b9381..efe1820d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2513,9 +2513,6 @@ packages:
   focus-trap@7.6.4:
     resolution: {integrity: sha512-xx560wGBk7seZ6y933idtjJQc1l+ck+pI3sKvhKozdBV1dRZoKhkW5xoCaFv9tQiX5RH1xfSxjuNu6g+lmN/gw==}
 
-  focus-trap@7.6.4:
-    resolution: {integrity: sha512-xx560wGBk7seZ6y933idtjJQc1l+ck+pI3sKvhKozdBV1dRZoKhkW5xoCaFv9tQiX5RH1xfSxjuNu6g+lmN/gw==}
-
   for-each@0.3.4:
     resolution: {integrity: sha512-kKaIINnFpzW6ffJNDjjyjrk21BkDx38c0xa/klsT8VzLCaMEefv4ZTacrcVR4DmgTeBra++jMDAfS/tS799YDw==}
     engines: {node: '>= 0.4'}
@@ -7045,10 +7042,6 @@ snapshots:
 
   flatted@3.3.2: {}
 
-  focus-trap@7.6.4:
-    dependencies:
-      tabbable: 6.2.0
-
   focus-trap@7.6.4:
     dependencies:
       tabbable: 6.2.0
diff --git a/scripts/generate-docs-metadata.ts b/scripts/generate-docs-metadata.ts
index 4dc2dc52..d9e1843d 100644
--- a/scripts/generate-docs-metadata.ts
+++ b/scripts/generate-docs-metadata.ts
@@ -7,10 +7,7 @@ import {
 import * as fs from "node:fs";
 import * as path from "node:path";
 import { type DefaultTheme } from "vitepress";
-import {
-  type Component,
-  type ImportPaths,
-} from "../internals/doc-helpers/types.ts";
+import type { Component, ImportPaths } from "../types/docs.ts";
 import { getFileMeta } from "./utils.ts";
 
 const { dirname } = getFileMeta(import.meta.url);
diff --git a/internals/doc-helpers/types.ts b/types/docs.ts
similarity index 100%
rename from internals/doc-helpers/types.ts
rename to types/docs.ts