@sankhyatronics/sankhya-cms 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sankhyatronics/sankhya-cms",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/sankhyatronics/SankhyaCMS.git",
@@ -75,6 +75,10 @@
       "types": "./dist/markdown/index.d.ts",
       "import": "./dist/markdown/index.js"
     },
+    "./mega-menu": {
+      "types": "./dist/mega-menu/index.d.ts",
+      "import": "./dist/mega-menu/index.js"
+    },
     "./menu-grid": {
       "types": "./dist/menu-grid/index.d.ts",
       "import": "./dist/menu-grid/index.js"
@@ -130,6 +134,16 @@
     "custom-elements.json"
   ],
   "sideEffects": true,
+  "scripts": {
+    "build": "tsup src/index.ts src/schema/index.ts src/theming/index.ts src/shared/styles.ts src/shared/icons.ts src/bento-grid/index.ts src/card/index.ts src/carousel/index.ts src/content-block/index.ts src/cookie-consent/index.ts src/dropdown/index.ts src/feature-split/index.ts src/features-section/index.ts src/footer/index.ts src/header/index.ts src/hero/index.ts src/icon-button/index.ts src/items-accordion/index.ts src/markdown/index.ts src/mega-menu/index.ts src/menu-grid/index.ts src/menu-grid-item/index.ts src/menu-item/index.ts src/promo-banner/index.ts src/section/index.ts src/select/index.ts src/stats/index.ts src/testimonials/index.ts --format esm --dts --sourcemap --clean && node scripts/copy-theme.mjs && cem analyze",
+    "dev": "tsup src/index.ts --watch --format esm --dts",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint",
+    "clean": "rimraf dist",
+    "test": "vitest run",
+    "migrate-json": "node scripts/migrate-json.mjs",
+    "analyze": "cem analyze"
+  },
   "dependencies": {
     "dompurify": "^3.4.16",
     "iconify-icon": "^3.0.3",
@@ -137,15 +151,15 @@
     "marked": "^18.1.0"
   },
   "devDependencies": {
-    "@sankhyatronics/oxlint-config": "0.1.3",
-    "@sankhyatronics/typescript-config": "0.1.3",
-    "oxlint": "1.87.0",
-    "rimraf": "6.1.3",
-    "tsup": "8.5.1",
-    "typescript": "6.0.3",
-    "vitest": "5.0.3",
-    "@types/node": "26.6.4",
-    "@custom-elements-manifest/analyzer": "0.11.0"
+    "@sankhyatronics/oxlint-config": "workspace:*",
+    "@sankhyatronics/typescript-config": "workspace:*",
+    "oxlint": "catalog:",
+    "rimraf": "catalog:",
+    "tsup": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:",
+    "@types/node": "catalog:",
+    "@custom-elements-manifest/analyzer": "catalog:"
   },
   "keywords": [
     "web-components",
@@ -156,15 +170,5 @@
   "customElements": "custom-elements.json",
   "publishConfig": {
     "access": "public"
-  },
-  "scripts": {
-    "build": "tsup src/index.ts src/schema/index.ts src/theming/index.ts src/shared/styles.ts src/shared/icons.ts src/bento-grid/index.ts src/card/index.ts src/carousel/index.ts src/content-block/index.ts src/cookie-consent/index.ts src/dropdown/index.ts src/feature-split/index.ts src/features-section/index.ts src/footer/index.ts src/header/index.ts src/hero/index.ts src/icon-button/index.ts src/items-accordion/index.ts src/markdown/index.ts src/menu-grid/index.ts src/menu-grid-item/index.ts src/menu-item/index.ts src/promo-banner/index.ts src/section/index.ts src/select/index.ts src/stats/index.ts src/testimonials/index.ts --format esm --dts --sourcemap --clean && node scripts/copy-theme.mjs && cem analyze",
-    "dev": "tsup src/index.ts --watch --format esm --dts",
-    "typecheck": "tsc --noEmit",
-    "lint": "oxlint",
-    "clean": "rimraf dist",
-    "test": "vitest run",
-    "migrate-json": "node scripts/migrate-json.mjs",
-    "analyze": "cem analyze"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 Sankhyatronics
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/chunk-3TCP25JG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/shared/icons.ts"],"sourcesContent":["import { html } from 'lit';\r\nimport type { TemplateResult } from 'lit';\r\n\r\n/**\r\n * Every inline SVG icon used across components, centralized so a glyph's\r\n * path data lives in exactly one place instead of being copy-pasted at each\r\n * call site. Each icon is a small function returning a Lit `TemplateResult`\r\n * (not a `css`-style fragment) so callers can size — and, where noted, class\r\n * — the icon per context while sharing the same markup.\r\n */\r\n\r\nconst FOLDER_ICON_COLOR = 'oklch(0.72 0.09 75)';\r\n\r\n/** Filled folder glyph (browse rows/tiles). Fixed 20x16 — folders don't resize per usage. */\r\nexport function folderIcon(): TemplateResult {\r\n  return html`\r\n    <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=\"M0 2a2 2 0 012-2h5l2 2h9a2 2 0 012 2v10a2 2 0 01-2 2H2a2 2 0 01-2-2V2z\" fill=${FOLDER_ICON_COLOR} />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Outlined folder glyph (breadcrumb crumb icon). `className` lets the caller hook its own layout class. */\r\nexport function folderOutlineIcon(size = 11, className = ''): TemplateResult {\r\n  return html`\r\n    <svg class=${className} width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M4 4h5l2 2h9v12H4V4z\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** External-link/\"open\" glyph (open site/library actions in the Templates/Data/Save-location pickers). */\r\nexport function externalLinkIcon(size = 15): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M18 13v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5M15 4h5v5M20 4l-9 9\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.8\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Refresh/reload glyph (Templates/Data picker refresh buttons). */\r\nexport function refreshIcon(size = 15): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M17.65 6.35A7.958 7.958 0 0 0 12 4a8 8 0 1 0 8 8h-2a6 6 0 1 1-6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\r\n        fill=\"currentColor\"\r\n      />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Clock glyph (the wizard's \"Recent activity\" history trigger button, Steps 1-3). */\r\nexport function historyIcon(size = 15): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <path d=\"M12 7v5l3.5 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Trash/delete glyph (clear-all button in the selected-chips summary badge). */\r\nexport function trashIcon(size = 15): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M4 4h2l1.2 12.4A2 2 0 0 0 9.2 18.2h8.1a2 2 0 0 0 1.98-1.7L20.5 8H6.5\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"10\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\r\n      <circle cx=\"17\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Chevron glyph (pager prev/next buttons, the select trigger's caret). */\r\nexport function chevronIcon(direction: 'left' | 'right' | 'down', size = 14): TemplateResult {\r\n  const d = { left: 'M15 18l-6-6 6-6', right: 'M9 6l6 6-6 6', down: 'M6 9l6 6 6-6' }[direction];\r\n\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=${d} stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Plus glyph (\"New folder\" action button). */\r\nexport function plusIcon(size = 13): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=\"M12 4v16M4 12h16\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Cards-view glyph (2x2 grid — view-toggle button). */\r\nexport function cardsViewIcon(size = 15): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n      <rect x=\"1\" y=\"1\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\r\n      <rect x=\"9\" y=\"1\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\r\n      <rect x=\"1\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\r\n      <rect x=\"9\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Checkmark glyph (completed-step marker in the step indicator). */\r\nexport function checkIcon(size = 14): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=\"M4 12l5 5L20 6\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** SharePoint site glyph (globe — root \"All sites\" browser rows). */\r\nexport function siteIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.6\" />\r\n      <path d=\"M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18\" stroke=\"currentColor\" stroke-width=\"1.6\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** 3x3 dot-grid glyph (bento-menu app-switcher trigger). */\r\nexport function bentoGridIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M16 20h4v-4h-4m0-2h4v-4h-4m-6-2h4V4h-4m6 4h4V4h-4m-6 10h4v-4h-4m-6 4h4v-4H4m0 10h4v-4H4m6 4h4v-4h-4M4 8h4V4H4z\"\r\n      />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** List-view glyph (stacked rows — view-toggle button). */\r\nexport function listViewIcon(size = 15): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n      <rect x=\"1\" y=\"2\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"currentColor\" />\r\n      <rect x=\"6\" y=\"2.5\" width=\"9\" height=\"2\" rx=\"1\" fill=\"currentColor\" />\r\n      <rect x=\"1\" y=\"6.5\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"currentColor\" />\r\n      <rect x=\"6\" y=\"7\" width=\"9\" height=\"2\" rx=\"1\" fill=\"currentColor\" />\r\n      <rect x=\"1\" y=\"11\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"currentColor\" />\r\n      <rect x=\"6\" y=\"11.5\" width=\"9\" height=\"2\" rx=\"1\" fill=\"currentColor\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/**\r\n * A small set of generic domain icons for `st-menu-grid-item`'s icon slot (nav \"mega menu\"\r\n * entries — sales/purchase/accounting/settings items) — deliberately simple line glyphs rather\r\n * than pixel-perfect illustrations, same fidelity level as the icons above.\r\n */\r\n\r\n/** Shopping-cart glyph (sales/orders). */\r\nexport function cartIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M3 4h2l2.4 12.4A2 2 0 0 0 9.36 18h8.2a2 2 0 0 0 1.96-1.6L21 8H6\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"10\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\r\n      <circle cx=\"17\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Delivery-truck glyph (purchase orders / receiving). */\r\nexport function truckIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=\"M2 6h11v10H2z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n      <path d=\"M13 10h4l4 3.5V16h-8z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n      <circle cx=\"6.5\" cy=\"18\" r=\"1.8\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <circle cx=\"16.5\" cy=\"18\" r=\"1.8\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Package/box glyph (products, inventory). */\r\nexport function boxIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M12 3l8 4.2v9.6L12 21l-8-4.2V7.2L12 3z\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path d=\"M4.2 7.2L12 11l7.8-3.8M12 11v10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Map-pin glyph (stock locations). */\r\nexport function mapPinIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M12 21s7-6.1 7-11.5A7 7 0 0 0 5 9.5C5 14.9 12 21 12 21z\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"9.5\" r=\"2.4\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Two-person glyph (partners — customers/vendors/employees). */\r\nexport function usersIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <circle cx=\"9\" cy=\"8\" r=\"3.2\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <path d=\"M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n      <path\r\n        d=\"M16 5.3a3.2 3.2 0 0 1 0 6.2M19 20c0-2.8-2-5.1-4.6-5.8\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n      />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Open-book glyph (journals). */\r\nexport function bookIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M12 5.5c-1.6-1-4-1.5-6-1.5-1 0-2 .1-3 .4v13.6c1-.3 2-.4 3-.4 2 0 4.4.5 6 1.5m0-13.6c1.6-1 4-1.5 6-1.5 1 0 2 .1 3 .4v13.6c-1-.3-2-.4-3-.4-2 0-4.4.5-6 1.5m0-13.6v13.6\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.8\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Document/invoice glyph. */\r\nexport function documentIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=\"M6 2h9l5 5v15H6V2z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n      <path d=\"M15 2v5h5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n      <path d=\"M9 12h6M9 16h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Receipt glyph, zig-zag bottom edge (credit/debit notes). */\r\nexport function receiptIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M5 2h14v19l-2.5-1.6L14 21l-2.5-1.6L9 21l-2.5-1.6L5 21V2z\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path d=\"M8 8h8M8 12h8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Percent glyph (taxes). */\r\nexport function percentIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=\"M19 5L5 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n      <circle cx=\"7\" cy=\"7\" r=\"2.5\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <circle cx=\"17\" cy=\"17\" r=\"2.5\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Stacked-coins glyph (payment terms). */\r\nexport function coinsIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <ellipse cx=\"8\" cy=\"7\" rx=\"5.5\" ry=\"3\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <path d=\"M2.5 7v10c0 1.7 2.5 3 5.5 3s5.5-1.3 5.5-3V7\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <path d=\"M2.5 12c0 1.7 2.5 3 5.5 3s5.5-1.3 5.5-3\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <ellipse cx=\"16.5\" cy=\"12\" rx=\"5\" ry=\"2.7\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <path d=\"M11.5 12v5c0 1.5 2.2 2.7 5 2.7s5-1.2 5-2.7v-5\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Padlock glyph (fiscal year closing / lock dates). */\r\nexport function lockIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <rect x=\"4\" y=\"11\" width=\"16\" height=\"10\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <path d=\"M7 11V7a5 5 0 0 1 10 0v4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1.6\" fill=\"currentColor\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/**\r\n * Office file-type glyphs, ported from `PennyIcons` in `@sankhyatronics/sankhya-icons`\r\n * (FileWordIcon/FileExcelIcon/FilePowerPointIcon) — this package is Lit, so it can't import\r\n * the React components and carries the same path data instead. Filled, `currentColor`.\r\n */\r\nconst FILE_TYPE_ICON_PATHS = {\r\n  word: 'm19.95 5.54-3.48-3.49A6.96 6.96 0 0 0 11.52 0H7C4.24 0 2 2.24 2 5v14c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5v-8.51c0-1.87-.73-3.63-2.05-4.95Zm-1.41 1.41c.32.32.59.67.81 1.05h-4.34c-.55 0-1-.45-1-1V2.66c.38.22.73.49 1.05.81l3.48 3.49ZM20 19c0 1.65-1.35 3-3 3H7c-1.65 0-3-1.35-3-3V5c0-1.65 1.35-3 3-3h4.51c.16 0 .33 0 .49.02V7c0 1.65 1.35 3 3 3h4.98c.02.16.02.32.02.49V19Zm-3.28-5.76L15.3 18.9c-.15.61-.68 1.05-1.31 1.09-.63.04-1.21-.32-1.44-.91L12 17.7l-.55 1.38c-.22.56-.75.91-1.34.91h-.1c-.63-.04-1.15-.48-1.31-1.1l-1.41-5.66a1 1 0 0 1 1.94-.48l1 4 .85-2.13a1 1 0 0 1 1.86 0l.84 2.13 1.01-4a1 1 0 0 1 1.94.48Z',\r\n  excel:\r\n    'M15.27 13.64 13.3 16l1.97 2.36a1.001 1.001 0 1 1-1.54 1.28L12 17.56l-1.73 2.08a.99.99 0 0 1-.77.36c-.23 0-.45-.08-.64-.23-.42-.35-.48-.98-.13-1.41L10.7 16l-1.97-2.36a1.001 1.001 0 1 1 1.54-1.28L12 14.44l1.73-2.08c.35-.42.98-.48 1.41-.13.42.35.48.98.13 1.41ZM22 10.49V19c0 2.76-2.24 5-5 5H7c-2.76 0-5-2.24-5-5V5c0-2.76 2.24-5 5-5h4.51c1.87 0 3.63.73 4.95 2.05l3.48 3.49a6.96 6.96 0 0 1 2.05 4.95Zm-6.95-7.03c-.32-.32-.67-.59-1.05-.81V7c0 .55.45 1 1 1h4.34c-.22-.38-.49-.73-.81-1.05l-3.48-3.49ZM20 10.48c0-.16 0-.33-.02-.49H15c-1.65 0-3-1.35-3-3V2.02C11.84 2 11.68 2 11.51 2H7C5.35 2 4 3.35 4 5v14c0 1.65 1.35 3 3 3h10c1.65 0 3-1.35 3-3v-8.51Z',\r\n  powerpoint:\r\n    'm19.95 5.54-3.49-3.49A6.96 6.96 0 0 0 11.51 0H7C4.24 0 2 2.24 2 5v14c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5v-8.51c0-1.87-.73-3.63-2.05-4.95Zm-1.41 1.41c.32.32.59.67.81 1.05h-4.34c-.55 0-1-.45-1-1V2.66c.38.22.73.49 1.05.81l3.49 3.49ZM20 19c0 1.65-1.35 3-3 3H7c-1.65 0-3-1.35-3-3V5c0-1.65 1.35-3 3-3h4.51c.16 0 .33 0 .49.02V7c0 1.65 1.35 3 3 3h4.98c.02.16.02.32.02.49V19Zm-10 1c-.55 0-1-.45-1-1v-5c0-1.1.9-2 2-2h1c1.65 0 3 1.35 3 3s-1.35 3-3 3h-1v1c0 .55-.45 1-1 1Zm1-4h1c.55 0 1-.45 1-1s-.45-1-1-1h-1v2Z'\r\n} as const;\r\n\r\n/** Word/Excel/PowerPoint file glyph (the document icon in front of template/file rows). */\r\nexport function fileTypeIcon(type: keyof typeof FILE_TYPE_ICON_PATHS, size = 24): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\r\n      <path d=${FILE_TYPE_ICON_PATHS[type]} />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Hamburger glyph (`st-header`'s mobile nav toggle, closed state). */\r\nexport function menuIcon(size = 20): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=\"M4 6h16M4 12h16M4 18h16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** X/close glyph (`st-header`'s mobile nav toggle, open state). */\r\nexport function closeIcon(size = 20): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path d=\"M5 5l14 14M19 5L5 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Gear/cog glyph (company settings). */\r\nexport function gearIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n      <path\r\n        d=\"M12 3v2.2M12 18.8V21M21 12h-2.2M5.2 12H3M18 6l-1.6 1.6M7.6 16.4L6 18M18 18l-1.6-1.6M7.6 7.6L6 6\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n      />\r\n    </svg>\r\n  `;\r\n}\r\n\r\n/** Paint-palette glyph (theme/color-scheme switcher). */\r\nexport function paletteIcon(size = 18): TemplateResult {\r\n  return html`\r\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M12 3a9 9 0 1 0 0 18c1.1 0 2-.9 2-2 0-.5-.2-1-.5-1.3-.3-.4-.5-.8-.5-1.2 0-1.1.9-2 2-2h2a4 4 0 0 0 4-4c0-4.4-4-7.5-9-7.5z\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.6\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"7.5\" cy=\"10.5\" r=\"1.2\" fill=\"currentColor\" />\r\n      <circle cx=\"11\" cy=\"7\" r=\"1.2\" fill=\"currentColor\" />\r\n      <circle cx=\"15.5\" cy=\"7.5\" r=\"1.2\" fill=\"currentColor\" />\r\n      <circle cx=\"17.5\" cy=\"11.5\" r=\"1.2\" fill=\"currentColor\" />\r\n    </svg>\r\n  `;\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/chunk-FWIG6GEZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { buttonResetStyles, controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport type { DropdownToggleEventDetail } from './DropdownEvents';\r\n\r\n/**\r\n * A labeled trigger + slotted dropdown panel — nav menus (typically holding an `st-menu-grid`),\r\n * action menus, anything \"click a trigger, show content under it\". A 1:1 port of `SankhyaUI`'s\r\n * React `Dropdown` (`SankhyaCMS/SankhyaUI/src/components/Dropdown`): same markup\r\n * (`.menu` > `.menu-title` + `.menu-dropdown`), sizes, 0.3s slide/fade, and behavior —\r\n *\r\n * - only one dropdown is open at a time (the source's `DropdownProvider`, built in here, so no\r\n *   provider element is needed);\r\n * - a mousedown outside, Escape, or a click inside the panel closes it;\r\n * - an `href` trigger toggles the panel when it has content, and is a plain link when it doesn't;\r\n * - `inline` opens the panel in the flow, the source's `.touch-device` layout.\r\n *\r\n * Colors and the panel's surface come from the suite theme (the source left those to the\r\n * consumer's `className`/`itemGroupClassName` utility classes). Two source rules are left out\r\n * because they break existing suite uses (`st-source-bar`'s site/library menus): the 100vw panel\r\n * at <=768px (overflows the screen from wherever the trigger sits; the header uses `inline`\r\n * instead) and `overflow: hidden` on slotted children (clips their focus rings). Suite additions\r\n * kept on top: `align`, `active`, `disabled`, `inline`, and the `dropdown-toggle` event.\r\n */\r\n@customElement('st-dropdown')\r\nexport class Dropdown extends LitElement {\r\n  /** The open dropdown, if any — the source's `DropdownContext.activeDropdown`. */\r\n  private static openDropdown: Dropdown | null = null;\r\n\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      ${fontFamilyStyles}\r\n    }\r\n\r\n    .menu-title {\r\n      ${buttonResetStyles}\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      box-sizing: border-box;\r\n      min-height: 40px;\r\n      padding: 12px;\r\n      gap: 8px;\r\n      text-align: center;\r\n      width: fit-content;\r\n      border-radius: var(--st-radius-sm);\r\n      /* --st-nav-*: set by a host bar (st-header's transparent state) to recolour its nav items. */\r\n      color: var(--st-nav-color, var(--st-color-text));\r\n      font-size: 0.875rem;\r\n      text-decoration: none;\r\n      white-space: nowrap;\r\n      transition: background-color 0.3s ease;\r\n    }\r\n\r\n    .menu-title:hover,\r\n    .menu-title[aria-expanded='true'] {\r\n      background: var(--st-nav-hover-bg, var(--st-color-hover));\r\n      color: var(--st-nav-color, var(--st-color-text-strong));\r\n    }\r\n\r\n    :host([active]) .menu-title {\r\n      background: var(--st-color-accent-subtle);\r\n      color: var(--st-color-accent-text);\r\n    }\r\n\r\n    :host([disabled]) .menu-title {\r\n      color: var(--st-color-text-muted);\r\n      cursor: not-allowed;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .icon {\r\n      display: inline-flex;\r\n      flex: none;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    .icon[hidden] {\r\n      display: none;\r\n    }\r\n\r\n    .arrow {\r\n      display: inline-block;\r\n      margin-left: 8px;\r\n      font-size: 0.75rem;\r\n      transition: transform 0.3s ease;\r\n    }\r\n\r\n    .menu-title[aria-expanded='true'] .arrow {\r\n      transform: rotate(180deg);\r\n    }\r\n\r\n    .menu-dropdown {\r\n      position: absolute;\r\n      top: 100%;\r\n      left: 0;\r\n      z-index: 100;\r\n      padding: 16px;\r\n      background: var(--st-color-surface);\r\n      color: var(--st-color-text);\r\n      /* The panel has its own surface: items in it never take the bar's nav colours. */\r\n      --st-nav-color: initial;\r\n      --st-nav-hover-bg: initial;\r\n      border: 1px solid var(--st-color-border);\r\n      border-radius: var(--st-radius-sm);\r\n      box-shadow: 0 4px 16px var(--st-shadow-color-sm);\r\n      opacity: 0;\r\n      visibility: hidden;\r\n      transform: translateY(-10px);\r\n      /* visibility flips at once on open (so keyboard focus can move into the panel on the same\r\n         frame) and only after the 0.3s fade on close. */\r\n      transition:\r\n        opacity 0.3s ease,\r\n        transform 0.3s ease,\r\n        visibility 0s linear 0.3s;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .menu-dropdown.align-right {\r\n      left: auto;\r\n      right: 0;\r\n    }\r\n\r\n    .menu-dropdown.show {\r\n      opacity: 1;\r\n      visibility: visible;\r\n      transform: translateY(0);\r\n      pointer-events: auto;\r\n      transition-delay: 0s;\r\n    }\r\n\r\n    /* Inline: the panel opens in the flow under its trigger and pushes what follows down, instead\r\n       of floating — the source's .touch-device layout. st-header turns this on for its menu while\r\n       the hamburger panel is showing. */\r\n    :host([inline]) {\r\n      display: block;\r\n    }\r\n\r\n    :host([inline]) .menu-title {\r\n      width: 100%;\r\n      justify-content: flex-start;\r\n    }\r\n\r\n    :host([inline]) .arrow {\r\n      margin-left: auto;\r\n    }\r\n\r\n    :host([inline]) .menu-dropdown {\r\n      display: none;\r\n      position: relative;\r\n      top: auto;\r\n      left: auto;\r\n      right: auto;\r\n      width: 100%;\r\n      box-sizing: border-box;\r\n      box-shadow: none;\r\n      opacity: 1;\r\n      visibility: visible;\r\n      transform: none;\r\n    }\r\n\r\n    :host([inline]) .menu-dropdown.show {\r\n      display: block;\r\n      pointer-events: auto;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .menu-dropdown,\r\n      .arrow {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** Trigger label text (source: `title`, renamed because `title` is the native tooltip\r\n   * attribute). Leave empty to show only `slot=\"icon\"`. */\r\n  @property({ type: String })\r\n  label = '';\r\n\r\n  /** Renders the trigger as an `<a href>`. With panel content the click toggles the panel (as in\r\n   * the source); with none it navigates. */\r\n  @property({ type: String })\r\n  href = '';\r\n\r\n  @property({ type: String, attribute: 'icon-position' })\r\n  iconPosition: 'left' | 'right' = 'left';\r\n\r\n  /** Inline `width`/`height` of the `slot=\"icon\"` wrapper (source: `iconSize`, default `1.2rem`). */\r\n  @property({ type: String, attribute: 'icon-size' })\r\n  iconSize = '1.2rem';\r\n\r\n  /** Inline `color` of the `slot=\"icon\"` wrapper (source: `iconColor`). */\r\n  @property({ type: String, attribute: 'icon-color' })\r\n  iconColor = 'currentColor';\r\n\r\n  /** Which edge of the trigger the panel lines up with. */\r\n  @property({ type: String })\r\n  align: 'left' | 'right' = 'left';\r\n\r\n  /** `target` of an `href` trigger (source default `_self`). */\r\n  @property({ type: String })\r\n  target = '_self';\r\n\r\n  /** Extra class(es) on the trigger (source: `className`; a `class` on `st-dropdown` styles the host). */\r\n  @property({ type: String, attribute: 'trigger-class-name' })\r\n  triggerClassName = '';\r\n\r\n  /** Extra class(es) on the panel (source: `itemGroupClassName`). */\r\n  @property({ type: String, attribute: 'item-group-class-name' })\r\n  itemGroupClassName = '';\r\n\r\n  /** Unused, as in the source (`itemClassName` is never read there); kept for prop parity. */\r\n  @property({ type: String, attribute: 'item-class-name' })\r\n  itemClassName = '';\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  disabled = false;\r\n\r\n  /** Highlights the trigger as the current section (e.g. the current page is one of its items). */\r\n  @property({ type: Boolean, reflect: true })\r\n  active = false;\r\n\r\n  /** Opens the panel in the flow under the trigger instead of floating over the page (see the\r\n   * styles). `st-header` sets this on its own menu's dropdowns while its hamburger panel shows. */\r\n  @property({ type: Boolean, reflect: true })\r\n  inline = false;\r\n\r\n  /** Whether the panel is showing. Follows user toggles; may also be set from outside. */\r\n  @property({ type: Boolean, reflect: true })\r\n  open = false;\r\n\r\n  /** Whether the default slot has content — the source's `children` check. */\r\n  @state() private hasContent = false;\r\n\r\n  /** Whether `slot=\"icon\"` has content. */\r\n  @state() private hasIcon = false;\r\n\r\n  connectedCallback(): void {\r\n    super.connectedCallback();\r\n    document.addEventListener('mousedown', this.closeOnOutsideMouseDown);\r\n    window.addEventListener('keydown', this.closeOnEscape);\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    document.removeEventListener('mousedown', this.closeOnOutsideMouseDown);\r\n    window.removeEventListener('keydown', this.closeOnEscape);\r\n    if (Dropdown.openDropdown === this) Dropdown.openDropdown = null;\r\n    super.disconnectedCallback();\r\n  }\r\n\r\n  protected updated(changed: Map<string, unknown>): void {\r\n    if (!changed.has('open')) return;\r\n    if (this.open) {\r\n      const previous = Dropdown.openDropdown;\r\n      Dropdown.openDropdown = this;\r\n      if (previous && previous !== this) previous.setOpen(false);\r\n    } else if (Dropdown.openDropdown === this) {\r\n      Dropdown.openDropdown = null;\r\n    }\r\n  }\r\n\r\n  private setOpen(open: boolean): void {\r\n    if (this.open === open) return;\r\n    this.open = open;\r\n    this.dispatchEvent(new CustomEvent<DropdownToggleEventDetail>('dropdown-toggle', { detail: { open }, bubbles: true, composed: true }));\r\n  }\r\n\r\n  private closeOnOutsideMouseDown = (event: Event): void => {\r\n    if (this.open && !event.composedPath().includes(this)) this.setOpen(false);\r\n  };\r\n\r\n  private closeOnEscape = (event: KeyboardEvent): void => {\r\n    if (!this.open || event.key !== 'Escape') return;\r\n    const focusWasInside = event.composedPath().includes(this);\r\n    this.setOpen(false);\r\n    if (focusWasInside) this.trigger()?.focus();\r\n  };\r\n\r\n  private trigger(): HTMLElement | null {\r\n    return this.renderRoot.querySelector<HTMLElement>('.menu-title');\r\n  }\r\n\r\n  /** Keyboard-reachable entries in the panel, in order: menu items (they delegate focus to their\r\n   * own link) plus any plain links/buttons/tabbable elements a caller slots in. */\r\n  private panelItems(): HTMLElement[] {\r\n    const slot = this.renderRoot.querySelector<HTMLSlotElement>('.menu-dropdown slot');\r\n    if (!slot) return [];\r\n    const selector =\r\n      'st-menu-item, st-menu-grid-item, a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\r\n    const items: HTMLElement[] = [];\r\n    for (const el of slot.assignedElements({ flatten: true })) {\r\n      if (el.matches(selector)) items.push(el as HTMLElement);\r\n      items.push(...Array.from(el.querySelectorAll<HTMLElement>(selector)));\r\n    }\r\n    return items;\r\n  }\r\n\r\n  /** Moves focus into the panel once it has become visible (it is `visibility: hidden` until the\r\n   * `show` class lands, and hidden elements can't take focus). */\r\n  private focusItem(pick: (items: HTMLElement[]) => HTMLElement | undefined): void {\r\n    void this.updateComplete.then(() => pick(this.panelItems())?.focus());\r\n  }\r\n\r\n  /** Enter/Space/ArrowDown open the panel and focus its first entry; ArrowUp its last. */\r\n  private onTitleKeyDown = (event: KeyboardEvent): void => {\r\n    if (!this.hasContent || this.disabled) return;\r\n    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.setOpen(true);\r\n      this.focusItem((items) => items[0]);\r\n    } else if (event.key === 'ArrowUp') {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.setOpen(true);\r\n      this.focusItem((items) => items[items.length - 1]);\r\n    }\r\n  };\r\n\r\n  /** Arrow keys/Home/End move between the panel's entries; Tab closes the panel and moves on. */\r\n  private onPanelKeyDown = (event: KeyboardEvent): void => {\r\n    if (event.key === 'Tab') {\r\n      this.setOpen(false);\r\n      return;\r\n    }\r\n    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\r\n    const items = this.panelItems();\r\n    if (items.length === 0) return;\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n    const path = event.composedPath();\r\n    const current = items.findIndex((item) => path.includes(item));\r\n    const last = items.length - 1;\r\n    const next =\r\n      event.key === 'Home'\r\n        ? 0\r\n        : event.key === 'End'\r\n          ? last\r\n          : event.key === 'ArrowDown'\r\n            ? current < 0 || current === last ? 0 : current + 1\r\n            : current <= 0 ? last : current - 1;\r\n    items[next].focus();\r\n  };\r\n\r\n  private onTitleClick = (event: Event): void => {\r\n    event.stopPropagation();\r\n    if (!this.hasContent) return;\r\n    event.preventDefault();\r\n    this.setOpen(!this.open);\r\n  };\r\n\r\n  /** A click anywhere inside the panel closes it, as in the source. */\r\n  private onPanelClick = (): void => {\r\n    this.setOpen(false);\r\n  };\r\n\r\n  private onContentSlotChange = (event: Event): void => {\r\n    this.hasContent = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).some(\r\n      (node) => node.nodeType === Node.ELEMENT_NODE || !!node.textContent?.trim()\r\n    );\r\n  };\r\n\r\n  private onIconSlotChange = (event: Event): void => {\r\n    this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\r\n  };\r\n\r\n  render() {\r\n    const icon = html`<span\r\n      class=\"icon ${this.iconPosition === 'left' ? 'icon-left' : 'icon-right'}\"\r\n      ?hidden=${!this.hasIcon}\r\n      style=\"width:${this.iconSize};height:${this.iconSize};color:${this.iconColor}\"\r\n      ><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot\r\n    ></span>`;\r\n    const titleContent = html`\r\n      ${this.iconPosition === 'left' ? icon : nothing} ${this.label ? html`<span part=\"label\">${this.label}</span>` : nothing}\r\n      ${this.iconPosition === 'right' ? icon : nothing}\r\n      ${this.hasContent ? html`<span class=\"arrow\" part=\"caret\" aria-hidden=\"true\">▼</span>` : nothing}\r\n    `;\r\n    const titleClass = `menu-title ${this.triggerClassName} ${this.open ? 'active' : ''}`;\r\n\r\n    return html`\r\n      <div class=\"menu\" part=\"menu\">\r\n        ${this.href\r\n          ? html`\r\n              <a\r\n                part=\"trigger\"\r\n                class=${titleClass}\r\n                href=${this.href}\r\n                target=${this.target}\r\n                aria-haspopup=${this.hasContent ? 'true' : 'false'}\r\n                aria-expanded=${this.open}\r\n                aria-disabled=${this.disabled ? 'true' : nothing}\r\n                @click=${this.onTitleClick}\r\n                @keydown=${this.onTitleKeyDown}\r\n              >\r\n                ${titleContent}\r\n              </a>\r\n            `\r\n          : html`\r\n              <button\r\n                part=\"trigger\"\r\n                class=${titleClass}\r\n                type=\"button\"\r\n                aria-haspopup=\"true\"\r\n                aria-expanded=${this.open}\r\n                ?disabled=${this.disabled}\r\n                @click=${this.onTitleClick}\r\n                @keydown=${this.onTitleKeyDown}\r\n              >\r\n                ${titleContent}\r\n              </button>\r\n            `}\r\n        <div\r\n          part=\"panel\"\r\n          class=\"menu-dropdown align-${this.align} ${this.itemGroupClassName} ${this.open ? 'show' : ''}\"\r\n          role=\"menu\"\r\n          @click=${this.onPanelClick}\r\n          @keydown=${this.onPanelKeyDown}\r\n        >\r\n          <slot @slotchange=${this.onContentSlotChange}></slot>\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/chunk-PKTRYUGP.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { chevronIcon, closeIcon, menuIcon } from '../shared/icons';\r\nimport { BREAKPOINT_TABLET, buttonResetStyles, controlBaseStyles, dropdownPanelStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport type { LanguageChangedEventDetail } from './HeaderEvents';\r\n\r\n/**\r\n * The app-shell header bar — brand (image + title, or title alone) on the left, a `slot=\"menu\"`\r\n * for primary nav (e.g. `st-dropdown`/`st-menu-grid` mega-menus, or plain links) taking the\r\n * middle, and a `slot=\"utility\"` for account/app-switcher/theme controls on the right. Ported\r\n * from `SankhyaUI`'s React `Header` (a separate, unrelated marketing-site project) to this\r\n * package's Lit conventions and this workspace's actual needs — that source component takes an\r\n * `imageSrc` logo with no text fallback, but none of this suite's apps has a logo image today, so\r\n * `title` is the primary brand prop here and `brand-image-url` is optional, mirroring\r\n * `st-app-header`'s own brand/title split (this component's slotted-menu/utility shape is a\r\n * deliberately different, more generic surface than `st-app-header`'s fixed nav-links/user-menu\r\n * props — pick whichever fits a given app's header).\r\n *\r\n * Layout follows the source's `Header.css`: the menu starts 4rem after the brand, the utility\r\n * controls sit after a vertical divider, and below `BREAKPOINT_TABLET` (900px here; 768px in the\r\n * source) `menu`/`utility` collapse behind a hamburger toggle into a full-screen layer under the\r\n * toggle (closes on Escape or a click inside it), where the menu's `st-dropdown`s are switched to\r\n * `inline` so they open in the flow — the same two slotted elements just get repositioned by CSS\r\n * (`.mobile-panel`'s `display: contents` at desktop width vs. a real fixed-position box below\r\n * `BREAKPOINT_TABLET`), rather than the slots being duplicated in the template, since a shadow\r\n * root can only ever assign a given light-DOM child to the *first* slot of a given name.\r\n *\r\n * Also carries an optional built-in language switcher (`languages`/`currentLanguageCode`, fires\r\n * `language-change`) — ported from `st-app-header`'s own implementation verbatim rather than\r\n * rebuilt, since the source `Header`'s reference story shows an equivalent flag/language `Select`\r\n * as a first-class header utility. Hidden entirely when `languages` has fewer than two entries.\r\n * This component has no translation logic itself; the consuming app owns what a language `code`\r\n * means and which content it re-renders in response.\r\n */\r\n@customElement('st-header')\r\nexport class Header extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: flex;\r\n      align-items: center;\r\n      /* Spacing between brand, menu and utility controls is the rows' own margins (SankhyaUI's\r\n         layout), not a flex gap. */\r\n      gap: 0;\r\n      /* !important on the box-model properties only: a shadow host's own :host rule always loses\r\n       * to ANY rule the consuming page has for the same property on that element, regardless of\r\n       * specificity (see st-footer's own padding/border-top for the same fix). Without\r\n       * box-sizing: border-box pinned here, a page that also sets its own padding on this host\r\n       * (e.g. a p-2 utility class) adds that padding on TOP of the fixed 64px height instead of\r\n       * being absorbed inside it — which is exactly what happens in Template Hub, the one app that\r\n       * doesn't load Tailwind Preflight (Preflight's own box-sizing: border-box reset is what\r\n       * silently keeps every other app's header at the intended 64px). */\r\n      box-sizing: border-box !important;\r\n      padding: 0 2rem !important;\r\n      height: 64px !important;\r\n      background: var(--st-color-surface);\r\n      border-bottom: 1px solid var(--st-color-border) !important;\r\n      ${rootFontFamilyStyles}\r\n      color: var(--st-color-text-strong);\r\n    }\r\n\r\n    :host([sticky]) {\r\n      position: sticky;\r\n      top: 0;\r\n      z-index: 100;\r\n    }\r\n\r\n    :host([inverted]) {\r\n      background: var(--st-color-text-strong);\r\n      color: var(--st-color-on-solid);\r\n      border-bottom-color: transparent;\r\n    }\r\n\r\n    :host([sticky]),\r\n    :host([transparent]),\r\n    :host([hide-on-scroll]) {\r\n      transition:\r\n        background-color 0.3s ease,\r\n        color 0.3s ease,\r\n        box-shadow 0.3s ease,\r\n        border-color 0.3s ease,\r\n        transform 0.3s ease;\r\n    }\r\n\r\n    /* Once the page has scrolled, a sticky/fixed header lifts off the content. */\r\n    :host([scrolled][sticky]),\r\n    :host([scrolled][transparent]),\r\n    :host([scrolled][hide-on-scroll]) {\r\n      box-shadow: 0 4px 16px var(--st-shadow-color-md);\r\n      border-bottom-color: transparent !important;\r\n    }\r\n\r\n    /* transparent: fixed over the top of the page (e.g. a dark hero), see-through until scrolled. */\r\n    :host([transparent]) {\r\n      position: fixed;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      z-index: 100;\r\n    }\r\n\r\n    :host([transparent]:not([scrolled]):not([mobile-open])) {\r\n      background: transparent;\r\n      border-bottom-color: transparent !important;\r\n      color: var(--st-header-transparent-color, var(--st-color-on-solid));\r\n      /* Read by st-menu-item / st-dropdown triggers in the bar (their panels reset them). */\r\n      --st-nav-color: var(--st-header-transparent-color, var(--st-color-on-solid));\r\n      --st-nav-hover-bg: color-mix(in oklch, currentColor 14%, transparent);\r\n    }\r\n\r\n    :host([transparent]:not([scrolled]):not([mobile-open])) .utility-row {\r\n      border-left-color: color-mix(in oklch, currentColor 35%, transparent);\r\n    }\r\n\r\n    :host([transparent]:not([scrolled]):not([mobile-open])) .lang-trigger {\r\n      color: inherit;\r\n    }\r\n\r\n    :host([transparent]:not([scrolled]):not([mobile-open])) .lang-trigger:hover,\r\n    :host([transparent]:not([scrolled]):not([mobile-open])) .toggle:hover {\r\n      background: color-mix(in oklch, currentColor 14%, transparent);\r\n    }\r\n\r\n    /* hide-on-scroll: slides away while scrolling down, back as soon as the user scrolls up. */\r\n    :host([hide-on-scroll]:not([sticky]):not([transparent])) {\r\n      position: sticky;\r\n      top: 0;\r\n      z-index: 100;\r\n    }\r\n\r\n    :host([scroll-hidden]:not([mobile-open])) {\r\n      transform: translateY(-100%);\r\n      box-shadow: none;\r\n    }\r\n\r\n    .brand {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--st-space-10);\r\n      flex: none;\r\n      text-decoration: none;\r\n      color: inherit;\r\n    }\r\n\r\n    .brand-mark {\r\n      width: var(--st-size-28);\r\n      height: var(--st-size-28);\r\n      border-radius: var(--st-radius-sm);\r\n      flex: none;\r\n      object-fit: contain;\r\n    }\r\n\r\n    .brand-title {\r\n      font-size: var(--st-text-xl);\r\n      font-weight: var(--st-font-weight-bold);\r\n      letter-spacing: var(--st-tracking-tight);\r\n      white-space: nowrap;\r\n    }\r\n\r\n    /* Desktop: a transparent pass-through so .menu-row/.utility-row lay out directly as :host's\r\n       own flex children. Mobile (see below) turns this into the actual overlay box. */\r\n    .mobile-panel {\r\n      display: contents;\r\n    }\r\n\r\n    /* Desktop layout from SankhyaUI's Header: the menu starts 4rem after the brand and takes the\r\n       free width; the utility controls sit after a vertical divider. Between 901px and 1200px the\r\n       gaps tighten so the menu still fits down to the 900px hamburger breakpoint. */\r\n    .menu-row {\r\n      flex: 1;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 1.5rem;\r\n      min-width: 0;\r\n      margin-left: 4rem;\r\n    }\r\n\r\n    .utility-row {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 1rem;\r\n      margin-left: 1.5rem;\r\n      padding-left: 1.5rem;\r\n      border-left: 1px solid var(--st-color-border);\r\n    }\r\n\r\n    :host([inverted]) .utility-row {\r\n      border-left-color: currentColor;\r\n    }\r\n\r\n    .utility-row.empty {\r\n      display: none;\r\n    }\r\n\r\n    @media (max-width: 1200px) {\r\n      :host {\r\n        padding: 0 1rem !important;\r\n      }\r\n\r\n      .menu-row {\r\n        margin-left: 0.5rem;\r\n      }\r\n\r\n      .utility-row {\r\n        margin-left: 0.5rem;\r\n        padding-left: 0.5rem;\r\n      }\r\n    }\r\n\r\n    @keyframes st-header-fade-in {\r\n      from {\r\n        opacity: 0;\r\n      }\r\n      to {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    .toggle {\r\n      display: none;\r\n      align-items: center;\r\n      justify-content: center;\r\n      flex: none;\r\n      position: relative;\r\n      z-index: 1002;\r\n      width: var(--st-size-32);\r\n      height: var(--st-size-32);\r\n      margin-left: auto;\r\n      padding: 0.5rem;\r\n      border: 0;\r\n      border-radius: var(--st-radius-sm);\r\n      background: transparent;\r\n      color: inherit;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .toggle:hover {\r\n      background: var(--st-color-hover);\r\n    }\r\n\r\n    .lang-menu {\r\n      position: relative;\r\n      flex: none;\r\n    }\r\n\r\n    .lang-trigger {\r\n      ${buttonResetStyles}\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--st-space-4);\r\n      height: var(--st-size-32);\r\n      padding: 0 var(--st-space-8);\r\n      border-radius: var(--st-radius-sm);\r\n      font-size: var(--st-text-base);\r\n      font-weight: var(--st-font-weight-semibold);\r\n      color: var(--st-color-text-muted);\r\n    }\r\n\r\n    .lang-trigger:hover {\r\n      background: var(--st-color-hover);\r\n      color: var(--st-color-text-strong);\r\n    }\r\n\r\n    .lang-dropdown {\r\n      ${dropdownPanelStyles}\r\n      min-width: 140px;\r\n    }\r\n\r\n    .lang-option {\r\n      ${buttonResetStyles}\r\n      display: block;\r\n      width: 100%;\r\n      padding: var(--st-space-10) var(--st-space-14);\r\n      font-size: var(--st-text-base);\r\n      font-weight: var(--st-font-weight-semibold);\r\n      text-align: left;\r\n      color: inherit;\r\n    }\r\n\r\n    .lang-option:hover {\r\n      background: var(--st-color-hover);\r\n    }\r\n\r\n    .lang-option.active {\r\n      color: var(--st-color-accent-text);\r\n    }\r\n\r\n    /* Hamburger layout from SankhyaUI's Header: a full-screen layer under the toggle, menu above\r\n       the utility controls, the menu's dropdowns opening in the flow (see syncInlineDropdowns). */\r\n    @media (max-width: ${BREAKPOINT_TABLET}px) {\r\n      :host {\r\n        padding: 0 1rem !important;\r\n      }\r\n\r\n      .mobile-panel {\r\n        display: none;\r\n      }\r\n\r\n      .toggle {\r\n        display: inline-flex;\r\n      }\r\n\r\n      :host([mobile-open]) .mobile-panel {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 2rem;\r\n        position: fixed;\r\n        inset: 0;\r\n        background: var(--st-color-surface);\r\n        padding: 5rem 1.5rem 2rem;\r\n        overflow-y: auto;\r\n        z-index: 1001;\r\n        animation: st-header-fade-in 0.3s ease;\r\n      }\r\n\r\n      :host([mobile-open]) .menu-row,\r\n      :host([mobile-open]) .utility-row {\r\n        flex-direction: column;\r\n        align-items: stretch;\r\n        gap: 1.5rem;\r\n        margin-left: 0;\r\n      }\r\n\r\n      :host([mobile-open]) .utility-row {\r\n        padding: 1.5rem 0 0;\r\n        border-left: 0;\r\n        border-top: 1px solid var(--st-color-border);\r\n      }\r\n\r\n      /* Apps usually slot one flex-row wrapper per slot; stack its items as the source does. */\r\n      :host([mobile-open]) ::slotted([slot='menu']),\r\n      :host([mobile-open]) ::slotted([slot='utility']) {\r\n        flex-direction: column !important;\r\n        align-items: stretch !important;\r\n        margin: 0 !important;\r\n      }\r\n    }\r\n\r\n    /* The same collapsed layout, switched on by script when the menu no longer fits the bar at\r\n       desktop width (see evaluateFit) — without it the menu spills over the utility controls. */\r\n    :host([compact]) .mobile-panel {\r\n      display: none;\r\n    }\r\n\r\n    :host([compact]) .toggle {\r\n      display: inline-flex;\r\n    }\r\n\r\n    :host([compact][mobile-open]) .mobile-panel {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 2rem;\r\n      position: fixed;\r\n      inset: 0;\r\n      background: var(--st-color-surface);\r\n      padding: 5rem 1.5rem 2rem;\r\n      overflow-y: auto;\r\n      z-index: 1001;\r\n      animation: st-header-fade-in 0.3s ease;\r\n    }\r\n\r\n    :host([compact][mobile-open]) .menu-row,\r\n    :host([compact][mobile-open]) .utility-row {\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n      gap: 1.5rem;\r\n      margin-left: 0;\r\n    }\r\n\r\n    :host([compact][mobile-open]) .utility-row {\r\n      padding: 1.5rem 0 0;\r\n      border-left: 0;\r\n      border-top: 1px solid var(--st-color-border);\r\n    }\r\n\r\n    :host([compact][mobile-open]) ::slotted([slot='menu']),\r\n    :host([compact][mobile-open]) ::slotted([slot='utility']) {\r\n      flex-direction: column !important;\r\n      align-items: stretch !important;\r\n      margin: 0 !important;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      :host,\r\n      .mobile-panel {\r\n        animation: none !important;\r\n        transition: none !important;\r\n      }\r\n    }\r\n  `;\r\n\r\n  @property({ type: String })\r\n  title = '';\r\n\r\n  /** Optional logo image URL, shown before `title`. Omitted entirely when empty — none of this suite's apps has one today. Matches the source component's `imageSrc` (renamed here to pair with `title`/`logoHref`, since this component's only image use is the brand mark). */\r\n  @property({ type: String, attribute: 'brand-image-url' })\r\n  brandImageUrl = '';\r\n\r\n  /** `alt` text for the brand image — matches the source component's `altText` (default `'Logo'`). */\r\n  @property({ type: String, attribute: 'alt-text' })\r\n  altText = 'Logo';\r\n\r\n  /** Wraps the brand in an `<a>` when set (e.g. `/`); a plain non-link `<div>` otherwise. */\r\n  @property({ type: String })\r\n  logoHref = '';\r\n\r\n  /** `target` for the brand `<a>` — matches the source component's `logoTarget` (default `_self`). No effect when `logoHref` isn't set. */\r\n  @property({ type: String, attribute: 'logo-target' })\r\n  logoTarget = '_self';\r\n\r\n  /** Extra class(es) appended to the brand link/div — matches the source component's `logoClassName`. */\r\n  @property({ type: String, attribute: 'logo-class-name' })\r\n  logoClassName = '';\r\n\r\n  /** Inverts the header's color roles (light-on-dark instead of dark-on-light) — matches the\r\n   * source component's `inverted` (from its shared `BaseProps`). */\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  sticky = false;\r\n\r\n  /**\r\n   * Fixes the header over the top of the page and makes it see-through, with light text\r\n   * (`--st-header-transparent-color`), until the page scrolls past `scroll-threshold` — for a\r\n   * header laid over a dark hero. It then takes its normal background and a shadow. The page\r\n   * content starts under it, so the first section should leave room for the 64px bar.\r\n   */\r\n  @property({ type: Boolean, reflect: true })\r\n  transparent = false;\r\n\r\n  /** Slides the header out of view while the page scrolls down and back in when it scrolls up. */\r\n  @property({ type: Boolean, reflect: true, attribute: 'hide-on-scroll' })\r\n  hideOnScroll = false;\r\n\r\n  /** Scroll distance in px after which the header counts as `scrolled`. */\r\n  @property({ type: Number, attribute: 'scroll-threshold' })\r\n  scrollThreshold = 8;\r\n\r\n  /** True once the page has scrolled past `scroll-threshold`; reflected so pages can style `st-header[scrolled]`. Set by the header, never from outside. */\r\n  @property({ type: Boolean, reflect: true })\r\n  scrolled = false;\r\n\r\n  /** True while `hide-on-scroll` has slid the header away. Set by the header, never from outside. */\r\n  @property({ type: Boolean, reflect: true, attribute: 'scroll-hidden' })\r\n  scrollHidden = false;\r\n\r\n  private lastScrollY = 0;\r\n  private scrollFrame = 0;\r\n\r\n  private onScroll = (): void => {\r\n    if (this.scrollFrame) return;\r\n    this.scrollFrame = requestAnimationFrame(() => {\r\n      this.scrollFrame = 0;\r\n      const y = Math.max(0, window.scrollY);\r\n      this.scrolled = y > this.scrollThreshold;\r\n      if (this.hideOnScroll) {\r\n        const delta = y - this.lastScrollY;\r\n        // Ignore tiny jitters; never hide while still at the top of the page or with the menu open.\r\n        if (Math.abs(delta) > 4) this.scrollHidden = delta > 0 && y > this.offsetHeight && !this.mobileOpen;\r\n      } else {\r\n        this.scrollHidden = false;\r\n      }\r\n      this.lastScrollY = y;\r\n    });\r\n  };\r\n\r\n  /**\r\n   * Language switcher options, e.g. `[{ code: 'en', label: 'English' }, ...]` — hidden entirely\r\n   * when empty or when only one language is offered (same convention as `st-app-header`'s\r\n   * `languages`, which this reuses verbatim). This component has no translation logic itself —\r\n   * selecting an option fires `language-change` (detail: `{ code }`), and the consuming app owns\r\n   * what `code` actually means and which content it re-renders.\r\n   */\r\n  @property({ attribute: false })\r\n  languages: { code: string; label: string }[] = [];\r\n\r\n  @property({ type: String, attribute: 'current-language-code' })\r\n  currentLanguageCode = '';\r\n\r\n  @property({ type: String, attribute: 'language-menu-label' })\r\n  languageMenuLabel = 'Language';\r\n\r\n  /** Internal open/closed state for the mobile nav overlay, reflected to an attribute purely so\r\n   * the `:host([mobile-open])` CSS selector above can react to it — not meant to be set from\r\n   * outside. */\r\n  @property({ type: Boolean, reflect: true, attribute: 'mobile-open' })\r\n  mobileOpen = false;\r\n\r\n  /** True while the menu doesn't fit the bar at the current width: the header then shows the same\r\n   * hamburger layout it uses on a narrow screen. Set by `evaluateFit`, never from outside. */\r\n  @property({ type: Boolean, reflect: true })\r\n  compact = false;\r\n\r\n  @state() private languageMenuOpen = false;\r\n\r\n  /** Whether `slot=\"utility\"` has content — an empty utility row (and its divider) is hidden. */\r\n  @state() private hasUtility = false;\r\n\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  /** Matches below BREAKPOINT_TABLET, where the hamburger layout is always on. */\r\n  private narrowQuery?: MediaQueryList;\r\n\r\n  /** The dropdowns this header switched to `inline` — only these are switched back, so a caller's\r\n   * own `inline` setting is left alone. */\r\n  private inlinedDropdowns = new Set<HTMLElement & { inline: boolean }>();\r\n\r\n  /** While the hamburger layout is on, the dropdowns in the header open in the flow of the\r\n   * full-screen panel instead of floating over it (SankhyaUI's touch-device layout). */\r\n  private syncInlineDropdowns = (): void => {\r\n    const collapsed = this.compact || !!this.narrowQuery?.matches;\r\n    const dropdowns = Array.from(this.querySelectorAll('st-dropdown')) as (HTMLElement & { inline: boolean })[];\r\n    if (collapsed) {\r\n      for (const dropdown of dropdowns) {\r\n        if (dropdown.inline) continue;\r\n        dropdown.inline = true;\r\n        this.inlinedDropdowns.add(dropdown);\r\n      }\r\n    } else {\r\n      for (const dropdown of this.inlinedDropdowns) dropdown.inline = false;\r\n      this.inlinedDropdowns.clear();\r\n    }\r\n  };\r\n\r\n  private onUtilitySlotChange = (event: Event): void => {\r\n    this.hasUtility = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\r\n    this.evaluateFit();\r\n  };\r\n\r\n  private onMenuSlotChange = (): void => {\r\n    this.evaluateFit();\r\n    this.syncInlineDropdowns();\r\n  };\r\n\r\n  protected updated(changed: Map<string, unknown>): void {\r\n    if (changed.has('compact')) this.syncInlineDropdowns();\r\n  }\r\n\r\n  /** The bar width at which the menu last overflowed — the bar only expands again once it is\r\n   * clearly wider than this, so it can't flip back and forth right at the threshold. */\r\n  private collapsedAtWidth = 0;\r\n\r\n  /** Collapses to the hamburger layout when the slotted menu overflows its row, and expands again\r\n   * once there is room. The collapsed layout hides the menu, so the room it needs can't be\r\n   * measured then; the width remembered when it collapsed stands in for it. */\r\n  private evaluateFit = (): void => {\r\n    const width = this.clientWidth;\r\n    if (this.compact) {\r\n      if (width > this.collapsedAtWidth + 24) {\r\n        this.compact = false;\r\n        this.mobileOpen = false;\r\n        void this.updateComplete.then(this.evaluateFit);\r\n      }\r\n      return;\r\n    }\r\n    if (this.menuOverflows()) {\r\n      this.collapsedAtWidth = width;\r\n      this.compact = true;\r\n    }\r\n  };\r\n\r\n  /** Whether the visible menu items reach past the right edge of the menu row. Measured from the\r\n   * items' own boxes (the slotted elements and their direct children), not the row's scrollWidth:\r\n   * a closed dropdown's absolutely positioned panel also counts towards scrollWidth, which would\r\n   * report overflow at any width. */\r\n  private menuOverflows(): boolean {\r\n    const row = this.renderRoot.querySelector<HTMLElement>('.menu-row');\r\n    const slot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"menu\"]');\r\n    if (!row || !slot) return false;\r\n    const limit = row.getBoundingClientRect().right + 1;\r\n    let right = 0;\r\n    for (const el of slot.assignedElements({ flatten: true })) {\r\n      for (const box of [el, ...Array.from(el.children)]) {\r\n        const rect = box.getBoundingClientRect();\r\n        if (rect.width > 0) right = Math.max(right, rect.right);\r\n      }\r\n    }\r\n    return right > limit;\r\n  }\r\n\r\n  protected firstUpdated(): void {\r\n    this.resizeObserver = new ResizeObserver(this.evaluateFit);\r\n    this.resizeObserver.observe(this);\r\n    this.evaluateFit();\r\n    this.syncInlineDropdowns();\r\n  }\r\n\r\n  connectedCallback(): void {\r\n    super.connectedCallback();\r\n    window.addEventListener('keydown', this.closeOnEscape);\r\n    window.addEventListener('click', this.closeLanguageMenuOnOutsideClick);\r\n    window.addEventListener('scroll', this.onScroll, { passive: true });\r\n    this.onScroll();\r\n    this.narrowQuery = window.matchMedia(`(max-width: ${BREAKPOINT_TABLET}px)`);\r\n    this.narrowQuery.addEventListener('change', this.syncInlineDropdowns);\r\n    // Menus often render their dropdowns after the header (e.g. once the user's role loads),\r\n    // deeper than a slotchange reports.\r\n    this.lightDomObserver = new MutationObserver(this.syncInlineDropdowns);\r\n    this.lightDomObserver.observe(this, { childList: true, subtree: true });\r\n  }\r\n\r\n  private lightDomObserver?: MutationObserver;\r\n\r\n  disconnectedCallback(): void {\r\n    this.lightDomObserver?.disconnect();\r\n    this.narrowQuery?.removeEventListener('change', this.syncInlineDropdowns);\r\n    this.resizeObserver?.disconnect();\r\n    window.removeEventListener('keydown', this.closeOnEscape);\r\n    window.removeEventListener('click', this.closeLanguageMenuOnOutsideClick);\r\n    window.removeEventListener('scroll', this.onScroll);\r\n    if (this.scrollFrame) cancelAnimationFrame(this.scrollFrame);\r\n    this.scrollFrame = 0;\r\n    super.disconnectedCallback();\r\n  }\r\n\r\n  private closeOnEscape = (event: KeyboardEvent): void => {\r\n    if (this.mobileOpen && event.key === 'Escape') this.mobileOpen = false;\r\n    if (this.languageMenuOpen && event.key === 'Escape') this.languageMenuOpen = false;\r\n  };\r\n\r\n  private closeLanguageMenuOnOutsideClick = (event: Event): void => {\r\n    if (this.languageMenuOpen && !event.composedPath().includes(this)) this.languageMenuOpen = false;\r\n  };\r\n\r\n  private renderLanguageMenu() {\r\n    if (this.languages.length < 2) return nothing;\r\n    const current = this.languages.find((lang) => lang.code === this.currentLanguageCode);\r\n    return html`\r\n      <div class=\"lang-menu\" part=\"language-menu\">\r\n        <button\r\n          part=\"language-menu-trigger\"\r\n          type=\"button\"\r\n          class=\"lang-trigger\"\r\n          aria-label=${this.languageMenuLabel}\r\n          aria-expanded=${this.languageMenuOpen}\r\n          @click=${(event: Event) => {\r\n            event.stopPropagation();\r\n            this.languageMenuOpen = !this.languageMenuOpen;\r\n          }}\r\n        >\r\n          <span part=\"language-menu-current\">${current?.label ?? this.languageMenuLabel}</span>\r\n          ${chevronIcon('down', 10)}\r\n        </button>\r\n        ${this.languageMenuOpen\r\n          ? html`\r\n              <div part=\"language-dropdown\" class=\"lang-dropdown\">\r\n                ${this.languages.map(\r\n                  (lang) => html`\r\n                    <button\r\n                      part=\"language-option\"\r\n                      type=\"button\"\r\n                      class=\"lang-option ${lang.code === this.currentLanguageCode ? 'active' : ''}\"\r\n                      aria-current=${lang.code === this.currentLanguageCode}\r\n                      @click=${() => this.onLanguageSelect(lang.code)}\r\n                    >\r\n                      ${lang.label}\r\n                    </button>\r\n                  `\r\n                )}\r\n              </div>\r\n            `\r\n          : nothing}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private onLanguageSelect(code: string): void {\r\n    this.languageMenuOpen = false;\r\n    if (code === this.currentLanguageCode) return;\r\n    this.dispatchEvent(new CustomEvent<LanguageChangedEventDetail>('language-change', { detail: { code }, bubbles: true, composed: true }));\r\n  }\r\n\r\n  private renderBrand() {\r\n    const content = html`\r\n      ${this.brandImageUrl ? html`<img part=\"brand-mark\" class=\"brand-mark\" src=${this.brandImageUrl} alt=${this.altText} /> ` : nothing}\r\n      <span part=\"brand-title\" class=\"brand-title\">${this.title}</span>\r\n    `;\r\n    return this.logoHref\r\n      ? html`<a part=\"brand\" class=\"brand ${this.logoClassName}\" href=${this.logoHref} target=${this.logoTarget}>${content}</a>`\r\n      : html`<div part=\"brand\" class=\"brand ${this.logoClassName}\">${content}</div>`;\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      ${this.renderBrand()}\r\n\r\n      <div class=\"mobile-panel\" part=\"mobile-panel\" @click=${() => (this.mobileOpen = false)}>\r\n        <div class=\"menu-row\" part=\"menu-row\"><slot name=\"menu\" @slotchange=${this.onMenuSlotChange}></slot></div>\r\n        <div class=\"utility-row ${this.hasUtility || this.languages.length >= 2 ? '' : 'empty'}\" part=\"utility-row\">\r\n          ${this.renderLanguageMenu()}<slot name=\"utility\" @slotchange=${this.onUtilitySlotChange}></slot>\r\n        </div>\r\n      </div>\r\n\r\n      <button\r\n        part=\"toggle\"\r\n        type=\"button\"\r\n        class=\"toggle\"\r\n        aria-label=${this.mobileOpen ? 'Close menu' : 'Open menu'}\r\n        aria-expanded=${this.mobileOpen}\r\n        @click=${() => (this.mobileOpen = !this.mobileOpen)}\r\n      >\r\n        ${this.mobileOpen ? closeIcon() : menuIcon()}\r\n      </button>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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AA;AAAA;AAAA,QAqBf,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QA8LpB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBjB,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,QAKnB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAoBA,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuGxC;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAtWf,OAuWX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB,CAAC;AAAA,GA1W7C,OA2WX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,WAAW,CAAC;AAAA,GA9WtC,OA+WX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlXf,OAmXX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc,CAAC;AAAA,GAtXzC,OAuXX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB,CAAC;AAAA,GA1X7C,OA2XX;AAKA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA/X/B,OAgYX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlY/B,OAmYX;AASA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA3Y/B,OA4YX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,iBAAiB,CAAC;AAAA,GA/Y5D,OAgZX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,mBAAmB,CAAC;AAAA,GAnZ9C,OAoZX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAvZ/B,OAwZX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,gBAAgB,CAAC;AAAA,GA3Z3D,OA4ZX;AA8BA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GAzbnB,OA0bX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,wBAAwB,CAAC;AAAA,GA5bnD,OA6bX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,sBAAsB,CAAC;AAAA,GA/bjD,OAgcX;AAMA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,cAAc,CAAC;AAAA,GArczD,OAscX;AAKA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA1c/B,OA2cX;AAEiB;AAAA,EAAhB,MAAM;AAAA,GA7cI,OA6cM;AAGA;AAAA,EAAhB,MAAM;AAAA,GAhdI,OAgdM;AAhdN,SAAN;AAAA,EADN,cAAc,WAAW;AAAA,GACb;","names":[]}

package/dist/chunk-TH5NZXA7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/menu-item/MenuItem.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport type { MenuItemSelectEventDetail } from './MenuItemEvents';\r\n\r\n/**\r\n * A single flat nav row — icon (`slot=\"icon\"`) + title + badge on one line, an optional\r\n * description below — as opposed to `st-menu-grid-item`'s card for a multi-column grid. A 1:1\r\n * port of `SankhyaUI`'s React `MenuItem` (`SankhyaCMS/SankhyaUI/src/components/Menu`): same\r\n * markup and CSS, with its `motion` effects redone in CSS — nudges right and scales to 1.01 on\r\n * hover / 0.99 while pressed, the icon tilts on hover, the badge pops in, the description fades\r\n * in. Colors come from the suite theme rather than per-item utility classes.\r\n *\r\n * Renders a real `<a href>` but fires a *cancelable* `menu-item-select` event (detail: `{ href }`)\r\n * before navigating — a host doing client-side routing calls `event.preventDefault()` on it (the\r\n * source used react-router's `Link` here; the suite apps have no router).\r\n */\r\n@customElement('st-menu-item')\r\nexport class MenuItem extends LitElement {\r\n  /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items. */\r\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\r\n\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      ${fontFamilyStyles}\r\n    }\r\n\r\n    @keyframes st-menu-item-badge-pop {\r\n      from {\r\n        transform: scale(0);\r\n      }\r\n      70% {\r\n        transform: scale(1.12);\r\n      }\r\n      to {\r\n        transform: scale(1);\r\n      }\r\n    }\r\n\r\n    @keyframes st-menu-item-fade-in {\r\n      from {\r\n        opacity: 0;\r\n      }\r\n      to {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    .menu-item {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      gap: 12px;\r\n      padding: 12px 16px;\r\n      font-size: 0.875rem;\r\n      text-decoration: none;\r\n      /* --st-nav-*: set by a host bar (st-header's transparent state) to recolour its nav items. */\r\n      color: var(--st-nav-color, var(--st-color-text));\r\n      border-radius: 6px;\r\n      /* The source's 'all 0.15s', minus visibility: animating the visibility this link inherits\r\n         from a dropdown panel kept it unfocusable for a frame after the panel opened. */\r\n      transition-property: background-color, color, padding, transform, border-color;\r\n      transition-duration: 0.15s;\r\n      transition-timing-function: ease;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    /* The source's hover nudge (x: 4px) is done with padding, not a transform: a transform would\r\n       spill past a scrolling panel's edge (st-source-bar's menus) and show a horizontal scrollbar.\r\n       Keyboard focus gets the same treatment as hover. */\r\n    .menu-item:hover,\r\n    .menu-item:focus-visible {\r\n      background: var(--st-nav-hover-bg, var(--st-color-hover));\r\n      color: var(--st-nav-color, var(--st-color-text-strong));\r\n      padding-left: 20px;\r\n      transition-duration: 0.1s;\r\n    }\r\n\r\n    .menu-item.compact:hover,\r\n    .menu-item.compact:focus-visible {\r\n      padding-left: 16px;\r\n    }\r\n\r\n    .menu-item:active {\r\n      transform: scale(0.99);\r\n      transition-duration: 0.1s;\r\n    }\r\n\r\n    .menu-item.active {\r\n      background-color: var(--st-color-accent-subtle);\r\n      color: var(--st-color-accent-text);\r\n      border-left: 4px solid var(--st-color-accent);\r\n    }\r\n\r\n    .menu-item-icon {\r\n      display: flex;\r\n      flex-shrink: 0;\r\n      margin-top: 2px;\r\n      transition: transform 0.2s ease;\r\n    }\r\n\r\n    .menu-item-icon:hover {\r\n      transform: rotate(5deg);\r\n    }\r\n\r\n    .menu-item-icon[hidden] {\r\n      display: none;\r\n    }\r\n\r\n    .menu-item-icon ::slotted(*) {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n\r\n    .menu-item-content {\r\n      flex: 1;\r\n      min-width: 0;\r\n    }\r\n\r\n    .menu-item-header {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      gap: 8px;\r\n    }\r\n\r\n    .menu-item-title {\r\n      font-weight: 500;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .menu-item-badge {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-width: 20px;\r\n      height: 20px;\r\n      padding: 0 6px;\r\n      font-size: 0.75rem;\r\n      font-weight: 500;\r\n      border-radius: 9999px;\r\n      flex-shrink: 0;\r\n      background: var(--st-color-accent-subtle);\r\n      color: var(--st-color-accent-text);\r\n      animation: st-menu-item-badge-pop 0.35s ease-out;\r\n    }\r\n\r\n    .menu-item-description {\r\n      display: -webkit-box;\r\n      margin: 4px 0 0;\r\n      font-size: 0.75rem;\r\n      color: var(--st-color-text-muted);\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-height: 1.4;\r\n      animation: st-menu-item-fade-in 0.2s ease;\r\n    }\r\n\r\n    .menu-item.compact {\r\n      padding: 8px 12px;\r\n      gap: 8px;\r\n    }\r\n\r\n    .menu-item.compact .menu-item-icon ::slotted(*) {\r\n      width: 14px;\r\n      height: 14px;\r\n    }\r\n\r\n    .menu-item.compact .menu-item-title {\r\n      font-size: 0.75rem;\r\n    }\r\n\r\n    .menu-item.compact .menu-item-description {\r\n      font-size: 0.75rem;\r\n    }\r\n\r\n    .menu-item.no-description {\r\n      align-items: center;\r\n    }\r\n\r\n    .menu-item.no-description .menu-item-icon {\r\n      margin-top: 0;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .menu-item,\r\n      .menu-item-icon {\r\n        transition: none;\r\n      }\r\n\r\n      .menu-item:active,\r\n      .menu-item-icon:hover {\r\n        transform: none;\r\n      }\r\n\r\n      .menu-item-badge,\r\n      .menu-item-description {\r\n        animation: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  @property({ type: String })\r\n  title = '';\r\n\r\n  @property({ type: String })\r\n  href = '';\r\n\r\n  @property({ type: String })\r\n  description = '';\r\n\r\n  /** Small trailing label, e.g. a count or \"New\"/\"Beta\" — omit for none. */\r\n  @property({ type: String })\r\n  badge = '';\r\n\r\n  /** Highlights this row as the current page (source: `isActive`). */\r\n  @property({ type: Boolean, reflect: true })\r\n  active = false;\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  compact = false;\r\n\r\n  /** Suppresses the description even when `description` is set (source: `showDescription`, default `true`). */\r\n  @property({ type: Boolean, attribute: 'show-description' })\r\n  showDescription = true;\r\n\r\n  /** `target` for the `<a>` (source default `_self`). */\r\n  @property({ type: String })\r\n  target = '_self';\r\n\r\n  /** Whether `slot=\"icon\"` has content, so an omitted icon leaves no empty box. */\r\n  @state() private hasIcon = false;\r\n\r\n  private onIconSlotChange = (event: Event): void => {\r\n    this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\r\n  };\r\n\r\n  private onClick = (event: MouseEvent): void => {\r\n    const selectEvent = new CustomEvent<MenuItemSelectEventDetail>('menu-item-select', {\r\n      detail: { href: this.href },\r\n      bubbles: true,\r\n      composed: true,\r\n      cancelable: true\r\n    });\r\n    this.dispatchEvent(selectEvent);\r\n    if (selectEvent.defaultPrevented) event.preventDefault();\r\n  };\r\n\r\n  render() {\r\n    const showDescription = !!this.description && this.showDescription;\r\n    const classes = ['menu-item', this.active ? 'active' : '', this.compact ? 'compact' : '', showDescription ? '' : 'no-description']\r\n      .filter(Boolean)\r\n      .join(' ');\r\n    return html`\r\n      <a part=\"item\" class=${classes} href=${this.href} target=${this.target} @click=${this.onClick}>\r\n        <span class=\"menu-item-icon\" part=\"icon\" ?hidden=${!this.hasIcon}><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot></span>\r\n        <span class=\"menu-item-content\" part=\"content\">\r\n          <span class=\"menu-item-header\" part=\"header\">\r\n            <span part=\"title\" class=\"menu-item-title\">${this.title}</span>\r\n            ${this.badge ? html`<span part=\"badge\" class=\"menu-item-badge\">${this.badge}</span>` : nothing}\r\n          </span>\r\n          ${showDescription ? html`<p part=\"description\" class=\"menu-item-description\">${this.description}</p>` : nothing}\r\n        </span>\r\n      </a>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}