@synergy-design-system/components 2.23.0 → 2.24.1

package/code-quality/html-validate/scripts/synergy-element-rules.js

@@ -0,0 +1,468 @@
+import { deprecatedForV2 } from './deprecation.js';
+
+// Shared settings for form associated elements
+const formAssociated = {
+  disablable: true,
+  listed: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynAccordion = {
+  flow: true,
+  focusable: true,
+  interactive: true,
+  sectioning: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynAlert = {
+  flow: true,
+  focusable: true,
+  sectioning: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynBadge = {
+  flow: true,
+  phrasing: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynBreadcrumbItem = {
+  focusable: true,
+  phrasing: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynBreadcrumb = {
+  flow: true,
+  sectioning: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynButton = {
+  aria: {
+    implicitRole: 'button',
+  },
+  flow: true,
+  focusable: true,
+  formAssociated,
+  interactive: true,
+  phrasing: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynButtonGroup = {
+  flow: true,
+  focusable: true,
+  formAssociated,
+  interactive: true,
+  phrasing: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynCard = {
+  attributes: {
+    nested: {
+      allowed: deprecatedForV2('Please use the `sharp` property instead.'),
+      boolean: true,
+    },
+  },
+  flow: true,
+  sectioning: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynCheckbox = {
+  flow: true,
+  focusable: true,
+  formAssociated,
+  interactive: true,
+  phrasing: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynCombobox = {
+  flow: true,
+  focusable: true,
+  formAssociated,
+  interactive: true,
+  phrasing: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynDetails = {
+  flow: true,
+  focusable: true,
+  interactive: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynDialog = {
+  flow: true,
+  focusable: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynDivider = {
+  flow: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynDrawer = {
+  focusable: true,
+  sectioning: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynDropdown = {
+  flow: true,
+  focusable: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynFile = {
+  flow: true,
+  focusable: true,
+  formAssociated,
+  interactive: true,
+  phrasing: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynHeader = {
+  attributes: {
+    'show-burger-menu': {
+      allowed: deprecatedForV2('Please use the `burger-menu` attribute instead.'),
+      boolean: true,
+    },
+  },
+  flow: true,
+  heading: true,
+  sectioning: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynIconButton = {
+  attributes: {
+    color: {
+      // Special case: We define currentColor on this element with mixed case,
+      // even using it only in CSS which supports lowercase only.
+      // This should be fixed in syn-icon-button.
+      enum: ['/^currentColor$/i'],
+    },
+  },
+  flow: true,
+  focusable: true,
+  interactive: true,
+  phrasing: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynIcon = {
+  embedded: true,
+  flow: true,
+  phrasing: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynInput = {
+  flow: true,
+  focusable: true,
+  formAssociated,
+  interactive: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynMenuItem = {
+  focusable: true,
+  phrasing: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynMenuLabel = {
+  phrasing: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynMenu = {
+  flow: true,
+  focusable: true,
+  sectioning: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynNavItem = {
+  flow: true,
+  focusable: true,
+  interactive: true,
+  phrasing: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynOptgroup = {};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynOption = {
+  focusable: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynPrioNav = {
+  flow: true,
+  focusable: true,
+  sectioning: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynProgressBar = {
+  flow: true,
+  formAssociated,
+  phrasing: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynProgressRing = {
+  flow: true,
+  formAssociated,
+  phrasing: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynRadioGroup = {
+  flow: true,
+  focusable: true,
+  formAssociated,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynRadio = {
+  focusable: true,
+  formAssociated,
+  interactive: true,
+  phrasing: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynRangeTick = {
+  flow: true,
+  phrasing: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynRange = {
+  flow: true,
+  focusable: true,
+  formAssociated,
+  interactive: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynSelect = {
+  flow: true,
+  focusable: true,
+  formAssociated,
+  interactive: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynSideNav = {
+  flow: true,
+  focusable: true,
+  sectioning: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynSpinner = {
+  flow: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynSwitch = {
+  flow: true,
+  focusable: true,
+  formAssociated,
+  interactive: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynTabGroup = {
+  flow: true,
+  focusable: true,
+  sectioning: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynTabPanel = {
+  sectioning: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynTab = {
+  focusable: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynTag = {
+  flow: true,
+  phrasing: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynTextarea = {
+  flow: true,
+  focusable: true,
+  formAssociated,
+  interactive: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynTooltip = {
+  flow: true,
+  interactive: true,
+};
+
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynValidate = {
+  flow: true,
+  formAssociated,
+};
+
+/**
+ * Final list of all rules
+ * @see createElements.js
+ */
+export const rules = {
+  SynAccordion,
+  SynAlert,
+  SynBadge,
+  SynBreadcrumb,
+  SynBreadcrumbItem,
+  SynButton,
+  SynButtonGroup,
+  SynCard,
+  SynCheckbox,
+  SynCombobox,
+  SynDetails,
+  SynDialog,
+  SynDivider,
+  SynDrawer,
+  SynDropdown,
+  SynFile,
+  SynHeader,
+  SynIcon,
+  SynIconButton,
+  SynInput,
+  SynMenu,
+  SynMenuItem,
+  SynMenuLabel,
+  SynNavItem,
+  SynOptgroup,
+  SynOption,
+  SynPrioNav,
+  SynProgressBar,
+  SynProgressRing,
+  SynRadio,
+  SynRadioGroup,
+  SynRange,
+  SynRangeTick,
+  SynSelect,
+  SynSideNav,
+  SynSpinner,
+  SynSwitch,
+  SynTab,
+  SynTabGroup,
+  SynTabPanel,
+  SynTag,
+  SynTextarea,
+  SynTooltip,
+  SynValidate,
+};

package/dist/chunks/{chunk.MCJ5KPYQ.js → chunk.2NR4BBBW.js}

@@ -16,7 +16,7 @@ import {
 } from "./chunk.WXVOTRW5.js";
 import {
   SynIconButton
-} from "./chunk.H5MW7DPQ.js";
+} from "./chunk.CP4TIE4P.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -42,7 +42,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.2KRKYZ6X.js";
+} from "./chunk.O3QZ575N.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -292,4 +292,4 @@ setDefaultAnimation("dialog.overlay.hide", {
 export {
   SynDialog
 };
-//# sourceMappingURL=chunk.MCJ5KPYQ.js.map
+//# sourceMappingURL=chunk.2NR4BBBW.js.map

package/dist/chunks/{chunk.VND6WP4W.js → chunk.2QK5RLKF.js}

@@ -1,6 +1,6 @@
 import {
   SynTabGroup
-} from "./chunk.VZVDKTXO.js";
+} from "./chunk.EV3DP4XG.js";
 
 // src/components/tab-group/tab-group.ts
 var tab_group_default = SynTabGroup;
@@ -9,4 +9,4 @@ SynTabGroup.define("syn-tab-group");
 export {
   tab_group_default
 };
-//# sourceMappingURL=chunk.VND6WP4W.js.map
+//# sourceMappingURL=chunk.2QK5RLKF.js.map

package/dist/chunks/{chunk.GQSJQQQR.js → chunk.2QL6XSZT.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.2MDGY2UP.js";
 import {
   SynPopup
-} from "./chunk.U7F4NOVR.js";
+} from "./chunk.N64V5RFU.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -32,7 +32,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.2KRKYZ6X.js";
+} from "./chunk.O3QZ575N.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -374,4 +374,4 @@ setDefaultAnimation("dropdown.hide", {
 export {
   SynDropdown
 };
-//# sourceMappingURL=chunk.GQSJQQQR.js.map
+//# sourceMappingURL=chunk.2QL6XSZT.js.map

package/dist/chunks/{chunk.LA7VZTHW.js → chunk.3MCBZILR.js}

@@ -1,6 +1,6 @@
 import {
   SynRadio
-} from "./chunk.CYSCJWOT.js";
+} from "./chunk.GI43PPPP.js";
 
 // src/components/radio/radio.ts
 var radio_default = SynRadio;
@@ -9,4 +9,4 @@ SynRadio.define("syn-radio");
 export {
   radio_default
 };
-//# sourceMappingURL=chunk.LA7VZTHW.js.map
+//# sourceMappingURL=chunk.3MCBZILR.js.map

package/dist/chunks/{chunk.CEESQM3N.js → chunk.3TOPMX5G.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.SWHOQBNJ.js";
+} from "./chunk.GNE26GLH.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.CEESQM3N.js.map
+//# sourceMappingURL=chunk.3TOPMX5G.js.map

package/dist/chunks/{chunk.QMLZ5T2L.js → chunk.3XAVJ44K.js}

@@ -1,6 +1,6 @@
 import {
   SynCombobox
-} from "./chunk.WM2EDUOT.js";
+} from "./chunk.STSPQS7A.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = SynCombobox;
@@ -9,4 +9,4 @@ SynCombobox.define("syn-combobox");
 export {
   combobox_default
 };
-//# sourceMappingURL=chunk.QMLZ5T2L.js.map
+//# sourceMappingURL=chunk.3XAVJ44K.js.map

package/dist/chunks/{chunk.UKMNCIRO.js → chunk.4XZAQSWP.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.2KRKYZ6X.js";
+} from "./chunk.O3QZ575N.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -48,4 +48,4 @@ __decorateClass([
 export {
   SynRangeTick
 };
-//# sourceMappingURL=chunk.UKMNCIRO.js.map
+//# sourceMappingURL=chunk.4XZAQSWP.js.map

package/dist/chunks/{chunk.754YNTP6.js → chunk.4YTLPKHV.js}

@@ -1,6 +1,6 @@
 import {
   SynFile
-} from "./chunk.D2E3T6A5.js";
+} from "./chunk.KVD725DM.js";
 
 // src/components/file/file.ts
 var file_default = SynFile;
@@ -9,4 +9,4 @@ SynFile.define("syn-file");
 export {
   file_default
 };
-//# sourceMappingURL=chunk.754YNTP6.js.map
+//# sourceMappingURL=chunk.4YTLPKHV.js.map

package/dist/chunks/{chunk.IWYFCM2J.js → chunk.5N3FX5HB.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.42TSQYDV.js";
+} from "./chunk.EGHBMTNS.js";
 
 // src/components/nav-item/nav-item.ts
 var nav_item_default = SynNavItem;
@@ -9,4 +9,4 @@ SynNavItem.define("syn-nav-item");
 export {
   nav_item_default
 };
-//# sourceMappingURL=chunk.IWYFCM2J.js.map
+//# sourceMappingURL=chunk.5N3FX5HB.js.map

package/dist/chunks/{chunk.UHSH4JMU.js → chunk.665OIGGF.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.2KRKYZ6X.js";
+} from "./chunk.O3QZ575N.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -160,4 +160,4 @@ __decorateClass([
 export {
   SynMenu
 };
-//# sourceMappingURL=chunk.UHSH4JMU.js.map
+//# sourceMappingURL=chunk.665OIGGF.js.map

package/dist/chunks/{chunk.VWIOLP7J.js → chunk.6K6TCNXT.js}

@@ -1,6 +1,6 @@
 import {
   SynTab
-} from "./chunk.NSUNYLN3.js";
+} from "./chunk.JLIOQKCM.js";
 
 // src/components/tab/tab.ts
 var tab_default = SynTab;
@@ -9,4 +9,4 @@ SynTab.define("syn-tab");
 export {
   tab_default
 };
-//# sourceMappingURL=chunk.VWIOLP7J.js.map
+//# sourceMappingURL=chunk.6K6TCNXT.js.map

package/dist/chunks/{chunk.62D6M6ZS.js → chunk.6REZTNDZ.js}

@@ -1,6 +1,6 @@
 import {
   SynSideNav
-} from "./chunk.D32TUWZ5.js";
+} from "./chunk.JL7G4AWD.js";
 
 // src/components/side-nav/side-nav.ts
 var side_nav_default = SynSideNav;
@@ -9,4 +9,4 @@ SynSideNav.define("syn-side-nav");
 export {
   side_nav_default
 };
-//# sourceMappingURL=chunk.62D6M6ZS.js.map
+//# sourceMappingURL=chunk.6REZTNDZ.js.map

package/dist/chunks/{chunk.L4243H4L.js → chunk.7E6LDCV4.js}

@@ -1,6 +1,6 @@
 import {
   SynValidate
-} from "./chunk.V32K2DUN.js";
+} from "./chunk.KG6RS57D.js";
 
 // src/components/validate/validate.ts
 var validate_default = SynValidate;
@@ -9,4 +9,4 @@ SynValidate.define("syn-validate");
 export {
   validate_default
 };
-//# sourceMappingURL=chunk.L4243H4L.js.map
+//# sourceMappingURL=chunk.7E6LDCV4.js.map

package/dist/chunks/{chunk.2NHTNETT.js → chunk.AJFVSKNJ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.WXVOTRW5.js";
 import {
   SynIconButton
-} from "./chunk.H5MW7DPQ.js";
+} from "./chunk.CP4TIE4P.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -32,7 +32,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.2KRKYZ6X.js";
+} from "./chunk.O3QZ575N.js";
 import {
   alert_custom_styles_default
 } from "./chunk.BUZOBR2J.js";
@@ -288,4 +288,4 @@ setDefaultAnimation("alert.hide", {
 export {
   SynAlert
 };
-//# sourceMappingURL=chunk.2NHTNETT.js.map
+//# sourceMappingURL=chunk.AJFVSKNJ.js.map