@synergy-design-system/components 2.23.0 → 2.24.0

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.SMSEFJUK.js → chunk.2K7POF7W.js}

@@ -1,6 +1,6 @@
 import {
   SynPopup
-} from "./chunk.U7F4NOVR.js";
+} from "./chunk.6B5KCVTR.js";
 
 // src/components/popup/popup.ts
 var popup_default = SynPopup;
@@ -9,4 +9,4 @@ SynPopup.define("syn-popup");
 export {
   popup_default
 };
-//# sourceMappingURL=chunk.SMSEFJUK.js.map
+//# sourceMappingURL=chunk.2K7POF7W.js.map

package/dist/chunks/{chunk.A2NGOD7T.js → chunk.3AKOFH7W.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.2KRKYZ6X.js";
+} from "./chunk.R5NY26Z7.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -66,4 +66,4 @@ SynBadge = __decorateClass([
 export {
   SynBadge
 };
-//# sourceMappingURL=chunk.A2NGOD7T.js.map
+//# sourceMappingURL=chunk.3AKOFH7W.js.map

package/dist/chunks/{chunk.BZYYMMUY.js → chunk.3CCO6KYW.js}

@@ -1,6 +1,6 @@
 import {
   SynAccordion
-} from "./chunk.4HDBI2SR.js";
+} from "./chunk.ONZXA7KO.js";
 
 // src/components/accordion/accordion.ts
 var accordion_default = SynAccordion;
@@ -9,4 +9,4 @@ SynAccordion.define("syn-accordion");
 export {
   accordion_default
 };
-//# sourceMappingURL=chunk.BZYYMMUY.js.map
+//# sourceMappingURL=chunk.3CCO6KYW.js.map

package/dist/chunks/{chunk.WXNILGZ4.js → chunk.3GHOYCG6.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.2KRKYZ6X.js";
+} from "./chunk.R5NY26Z7.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -182,4 +182,4 @@ __decorateClass([
 export {
   SynIcon
 };
-//# sourceMappingURL=chunk.WXNILGZ4.js.map
+//# sourceMappingURL=chunk.3GHOYCG6.js.map

package/dist/chunks/{chunk.OXZX7LPP.js → chunk.3IJP2LQ7.js}

@@ -1,6 +1,6 @@
 import {
   SynDrawer
-} from "./chunk.4LA5EA7M.js";
+} from "./chunk.UOXXEQRU.js";
 
 // src/components/drawer/drawer.ts
 var drawer_default = SynDrawer;
@@ -9,4 +9,4 @@ SynDrawer.define("syn-drawer");
 export {
   drawer_default
 };
-//# sourceMappingURL=chunk.OXZX7LPP.js.map
+//# sourceMappingURL=chunk.3IJP2LQ7.js.map

package/dist/chunks/{chunk.NCC5CYN4.js → chunk.4TBUNZHP.js}

@@ -1,6 +1,6 @@
 import {
   SynButtonGroup
-} from "./chunk.OREXRKUO.js";
+} from "./chunk.HV4MWJH7.js";
 
 // src/components/button-group/button-group.ts
 var button_group_default = SynButtonGroup;
@@ -9,4 +9,4 @@ SynButtonGroup.define("syn-button-group");
 export {
   button_group_default
 };
-//# sourceMappingURL=chunk.NCC5CYN4.js.map
+//# sourceMappingURL=chunk.4TBUNZHP.js.map

package/dist/chunks/{chunk.QRNDZEGS.js → chunk.4YT6LU6E.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumb
-} from "./chunk.HLX7STO2.js";
+} from "./chunk.7GO5LCAF.js";
 
 // src/components/breadcrumb/breadcrumb.ts
 var breadcrumb_default = SynBreadcrumb;
@@ -9,4 +9,4 @@ SynBreadcrumb.define("syn-breadcrumb");
 export {
   breadcrumb_default
 };
-//# sourceMappingURL=chunk.QRNDZEGS.js.map
+//# sourceMappingURL=chunk.4YT6LU6E.js.map

package/dist/chunks/{chunk.EO7ZW7IO.js → chunk.56EKPHBC.js}

@@ -28,7 +28,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.2KRKYZ6X.js";
+} from "./chunk.R5NY26Z7.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -375,4 +375,4 @@ SynTextarea = __decorateClass([
 export {
   SynTextarea
 };
-//# sourceMappingURL=chunk.EO7ZW7IO.js.map
+//# sourceMappingURL=chunk.56EKPHBC.js.map

package/dist/chunks/{chunk.754YNTP6.js → chunk.5CCFQ7BI.js}

@@ -1,6 +1,6 @@
 import {
   SynFile
-} from "./chunk.D2E3T6A5.js";
+} from "./chunk.SHSJSIBS.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.5CCFQ7BI.js.map

package/dist/chunks/{chunk.PJVPQT5H.js → chunk.5EXONNYD.js}

@@ -18,7 +18,7 @@ import {
 } from "./chunk.HQ6QUSK7.js";
 import {
   SynIcon
-} from "./chunk.WXNILGZ4.js";
+} from "./chunk.3GHOYCG6.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -33,7 +33,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.2KRKYZ6X.js";
+} from "./chunk.R5NY26Z7.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -247,4 +247,4 @@ setDefaultAnimation("details.hide", {
 export {
   SynDetails
 };
-//# sourceMappingURL=chunk.PJVPQT5H.js.map
+//# sourceMappingURL=chunk.5EXONNYD.js.map

package/dist/chunks/{chunk.GQSJQQQR.js → chunk.5I2I5CMV.js}

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

package/dist/chunks/{chunk.U7F4NOVR.js → chunk.6B5KCVTR.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.2KRKYZ6X.js";
+} from "./chunk.R5NY26Z7.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -415,4 +415,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.U7F4NOVR.js.map
+//# sourceMappingURL=chunk.6B5KCVTR.js.map

package/dist/chunks/{chunk.HPUCK7WY.js → chunk.6VAONDTI.js}

@@ -1,6 +1,6 @@
 import {
   SynMenu
-} from "./chunk.UHSH4JMU.js";
+} from "./chunk.FDADGARQ.js";
 
 // src/components/menu/menu.ts
 var menu_default = SynMenu;
@@ -9,4 +9,4 @@ SynMenu.define("syn-menu");
 export {
   menu_default
 };
-//# sourceMappingURL=chunk.HPUCK7WY.js.map
+//# sourceMappingURL=chunk.6VAONDTI.js.map

package/dist/chunks/{chunk.HLX7STO2.js → chunk.7GO5LCAF.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.S22BO5SF.js";
 import {
   SynIcon
-} from "./chunk.WXNILGZ4.js";
+} from "./chunk.3GHOYCG6.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.2KRKYZ6X.js";
+} from "./chunk.R5NY26Z7.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -91,4 +91,4 @@ __decorateClass([
 export {
   SynBreadcrumb
 };
-//# sourceMappingURL=chunk.HLX7STO2.js.map
+//# sourceMappingURL=chunk.7GO5LCAF.js.map