docs(icons): improve icon preview (#356)

Author: amir78729

.idea/jsonSchemas.xml

@@ -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"
     }
   ]
 }
-  

.vscode/settings.json

@@ -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,

docs/components/[component].paths.ts

@@ -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;

docs/icons.md

@@ -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;"

docs/internals/components/DocIconGrid.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);
 

docs/sidebar.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);