@synergy-design-system/components 2.11.5 → 2.11.6

package/dist/synergy.js

@@ -5,211 +5,211 @@ import {
 import "./chunks/chunk.NKIYFJN2.js";
 import {
   tooltip_default
-} from "./chunks/chunk.KRI7223I.js";
+} from "./chunks/chunk.UMT4ZSHS.js";
 import {
   tag_default
-} from "./chunks/chunk.YHZANCV3.js";
+} from "./chunks/chunk.KIC7HG6O.js";
 import {
   textarea_default
-} from "./chunks/chunk.QWTICQXW.js";
-import "./chunks/chunk.VZOB4AMC.js";
+} from "./chunks/chunk.HJ4TVUXO.js";
+import "./chunks/chunk.UGUPYF7J.js";
 import "./chunks/chunk.YBIBWRKC.js";
 import "./chunks/chunk.CRA5CBMD.js";
 import {
   tab_group_default
-} from "./chunks/chunk.NUM7YQGD.js";
-import "./chunks/chunk.T5OYVJGU.js";
+} from "./chunks/chunk.P4NK7BVM.js";
+import "./chunks/chunk.2VPZZ44Y.js";
 import "./chunks/chunk.XOXVVU5C.js";
 import "./chunks/chunk.PKYC7QF3.js";
 import {
   tab_panel_default
-} from "./chunks/chunk.NTTMSIRZ.js";
-import "./chunks/chunk.DE45MSNC.js";
+} from "./chunks/chunk.XE2PLMQJ.js";
+import "./chunks/chunk.IAQWD5KK.js";
 import "./chunks/chunk.XHWYGYMQ.js";
 import "./chunks/chunk.HVXG4JG6.js";
 import {
   switch_default
-} from "./chunks/chunk.XKK2VJA2.js";
-import "./chunks/chunk.TWIOJYI4.js";
+} from "./chunks/chunk.5ZEIDX3E.js";
+import "./chunks/chunk.JGDXLSPV.js";
 import "./chunks/chunk.W5JK7V7K.js";
 import "./chunks/chunk.4TB35TYG.js";
 import {
   tab_default
-} from "./chunks/chunk.AINTPZMF.js";
-import "./chunks/chunk.BUJ7DDTG.js";
+} from "./chunks/chunk.OG3PMUVR.js";
+import "./chunks/chunk.EGFPB2X5.js";
 import "./chunks/chunk.ZW75HBAK.js";
 import "./chunks/chunk.BBUFEDXF.js";
 import {
   select_default
-} from "./chunks/chunk.VWDGUT42.js";
+} from "./chunks/chunk.3E7ZLCJH.js";
 import {
   side_nav_default
-} from "./chunks/chunk.BNHPNDU4.js";
-import "./chunks/chunk.XJHVECMG.js";
+} from "./chunks/chunk.UNBFB5XJ.js";
+import "./chunks/chunk.4D3VJVE6.js";
 import "./chunks/chunk.ONW45GQI.js";
 import {
   spinner_default
-} from "./chunks/chunk.S5QE4ADE.js";
+} from "./chunks/chunk.MEXKYTIC.js";
 import {
   range_tick_default
-} from "./chunks/chunk.STONKOXX.js";
-import "./chunks/chunk.SBJFORCZ.js";
+} from "./chunks/chunk.U5BEDUV7.js";
+import "./chunks/chunk.NLR45TOD.js";
 import "./chunks/chunk.I6YARDHH.js";
-import "./chunks/chunk.4UMJOVTI.js";
+import "./chunks/chunk.XDVD2NBG.js";
 import "./chunks/chunk.OI3HOOCT.js";
-import "./chunks/chunk.SNH5RLEC.js";
-import "./chunks/chunk.J2CKZ5LM.js";
+import "./chunks/chunk.4NPGBKLB.js";
+import "./chunks/chunk.TZYTEABV.js";
 import "./chunks/chunk.B6R3IVGO.js";
 import "./chunks/chunk.6EPU7YUS.js";
 import "./chunks/chunk.ZO4VONAT.js";
 import "./chunks/chunk.DFABWKX7.js";
 import {
   radio_group_default
-} from "./chunks/chunk.JUMFOXYB.js";
-import "./chunks/chunk.QWCBMBWY.js";
+} from "./chunks/chunk.MCKAPQNH.js";
+import "./chunks/chunk.PV6Z32LI.js";
 import "./chunks/chunk.F4MRQLNL.js";
 import "./chunks/chunk.K62NPKGN.js";
 import {
   range_default
-} from "./chunks/chunk.3OEZYM3L.js";
-import "./chunks/chunk.SLJOTMYN.js";
-import "./chunks/chunk.TP2WTMFB.js";
+} from "./chunks/chunk.LZGBOPWE.js";
+import "./chunks/chunk.WV5NX7ER.js";
+import "./chunks/chunk.2HGELNVG.js";
 import "./chunks/chunk.4X3HY2V5.js";
 import "./chunks/chunk.O644HRW3.js";
 import "./chunks/chunk.277APOW3.js";
 import "./chunks/chunk.236RSW67.js";
 import {
   progress_ring_default
-} from "./chunks/chunk.IHCREGGI.js";
+} from "./chunks/chunk.C65CHN3S.js";
 import {
   radio_default
-} from "./chunks/chunk.JQLFLN54.js";
-import "./chunks/chunk.4R2FAZL5.js";
+} from "./chunks/chunk.DWI66LKP.js";
+import "./chunks/chunk.JF2IFQOY.js";
 import "./chunks/chunk.V6VND4OF.js";
 import "./chunks/chunk.EHSNF4SS.js";
 import {
   radio_button_default
-} from "./chunks/chunk.ST34ORFL.js";
-import "./chunks/chunk.DXM52334.js";
+} from "./chunks/chunk.BYFDPXBT.js";
+import "./chunks/chunk.2SF7WB7A.js";
 import "./chunks/chunk.4BRJ5OJE.js";
 import {
   progress_bar_default
-} from "./chunks/chunk.HLSFZOXF.js";
-import "./chunks/chunk.H5GQFZGX.js";
+} from "./chunks/chunk.C5EK3CFY.js";
+import "./chunks/chunk.25KB5UOV.js";
 import "./chunks/chunk.AMAK44YX.js";
 import "./chunks/chunk.QUM76UHV.js";
-import "./chunks/chunk.5CIYTJMV.js";
+import "./chunks/chunk.L42X5N3Z.js";
 import "./chunks/chunk.2V3HGTTL.js";
 import "./chunks/chunk.RMIDAEF5.js";
 import {
   option_default
-} from "./chunks/chunk.ZSSXOUIT.js";
+} from "./chunks/chunk.IYND6V7F.js";
 import {
   popup_default
-} from "./chunks/chunk.IWMVCDPW.js";
+} from "./chunks/chunk.7AJQ45KE.js";
 import {
   prio_nav_default
-} from "./chunks/chunk.AX72PGRW.js";
-import "./chunks/chunk.DY2M7CCV.js";
+} from "./chunks/chunk.V4KIK2FH.js";
+import "./chunks/chunk.RMZEMD3A.js";
 import "./chunks/chunk.OJ3N7TWP.js";
 import "./chunks/chunk.74N5WLM5.js";
 import {
   nav_item_default
-} from "./chunks/chunk.U7DO5LCO.js";
-import "./chunks/chunk.5WQV5D7I.js";
+} from "./chunks/chunk.6SSUYHWJ.js";
+import "./chunks/chunk.HKKJPBCB.js";
 import "./chunks/chunk.WOJ2VRZY.js";
 import {
   optgroup_default
-} from "./chunks/chunk.F5GBCC64.js";
-import "./chunks/chunk.CQKQV5EV.js";
+} from "./chunks/chunk.UOKO6Z2K.js";
+import "./chunks/chunk.SJY65Q3N.js";
 import "./chunks/chunk.KG52EHDB.js";
-import "./chunks/chunk.R5QQK4LB.js";
+import "./chunks/chunk.5PDIA726.js";
 import "./chunks/chunk.IVM3BGRH.js";
 import "./chunks/chunk.3B24TYVN.js";
 import {
   menu_item_default
-} from "./chunks/chunk.QJQKNJOP.js";
+} from "./chunks/chunk.LPHJO7X2.js";
 import {
   menu_label_default
-} from "./chunks/chunk.IWXXJ2G3.js";
-import "./chunks/chunk.MB2FE4HD.js";
+} from "./chunks/chunk.OIW3Z5ZW.js";
+import "./chunks/chunk.FZPJC2VO.js";
 import "./chunks/chunk.X6GR6IA2.js";
 import "./chunks/chunk.RAOPZXJL.js";
 import {
   input_default
-} from "./chunks/chunk.F6NFDWSZ.js";
+} from "./chunks/chunk.RPNAVHLM.js";
 import {
   menu_default
-} from "./chunks/chunk.3JOKAZVG.js";
-import "./chunks/chunk.3H22VGK4.js";
+} from "./chunks/chunk.RYVCEFJJ.js";
+import "./chunks/chunk.FIBSPL6Z.js";
 import "./chunks/chunk.PILX7LVU.js";
 import "./chunks/chunk.C2CWYCOU.js";
-import "./chunks/chunk.ZQR2DWZT.js";
+import "./chunks/chunk.YYTK767G.js";
 import "./chunks/chunk.OOABXWCW.js";
 import "./chunks/chunk.FSWTBNSI.js";
 import "./chunks/chunk.JNP34M27.js";
 import {
   icon_button_default
-} from "./chunks/chunk.GCHEBF3D.js";
-import "./chunks/chunk.4ROVIBJW.js";
+} from "./chunks/chunk.ASAEJG63.js";
+import "./chunks/chunk.DBWAASID.js";
 import "./chunks/chunk.3A65FBTX.js";
 import "./chunks/chunk.3B22DBSJ.js";
 import {
   file_default
-} from "./chunks/chunk.BCRH2ROM.js";
+} from "./chunks/chunk.KFFXFX52.js";
 import {
   header_default
-} from "./chunks/chunk.V44BO7DQ.js";
-import "./chunks/chunk.FXTQUNQA.js";
+} from "./chunks/chunk.WH6F5TMC.js";
+import "./chunks/chunk.TRXVNIYI.js";
 import "./chunks/chunk.GVNVZMMM.js";
 import {
   icon_default
-} from "./chunks/chunk.YWUSBODG.js";
+} from "./chunks/chunk.CVDX6QSQ.js";
 import {
   drawer_default
-} from "./chunks/chunk.LIU3B225.js";
+} from "./chunks/chunk.AVG3IYG5.js";
 import {
   dropdown_default
-} from "./chunks/chunk.24T5JNI7.js";
-import "./chunks/chunk.FX6FNFB7.js";
+} from "./chunks/chunk.GSSX7DUP.js";
+import "./chunks/chunk.ANABLV5Z.js";
 import "./chunks/chunk.2KYFCKCK.js";
 import "./chunks/chunk.D6IIQDWJ.js";
-import "./chunks/chunk.I5ZAOQSI.js";
+import "./chunks/chunk.E4LLRP6J.js";
 import "./chunks/chunk.IKZOQ7AE.js";
 import {
   dialog_default
-} from "./chunks/chunk.WYBJG63O.js";
+} from "./chunks/chunk.5NZHOXJ7.js";
 import {
   divider_default
-} from "./chunks/chunk.YQJZ65J7.js";
-import "./chunks/chunk.BQG6H7LM.js";
+} from "./chunks/chunk.D742CG6P.js";
+import "./chunks/chunk.BQOHOMWI.js";
 import "./chunks/chunk.FA6V2WD6.js";
 import "./chunks/chunk.FSZIE7IO.js";
-import "./chunks/chunk.PFQ4DQD2.js";
+import "./chunks/chunk.2L3AMM7G.js";
 import "./chunks/chunk.N7QJ54ZM.js";
 import "./chunks/chunk.I4FIU7FA.js";
 import {
   details_default
-} from "./chunks/chunk.5DW2UPIO.js";
-import "./chunks/chunk.IHEFAIOB.js";
+} from "./chunks/chunk.BBFQDWEY.js";
+import "./chunks/chunk.WYOCJOUS.js";
 import "./chunks/chunk.PU2BDR2W.js";
 import "./chunks/chunk.VA26EAEP.js";
-import "./chunks/chunk.7E7UMULP.js";
+import "./chunks/chunk.VFRRM7ND.js";
 import "./chunks/chunk.MU43DZ7W.js";
 import "./chunks/chunk.XDM6VD32.js";
 import "./chunks/chunk.POGMEL53.js";
 import "./chunks/chunk.IU3SSJZE.js";
 import {
   checkbox_default
-} from "./chunks/chunk.PZ7YHJ4W.js";
-import "./chunks/chunk.GVDLJ5N7.js";
+} from "./chunks/chunk.WC6Z7CMY.js";
+import "./chunks/chunk.PXKOGWOZ.js";
 import "./chunks/chunk.IG3RCOB3.js";
 import "./chunks/chunk.6OX2AX3Z.js";
 import {
   combobox_default
-} from "./chunks/chunk.XB2EBKHL.js";
-import "./chunks/chunk.5OOF3BEU.js";
-import "./chunks/chunk.BRCX3V75.js";
+} from "./chunks/chunk.ZEYRA5O4.js";
+import "./chunks/chunk.BD56HXE4.js";
+import "./chunks/chunk.DYWNM6FX.js";
 import "./chunks/chunk.AZ3N5IOO.js";
 import {
   defaultOptionRenderer,
@@ -223,60 +223,52 @@ import "./chunks/chunk.DPCIJLV4.js";
 import "./chunks/chunk.UREJSW6U.js";
 import {
   button_default
-} from "./chunks/chunk.XTXKSJ4A.js";
+} from "./chunks/chunk.AWOJCXOJ.js";
 import {
   button_group_default
-} from "./chunks/chunk.LJS4EFTQ.js";
-import "./chunks/chunk.ZFXFDIE2.js";
+} from "./chunks/chunk.WMV5E3RU.js";
+import "./chunks/chunk.ZLKPWUKP.js";
 import "./chunks/chunk.GRVNUIP2.js";
 import {
   card_default
-} from "./chunks/chunk.K2UA2HHA.js";
-import "./chunks/chunk.GHOZMJ6S.js";
+} from "./chunks/chunk.W2OGA2BF.js";
+import "./chunks/chunk.GBNKVBXB.js";
 import "./chunks/chunk.36SZKAYW.js";
 import "./chunks/chunk.C4JTZKPZ.js";
 import {
   breadcrumb_default
-} from "./chunks/chunk.X3DTQPCC.js";
+} from "./chunks/chunk.GWQJSQ45.js";
 import {
   breadcrumb_item_default
-} from "./chunks/chunk.WMWZF55E.js";
-import "./chunks/chunk.FONMZDKO.js";
+} from "./chunks/chunk.SKF2N2UN.js";
+import "./chunks/chunk.EU6P2GX6.js";
 import "./chunks/chunk.NGIGPLN2.js";
 import "./chunks/chunk.O6ZH6AOI.js";
-import "./chunks/chunk.KYA5GA6S.js";
-import "./chunks/chunk.XQJUVQJB.js";
+import "./chunks/chunk.6CIHGUYV.js";
+import "./chunks/chunk.3JT5MPHD.js";
 import "./chunks/chunk.AWJ376R6.js";
 import "./chunks/chunk.JLXCLATV.js";
 import "./chunks/chunk.BBNQVEPD.js";
 import "./chunks/chunk.42LDZR6F.js";
 import "./chunks/chunk.5SQ7NVBX.js";
-import {
-  alert_default
-} from "./chunks/chunk.ROT7375W.js";
 import {
   badge_default
-} from "./chunks/chunk.CZHHTJPM.js";
-import "./chunks/chunk.MWG6TBJZ.js";
-import "./chunks/chunk.WQJRBFZA.js";
-import "./chunks/chunk.Y5TMYX2L.js";
-import "./chunks/chunk.D4H5Q5QN.js";
-import "./chunks/chunk.32CYREEV.js";
-import "./chunks/chunk.S22BO5SF.js";
+} from "./chunks/chunk.4YCDXBU3.js";
 import {
-  accordion_default
-} from "./chunks/chunk.PYEASSNX.js";
-import "./chunks/chunk.AZYJTVQT.js";
-import "./chunks/chunk.WNUZ6LH4.js";
-import "./chunks/chunk.COES4VCH.js";
-import "./chunks/chunk.DJ545HPN.js";
+  alert_default
+} from "./chunks/chunk.IQ5ZTZJN.js";
+import "./chunks/chunk.LCRAQYUK.js";
+import "./chunks/chunk.27M2OAG2.js";
 import "./chunks/chunk.6QYKWCSO.js";
 import "./chunks/chunk.DZ7YIR5N.js";
 import "./chunks/chunk.C2ENQBPM.js";
 import "./chunks/chunk.A3OYJILJ.js";
 import "./chunks/chunk.HQ6QUSK7.js";
 import "./chunks/chunk.WVVQK5TE.js";
-import "./chunks/chunk.H7JHHOEG.js";
+import "./chunks/chunk.JRYXECAY.js";
+import "./chunks/chunk.NL3RUWYS.js";
+import "./chunks/chunk.TI4OACTU.js";
+import "./chunks/chunk.AH3IDIUZ.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
@@ -285,16 +277,24 @@ import "./chunks/chunk.YTEJW7IF.js";
 import "./chunks/chunk.AINKZEUX.js";
 import "./chunks/chunk.PJO6TM3T.js";
 import "./chunks/chunk.ZBW4ZSZ7.js";
-import "./chunks/chunk.GIU3H3J3.js";
-import "./chunks/chunk.S5N2TE2L.js";
+import "./chunks/chunk.32CYREEV.js";
+import "./chunks/chunk.S22BO5SF.js";
 import {
   getBasePath,
   setBasePath
 } from "./chunks/chunk.234ERFCE.js";
+import {
+  accordion_default
+} from "./chunks/chunk.MGTF7VHT.js";
+import "./chunks/chunk.PFZUN5YT.js";
 import "./chunks/chunk.74IOULXM.js";
-import "./chunks/chunk.U7OFKNFW.js";
-import "./chunks/chunk.JRYXECAY.js";
-import "./chunks/chunk.NL3RUWYS.js";
+import "./chunks/chunk.WNUZ6LH4.js";
+import "./chunks/chunk.ALF6BPOL.js";
+import "./chunks/chunk.GIU3H3J3.js";
+import "./chunks/chunk.S5N2TE2L.js";
+import "./chunks/chunk.AMXH6BDD.js";
+import "./chunks/chunk.WQJRBFZA.js";
+import "./chunks/chunk.Y5TMYX2L.js";
 import "./chunks/chunk.2GFK6XTO.js";
 export {
   accordion_default as SynAccordion,

package/dist/vscode.html-custom-data.json

@@ -29,29 +29,6 @@
         }
       ]
     },
-    {
-      "name": "syn-badge",
-      "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        {
-          "name": "variant",
-          "description": "The badge's theme variant.",
-          "values": [
-            { "name": "primary" },
-            { "name": "success" },
-            { "name": "neutral" },
-            { "name": "warning" },
-            { "name": "danger" }
-          ]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy.style/components/badge"
-        }
-      ]
-    },
     {
       "name": "syn-alert",
       "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the alert opens.\n- **syn-after-show** - Emitted after the alert opens and all animations are complete.\n- **syn-hide** - Emitted when the alert closes.\n- **syn-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n- **icon** - An icon to show in the alert. Works best with `<syn-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.\n- **close-button** - The close button, an `<syn-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
@@ -90,6 +67,29 @@
         }
       ]
     },
+    {
+      "name": "syn-badge",
+      "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "The badge's theme variant.",
+          "values": [
+            { "name": "primary" },
+            { "name": "success" },
+            { "name": "neutral" },
+            { "name": "warning" },
+            { "name": "danger" }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/badge"
+        }
+      ]
+    },
     {
       "name": "syn-breadcrumb",
       "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n---\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<syn-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "2.11.5",
+  "version": "2.11.6",
   "description": "",
   "repository": {
     "type": "git",
@@ -50,7 +50,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.3",
     "@open-wc/testing": "^4.0.0",
-    "@playwright/test": "^1.48.0",
+    "@playwright/test": "^1.48.2",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
@@ -64,7 +64,7 @@
     "@web/test-runner-playwright": "^0.11.0",
     "chalk": "^5.3.0",
     "change-case": "^5.4.4",
-    "command-line-args": "^6.0.0",
+    "command-line-args": "^6.0.1",
     "comment-parser": "^1.4.1",
     "custom-element-vs-code-integration": "^1.4.1",
     "del": "^7.1.0",
@@ -77,12 +77,12 @@
     "eslint-plugin-jest": "^28.8.3",
     "eslint-plugin-lit": "^1.15.0",
     "eslint-plugin-lit-a11y": "^4.1.4",
-    "eslint-plugin-playwright": "^1.6.2",
+    "eslint-plugin-playwright": "^1.8.3",
     "eslint-plugin-wc": "^2.2.0",
     "globby": "^14.0.2",
     "jsdom": "^25.0.1",
     "ng-packagr": "^18.2.0",
-    "ora": "^8.1.0",
+    "ora": "^8.1.1",
     "postcss": "^8.4.47",
     "postcss-header": "^3.0.3",
     "postcss-import": "^16.1.0",
@@ -91,16 +91,16 @@
     "semantic-release": "^19.0.5",
     "semantic-release-monorepo": "7.0.5",
     "sinon": "^19.0.2",
-    "stylelint": "^16.9.0",
-    "typescript": "^5.5.4",
+    "stylelint": "^16.10.0",
+    "typescript": "~5.5.4",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
     "user-agent-data-types": "^0.4.2",
     "vendorism": "^5.0.0",
-    "vue-tsc": "^2.1.6",
+    "vue-tsc": "^2.1.10",
     "@synergy-design-system/eslint-config-syn": "0.1.0",
-    "@synergy-design-system/tokens": "2.13.0",
-    "@synergy-design-system/stylelint-config-syn": "0.1.0"
+    "@synergy-design-system/stylelint-config-syn": "0.1.0",
+    "@synergy-design-system/tokens": "2.13.0"
   },
   "release": {
     "branches": [
@@ -161,7 +161,7 @@
     }
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.11",
+    "@floating-ui/dom": "^1.6.12",
     "@shoelace-style/animations": "^1.2.0",
     "@shoelace-style/localize": "^3.2.1",
     "composed-offset-position": "^0.0.6",

package/dist/chunks/chunk.DY2M7CCV.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/prio-nav/prio-nav.component.ts"],
-  "sourcesContent": ["/* eslint-disable no-param-reassign */\nimport type { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit/static-html.js';\nimport { query, state } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './prio-nav.styles.js';\nimport SynDropdown from '../dropdown/dropdown.component.js';\nimport SynIcon from '../icon/icon.component.js';\nimport SynMenu from '../menu/menu.component.js';\nimport SynNavItem from '../nav-item/nav-item.component.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport {\n  filterOnlyNavItems,\n  getAssignedElementsForSlot,\n  hideNavigationItem,\n  showNavigationItem,\n} from './utils.js';\n\n/**\n * @summary The `<syn-prio-nav />` element provides a generic navigation bar\n * that can be used to group multiple navigation items  (usually horizontal `<syn-nav-item />`s)\n * together. It will automatically group all items not visible in the viewport into a custom\n * priority menu.\n *\n * @example\n * <syn-prio-nav>\n *  <syn-nav-item current horizontal>Item 1</syn-nav-item>\n *  <button role=\"menuitem\">Item 2 (custom)</button>\n *  <syn-nav-item horizontal>Item 3</syn-nav-item>\n * </syn-prio-nav>\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs\n * @status stable\n * @since 1.14.0\n *\n * @dependency syn-dropdown\n * @dependency syn-icon\n * @dependency syn-menu\n * @dependency syn-nav-item\n *\n * @slot - The given navigation items. Must be horizontal `<syn-nav-item>`s\n *    or have a role of \"menuitem\"\n *\n * @csspart base - The component's base wrapper.\n * @csspart priority-menu - The wrapper around the priority menu\n * @csspart priority-menu-nav-item - The navigation item for the priority menu\n * @csspart priority-menu-label - The label for the priority menu\n * @csspart priority-menu-icon - The icon for the priority menu\n * @csspart priority-menu-container - The container for the shifted navigation items,\n *    if there is not enough space.\n *\n */\nexport default class SynPrioNav extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  static dependencies = {\n    'syn-dropdown': SynDropdown,\n    'syn-icon': SynIcon,\n    'syn-menu': SynMenu,\n    'syn-nav-item': SynNavItem,\n  };\n\n  /**\n   * Internal resize observer\n   */\n  private resizeObserver: ResizeObserver;\n\n  private readonly localize = new LocalizeController(this);\n\n  /**\n   * Reference to the rendered children slot\n   */\n  @query('slot:not([name])') private defaultSlot: HTMLSlotElement;\n\n  /**\n   * Reference to the slot where priority menu items are placed\n   */\n  @query('slot[name=menu]') private menuSlot: HTMLSlotElement;\n\n  /**\n   * The wrapper that holds the horizontal navigation items\n   */\n  @query('.horizontal-nav') private horizontalNav: HTMLDivElement;\n\n  /**\n   * The priority menu dropdown\n   */\n  @query('.priority-menu') private priorityMenu: SynDropdown;\n\n  /**\n   * Internal state reflecting if the item positions have been cached\n   */\n  @state() private itemPositionsCached = false;\n\n  /**\n   * The amount of nav items that are currently slotted\n   */\n  @state() private amountOfNavItems = 0;\n\n  /**\n   * The amount of items that are currently visible\n   */\n  @state() private amountOfVisibleItems = 0;\n\n  /**\n   * Internal state reflecting if there are items in the priority menu\n   */\n  @state() private hasItemsInDropdown = false;\n\n  /**\n   * Get a list of all slotted `<syn-nav-item />` elements\n   * that are either in the main slot or the priority menu slot\n   */\n  private getSlottedNavItems() {\n    const navItemsInDefaultSlot = filterOnlyNavItems(getAssignedElementsForSlot(this.defaultSlot));\n    const navItemsInMenuSlot = filterOnlyNavItems(getAssignedElementsForSlot(this.menuSlot));\n    return navItemsInDefaultSlot.concat(navItemsInMenuSlot);\n  }\n\n  /**\n   * Cache the items right offset position to make faster checks placement into priority menu\n   * @param items The items to cache the position for\n   */\n  private cacheItemPositions(items: SynNavItem[]) {\n    const { left } = this.horizontalNav.getBoundingClientRect();\n    items.forEach(item => {\n      // We have to measure while the items are in the primary slot,\n      // else we will just get the placement in the priority menu\n      item.removeAttribute('slot');\n      const { right } = item.getBoundingClientRect();\n      // We also need to consider the location of the parent\n      item.dataset.right = (right - left).toString();\n    });\n\n    this.itemPositionsCached = true;\n  }\n\n  /**\n   * Determines which items should be shown or hidden, depending on the current width\n   */\n  private handlePriorityMenu() {\n    const navItems = this.getSlottedNavItems();\n\n    if (!this.itemPositionsCached) {\n      this.cacheItemPositions(navItems);\n    }\n\n    // Get the widths of the horizontal nav and the priority menu\n    // We subtract the width of the priority menu to get the final width\n    const { width } = this.horizontalNav.getBoundingClientRect();\n    const { clientWidth } = this.priorityMenu;\n    const finalWidth = width - clientWidth;\n\n    // Cache the first item\n    let firstHiddenItemRightPos: number | undefined;\n\n    const itemVisibilities = navItems.map(item => {\n      const isHidden = !!(firstHiddenItemRightPos || parseFloat(item.dataset.right!) >= finalWidth);\n\n      // Get the position of the first item\n      // Will get used to position the priority menu\n      if (isHidden && !firstHiddenItemRightPos) {\n        firstHiddenItemRightPos = parseFloat(item.dataset.right!);\n      }\n\n      return {\n        isHidden,\n        item,\n      };\n    });\n\n    const visibleItems = itemVisibilities.filter(({ isHidden }) => !isHidden).length;\n    const hasOnlyOneItem = visibleItems === 1;\n\n    // Finally, hide or show the items based on the visibility\n    // As requested in #410, we hide all items if there is only one item\n    itemVisibilities.forEach(({ item, isHidden }) => {\n      if (isHidden || hasOnlyOneItem) {\n        hideNavigationItem(item);\n      } else {\n        showNavigationItem(item);\n      }\n    });\n\n    // Tell the render call that we have items in the priority menu\n    // and toggle the visibility of the priority menu label\n    this.hasItemsInDropdown = visibleItems !== navItems.length;\n    this.amountOfVisibleItems = hasOnlyOneItem ? 0 : visibleItems;\n  }\n\n  private renderPriorityMenu() {\n    return html`\n      <syn-dropdown\n        class=${classMap({\n          'priority-menu': true,\n          'priority-menu--has-visible-items': this.amountOfVisibleItems !== 0,\n          'priority-menu--hidden': !this.hasItemsInDropdown,\n        })}\n        part=\"priority-menu\"\n        placement=\"bottom-end\"\n      >\n        <syn-nav-item class=\"priority-menu__nav-item\" slot=\"trigger\" horizontal part=\"priority-menu-nav-item\">\n          <syn-icon \n            class=\"priority-menu__icon\"\n            label=\"More\"\n            library=\"system\"\n            name=\"more\"\n            part=\"priority-menu-icon\"\n            slot=\"prefix\"\n          >\n          </syn-icon>\n          <span\n            class=${classMap({\n              'priority-menu__label': true,\n              'priority-menu__label--visible': this.amountOfVisibleItems === 0,\n            })}\n            part=\"priority-menu-label\"\n          >\n            ${this.localize.term('menu')}\n          </span>\n        </syn-nav-item>\n\n        <syn-menu part=\"priority-menu-container\">\n          <slot name=\"menu\"></slot>\n        </syn-menu>\n\n      </syn-dropdown>\n    `;\n  }\n\n  private slotChange() {\n    const slottedItems = this.getSlottedNavItems();\n\n    // Make sure to trigger a recalculation of the item positions if we a new list of slotted items\n    if (slottedItems.length !== this.amountOfNavItems) {\n      this.cacheItemPositions(slottedItems);\n      this.handlePriorityMenu();\n      this.amountOfNavItems = slottedItems.length;\n    }\n  }\n\n  protected firstUpdated() {\n    // Cache the original role of the items so we can reset it if needed.\n    this.getSlottedNavItems().forEach(item => {\n      item.dataset.originalRole = item.getAttribute('role') ?? '';\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => this.handlePriorityMenu());\n    this.resizeObserver.observe(this);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver.unobserve(this);\n  }\n\n  render() {\n    /* eslint-disable @typescript-eslint/unbound-method */\n    return html`\n      <nav class=\"horizontal-nav\" part=\"base\">\n        <slot @slotchange=${this.slotChange}></slot>\n        ${this.renderPriorityMenu()}\n      </nav>\n    `;\n    /* eslint-enable @typescript-eslint/unbound-method */\n  }\n}\n"],
-  "mappings": "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",
-  "names": []
-}