@synergy-design-system/components 1.15.0 → 1.16.0

package/dist/chunks/{chunk.SBHXUKMY.js → chunk.J3HTR5NX.js}

@@ -1,6 +1,6 @@
 import {
   SynDivider
-} from "./chunk.YBPWZ4QI.js";
+} from "./chunk.TUFBQA52.js";
 
 // src/components/divider/divider.ts
 var divider_default = SynDivider;
@@ -9,4 +9,4 @@ SynDivider.define("syn-divider");
 export {
   divider_default
 };
-//# sourceMappingURL=chunk.SBHXUKMY.js.map
+//# sourceMappingURL=chunk.J3HTR5NX.js.map

package/dist/chunks/{chunk.RRWSXFQ5.js → chunk.JDBDBGQP.js}

@@ -181,6 +181,7 @@ var SubmenuController = class {
   // newly opened menu.
   enableSubmenu(delay = true) {
     if (delay) {
+      window.clearTimeout(this.enableSubmenuTimer);
       this.enableSubmenuTimer = window.setTimeout(() => {
         this.setSubmenuState(true);
       }, this.submenuOpenDelay);
@@ -189,7 +190,7 @@ var SubmenuController = class {
     }
   }
   disableSubmenu() {
-    clearTimeout(this.enableSubmenuTimer);
+    window.clearTimeout(this.enableSubmenuTimer);
     this.setSubmenuState(false);
   }
   // Calculate the space the top of a menu takes-up, for aligning the popup menu-item with the activating element.
@@ -236,4 +237,4 @@ var SubmenuController = class {
 export {
   SubmenuController
 };
-//# sourceMappingURL=chunk.RRWSXFQ5.js.map
+//# sourceMappingURL=chunk.JDBDBGQP.js.map

package/dist/chunks/{chunk.RRWSXFQ5.js.map → chunk.JDBDBGQP.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/menu-item/submenu-controller.ts"],
-  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { createRef, ref, type Ref } from 'lit/directives/ref.js';\nimport { type HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { type LocalizeController } from '../../utilities/localize.js';\nimport type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport type SynMenuItem from './menu-item.js';\nimport type SynPopup from '../popup/popup.js';\n\n/** A reactive controller to manage the registration of event listeners for submenus. */\nexport class SubmenuController implements ReactiveController {\n  private host: ReactiveControllerHost & SynMenuItem;\n  private popupRef: Ref<SynPopup> = createRef();\n  private enableSubmenuTimer = -1;\n  private isConnected = false;\n  private isPopupConnected = false;\n  private skidding = 0;\n  private readonly hasSlotController: HasSlotController;\n  private readonly localize: LocalizeController;\n  private readonly submenuOpenDelay = 100;\n\n  constructor(\n    host: ReactiveControllerHost & SynMenuItem,\n    hasSlotController: HasSlotController,\n    localize: LocalizeController\n  ) {\n    (this.host = host).addController(this);\n    this.hasSlotController = hasSlotController;\n    this.localize = localize;\n  }\n\n  hostConnected() {\n    if (this.hasSlotController.test('submenu') && !this.host.disabled) {\n      this.addListeners();\n    }\n  }\n\n  hostDisconnected() {\n    this.removeListeners();\n  }\n\n  hostUpdated() {\n    if (this.hasSlotController.test('submenu') && !this.host.disabled) {\n      this.addListeners();\n      this.updateSkidding();\n    } else {\n      this.removeListeners();\n    }\n  }\n\n  private addListeners() {\n    if (!this.isConnected) {\n      this.host.addEventListener('mousemove', this.handleMouseMove);\n      this.host.addEventListener('mouseover', this.handleMouseOver);\n      this.host.addEventListener('keydown', this.handleKeyDown);\n      this.host.addEventListener('click', this.handleClick);\n      this.host.addEventListener('focusout', this.handleFocusOut);\n      this.isConnected = true;\n    }\n\n    // The popup does not seem to get wired when the host is\n    // connected, so manage its listeners separately.\n    if (!this.isPopupConnected) {\n      if (this.popupRef.value) {\n        this.popupRef.value.addEventListener('mouseover', this.handlePopupMouseover);\n        this.popupRef.value.addEventListener('syn-reposition', this.handlePopupReposition);\n        this.isPopupConnected = true;\n      }\n    }\n  }\n\n  private removeListeners() {\n    if (this.isConnected) {\n      this.host.removeEventListener('mousemove', this.handleMouseMove);\n      this.host.removeEventListener('mouseover', this.handleMouseOver);\n      this.host.removeEventListener('keydown', this.handleKeyDown);\n      this.host.removeEventListener('click', this.handleClick);\n      this.host.removeEventListener('focusout', this.handleFocusOut);\n      this.isConnected = false;\n    }\n    if (this.isPopupConnected) {\n      if (this.popupRef.value) {\n        this.popupRef.value.removeEventListener('mouseover', this.handlePopupMouseover);\n        this.popupRef.value.removeEventListener('syn-reposition', this.handlePopupReposition);\n        this.isPopupConnected = false;\n      }\n    }\n  }\n\n  // Set the safe triangle cursor position\n  private handleMouseMove = (event: MouseEvent) => {\n    this.host.style.setProperty('--safe-triangle-cursor-x', `${event.clientX}px`);\n    this.host.style.setProperty('--safe-triangle-cursor-y', `${event.clientY}px`);\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasSlotController.test('submenu')) {\n      this.enableSubmenu();\n    }\n  };\n\n  private handleSubmenuEntry(event: KeyboardEvent) {\n    // Pass focus to the first menu-item in the submenu.\n    const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector(\"slot[name='submenu']\");\n\n    // Missing slot\n    if (!submenuSlot) {\n      console.error('Cannot activate a submenu if no corresponding menuitem can be found.', this);\n      return;\n    }\n\n    // Menus\n    let menuItems: NodeListOf<Element> | null = null;\n    for (const elt of submenuSlot.assignedElements()) {\n      menuItems = elt.querySelectorAll(\"syn-menu-item, [role^='menuitem']\");\n      if (menuItems.length !== 0) {\n        break;\n      }\n    }\n\n    if (!menuItems || menuItems.length === 0) {\n      return;\n    }\n\n    menuItems[0].setAttribute('tabindex', '0');\n    for (let i = 1; i !== menuItems.length; ++i) {\n      menuItems[i].setAttribute('tabindex', '-1');\n    }\n\n    // Open the submenu (if not open), and set focus to first menuitem.\n    if (this.popupRef.value) {\n      event.preventDefault();\n      event.stopPropagation();\n      if (this.popupRef.value.active) {\n        if (menuItems[0] instanceof HTMLElement) {\n          menuItems[0].focus();\n        }\n      } else {\n        this.enableSubmenu(false);\n        this.host.updateComplete.then(() => {\n          if (menuItems![0] instanceof HTMLElement) {\n            menuItems![0].focus();\n          }\n        });\n        this.host.requestUpdate();\n      }\n    }\n  }\n\n  // Focus on the first menu-item of a submenu.\n  private handleKeyDown = (event: KeyboardEvent) => {\n    switch (event.key) {\n      case 'Escape':\n      case 'Tab':\n        this.disableSubmenu();\n        break;\n      case 'ArrowLeft':\n        // Either focus is currently on the host element or a child\n        if (event.target !== this.host) {\n          event.preventDefault();\n          event.stopPropagation();\n          this.host.focus();\n          this.disableSubmenu();\n        }\n        break;\n      case 'ArrowRight':\n      case 'Enter':\n      case ' ':\n        this.handleSubmenuEntry(event);\n        break;\n      default:\n        break;\n    }\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    // Clicking on the item which heads the menu does nothing, otherwise hide submenu and propagate\n    if (event.target === this.host) {\n      event.preventDefault();\n      event.stopPropagation();\n    } else if (\n      event.target instanceof Element &&\n      (event.target.tagName === 'syn-menu-item' || event.target.role?.startsWith('menuitem'))\n    ) {\n      this.disableSubmenu();\n    }\n  };\n\n  // Close this submenu on focus outside of the parent or any descendants.\n  private handleFocusOut = (event: FocusEvent) => {\n    if (event.relatedTarget && event.relatedTarget instanceof Element && this.host.contains(event.relatedTarget)) {\n      return;\n    }\n    this.disableSubmenu();\n  };\n\n  // Prevent the parent menu-item from getting focus on mouse movement on the submenu\n  private handlePopupMouseover = (event: MouseEvent) => {\n    event.stopPropagation();\n  };\n\n  // Set the safe triangle values for the submenu when the position changes\n  private handlePopupReposition = () => {\n    const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector(\"slot[name='submenu']\");\n    const menu = submenuSlot?.assignedElements({ flatten: true }).filter(el => el.localName === 'syn-menu')[0];\n    const isRtl = this.localize.dir() === 'rtl';\n\n    if (!menu) {\n      return;\n    }\n\n    const { left, top, width, height } = menu.getBoundingClientRect();\n\n    this.host.style.setProperty('--safe-triangle-submenu-start-x', `${isRtl ? left + width : left}px`);\n    this.host.style.setProperty('--safe-triangle-submenu-start-y', `${top}px`);\n    this.host.style.setProperty('--safe-triangle-submenu-end-x', `${isRtl ? left + width : left}px`);\n    this.host.style.setProperty('--safe-triangle-submenu-end-y', `${top + height}px`);\n  };\n\n  private setSubmenuState(state: boolean) {\n    if (this.popupRef.value) {\n      if (this.popupRef.value.active !== state) {\n        this.popupRef.value.active = state;\n        this.host.requestUpdate();\n      }\n    }\n  }\n\n  // Shows the submenu. Supports disabling the opening delay, e.g. for keyboard events that want to set the focus to the\n  // newly opened menu.\n  private enableSubmenu(delay = true) {\n    if (delay) {\n      this.enableSubmenuTimer = window.setTimeout(() => {\n        this.setSubmenuState(true);\n      }, this.submenuOpenDelay);\n    } else {\n      this.setSubmenuState(true);\n    }\n  }\n\n  private disableSubmenu() {\n    clearTimeout(this.enableSubmenuTimer);\n    this.setSubmenuState(false);\n  }\n\n  // Calculate the space the top of a menu takes-up, for aligning the popup menu-item with the activating element.\n  private updateSkidding(): void {\n    // .computedStyleMap() not always available.\n    if (!this.host.parentElement?.computedStyleMap) {\n      return;\n    }\n    const styleMap: StylePropertyMapReadOnly = this.host.parentElement.computedStyleMap();\n    const attrs: string[] = ['padding-top', 'border-top-width', 'margin-top'];\n\n    const skidding = attrs.reduce((accumulator, attr) => {\n      const styleValue: CSSStyleValue = styleMap.get(attr) ?? new CSSUnitValue(0, 'px');\n      const unitValue = styleValue instanceof CSSUnitValue ? styleValue : new CSSUnitValue(0, 'px');\n      const pxValue = unitValue.to('px');\n      return accumulator - pxValue.value;\n    }, 0);\n\n    this.skidding = skidding;\n  }\n\n  isExpanded(): boolean {\n    return this.popupRef.value ? this.popupRef.value.active : false;\n  }\n\n  renderSubmenu() {\n    const isLtr = this.localize.dir() === 'ltr';\n\n    // Always render the slot, but conditionally render the outer <syn-popup>\n    if (!this.isConnected) {\n      return html` <slot name=\"submenu\" hidden></slot> `;\n    }\n\n    return html`\n      <syn-popup\n        ${ref(this.popupRef)}\n        placement=${isLtr ? 'right-start' : 'left-start'}\n        anchor=\"anchor\"\n        flip\n        flip-fallback-strategy=\"best-fit\"\n        skidding=\"${this.skidding}\"\n        strategy=\"fixed\"\n      >\n        <slot name=\"submenu\"></slot>\n      </syn-popup>\n    `;\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { createRef, ref, type Ref } from 'lit/directives/ref.js';\nimport { type HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { type LocalizeController } from '../../utilities/localize.js';\nimport type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport type SynMenuItem from './menu-item.js';\nimport type SynPopup from '../popup/popup.js';\n\n/** A reactive controller to manage the registration of event listeners for submenus. */\nexport class SubmenuController implements ReactiveController {\n  private host: ReactiveControllerHost & SynMenuItem;\n  private popupRef: Ref<SynPopup> = createRef();\n  private enableSubmenuTimer = -1;\n  private isConnected = false;\n  private isPopupConnected = false;\n  private skidding = 0;\n  private readonly hasSlotController: HasSlotController;\n  private readonly localize: LocalizeController;\n  private readonly submenuOpenDelay = 100;\n\n  constructor(\n    host: ReactiveControllerHost & SynMenuItem,\n    hasSlotController: HasSlotController,\n    localize: LocalizeController\n  ) {\n    (this.host = host).addController(this);\n    this.hasSlotController = hasSlotController;\n    this.localize = localize;\n  }\n\n  hostConnected() {\n    if (this.hasSlotController.test('submenu') && !this.host.disabled) {\n      this.addListeners();\n    }\n  }\n\n  hostDisconnected() {\n    this.removeListeners();\n  }\n\n  hostUpdated() {\n    if (this.hasSlotController.test('submenu') && !this.host.disabled) {\n      this.addListeners();\n      this.updateSkidding();\n    } else {\n      this.removeListeners();\n    }\n  }\n\n  private addListeners() {\n    if (!this.isConnected) {\n      this.host.addEventListener('mousemove', this.handleMouseMove);\n      this.host.addEventListener('mouseover', this.handleMouseOver);\n      this.host.addEventListener('keydown', this.handleKeyDown);\n      this.host.addEventListener('click', this.handleClick);\n      this.host.addEventListener('focusout', this.handleFocusOut);\n      this.isConnected = true;\n    }\n\n    // The popup does not seem to get wired when the host is\n    // connected, so manage its listeners separately.\n    if (!this.isPopupConnected) {\n      if (this.popupRef.value) {\n        this.popupRef.value.addEventListener('mouseover', this.handlePopupMouseover);\n        this.popupRef.value.addEventListener('syn-reposition', this.handlePopupReposition);\n        this.isPopupConnected = true;\n      }\n    }\n  }\n\n  private removeListeners() {\n    if (this.isConnected) {\n      this.host.removeEventListener('mousemove', this.handleMouseMove);\n      this.host.removeEventListener('mouseover', this.handleMouseOver);\n      this.host.removeEventListener('keydown', this.handleKeyDown);\n      this.host.removeEventListener('click', this.handleClick);\n      this.host.removeEventListener('focusout', this.handleFocusOut);\n      this.isConnected = false;\n    }\n    if (this.isPopupConnected) {\n      if (this.popupRef.value) {\n        this.popupRef.value.removeEventListener('mouseover', this.handlePopupMouseover);\n        this.popupRef.value.removeEventListener('syn-reposition', this.handlePopupReposition);\n        this.isPopupConnected = false;\n      }\n    }\n  }\n\n  // Set the safe triangle cursor position\n  private handleMouseMove = (event: MouseEvent) => {\n    this.host.style.setProperty('--safe-triangle-cursor-x', `${event.clientX}px`);\n    this.host.style.setProperty('--safe-triangle-cursor-y', `${event.clientY}px`);\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasSlotController.test('submenu')) {\n      this.enableSubmenu();\n    }\n  };\n\n  private handleSubmenuEntry(event: KeyboardEvent) {\n    // Pass focus to the first menu-item in the submenu.\n    const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector(\"slot[name='submenu']\");\n\n    // Missing slot\n    if (!submenuSlot) {\n      console.error('Cannot activate a submenu if no corresponding menuitem can be found.', this);\n      return;\n    }\n\n    // Menus\n    let menuItems: NodeListOf<Element> | null = null;\n    for (const elt of submenuSlot.assignedElements()) {\n      menuItems = elt.querySelectorAll(\"syn-menu-item, [role^='menuitem']\");\n      if (menuItems.length !== 0) {\n        break;\n      }\n    }\n\n    if (!menuItems || menuItems.length === 0) {\n      return;\n    }\n\n    menuItems[0].setAttribute('tabindex', '0');\n    for (let i = 1; i !== menuItems.length; ++i) {\n      menuItems[i].setAttribute('tabindex', '-1');\n    }\n\n    // Open the submenu (if not open), and set focus to first menuitem.\n    if (this.popupRef.value) {\n      event.preventDefault();\n      event.stopPropagation();\n      if (this.popupRef.value.active) {\n        if (menuItems[0] instanceof HTMLElement) {\n          menuItems[0].focus();\n        }\n      } else {\n        this.enableSubmenu(false);\n        this.host.updateComplete.then(() => {\n          if (menuItems![0] instanceof HTMLElement) {\n            menuItems![0].focus();\n          }\n        });\n        this.host.requestUpdate();\n      }\n    }\n  }\n\n  // Focus on the first menu-item of a submenu.\n  private handleKeyDown = (event: KeyboardEvent) => {\n    switch (event.key) {\n      case 'Escape':\n      case 'Tab':\n        this.disableSubmenu();\n        break;\n      case 'ArrowLeft':\n        // Either focus is currently on the host element or a child\n        if (event.target !== this.host) {\n          event.preventDefault();\n          event.stopPropagation();\n          this.host.focus();\n          this.disableSubmenu();\n        }\n        break;\n      case 'ArrowRight':\n      case 'Enter':\n      case ' ':\n        this.handleSubmenuEntry(event);\n        break;\n      default:\n        break;\n    }\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    // Clicking on the item which heads the menu does nothing, otherwise hide submenu and propagate\n    if (event.target === this.host) {\n      event.preventDefault();\n      event.stopPropagation();\n    } else if (\n      event.target instanceof Element &&\n      (event.target.tagName === 'syn-menu-item' || event.target.role?.startsWith('menuitem'))\n    ) {\n      this.disableSubmenu();\n    }\n  };\n\n  // Close this submenu on focus outside of the parent or any descendants.\n  private handleFocusOut = (event: FocusEvent) => {\n    if (event.relatedTarget && event.relatedTarget instanceof Element && this.host.contains(event.relatedTarget)) {\n      return;\n    }\n    this.disableSubmenu();\n  };\n\n  // Prevent the parent menu-item from getting focus on mouse movement on the submenu\n  private handlePopupMouseover = (event: MouseEvent) => {\n    event.stopPropagation();\n  };\n\n  // Set the safe triangle values for the submenu when the position changes\n  private handlePopupReposition = () => {\n    const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector(\"slot[name='submenu']\");\n    const menu = submenuSlot?.assignedElements({ flatten: true }).filter(el => el.localName === 'syn-menu')[0];\n    const isRtl = this.localize.dir() === 'rtl';\n\n    if (!menu) {\n      return;\n    }\n\n    const { left, top, width, height } = menu.getBoundingClientRect();\n\n    this.host.style.setProperty('--safe-triangle-submenu-start-x', `${isRtl ? left + width : left}px`);\n    this.host.style.setProperty('--safe-triangle-submenu-start-y', `${top}px`);\n    this.host.style.setProperty('--safe-triangle-submenu-end-x', `${isRtl ? left + width : left}px`);\n    this.host.style.setProperty('--safe-triangle-submenu-end-y', `${top + height}px`);\n  };\n\n  private setSubmenuState(state: boolean) {\n    if (this.popupRef.value) {\n      if (this.popupRef.value.active !== state) {\n        this.popupRef.value.active = state;\n        this.host.requestUpdate();\n      }\n    }\n  }\n\n  // Shows the submenu. Supports disabling the opening delay, e.g. for keyboard events that want to set the focus to the\n  // newly opened menu.\n  private enableSubmenu(delay = true) {\n    if (delay) {\n      window.clearTimeout(this.enableSubmenuTimer);\n      this.enableSubmenuTimer = window.setTimeout(() => {\n        this.setSubmenuState(true);\n      }, this.submenuOpenDelay);\n    } else {\n      this.setSubmenuState(true);\n    }\n  }\n\n  private disableSubmenu() {\n    window.clearTimeout(this.enableSubmenuTimer);\n    this.setSubmenuState(false);\n  }\n\n  // Calculate the space the top of a menu takes-up, for aligning the popup menu-item with the activating element.\n  private updateSkidding(): void {\n    // .computedStyleMap() not always available.\n    if (!this.host.parentElement?.computedStyleMap) {\n      return;\n    }\n    const styleMap: StylePropertyMapReadOnly = this.host.parentElement.computedStyleMap();\n    const attrs: string[] = ['padding-top', 'border-top-width', 'margin-top'];\n\n    const skidding = attrs.reduce((accumulator, attr) => {\n      const styleValue: CSSStyleValue = styleMap.get(attr) ?? new CSSUnitValue(0, 'px');\n      const unitValue = styleValue instanceof CSSUnitValue ? styleValue : new CSSUnitValue(0, 'px');\n      const pxValue = unitValue.to('px');\n      return accumulator - pxValue.value;\n    }, 0);\n\n    this.skidding = skidding;\n  }\n\n  isExpanded(): boolean {\n    return this.popupRef.value ? this.popupRef.value.active : false;\n  }\n\n  renderSubmenu() {\n    const isLtr = this.localize.dir() === 'ltr';\n\n    // Always render the slot, but conditionally render the outer <syn-popup>\n    if (!this.isConnected) {\n      return html` <slot name=\"submenu\" hidden></slot> `;\n    }\n\n    return html`\n      <syn-popup\n        ${ref(this.popupRef)}\n        placement=${isLtr ? 'right-start' : 'left-start'}\n        anchor=\"anchor\"\n        flip\n        flip-fallback-strategy=\"best-fit\"\n        skidding=\"${this.skidding}\"\n        strategy=\"fixed\"\n      >\n        <slot name=\"submenu\"></slot>\n      </syn-popup>\n    `;\n  }\n}\n"],
+  "mappings": "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",
   "names": ["_a"]
 }

package/dist/chunks/{chunk.G7XEHN2F.js → chunk.JJZKPNJZ.js}

@@ -1,6 +1,6 @@
 import {
   SynIcon
-} from "./chunk.WHYX7AY4.js";
+} from "./chunk.I3SSNN7J.js";
 
 // src/components/icon/icon.ts
 var icon_default = SynIcon;
@@ -9,4 +9,4 @@ SynIcon.define("syn-icon");
 export {
   icon_default
 };
-//# sourceMappingURL=chunk.G7XEHN2F.js.map
+//# sourceMappingURL=chunk.JJZKPNJZ.js.map

package/dist/chunks/{chunk.SZCGMXW5.js → chunk.JUJZBRXD.js}

@@ -86,7 +86,7 @@ var FormControlController = class {
         const formId = input.form;
         if (formId) {
           const root = input.getRootNode();
-          const form = root.getElementById(formId);
+          const form = root.querySelector(`#${formId}`);
           if (form) {
             return form;
           }
@@ -301,4 +301,4 @@ export {
   valueMissingValidityState,
   customErrorValidityState
 };
-//# sourceMappingURL=chunk.SZCGMXW5.js.map
+//# sourceMappingURL=chunk.JUJZBRXD.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/internal/form.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport type { SynergyFormControl } from '../internal/synergy-element.js';\nimport type SynButton from '../components/button/button.js';\n\n//\n// We store a WeakMap of forms + controls so we can keep references to all Synergy controls within a given form. As\n// elements connect and disconnect to/from the DOM, their containing form is used as the key and the form control is\n// added and removed from the form's set, respectively.\n//\nexport const formCollections: WeakMap<HTMLFormElement, Set<SynergyFormControl>> = new WeakMap();\n\n//\n// We store a WeakMap of reportValidity() overloads so we can override it when form controls connect to the DOM and\n// restore the original behavior when they disconnect.\n//\nconst reportValidityOverloads: WeakMap<HTMLFormElement, () => boolean> = new WeakMap();\nconst checkValidityOverloads: WeakMap<HTMLFormElement, () => boolean> = new WeakMap();\n\n//\n// We store a Set of controls that users have interacted with. This allows us to determine the interaction state\n// without littering the DOM with additional data attributes.\n//\nconst userInteractedControls: WeakSet<SynergyFormControl> = new WeakSet();\n\n//\n// We store a WeakMap of interactions for each form control so we can track when all conditions are met for validation.\n//\nconst interactions = new WeakMap<SynergyFormControl, string[]>();\n\nexport interface FormControlControllerOptions {\n  /** A function that returns the form containing the form control. */\n  form: (input: SynergyFormControl) => HTMLFormElement | null;\n  /** A function that returns the form control's name, which will be submitted with the form data. */\n  name: (input: SynergyFormControl) => string;\n  /** A function that returns the form control's current value. */\n  value: (input: SynergyFormControl) => unknown | unknown[];\n  /** A function that returns the form control's default value. */\n  defaultValue: (input: SynergyFormControl) => unknown | unknown[];\n  /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */\n  disabled: (input: SynergyFormControl) => boolean;\n  /**\n   * A function that maps to the form control's reportValidity() function. When the control is invalid, this will\n   * prevent submission and trigger the browser's constraint violation warning.\n   */\n  reportValidity: (input: SynergyFormControl) => boolean;\n\n  /**\n   * A function that maps to the form control's `checkValidity()` function. When the control is invalid, this will return false.\n   *   this is helpful is you want to check validation without triggering the native browser constraint violation warning.\n   */\n  checkValidity: (input: SynergyFormControl) => boolean;\n  /** A function that sets the form control's value */\n  setValue: (input: SynergyFormControl, value: unknown) => void;\n  /**\n   * An array of event names to listen to. When all events in the list are emitted, the control will receive validity\n   * states such as user-valid and user-invalid.user interacted validity states. */\n  assumeInteractionOn: string[];\n}\n\n/** A reactive controller to allow form controls to participate in form submission, validation, etc. */\nexport class FormControlController implements ReactiveController {\n  host: SynergyFormControl & ReactiveControllerHost;\n  form?: HTMLFormElement | null;\n  options: FormControlControllerOptions;\n\n  constructor(host: ReactiveControllerHost & SynergyFormControl, options?: Partial<FormControlControllerOptions>) {\n    (this.host = host).addController(this);\n    this.options = {\n      form: input => {\n        // If there's a form attribute, use it to find the target form by id\n        // Controls may not always reflect the 'form' property. For example, `<syn-button>` doesn't reflect.\n        const formId = input.form;\n\n        if (formId) {\n          const root = input.getRootNode() as Document | ShadowRoot | HTMLElement;\n          const form = root.querySelector(`#${formId}`);\n\n          if (form) {\n            return form as HTMLFormElement;\n          }\n        }\n\n        return input.closest('form');\n      },\n      name: input => input.name,\n      value: input => input.value,\n      defaultValue: input => input.defaultValue,\n      disabled: input => input.disabled ?? false,\n      reportValidity: input => (typeof input.reportValidity === 'function' ? input.reportValidity() : true),\n      checkValidity: input => (typeof input.checkValidity === 'function' ? input.checkValidity() : true),\n      setValue: (input, value: string) => (input.value = value),\n      assumeInteractionOn: ['syn-input'],\n      ...options\n    };\n  }\n\n  hostConnected() {\n    const form = this.options.form(this.host);\n\n    if (form) {\n      this.attachForm(form);\n    }\n\n    // Listen for interactions\n    interactions.set(this.host, []);\n    this.options.assumeInteractionOn.forEach(event => {\n      this.host.addEventListener(event, this.handleInteraction);\n    });\n  }\n\n  hostDisconnected() {\n    this.detachForm();\n\n    // Clean up interactions\n    interactions.delete(this.host);\n    this.options.assumeInteractionOn.forEach(event => {\n      this.host.removeEventListener(event, this.handleInteraction);\n    });\n  }\n\n  hostUpdated() {\n    const form = this.options.form(this.host);\n\n    // Detach if the form no longer exists\n    if (!form) {\n      this.detachForm();\n    }\n\n    // If the form has changed, reattach it\n    if (form && this.form !== form) {\n      this.detachForm();\n      this.attachForm(form);\n    }\n\n    if (this.host.hasUpdated) {\n      this.setValidity(this.host.validity.valid);\n    }\n  }\n\n  private attachForm(form?: HTMLFormElement) {\n    if (form) {\n      this.form = form;\n\n      // Add this element to the form's collection\n      if (formCollections.has(this.form)) {\n        formCollections.get(this.form)!.add(this.host);\n      } else {\n        formCollections.set(this.form, new Set<SynergyFormControl>([this.host]));\n      }\n\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n      this.form.addEventListener('reset', this.handleFormReset);\n\n      // Overload the form's reportValidity() method so it looks at Synergy form controls\n      if (!reportValidityOverloads.has(this.form)) {\n        reportValidityOverloads.set(this.form, this.form.reportValidity);\n        this.form.reportValidity = () => this.reportFormValidity();\n      }\n\n      // Overload the form's checkValidity() method so it looks at Synergy form controls\n      if (!checkValidityOverloads.has(this.form)) {\n        checkValidityOverloads.set(this.form, this.form.checkValidity);\n        this.form.checkValidity = () => this.checkFormValidity();\n      }\n    } else {\n      this.form = undefined;\n    }\n  }\n\n  private detachForm() {\n    if (!this.form) return;\n\n    const formCollection = formCollections.get(this.form);\n\n    if (!formCollection) {\n      return;\n    }\n\n    // Remove this host from the form's collection\n    formCollection.delete(this.host);\n\n    // Check to make sure there's no other form controls in the collection. If we do this\n    // without checking if any other controls are still in the collection, then we will wipe out the\n    // validity checks for all other elements.\n    // see: https://github.com/synergy-design-system/synergy/issues/1703\n    if (formCollection.size <= 0) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form.removeEventListener('reset', this.handleFormReset);\n\n      // Remove the overload and restore the original method\n      if (reportValidityOverloads.has(this.form)) {\n        this.form.reportValidity = reportValidityOverloads.get(this.form)!;\n        reportValidityOverloads.delete(this.form);\n      }\n\n      if (checkValidityOverloads.has(this.form)) {\n        this.form.checkValidity = checkValidityOverloads.get(this.form)!;\n        checkValidityOverloads.delete(this.form);\n      }\n\n      // So it looks weird here to not always set the form to undefined. But I _think_ if we unattach this.form here,\n      // we end up in this fun spot where future validity checks don't have a reference to the form validity handler.\n      // First form element in sets the validity handler. So we can't clean up `this.form` until there are no other form elements in the form.\n      this.form = undefined;\n    }\n  }\n\n  private handleFormData = (event: FormDataEvent) => {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    // For buttons, we only submit the value if they were the submitter. This is currently done in doAction() by\n    // injecting the name/value on a temporary button, so we can just skip them here.\n    const isButton = this.host.tagName.toLowerCase() === 'syn-button';\n\n    if (\n      this.host.isConnected &&\n      !disabled &&\n      !isButton &&\n      typeof name === 'string' &&\n      name.length > 0 &&\n      typeof value !== 'undefined'\n    ) {\n      if (Array.isArray(value)) {\n        (value as unknown[]).forEach(val => {\n          event.formData.append(name, (val as string | number | boolean).toString());\n        });\n      } else {\n        event.formData.append(name, (value as string | number | boolean).toString());\n      }\n    }\n  };\n\n  private handleFormSubmit = (event: Event) => {\n    const disabled = this.options.disabled(this.host);\n    const reportValidity = this.options.reportValidity;\n\n    // Update the interacted state for all controls when the form is submitted\n    if (this.form && !this.form.noValidate) {\n      formCollections.get(this.form)?.forEach(control => {\n        this.setUserInteracted(control, true);\n      });\n    }\n\n    if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  };\n\n  private handleFormReset = () => {\n    this.options.setValue(this.host, this.options.defaultValue(this.host));\n    this.setUserInteracted(this.host, false);\n    interactions.set(this.host, []);\n  };\n\n  private handleInteraction = (event: Event) => {\n    const emittedEvents = interactions.get(this.host)!;\n\n    if (!emittedEvents.includes(event.type)) {\n      emittedEvents.push(event.type);\n    }\n\n    // Mark it as user-interacted as soon as all associated events have been emitted\n    if (emittedEvents.length === this.options.assumeInteractionOn.length) {\n      this.setUserInteracted(this.host, true);\n    }\n  };\n\n  private checkFormValidity = () => {\n    //\n    // This is very similar to the `reportFormValidity` function, but it does not trigger native constraint validation\n    // Allow the user to simply check if the form is valid and handling validity in their own way.\n    //\n    // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger\n    // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't\n    // be necessary once we can use ElementInternals.\n    //\n    // Note that we're also honoring the form's novalidate attribute.\n    //\n    if (this.form && !this.form.noValidate) {\n      // This seems sloppy, but checking all elements will cover native inputs, Synergy inputs, and other custom\n      // elements that support the constraint validation API.\n      const elements = this.form.querySelectorAll<HTMLInputElement>('*');\n\n      for (const element of elements) {\n        if (typeof element.checkValidity === 'function') {\n          if (!element.checkValidity()) {\n            return false;\n          }\n        }\n      }\n    }\n\n    return true;\n  };\n\n  private reportFormValidity = () => {\n    //\n    // Synergy form controls work hard to act like regular form controls. They support the Constraint Validation API\n    // and its associated methods such as setCustomValidity() and reportValidity(). However, the HTMLFormElement also\n    // has a reportValidity() method that will trigger validation on all child controls. Since we're not yet using\n    // ElementInternals, we need to overload this method so it looks for any element with the reportValidity() method.\n    //\n    // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger\n    // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't\n    // be necessary once we can use ElementInternals.\n    //\n    // Note that we're also honoring the form's novalidate attribute.\n    //\n    if (this.form && !this.form.noValidate) {\n      // This seems sloppy, but checking all elements will cover native inputs, Synergy inputs, and other custom\n      // elements that support the constraint validation API.\n      const elements = this.form.querySelectorAll<HTMLInputElement>('*');\n\n      for (const element of elements) {\n        if (typeof element.reportValidity === 'function') {\n          if (!element.reportValidity()) {\n            return false;\n          }\n        }\n      }\n    }\n\n    return true;\n  };\n\n  private setUserInteracted(el: SynergyFormControl, hasInteracted: boolean) {\n    if (hasInteracted) {\n      userInteractedControls.add(el);\n    } else {\n      userInteractedControls.delete(el);\n    }\n\n    el.requestUpdate();\n  }\n\n  private doAction(type: 'submit' | 'reset', submitter?: HTMLInputElement | SynButton) {\n    if (this.form) {\n      const button = document.createElement('button');\n      button.type = type;\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n\n      // Pass name, value, and form attributes through to the temporary button\n      if (submitter) {\n        button.name = submitter.name;\n        button.value = submitter.value;\n\n        ['formaction', 'formenctype', 'formmethod', 'formnovalidate', 'formtarget'].forEach(attr => {\n          if (submitter.hasAttribute(attr)) {\n            button.setAttribute(attr, submitter.getAttribute(attr)!);\n          }\n        });\n      }\n\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n\n  /** Returns the associated `<form>` element, if one exists. */\n  getForm() {\n    return this.form ?? null;\n  }\n\n  /** Resets the form, restoring all the control to their default value */\n  reset(submitter?: HTMLInputElement | SynButton) {\n    this.doAction('reset', submitter);\n  }\n\n  /** Submits the form, triggering validation and form data injection. */\n  submit(submitter?: HTMLInputElement | SynButton) {\n    // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a\n    // native submit button into the form, \"click\" it, then remove it to simulate a standard form submission.\n    this.doAction('submit', submitter);\n  }\n\n  /**\n   * Synchronously sets the form control's validity. Call this when you know the future validity but need to update\n   * the host element immediately, i.e. before Lit updates the component in the next update.\n   */\n  setValidity(isValid: boolean) {\n    const host = this.host;\n    const hasInteracted = Boolean(userInteractedControls.has(host));\n    const required = Boolean(host.required);\n\n    //\n    // We're mapping the following \"states\" to data attributes. In the future, we can use ElementInternals.states to\n    // create a similar mapping, but instead of [data-invalid] it will look like :--invalid.\n    //\n    // See this RFC for more details: https://github.com/synergy-design-system/synergy/issues/1011\n    //\n    host.toggleAttribute('data-required', required);\n    host.toggleAttribute('data-optional', !required);\n    host.toggleAttribute('data-invalid', !isValid);\n    host.toggleAttribute('data-valid', isValid);\n    host.toggleAttribute('data-user-invalid', !isValid && hasInteracted);\n    host.toggleAttribute('data-user-valid', isValid && hasInteracted);\n  }\n\n  /**\n   * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything\n   * that affects constraint validation changes so the component receives the correct validity states.\n   */\n  updateValidity() {\n    const host = this.host;\n    this.setValidity(host.validity.valid);\n  }\n\n  /**\n   * Dispatches a non-bubbling, cancelable custom event of type `syn-invalid`.\n   * If the `syn-invalid` event will be cancelled then the original `invalid`\n   * event (which may have been passed as argument) will also be cancelled.\n   * If no original `invalid` event has been passed then the `syn-invalid`\n   * event will be cancelled before being dispatched.\n   */\n  emitInvalidEvent(originalInvalidEvent?: Event) {\n    const slInvalidEvent = new CustomEvent<Record<PropertyKey, never>>('syn-invalid', {\n      bubbles: false,\n      composed: false,\n      cancelable: true,\n      detail: {}\n    });\n\n    if (!originalInvalidEvent) {\n      slInvalidEvent.preventDefault();\n    }\n\n    if (!this.host.dispatchEvent(slInvalidEvent)) {\n      originalInvalidEvent?.preventDefault();\n    }\n  }\n}\n\n/*\n * Predefined common validity states.\n * All of them are read-only.\n */\n\n// A validity state object that represents `valid`\nexport const validValidityState: ValidityState = Object.freeze({\n  badInput: false,\n  customError: false,\n  patternMismatch: false,\n  rangeOverflow: false,\n  rangeUnderflow: false,\n  stepMismatch: false,\n  tooLong: false,\n  tooShort: false,\n  typeMismatch: false,\n  valid: true,\n  valueMissing: false\n});\n\n// A validity state object that represents `value missing`\nexport const valueMissingValidityState: ValidityState = Object.freeze({\n  ...validValidityState,\n  valid: false,\n  valueMissing: true\n});\n\n// A validity state object that represents a custom error\nexport const customErrorValidityState: ValidityState = Object.freeze({\n  ...validValidityState,\n  valid: false,\n  customError: true\n});\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.ON2HXIFZ.js → chunk.K2H37OYP.js}

@@ -10,23 +10,23 @@ import {
 } from "./chunk.2XZKXVMR.js";
 import {
   checkbox_styles_default
-} from "./chunk.3STW62TA.js";
+} from "./chunk.NIYKFSPR.js";
 import {
   FormControlController
-} from "./chunk.SZCGMXW5.js";
+} from "./chunk.JUJZBRXD.js";
 import {
   HasSlotController
 } from "./chunk.66WXVGAW.js";
 import {
   SynIcon
-} from "./chunk.WHYX7AY4.js";
+} from "./chunk.I3SSNN7J.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.MCJTXOVV.js";
+} from "./chunk.VCFVQ6KS.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -208,7 +208,7 @@ var SynCheckbox = class extends SynergyElement {
     `;
   }
 };
-SynCheckbox.styles = [component_styles_default, checkbox_styles_default, form_control_styles_default, form_control_custom_styles_default, checkbox_custom_styles_default];
+SynCheckbox.styles = [component_styles_default, form_control_styles_default, checkbox_styles_default, form_control_custom_styles_default, checkbox_custom_styles_default];
 SynCheckbox.dependencies = { "syn-icon": SynIcon };
 __decorateClass([
   query('input[type="checkbox"]')
@@ -259,4 +259,4 @@ __decorateClass([
 export {
   SynCheckbox
 };
-//# sourceMappingURL=chunk.ON2HXIFZ.js.map
+//# sourceMappingURL=chunk.K2H37OYP.js.map

package/dist/chunks/{chunk.ON2HXIFZ.js.map → chunk.K2H37OYP.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/checkbox/checkbox.component.ts"],
-  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './checkbox.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport formControlCustomStyles from '../../styles/form-control.custom.styles.js';\nimport customStyles from './checkbox.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\n\n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://synergy.style/components/checkbox\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The checkbox's label.\n * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the checkbox loses focus.\n * @event syn-change - Emitted when the checked state changes.\n * @event syn-focus - Emitted when the checkbox gains focus.\n * @event syn-input - Emitted when the checkbox receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart form-control-help-text - The help text's wrapper.\n */\nexport default class SynCheckbox extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [componentStyles, styles, formControlStyles, formControlCustomStyles, customStyles];\n  static dependencies = { 'syn-icon': SynIcon };\n\n  private readonly formControlController = new FormControlController(this, {\n    value: (control: SynCheckbox) => (control.checked ? control.value || 'on' : undefined),\n    defaultValue: (control: SynCheckbox) => control.defaultChecked,\n    setValue: (control: SynCheckbox, checked: boolean) => (control.checked = checked)\n  });\n  private readonly hasSlotController = new HasSlotController(this, 'help-text');\n\n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n  @state() private hasFocus = false;\n\n  @property() title = ''; // make reactive to pass through\n\n  /** The name of the checkbox, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /** The current value of the checkbox, submitted as a name/value pair with form data. */\n  @property() value: string;\n\n  /** The checkbox's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Disables the checkbox. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /**\n   * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n   * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n   */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue('checked') defaultChecked = false;\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** Gets the validity state object */\n  get validity() {\n    return this.input.validity;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    return this.input.validationMessage;\n  }\n\n  firstUpdated() {\n    this.formControlController.updateValidity();\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    this.emit('syn-change');\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleInput() {\n    this.emit('syn-input');\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    // Disabled form controls are always valid\n    this.formControlController.setValidity(this.disabled);\n  }\n\n  @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n  handleStateChange() {\n    this.input.checked = this.checked; // force a sync update\n    this.input.indeterminate = this.indeterminate; // force a sync update\n    this.formControlController.updateValidity();\n  }\n\n  /** Simulates a click on the checkbox. */\n  click() {\n    this.input.click();\n  }\n\n  /** Sets focus on the checkbox. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    return this.input.checkValidity();\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /**\n   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\n   * the custom validation message, call this method with an empty string.\n   */\n  setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n    this.formControlController.updateValidity();\n  }\n\n  render() {\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n    //\n    // NOTE: we use a <div> around the label slot because of this Chrome bug.\n    //\n    // https://bugs.chromium.org/p/chromium/issues/detail?id=1413733\n    //\n    return html`\n      <div\n        class=${classMap({\n          'form-control': true,\n          'form-control--small': this.size === 'small',\n          'form-control--medium': this.size === 'medium',\n          'form-control--large': this.size === 'large',\n          'form-control--has-help-text': hasHelpText\n        })}\n      >\n        <label\n          part=\"base\"\n          class=${classMap({\n            checkbox: true,\n            'checkbox--checked': this.checked,\n            'checkbox--disabled': this.disabled,\n            'checkbox--focused': this.hasFocus,\n            'checkbox--indeterminate': this.indeterminate,\n            'checkbox--small': this.size === 'small',\n            'checkbox--medium': this.size === 'medium',\n            'checkbox--large': this.size === 'large'\n          })}\n        >\n          <input\n            class=\"checkbox__input\"\n            type=\"checkbox\"\n            title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n            name=${this.name}\n            value=${ifDefined(this.value)}\n            .indeterminate=${live(this.indeterminate)}\n            .checked=${live(this.checked)}\n            .disabled=${this.disabled}\n            .required=${this.required}\n            aria-checked=${this.checked ? 'true' : 'false'}\n            aria-describedby=\"help-text\"\n            @click=${this.handleClick}\n            @input=${this.handleInput}\n            @invalid=${this.handleInvalid}\n            @blur=${this.handleBlur}\n            @focus=${this.handleFocus}\n          />\n\n          <span\n            part=\"control${this.checked ? ' control--checked' : ''}${this.indeterminate\n              ? ' control--indeterminate'\n              : ''}\"\n            class=\"checkbox__control\"\n          >\n            ${this.checked\n              ? html`\n                  <syn-icon part=\"checked-icon\" class=\"checkbox__checked-icon\" library=\"system\" name=\"check\"></syn-icon>\n                `\n              : ''}\n            ${!this.checked && this.indeterminate\n              ? html`\n                  <syn-icon\n                    part=\"indeterminate-icon\"\n                    class=\"checkbox__indeterminate-icon\"\n                    library=\"system\"\n                    name=\"indeterminate\"\n                  ></syn-icon>\n                `\n              : ''}\n          </span>\n\n          <div part=\"label\" class=\"checkbox__label\">\n            <slot></slot>\n          </div>\n        </label>\n\n        <div\n          aria-hidden=${hasHelpText ? 'false' : 'true'}\n          class=\"form-control__help-text\"\n          id=\"help-text\"\n          part=\"form-control-help-text\"\n        >\n          <slot name=\"help-text\">${this.helpText}</slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport formControlCustomStyles from '../../styles/form-control.custom.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './checkbox.styles.js';\nimport customStyles from './checkbox.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\n\n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://synergy.style/components/checkbox\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The checkbox's label.\n * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the checkbox loses focus.\n * @event syn-change - Emitted when the checked state changes.\n * @event syn-focus - Emitted when the checkbox gains focus.\n * @event syn-input - Emitted when the checkbox receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart form-control-help-text - The help text's wrapper.\n */\nexport default class SynCheckbox extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n  static dependencies = { 'syn-icon': SynIcon };\n\n  private readonly formControlController = new FormControlController(this, {\n    value: (control: SynCheckbox) => (control.checked ? control.value || 'on' : undefined),\n    defaultValue: (control: SynCheckbox) => control.defaultChecked,\n    setValue: (control: SynCheckbox, checked: boolean) => (control.checked = checked)\n  });\n  private readonly hasSlotController = new HasSlotController(this, 'help-text');\n\n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n  @state() private hasFocus = false;\n\n  @property() title = ''; // make reactive to pass through\n\n  /** The name of the checkbox, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /** The current value of the checkbox, submitted as a name/value pair with form data. */\n  @property() value: string;\n\n  /** The checkbox's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Disables the checkbox. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /**\n   * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n   * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n   */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue('checked') defaultChecked = false;\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** Gets the validity state object */\n  get validity() {\n    return this.input.validity;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    return this.input.validationMessage;\n  }\n\n  firstUpdated() {\n    this.formControlController.updateValidity();\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    this.emit('syn-change');\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleInput() {\n    this.emit('syn-input');\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    // Disabled form controls are always valid\n    this.formControlController.setValidity(this.disabled);\n  }\n\n  @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n  handleStateChange() {\n    this.input.checked = this.checked; // force a sync update\n    this.input.indeterminate = this.indeterminate; // force a sync update\n    this.formControlController.updateValidity();\n  }\n\n  /** Simulates a click on the checkbox. */\n  click() {\n    this.input.click();\n  }\n\n  /** Sets focus on the checkbox. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    return this.input.checkValidity();\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /**\n   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\n   * the custom validation message, call this method with an empty string.\n   */\n  setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n    this.formControlController.updateValidity();\n  }\n\n  render() {\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n    //\n    // NOTE: we use a <div> around the label slot because of this Chrome bug.\n    //\n    // https://bugs.chromium.org/p/chromium/issues/detail?id=1413733\n    //\n    return html`\n      <div\n        class=${classMap({\n          'form-control': true,\n          'form-control--small': this.size === 'small',\n          'form-control--medium': this.size === 'medium',\n          'form-control--large': this.size === 'large',\n          'form-control--has-help-text': hasHelpText\n        })}\n      >\n        <label\n          part=\"base\"\n          class=${classMap({\n            checkbox: true,\n            'checkbox--checked': this.checked,\n            'checkbox--disabled': this.disabled,\n            'checkbox--focused': this.hasFocus,\n            'checkbox--indeterminate': this.indeterminate,\n            'checkbox--small': this.size === 'small',\n            'checkbox--medium': this.size === 'medium',\n            'checkbox--large': this.size === 'large'\n          })}\n        >\n          <input\n            class=\"checkbox__input\"\n            type=\"checkbox\"\n            title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n            name=${this.name}\n            value=${ifDefined(this.value)}\n            .indeterminate=${live(this.indeterminate)}\n            .checked=${live(this.checked)}\n            .disabled=${this.disabled}\n            .required=${this.required}\n            aria-checked=${this.checked ? 'true' : 'false'}\n            aria-describedby=\"help-text\"\n            @click=${this.handleClick}\n            @input=${this.handleInput}\n            @invalid=${this.handleInvalid}\n            @blur=${this.handleBlur}\n            @focus=${this.handleFocus}\n          />\n\n          <span\n            part=\"control${this.checked ? ' control--checked' : ''}${this.indeterminate\n              ? ' control--indeterminate'\n              : ''}\"\n            class=\"checkbox__control\"\n          >\n            ${this.checked\n              ? html`\n                  <syn-icon part=\"checked-icon\" class=\"checkbox__checked-icon\" library=\"system\" name=\"check\"></syn-icon>\n                `\n              : ''}\n            ${!this.checked && this.indeterminate\n              ? html`\n                  <syn-icon\n                    part=\"indeterminate-icon\"\n                    class=\"checkbox__indeterminate-icon\"\n                    library=\"system\"\n                    name=\"indeterminate\"\n                  ></syn-icon>\n                `\n              : ''}\n          </span>\n\n          <div part=\"label\" class=\"checkbox__label\">\n            <slot></slot>\n          </div>\n        </label>\n\n        <div\n          aria-hidden=${hasHelpText ? 'false' : 'true'}\n          class=\"form-control__help-text\"\n          id=\"help-text\"\n          part=\"form-control-help-text\"\n        >\n          <slot name=\"help-text\">${this.helpText}</slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/chunks/{chunk.BHTLGDWT.js → chunk.K6AHAO25.js}

@@ -1,6 +1,6 @@
 import {
   icon_default
-} from "./chunk.G7XEHN2F.js";
+} from "./chunk.JJZKPNJZ.js";
 import {
   header_styles_default
 } from "./chunk.AOKNP4QD.js";
@@ -16,7 +16,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.MCJTXOVV.js";
+} from "./chunk.VCFVQ6KS.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -163,4 +163,4 @@ __decorateClass([
 export {
   SynHeader
 };
-//# sourceMappingURL=chunk.BHTLGDWT.js.map
+//# sourceMappingURL=chunk.K6AHAO25.js.map

package/dist/chunks/{chunk.FKT4RXN7.js → chunk.KJ7V3TWI.js}

@@ -7,7 +7,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.MCJTXOVV.js";
+} from "./chunk.VCFVQ6KS.js";
 
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -30,4 +30,4 @@ SynSpinner.styles = [component_styles_default, spinner_styles_default];
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.FKT4RXN7.js.map
+//# sourceMappingURL=chunk.KJ7V3TWI.js.map

package/dist/chunks/{chunk.JL53VHSP.js → chunk.LFNAPJXT.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.CFIQXXMW.js";
 import {
   SynIcon
-} from "./chunk.WHYX7AY4.js";
+} from "./chunk.I3SSNN7J.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
@@ -16,7 +16,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.MCJTXOVV.js";
+} from "./chunk.VCFVQ6KS.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -144,4 +144,4 @@ __decorateClass([
 export {
   SynOption
 };
-//# sourceMappingURL=chunk.JL53VHSP.js.map
+//# sourceMappingURL=chunk.LFNAPJXT.js.map

package/dist/chunks/{chunk.YNWVXDDQ.js → chunk.LOUVN7OA.js}

@@ -13,7 +13,7 @@ import {
 } from "./chunk.TTL762VF.js";
 import {
   FormControlController
-} from "./chunk.SZCGMXW5.js";
+} from "./chunk.JUJZBRXD.js";
 import {
   HasSlotController
 } from "./chunk.66WXVGAW.js";
@@ -23,7 +23,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.MCJTXOVV.js";
+} from "./chunk.VCFVQ6KS.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -364,4 +364,4 @@ __decorateClass([
 export {
   SynTextarea
 };
-//# sourceMappingURL=chunk.YNWVXDDQ.js.map
+//# sourceMappingURL=chunk.LOUVN7OA.js.map

package/dist/chunks/{chunk.3STW62TA.js → chunk.NIYKFSPR.js}

@@ -116,6 +116,7 @@ var checkbox_styles_default = css`
 
   :host([required]) .checkbox__label::after {
     content: var(--syn-input-required-content);
+    color: var(--syn-input-required-content-color);
     margin-inline-start: var(--syn-input-required-content-offset);
   }
 `;
@@ -123,4 +124,4 @@ var checkbox_styles_default = css`
 export {
   checkbox_styles_default
 };
-//# sourceMappingURL=chunk.3STW62TA.js.map
+//# sourceMappingURL=chunk.NIYKFSPR.js.map

package/dist/chunks/{chunk.3STW62TA.js.map → chunk.NIYKFSPR.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/checkbox/checkbox.styles.ts"],
-  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: inline-block;\n  }\n\n  .checkbox {\n    position: relative;\n    display: inline-flex;\n    align-items: flex-start;\n    font-family: var(--syn-input-font-family);\n    font-weight: var(--syn-input-font-weight);\n    color: var(--syn-input-label-color);\n    vertical-align: middle;\n    cursor: pointer;\n  }\n\n  .checkbox--small {\n    --toggle-size: var(--syn-toggle-size-small);\n    font-size: var(--syn-input-font-size-small);\n  }\n\n  .checkbox--medium {\n    --toggle-size: var(--syn-toggle-size-medium);\n    font-size: var(--syn-input-font-size-medium);\n  }\n\n  .checkbox--large {\n    --toggle-size: var(--syn-toggle-size-large);\n    font-size: var(--syn-input-font-size-large);\n  }\n\n  .checkbox__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--toggle-size);\n    height: var(--toggle-size);\n    border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n    border-radius: 2px;\n    background-color: var(--syn-input-background-color);\n    color: var(--syn-color-neutral-0);\n    transition:\n      var(--syn-transition-fast) border-color,\n      var(--syn-transition-fast) background-color,\n      var(--syn-transition-fast) color,\n      var(--syn-transition-fast) box-shadow;\n  }\n\n  .checkbox__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  .checkbox__checked-icon,\n  .checkbox__indeterminate-icon {\n    display: inline-flex;\n    width: var(--toggle-size);\n    height: var(--toggle-size);\n  }\n\n  /* Hover */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {\n    border-color: var(--syn-input-border-color-hover);\n    background-color: var(--syn-input-background-color-hover);\n  }\n\n  /* Focus */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /* Checked/indeterminate */\n  .checkbox--checked .checkbox__control,\n  .checkbox--indeterminate .checkbox__control {\n    border-color: var(--syn-color-primary-600);\n    background-color: var(--syn-color-primary-600);\n  }\n\n  /* Checked/indeterminate + hover */\n  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {\n    border-color: var(--syn-color-primary-500);\n    background-color: var(--syn-color-primary-500);\n  }\n\n  /* Checked/indeterminate + focus */\n  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /* Disabled */\n  .checkbox--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .checkbox__label {\n    display: inline-block;\n    color: var(--syn-input-label-color);\n    line-height: var(--toggle-size);\n    margin-inline-start: 0.5em;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host([required]) .checkbox__label::after {\n    content: var(--syn-input-required-content);\n    margin-inline-start: var(--syn-input-required-content-offset);\n  }\n`;\n"],
-  "mappings": ";AAMA,SAAS,WAAW;AAEpB,IAAO,0BAAQ;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;",
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: inline-block;\n  }\n\n  .checkbox {\n    position: relative;\n    display: inline-flex;\n    align-items: flex-start;\n    font-family: var(--syn-input-font-family);\n    font-weight: var(--syn-input-font-weight);\n    color: var(--syn-input-label-color);\n    vertical-align: middle;\n    cursor: pointer;\n  }\n\n  .checkbox--small {\n    --toggle-size: var(--syn-toggle-size-small);\n    font-size: var(--syn-input-font-size-small);\n  }\n\n  .checkbox--medium {\n    --toggle-size: var(--syn-toggle-size-medium);\n    font-size: var(--syn-input-font-size-medium);\n  }\n\n  .checkbox--large {\n    --toggle-size: var(--syn-toggle-size-large);\n    font-size: var(--syn-input-font-size-large);\n  }\n\n  .checkbox__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--toggle-size);\n    height: var(--toggle-size);\n    border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n    border-radius: 2px;\n    background-color: var(--syn-input-background-color);\n    color: var(--syn-color-neutral-0);\n    transition:\n      var(--syn-transition-fast) border-color,\n      var(--syn-transition-fast) background-color,\n      var(--syn-transition-fast) color,\n      var(--syn-transition-fast) box-shadow;\n  }\n\n  .checkbox__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  .checkbox__checked-icon,\n  .checkbox__indeterminate-icon {\n    display: inline-flex;\n    width: var(--toggle-size);\n    height: var(--toggle-size);\n  }\n\n  /* Hover */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {\n    border-color: var(--syn-input-border-color-hover);\n    background-color: var(--syn-input-background-color-hover);\n  }\n\n  /* Focus */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /* Checked/indeterminate */\n  .checkbox--checked .checkbox__control,\n  .checkbox--indeterminate .checkbox__control {\n    border-color: var(--syn-color-primary-600);\n    background-color: var(--syn-color-primary-600);\n  }\n\n  /* Checked/indeterminate + hover */\n  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {\n    border-color: var(--syn-color-primary-500);\n    background-color: var(--syn-color-primary-500);\n  }\n\n  /* Checked/indeterminate + focus */\n  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /* Disabled */\n  .checkbox--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .checkbox__label {\n    display: inline-block;\n    color: var(--syn-input-label-color);\n    line-height: var(--toggle-size);\n    margin-inline-start: 0.5em;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host([required]) .checkbox__label::after {\n    content: var(--syn-input-required-content);\n    color: var(--syn-input-required-content-color);\n    margin-inline-start: var(--syn-input-required-content-offset);\n  }\n`;\n"],
+  "mappings": ";AAMA,SAAS,WAAW;AAEpB,IAAO,0BAAQ;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;",
   "names": []
 }

package/dist/chunks/{chunk.KC6TXACE.js → chunk.NLWT6VZN.js}

@@ -1,6 +1,6 @@
 import {
   SynDrawer
-} from "./chunk.5UETQYQR.js";
+} from "./chunk.3M6IVPMZ.js";
 
 // src/components/drawer/drawer.ts
 var drawer_default = SynDrawer;
@@ -9,4 +9,4 @@ SynDrawer.define("syn-drawer");
 export {
   drawer_default
 };
-//# sourceMappingURL=chunk.KC6TXACE.js.map
+//# sourceMappingURL=chunk.NLWT6VZN.js.map

package/dist/chunks/{chunk.JUD3T56D.js → chunk.NOB4TQLJ.js}

@@ -1,6 +1,6 @@
 import {
   SynHeader
-} from "./chunk.BHTLGDWT.js";
+} from "./chunk.K6AHAO25.js";
 
 // src/components/header/header.ts
 var header_default = SynHeader;
@@ -9,4 +9,4 @@ SynHeader.define("syn-header");
 export {
   header_default
 };
-//# sourceMappingURL=chunk.JUD3T56D.js.map
+//# sourceMappingURL=chunk.NOB4TQLJ.js.map

package/dist/chunks/{chunk.H7APDHTS.js → chunk.O3AC2EVL.js}

@@ -6,11 +6,11 @@ import {
 } from "./chunk.LJQ7LEPV.js";
 import {
   SynIcon
-} from "./chunk.WHYX7AY4.js";
+} from "./chunk.I3SSNN7J.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.MCJTXOVV.js";
+} from "./chunk.VCFVQ6KS.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -138,4 +138,4 @@ __decorateClass([
 export {
   SynIconButton
 };
-//# sourceMappingURL=chunk.H7APDHTS.js.map
+//# sourceMappingURL=chunk.O3AC2EVL.js.map

package/dist/chunks/{chunk.P43W2NFX.js → chunk.OCH36GVS.js}

@@ -1,6 +1,6 @@
 import {
   SynSideNav
-} from "./chunk.VDA7H6VI.js";
+} from "./chunk.UHVHULGW.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.P43W2NFX.js.map
+//# sourceMappingURL=chunk.OCH36GVS.js.map

package/dist/chunks/{chunk.T43ZXJKG.js → chunk.OEMIM5RD.js}

@@ -6,14 +6,14 @@ import {
 } from "./chunk.PKO6FEOM.js";
 import {
   SynIcon
-} from "./chunk.WHYX7AY4.js";
+} from "./chunk.I3SSNN7J.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.MCJTXOVV.js";
+} from "./chunk.VCFVQ6KS.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -112,4 +112,4 @@ __decorateClass([
 export {
   SynRadio
 };
-//# sourceMappingURL=chunk.T43ZXJKG.js.map
+//# sourceMappingURL=chunk.OEMIM5RD.js.map

package/dist/chunks/{chunk.MJYZDU37.js → chunk.ONVWJKVD.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.L4UUXVRZ.js";
 import {
   SynDivider
-} from "./chunk.YBPWZ4QI.js";
+} from "./chunk.TUFBQA52.js";
 import {
   HasSlotController
 } from "./chunk.66WXVGAW.js";
@@ -13,7 +13,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.MCJTXOVV.js";
+} from "./chunk.VCFVQ6KS.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -315,4 +315,4 @@ __decorateClass([
 export {
   SynNavItem
 };
-//# sourceMappingURL=chunk.MJYZDU37.js.map
+//# sourceMappingURL=chunk.ONVWJKVD.js.map

package/dist/chunks/{chunk.XSVH753L.js → chunk.PCI22DJU.js}

@@ -7,7 +7,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.MCJTXOVV.js";
+} from "./chunk.VCFVQ6KS.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -128,4 +128,4 @@ __decorateClass([
 export {
   SynMenu
 };
-//# sourceMappingURL=chunk.XSVH753L.js.map
+//# sourceMappingURL=chunk.PCI22DJU.js.map

package/dist/chunks/{chunk.CHJC6OSN.js → chunk.PGM6WEYY.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.ON2HXIFZ.js";
+} from "./chunk.K2H37OYP.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.CHJC6OSN.js.map
+//# sourceMappingURL=chunk.PGM6WEYY.js.map