@synergy-design-system/components 3.0.0 → 3.2.0

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/switch/switch.styles.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: inline-block;\n  }\n\n  :host([size='small']) {\n    --height: var(--syn-toggle-size-small);\n    --thumb-size: calc(var(--syn-toggle-size-small) + 4px);\n    --width: calc(var(--height) * 2);\n\n    font-size: var(--syn-input-font-size-small);\n  }\n\n  :host([size='medium']) {\n    --height: var(--syn-toggle-size-medium);\n    --thumb-size: calc(var(--syn-toggle-size-medium) + 4px);\n    --width: calc(var(--height) * 2);\n\n    font-size: var(--syn-input-font-size-medium);\n  }\n\n  :host([size='large']) {\n    --height: var(--syn-toggle-size-large);\n    --thumb-size: calc(var(--syn-toggle-size-large) + 4px);\n    --width: calc(var(--height) * 2);\n\n    font-size: var(--syn-input-font-size-large);\n  }\n\n  .switch {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    font-family: var(--syn-input-font-family);\n    font-size: inherit;\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  .switch__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--width);\n    height: var(--height);\n    background-color: var(--syn-color-neutral-400);\n    border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);\n    border-radius: var(--height);\n    transition:\n      var(--syn-transition-fast) border-color,\n      var(--syn-transition-fast) background-color;\n  }\n\n  .switch__control .switch__thumb {\n    width: var(--thumb-size);\n    height: var(--thumb-size);\n    background-color: var(--syn-color-neutral-0);\n    border-radius: 50%;\n    border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);\n    translate: calc((var(--width) - var(--height)) / -2);\n    transition:\n      var(--syn-transition-fast) translate ease,\n      var(--syn-transition-fast) background-color,\n      var(--syn-transition-fast) border-color,\n      var(--syn-transition-fast) box-shadow;\n  }\n\n  .switch__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* Hover */\n  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n    background-color: var(--syn-color-neutral-400);\n    border-color: var(--syn-color-neutral-400);\n  }\n\n  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {\n    background-color: var(--syn-color-neutral-0);\n    border-color: var(--syn-color-neutral-400);\n  }\n\n  /* Focus */\n  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {\n    background-color: var(--syn-color-neutral-400);\n    border-color: var(--syn-color-neutral-400);\n  }\n\n  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {\n    background-color: var(--syn-color-neutral-0);\n    border-color: var(--syn-color-primary-600);\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /* Checked */\n  .switch--checked .switch__control {\n    background-color: var(--syn-color-primary-600);\n    border-color: var(--syn-color-primary-600);\n  }\n\n  .switch--checked .switch__control .switch__thumb {\n    background-color: var(--syn-color-neutral-0);\n    border-color: var(--syn-color-primary-600);\n    translate: calc((var(--width) - var(--height)) / 2);\n  }\n\n  /* Checked + hover */\n  .switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n    background-color: var(--syn-color-primary-600);\n    border-color: var(--syn-color-primary-600);\n  }\n\n  .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {\n    background-color: var(--syn-color-neutral-0);\n    border-color: var(--syn-color-primary-600);\n  }\n\n  /* Checked + focus */\n  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {\n    background-color: var(--syn-color-primary-600);\n    border-color: var(--syn-color-primary-600);\n  }\n\n  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {\n    background-color: var(--syn-color-neutral-0);\n    border-color: var(--syn-color-primary-600);\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /* Disabled */\n  .switch--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .switch__label {\n    display: inline-block;\n    line-height: var(--height);\n    margin-inline-start: 0.5em;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host([required]) .switch__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  @media (forced-colors: active) {\n    .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb,\n    .switch--checked .switch__control .switch__thumb {\n      background-color: ButtonText;\n    }\n  }\n`;\n"],
+  "mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,wBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.6EPU7YUS.js → chunk.X5NFOV5A.js}

@@ -59,4 +59,4 @@ var tag_styles_default = css`
 export {
   tag_styles_default
 };
-//# sourceMappingURL=chunk.6EPU7YUS.js.map
+//# sourceMappingURL=chunk.X5NFOV5A.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tag/tag.styles.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: inline-block;\n  }\n\n  .tag {\n    display: flex;\n    align-items: center;\n    border: solid 1px;\n    line-height: 1;\n    white-space: nowrap;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .tag__remove::part(base) {\n    color: inherit;\n    padding: 0;\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .tag--small {\n    font-size: var(--syn-button-font-size-small);\n    height: calc(var(--syn-input-height-small) * 0.8);\n    line-height: calc(var(--syn-input-height-small) - var(--syn-input-border-width) * 2);\n    border-radius: var(--syn-input-border-radius-small);\n    padding: 0 var(--syn-spacing-x-small);\n  }\n\n  .tag--medium {\n    font-size: var(--syn-button-font-size-medium);\n    height: calc(var(--syn-input-height-medium) * 0.8);\n    line-height: calc(var(--syn-input-height-medium) - var(--syn-input-border-width) * 2);\n    border-radius: var(--syn-input-border-radius-medium);\n    padding: 0 var(--syn-spacing-small);\n  }\n\n  .tag--large {\n    font-size: var(--syn-button-font-size-large);\n    height: calc(var(--syn-input-height-large) * 0.8);\n    line-height: calc(var(--syn-input-height-large) - var(--syn-input-border-width) * 2);\n    border-radius: var(--syn-input-border-radius-large);\n    padding: 0 var(--syn-spacing-medium);\n  }\n\n  .tag__remove {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  \n`;\n"],
+  "mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.QXZFSE4T.js → chunk.X5TIKPLJ.js}

@@ -1,6 +1,6 @@
 import {
   SynDetails
-} from "./chunk.6KTVNSPY.js";
+} from "./chunk.MFLXKYBR.js";
 
 // src/components/details/details.ts
 var details_default = SynDetails;
@@ -9,4 +9,4 @@ SynDetails.define("syn-details");
 export {
   details_default
 };
-//# sourceMappingURL=chunk.QXZFSE4T.js.map
+//# sourceMappingURL=chunk.X5TIKPLJ.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/details/details.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport SynDetails from './details.component.js';\n\nexport * from './details.component.js';\nexport default SynDetails;\n\nSynDetails.define('syn-details');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-details': SynDetails;\n  }\n}\n"],
+  "mappings": ";;;;;AAIA,IAAO,kBAAQ;AAEf,WAAW,OAAO,aAAa;",
+  "names": []
+}

package/dist/chunks/{chunk.ZR7J6ZEM.js → chunk.X6WKPXTG.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuItem
-} from "./chunk.DHT3ZN7B.js";
+} from "./chunk.LZTCTUDK.js";
 
 // src/components/menu-item/menu-item.ts
 var menu_item_default = SynMenuItem;
@@ -9,4 +9,4 @@ SynMenuItem.define("syn-menu-item");
 export {
   menu_item_default
 };
-//# sourceMappingURL=chunk.ZR7J6ZEM.js.map
+//# sourceMappingURL=chunk.X6WKPXTG.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu-item/menu-item.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport SynMenuItem from './menu-item.component.js';\n\nexport * from './menu-item.component.js';\nexport default SynMenuItem;\n\nSynMenuItem.define('syn-menu-item');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-menu-item': SynMenuItem;\n  }\n}\n"],
+  "mappings": ";;;;;AAIA,IAAO,oBAAQ;AAEf,YAAY,OAAO,eAAe;",
+  "names": []
+}

package/dist/chunks/{chunk.7SIMUMVH.js → chunk.XGBJ2PGD.js}

@@ -1,18 +1,18 @@
+import {
+  progress_ring_styles_default
+} from "./chunk.PB6IANE7.js";
 import {
   progress_ring_custom_styles_default
 } from "./chunk.GCTLPTMT.js";
-import {
-  progress_ring_styles_default
-} from "./chunk.RMIDAEF5.js";
 import {
   LocalizeController
-} from "./chunk.OAQRCZOO.js";
+} from "./chunk.QLETXF4A.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.ECNXEYTN.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -76,4 +76,4 @@ __decorateClass([
 export {
   SynProgressRing
 };
-//# sourceMappingURL=chunk.7SIMUMVH.js.map
+//# sourceMappingURL=chunk.XGBJ2PGD.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/progress-ring/progress-ring.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './progress-ring.styles.js';\nimport customStyles from './progress-ring.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-ring--docs\n * @status stable\n * @since 2.0\n *\n * @slot - A label to show inside the ring.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The progress ring label.\n *\n * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.\n * @cssproperty --indicator-color - The color of the indicator.\n * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.\n */\nexport default class SynProgressRing extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  private readonly localize = new LocalizeController(this);\n\n  @query('.progress-ring__indicator') indicator: SVGCircleElement;\n\n  @state() indicatorOffset: string;\n\n  /** The current progress as a percentage, 0 to 100. */\n  @property({ type: Number, reflect: true }) value = 0;\n\n  /** A custom label for assistive devices. */\n  @property() label = '';\n\n  updated(changedProps: Map<string, unknown>) {\n    super.updated(changedProps);\n\n    //\n    // This block is only required for Safari because it doesn't transition the circle when the custom properties\n    // change, possibly because of a mix of pixel + unit-less values in the calc() function. It seems like a Safari bug,\n    // but I couldn't pinpoint it so this works around the problem.\n    //\n    if (changedProps.has('value')) {\n      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue('r'));\n      const circumference = 2 * Math.PI * radius;\n      const offset = circumference - (this.value / 100) * circumference;\n\n      this.indicatorOffset = `${offset}px`;\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=\"progress-ring\"\n        role=\"progressbar\"\n        aria-label=${this.label.length > 0 ? this.label : this.localize.term('progress')}\n        aria-describedby=\"label\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow=\"${this.value}\"\n        style=\"--percentage: ${this.value / 100}\"\n      >\n        <svg class=\"progress-ring__image\">\n          <circle class=\"progress-ring__track\"></circle>\n          <circle class=\"progress-ring__indicator\" style=\"stroke-dashoffset: ${this.indicatorOffset}\"></circle>\n        </svg>\n\n        <slot id=\"label\" part=\"label\" class=\"progress-ring__label\"></slot>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AACA,SAAS,YAAY;AAErB,SAAS,UAAU,OAAO,aAAa;AAyBvC,IAAqB,kBAArB,cAA6C,eAAe;AAAA,EAA5D;AAAA;AAGE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAOZ,iBAAQ;AAGvC,iBAAQ;AAAA;AAAA,EAEpB,QAAQ,cAAoC;AAC1C,UAAM,QAAQ,YAAY;AAO1B,QAAI,aAAa,IAAI,OAAO,GAAG;AAC7B,YAAM,SAAS,WAAW,iBAAiB,KAAK,SAAS,EAAE,iBAAiB,GAAG,CAAC;AAChF,YAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,YAAM,SAAS,gBAAiB,KAAK,QAAQ,MAAO;AAEpD,WAAK,kBAAkB,GAAG,MAAM;AAAA,IAClC;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKU,KAAK,MAAM,SAAS,IAAI,KAAK,QAAQ,KAAK,SAAS,KAAK,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,yBAI/D,KAAK,KAAK;AAAA,+BACJ,KAAK,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,+EAIgC,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMjG;AACF;AAtDqB,gBACZ,SAAyB,CAAC,0BAAiB,8BAAQ,mCAAY;AAIlC;AAAA,EAAnC,MAAM,2BAA2B;AAAA,GALf,gBAKiB;AAE3B;AAAA,EAAR,MAAM;AAAA,GAPY,gBAOV;AAGkC;AAAA,EAA1C,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAVtB,gBAUwB;AAG/B;AAAA,EAAX,SAAS;AAAA,GAbS,gBAaP;",
+  "names": []
+}

package/dist/chunks/{chunk.DQKV5FSY.js → chunk.XRSLCQH3.js}

@@ -154,4 +154,4 @@ export {
   getTabbableBoundary,
   getTabbableElements
 };
-//# sourceMappingURL=chunk.DQKV5FSY.js.map
+//# sourceMappingURL=chunk.XRSLCQH3.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/internal/active-elements.ts", "../../src/internal/tabbable.ts"],
+  "sourcesContent": ["/* eslint-disable */\n/**\n * Use a generator so we can iterate and possibly break early.\n * @example\n *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.\n *   const allActiveElements = [...activeElements()]\n *\n *   // Early return\n *   for (const activeElement of activeElements()) {\n *     if (<cond>) {\n *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!\n *     }\n *   }\n */\nexport function* activeElements(activeElement: Element | null = document.activeElement): Generator<Element> {\n  if (activeElement === null || activeElement === undefined) return;\n\n  yield activeElement;\n\n  if ('shadowRoot' in activeElement && activeElement.shadowRoot && activeElement.shadowRoot.mode !== 'closed') {\n    yield* activeElements(activeElement.shadowRoot.activeElement);\n  }\n}\n\nexport function getDeepestActiveElement() {\n  return [...activeElements()].pop();\n}\n", "/* eslint-disable */\n// Cached compute style calls. This is specifically for browsers that dont support `checkVisibility()`.\n// computedStyle calls are \"live\" so they only need to be retrieved once for an element.\nconst computedStyleMap = new WeakMap<Element, CSSStyleDeclaration>();\n\nfunction getCachedComputedStyle(el: HTMLElement): CSSStyleDeclaration {\n  let computedStyle: undefined | CSSStyleDeclaration = computedStyleMap.get(el);\n\n  if (!computedStyle) {\n    computedStyle = window.getComputedStyle(el, null);\n    computedStyleMap.set(el, computedStyle);\n  }\n\n  return computedStyle;\n}\n\nfunction isVisible(el: HTMLElement): boolean {\n  // This is the fastest check, but isn't supported in Safari.\n  if (typeof el.checkVisibility === 'function') {\n    // Opacity is focusable, visibility is not.\n    return el.checkVisibility({ checkOpacity: false, checkVisibilityCSS: true });\n  }\n\n  // Fallback \"polyfill\" for \"checkVisibility\"\n  const computedStyle = getCachedComputedStyle(el);\n\n  return computedStyle.visibility !== 'hidden' && computedStyle.display !== 'none';\n}\n\n// While this behavior isn't standard in Safari / Chrome yet, I think it's the most reasonable\n// way of handling tabbable overflow areas. Browser sniffing seems gross, and it's the most\n// accessible way of handling overflow areas. [Konnor]\nfunction isOverflowingAndTabbable(el: HTMLElement): boolean {\n  const computedStyle = getCachedComputedStyle(el);\n\n  const { overflowY, overflowX } = computedStyle;\n\n  if (overflowY === 'scroll' || overflowX === 'scroll') {\n    return true;\n  }\n\n  if (overflowY !== 'auto' || overflowX !== 'auto') {\n    return false;\n  }\n\n  // Always overflow === \"auto\" by this point\n  const isOverflowingY = el.scrollHeight > el.clientHeight;\n\n  if (isOverflowingY && overflowY === 'auto') {\n    return true;\n  }\n\n  const isOverflowingX = el.scrollWidth > el.clientWidth;\n\n  if (isOverflowingX && overflowX === 'auto') {\n    return true;\n  }\n\n  return false;\n}\n\n/** Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable */\nfunction isTabbable(el: HTMLElement) {\n  const tag = el.tagName.toLowerCase();\n\n  const tabindex = Number(el.getAttribute('tabindex'));\n  const hasTabindex = el.hasAttribute('tabindex');\n\n  // elements with a tabindex attribute that is either NaN or <= -1 are not tabbable\n  if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {\n    return false;\n  }\n\n  // Elements with a disabled attribute are not tabbable\n  if (el.hasAttribute('disabled')) {\n    return false;\n  }\n\n  // If any parents have \"inert\", we aren't \"tabbable\"\n  if (el.closest('[inert]')) {\n    return false;\n  }\n\n  if (tag === 'input' && el.getAttribute('type') === 'radio') {\n    const rootNode = el.getRootNode() as HTMLElement;\n\n    const findRadios = `input[type='radio'][name=\"${el.getAttribute('name')}\"]`;\n    const firstChecked = rootNode.querySelector(`${findRadios}:checked`);\n\n    if (firstChecked) {\n      return firstChecked === el;\n    }\n\n    const firstRadio = rootNode.querySelector(findRadios);\n\n    return firstRadio === el;\n  }\n\n  if (!isVisible(el)) {\n    return false;\n  }\n\n  // Audio and video elements with the controls attribute are tabbable\n  if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {\n    return true;\n  }\n\n  // Elements with a tabindex other than -1 are tabbable\n  if (el.hasAttribute('tabindex')) {\n    return true;\n  }\n\n  // Elements with a contenteditable attribute are tabbable\n  if (el.hasAttribute('contenteditable') && el.getAttribute('contenteditable') !== 'false') {\n    return true;\n  }\n\n  // At this point, the following elements are considered tabbable\n  const isNativelyTabbable = [\n    'button',\n    'input',\n    'select',\n    'textarea',\n    'a',\n    'audio',\n    'video',\n    'summary',\n    'iframe'\n  ].includes(tag);\n\n  if (isNativelyTabbable) {\n    return true;\n  }\n\n  // We save the overflow checks for last, because they're the most expensive\n  return isOverflowingAndTabbable(el);\n}\n\n/**\n * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single\n * element because it short-circuits after finding the first and last ones.\n */\nexport function getTabbableBoundary(root: HTMLElement | ShadowRoot) {\n  const tabbableElements = getTabbableElements(root);\n\n  // Find the first and last tabbable elements\n  const start = tabbableElements[0] ?? null;\n  const end = tabbableElements[tabbableElements.length - 1] ?? null;\n\n  return { start, end };\n}\n\n/**\n * This looks funky. Basically a slot's children will always be picked up *if* they're within the `root` element.\n * However, there is an edge case when, if the `root` is wrapped by another shadow DOM, it won't grab the children.\n * This fixes that fun edge case.\n */\nfunction getSlottedChildrenOutsideRootElement(slotElement: HTMLSlotElement, root: HTMLElement | ShadowRoot) {\n  return (slotElement.getRootNode({ composed: true }) as ShadowRoot | null)?.host !== root;\n}\n\nexport function getTabbableElements(root: HTMLElement | ShadowRoot) {\n  const walkedEls = new WeakMap();\n  const tabbableElements: HTMLElement[] = [];\n\n  function walk(el: HTMLElement | ShadowRoot) {\n    if (el instanceof Element) {\n      // if the element has \"inert\" we can just no-op it.\n      if (el.hasAttribute('inert') || el.closest('[inert]')) {\n        return;\n      }\n\n      if (walkedEls.has(el)) {\n        return;\n      }\n      walkedEls.set(el, true);\n\n      if (!tabbableElements.includes(el) && isTabbable(el)) {\n        tabbableElements.push(el);\n      }\n\n      if (el instanceof HTMLSlotElement && getSlottedChildrenOutsideRootElement(el, root)) {\n        el.assignedElements({ flatten: true }).forEach((assignedEl: HTMLElement) => {\n          walk(assignedEl);\n        });\n      }\n\n      if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {\n        walk(el.shadowRoot);\n      }\n    }\n\n    for (const e of el.children) {\n      walk(e as HTMLElement);\n    }\n  }\n\n  // Collect all elements including the root\n  walk(root);\n\n  // Is this worth having? Most sorts will always add increased overhead. And positive tabindexes shouldn't really be used.\n  // So is it worth being right? Or fast?\n  return tabbableElements.sort((a, b) => {\n    // Make sure we sort by tabindex.\n    const aTabindex = Number(a.getAttribute('tabindex')) || 0;\n    const bTabindex = Number(b.getAttribute('tabindex')) || 0;\n    return bTabindex - aTabindex;\n  });\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.2ACTZBEC.js → chunk.XYTR2GHP.js}

@@ -3,22 +3,22 @@ import {
 } from "./chunk.YOJL35VB.js";
 import {
   radio_styles_default
-} from "./chunk.EHSNF4SS.js";
+} from "./chunk.YITQ6NLI.js";
 import {
   SynIcon
-} from "./chunk.GJIDYO3Z.js";
+} from "./chunk.KHRQ5VI4.js";
 import {
   watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.SMIMHADA.js";
 import {
   enableDefaultSettings
-} from "./chunk.KSWDM4HW.js";
+} from "./chunk.YACUYJZN.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.ECNXEYTN.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -120,4 +120,4 @@ SynRadio = __decorateClass([
 export {
   SynRadio
 };
-//# sourceMappingURL=chunk.2ACTZBEC.js.map
+//# sourceMappingURL=chunk.XYTR2GHP.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio/radio.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property, 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 './radio.styles.js';\nimport customStyles from './radio.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Radios allow the user to select a single option from a group.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The radio's label.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-focus - Emitted when the control gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The circular container that wraps the radio's checked state.\n * @csspart control--checked - The radio control when the radio is checked.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the radio's label.\n */\n@enableDefaultSettings('SynRadio')\nexport default class SynRadio extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-icon': SynIcon };\n\n  @state() checked = false;\n  @state() protected hasFocus = false;\n\n  /** The radio's value. When selected, the radio group will receive this value. */\n  @property() value: string | number;\n\n  /**\n   * The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\n   * attribute can typically be omitted.\n   */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Disables the radio. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  constructor() {\n    super();\n    this.addEventListener('blur', this.handleBlur);\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('focus', this.handleFocus);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setInitialAttributes();\n  }\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  };\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      this.checked = true;\n    }\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  };\n\n  private setInitialAttributes() {\n    this.setAttribute('role', 'radio');\n    this.setAttribute('tabindex', '-1');\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('checked')\n  handleCheckedChange() {\n    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n    this.setAttribute('tabindex', this.checked ? '0' : '-1');\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  render() {\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          radio: true,\n          'radio--checked': this.checked,\n          'radio--disabled': this.disabled,\n          'radio--focused': this.hasFocus,\n          'radio--small': this.size === 'small',\n          'radio--medium': this.size === 'medium',\n          'radio--large': this.size === 'large'\n        })}\n      >\n        <span part=\"${`control${this.checked ? ' control--checked' : ''}`}\" class=\"radio__control\">\n          ${this.checked\n            ? html` <syn-icon part=\"checked-icon\" class=\"radio__checked-icon\" library=\"system\" name=\"radio\"></syn-icon> `\n            : ''}\n        </span>\n\n        <slot part=\"label\" class=\"radio__label\"></slot>\n      </span>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,UAAU,aAAa;AA8BhC,IAAqB,WAArB,cAAsC,eAAe;AAAA,EAmBnD,cAAc;AACZ,UAAM;AAhBC,mBAAU;AACV,SAAU,WAAW;AASD,gBAAqC;AAGtB,oBAAW;AAcvD,SAAQ,aAAa,MAAM;AACzB,WAAK,WAAW;AAChB,WAAK,KAAK,UAAU;AAAA,IACtB;AAEA,SAAQ,cAAc,MAAM;AAC1B,UAAI,CAAC,KAAK,UAAU;AAClB,aAAK,UAAU;AAAA,MACjB;AAAA,IACF;AAEA,SAAQ,cAAc,MAAM;AAC1B,WAAK,WAAW;AAChB,WAAK,KAAK,WAAW;AAAA,IACvB;AAxBE,SAAK,iBAAiB,QAAQ,KAAK,UAAU;AAC7C,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAC/C,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAAA,EACjD;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,qBAAqB;AAAA,EAC5B;AAAA,EAkBQ,uBAAuB;AAC7B,SAAK,aAAa,QAAQ,OAAO;AACjC,SAAK,aAAa,YAAY,IAAI;AAClC,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA,EAGA,sBAAsB;AACpB,SAAK,aAAa,gBAAgB,KAAK,UAAU,SAAS,OAAO;AACjE,SAAK,aAAa,YAAY,KAAK,UAAU,MAAM,IAAI;AAAA,EACzD;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,OAAO;AAAA,MACP,kBAAkB,KAAK;AAAA,MACvB,mBAAmB,KAAK;AAAA,MACxB,kBAAkB,KAAK;AAAA,MACvB,gBAAgB,KAAK,SAAS;AAAA,MAC9B,iBAAiB,KAAK,SAAS;AAAA,MAC/B,gBAAgB,KAAK,SAAS;AAAA,IAChC,CAAC,CAAC;AAAA;AAAA,sBAEY,UAAU,KAAK,UAAU,sBAAsB,EAAE,EAAE;AAAA,YAC7D,KAAK,UACH,8GACA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMd;AACF;AAxFqB,SACZ,SAAyB,CAAC,0BAAiB,sBAAQ,2BAAY;AADnD,SAEZ,eAAe,EAAE,YAAY,QAAQ;AAEnC;AAAA,EAAR,MAAM;AAAA,GAJY,SAIV;AACU;AAAA,EAAlB,MAAM;AAAA,GALY,SAKA;AAGP;AAAA,EAAX,SAAS;AAAA,GARS,SAQP;AAMiB;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAdR,SAcU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAjBvB,SAiByB;AAqC5C;AAAA,EADC,MAAM,SAAS;AAAA,GArDG,SAsDnB;AAMA;AAAA,EADC,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC;AAAA,GA3D9B,SA4DnB;AA5DmB,WAArB;AAAA,EADC,sBAAsB,UAAU;AAAA,GACZ;",
+  "names": []
+}

package/dist/chunks/{chunk.KSWDM4HW.js → chunk.YACUYJZN.js}

@@ -2,7 +2,7 @@ import {
   addGlobalEventNotification,
   extractDefaultSettingsForElement,
   removeGlobalEventNotification
-} from "./chunk.ZVOOP3PI.js";
+} from "./chunk.RY3ZM7MQ.js";
 import {
   __privateAdd,
   __privateGet,
@@ -83,4 +83,4 @@ function enableDefaultSettings(name) {
 export {
   enableDefaultSettings
 };
-//# sourceMappingURL=chunk.KSWDM4HW.js.map
+//# sourceMappingURL=chunk.YACUYJZN.js.map

package/dist/chunks/{chunk.EHSNF4SS.js → chunk.YITQ6NLI.js}

@@ -118,4 +118,4 @@ var radio_styles_default = css`
 export {
   radio_styles_default
 };
-//# sourceMappingURL=chunk.EHSNF4SS.js.map
+//# sourceMappingURL=chunk.YITQ6NLI.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio/radio.styles.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: block;\n  }\n\n  :host(:focus-visible) {\n    outline: 0px;\n  }\n\n  .radio {\n    display: inline-flex;\n    align-items: top;\n    font-family: var(--syn-input-font-family);\n    font-size: var(--syn-input-font-size-medium);\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  .radio--small {\n    --toggle-size: var(--syn-toggle-size-small);\n    font-size: var(--syn-input-font-size-small);\n  }\n\n  .radio--medium {\n    --toggle-size: var(--syn-toggle-size-medium);\n    font-size: var(--syn-input-font-size-medium);\n  }\n\n  .radio--large {\n    --toggle-size: var(--syn-toggle-size-large);\n    font-size: var(--syn-input-font-size-large);\n  }\n\n  .radio__checked-icon {\n    display: inline-flex;\n    width: var(--toggle-size);\n    height: var(--toggle-size);\n  }\n\n  .radio__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: 50%;\n    background-color: var(--syn-input-background-color);\n    color: transparent;\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  .radio__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* Hover */\n  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n    border-color: var(--syn-input-border-color-hover);\n    background-color: var(--syn-input-background-color-hover);\n  }\n\n  /* Checked */\n  .radio--checked .radio__control {\n    color: var(--syn-color-neutral-0);\n    border-color: var(--syn-color-primary-600);\n    background-color: var(--syn-color-primary-600);\n  }\n\n  /* Checked + hover */\n  .radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n    border-color: var(--syn-color-primary-500);\n    background-color: var(--syn-color-primary-500);\n  }\n\n  /* Checked + focus */\n  :host(:focus-visible) .radio__control {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /* Disabled */\n  .radio--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */\n  .radio:not(.radio--checked) svg circle {\n    opacity: 0;\n  }\n\n  .radio__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"],
+  "mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,uBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.O644HRW3.js → chunk.YOFWLXEH.js}

@@ -58,4 +58,4 @@ var tooltip_styles_default = css`
 export {
   tooltip_styles_default
 };
-//# sourceMappingURL=chunk.O644HRW3.js.map
+//# sourceMappingURL=chunk.YOFWLXEH.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tooltip/tooltip.styles.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    --max-width: 20rem;\n    --hide-delay: 0ms;\n    --show-delay: 150ms;\n\n    display: contents;\n  }\n\n  .tooltip {\n    --arrow-size: var(--syn-tooltip-arrow-size);\n    --arrow-color: var(--syn-tooltip-background-color);\n  }\n\n  .tooltip::part(popup) {\n    z-index: var(--syn-z-index-tooltip);\n  }\n\n  .tooltip[placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .tooltip[placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  .tooltip[placement^='left']::part(popup) {\n    transform-origin: right;\n  }\n\n  .tooltip[placement^='right']::part(popup) {\n    transform-origin: left;\n  }\n\n  .tooltip__body {\n    display: block;\n    width: max-content;\n    max-width: var(--max-width);\n    border-radius: var(--syn-tooltip-border-radius);\n    background-color: var(--syn-tooltip-background-color);\n    font-family: var(--syn-tooltip-font-family);\n    font-size: var(--syn-tooltip-font-size);\n    font-weight: var(--syn-tooltip-font-weight);\n    line-height: var(--syn-tooltip-line-height);\n    text-align: start;\n    white-space: normal;\n    color: var(--syn-tooltip-color);\n    padding: var(--syn-tooltip-padding);\n    pointer-events: none;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n`;\n"],
+  "mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,yBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.K62NPKGN.js → chunk.YPYFEST2.js}

@@ -38,4 +38,4 @@ var radio_group_styles_default = css`
 export {
   radio_group_styles_default
 };
-//# sourceMappingURL=chunk.K62NPKGN.js.map
+//# sourceMappingURL=chunk.YPYFEST2.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio-group/radio-group.styles.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: block;\n  }\n\n  .form-control {\n    position: relative;\n    border: none;\n    padding: 0;\n    margin: 0;\n  }\n\n  .form-control__label {\n    padding: 0;\n  }\n\n  .radio-group--required .radio-group__label::after {\n    content: var(--syn-input-required-content);\n    margin-inline-start: var(--syn-input-required-content-offset);\n  }\n\n  .visually-hidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n`;\n"],
+  "mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,6BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.KLUICBMV.js → chunk.YSKOI4OG.js}

@@ -1,15 +1,15 @@
 import {
   registerIconLibrary
-} from "./chunk.34V3QOIQ.js";
+} from "./chunk.NMWM3BP7.js";
 import {
   library_default_default
-} from "./chunk.YTEJW7IF.js";
+} from "./chunk.RODNHT5C.js";
 import {
   setSystemIconLibrary
 } from "./chunk.3RR4RIR7.js";
 import {
   getBasePath
-} from "./chunk.234ERFCE.js";
+} from "./chunk.PLV4PZYX.js";
 
 // src/components/icon/library.migration.ts
 var migrateIconName = (iconName, enableLogging = false) => {
@@ -695,4 +695,4 @@ export {
   migrationLibrary,
   setupIcons
 };
-//# sourceMappingURL=chunk.KLUICBMV.js.map
+//# sourceMappingURL=chunk.YSKOI4OG.js.map

package/dist/chunks/{chunk.WPVUSCH3.js → chunk.YUK555QP.js}

@@ -1,6 +1,6 @@
 import {
   SynAccordion
-} from "./chunk.FVYPYWJH.js";
+} from "./chunk.2J5ARXAO.js";
 
 // src/components/accordion/accordion.ts
 var accordion_default = SynAccordion;
@@ -9,4 +9,4 @@ SynAccordion.define("syn-accordion");
 export {
   accordion_default
 };
-//# sourceMappingURL=chunk.WPVUSCH3.js.map
+//# sourceMappingURL=chunk.YUK555QP.js.map

package/dist/chunks/{chunk.DXVTZKXX.js → chunk.YZMG6OGY.js}

@@ -1,6 +1,6 @@
 import {
   SynCombobox
-} from "./chunk.5F5Y2RD6.js";
+} from "./chunk.6JDKH43H.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = SynCombobox;
@@ -9,4 +9,4 @@ SynCombobox.define("syn-combobox");
 export {
   combobox_default
 };
-//# sourceMappingURL=chunk.DXVTZKXX.js.map
+//# sourceMappingURL=chunk.YZMG6OGY.js.map

package/dist/chunks/{chunk.ATT3RT4A.js → chunk.ZA7XD4RH.js}

@@ -3,37 +3,37 @@ import {
 } from "./chunk.2KYFCKCK.js";
 import {
   dropdown_styles_default
-} from "./chunk.D6IIQDWJ.js";
+} from "./chunk.TVVJTCGG.js";
 import {
   getDeepestActiveElement,
   getTabbableBoundary
-} from "./chunk.DQKV5FSY.js";
+} from "./chunk.XRSLCQH3.js";
 import {
   SynPopup
-} from "./chunk.5QGW4QZT.js";
+} from "./chunk.GFD645IU.js";
 import {
   waitForEvent
-} from "./chunk.C2ENQBPM.js";
+} from "./chunk.LQDIH4Z5.js";
 import {
   animateTo,
   stopAnimations
-} from "./chunk.6EKUFYET.js";
+} from "./chunk.Q6HZ4JXR.js";
 import {
   getAnimation,
   setDefaultAnimation
-} from "./chunk.ADSEQZBF.js";
+} from "./chunk.RJUVM6NO.js";
 import {
   watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.SMIMHADA.js";
 import {
   LocalizeController
-} from "./chunk.OAQRCZOO.js";
+} from "./chunk.QLETXF4A.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.ECNXEYTN.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -380,4 +380,4 @@ setDefaultAnimation("dropdown.hide", {
 export {
   SynDropdown
 };
-//# sourceMappingURL=chunk.ATT3RT4A.js.map
+//# sourceMappingURL=chunk.ZA7XD4RH.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/dropdown/dropdown.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { animateTo, stopAnimations } from '../../internal/animate.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { getDeepestActiveElement } from '../../internal/active-elements.js';\nimport { getTabbableBoundary } from '../../internal/tabbable.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query } from 'lit/decorators.js';\nimport { waitForEvent } from '../../internal/event.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynPopup from '../popup/popup.component.js';\nimport styles from './dropdown.styles.js';\nimport customStyles from './dropdown.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynSelectEvent } from '../../events/syn-select.js';\nimport type SynButton from '../button/button.js';\nimport type SynIconButton from '../icon-button/icon-button.js';\nimport type SynMenu from '../menu/menu.js';\n\n/**\n * @summary Dropdowns expose additional content that \"drops down\" in a panel.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dropdown--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-popup\n *\n * @slot - The dropdown's main content.\n * @slot trigger - The dropdown's trigger, usually a `<syn-button>` element.\n *\n * @event syn-show - Emitted when the dropdown opens.\n * @event syn-after-show - Emitted after the dropdown opens and all animations are complete.\n * @event syn-hide - Emitted when the dropdown closes.\n * @event syn-after-hide - Emitted after the dropdown closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper, an `<syn-popup>` element.\n * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n * @csspart trigger - The container that wraps the trigger.\n * @csspart panel - The panel that gets shown when the dropdown is open.\n *\n * @animation dropdown.show - The animation to use when showing the dropdown.\n * @animation dropdown.hide - The animation to use when hiding the dropdown.\n */\nexport default class SynDropdown extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-popup': SynPopup };\n\n  @query('.dropdown') popup: SynPopup;\n  @query('.dropdown__trigger') trigger: HTMLSlotElement;\n  @query('.dropdown__panel') panel: HTMLSlotElement;\n\n  private readonly localize = new LocalizeController(this);\n  private closeWatcher: CloseWatcher | null;\n\n  /**\n   * Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\n   * can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * inside of the viewport.\n   */\n  @property({ reflect: true }) placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'bottom-start';\n\n  /** Disables the dropdown so the panel will not open. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\n   * dropdowns that allow for multiple interactions.\n   */\n  @property({ attribute: 'stay-open-on-select', type: Boolean, reflect: true }) stayOpenOnSelect = false;\n\n  /**\n   * The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\n   * components that use a dropdown internally.\n   */\n  @property({ attribute: false }) containingElement?: HTMLElement;\n\n  /** The distance in pixels from which to offset the panel away from its trigger. */\n  @property({ type: Number }) distance = 0;\n\n  /** The distance in pixels from which to offset the panel along its trigger. */\n  @property({ type: Number }) skidding = 0;\n\n  /**\n   * Syncs the popup width or height to that of the trigger element.\n   */\n  @property({ reflect: true }) sync: 'width' | 'height' | 'both' | undefined = undefined;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (!this.containingElement) {\n      this.containingElement = this;\n    }\n  }\n\n  firstUpdated() {\n    this.panel.hidden = !this.open;\n\n    // If the dropdown is visible on init, update its position\n    if (this.open) {\n      this.addOpenListeners();\n      this.popup.active = true;\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeOpenListeners();\n    this.hide();\n  }\n\n  focusOnTrigger() {\n    const trigger = this.trigger.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n    if (typeof trigger?.focus === 'function') {\n      trigger.focus();\n    }\n  }\n\n  getMenu() {\n    return this.panel.assignedElements({ flatten: true }).find(el => el.tagName.toLowerCase() === 'syn-menu') as\n      | SynMenu\n      | undefined;\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Close when escape is pressed inside an open dropdown. We need to listen on the panel itself and stop propagation\n    // in case any ancestors are also listening for this key.\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n      this.focusOnTrigger();\n    }\n  };\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Close when escape or tab is pressed\n    if (event.key === 'Escape' && this.open && !this.closeWatcher) {\n      event.stopPropagation();\n      this.focusOnTrigger();\n      this.hide();\n      return;\n    }\n\n    // Handle tabbing\n    if (event.key === 'Tab') {\n      // Tabbing within an open menu should close the dropdown and refocus the trigger\n      if (this.open && document.activeElement?.tagName.toLowerCase() === 'syn-menu-item') {\n        event.preventDefault();\n        this.hide();\n        this.focusOnTrigger();\n        return;\n      }\n\n      const computeClosestContaining = (element: Element | null | undefined, tagName: string): Element | null => {\n        if (!element) return null;\n\n        const closest = element.closest(tagName);\n        if (closest) return closest;\n\n        const rootNode = element.getRootNode();\n        if (rootNode instanceof ShadowRoot) {\n          return computeClosestContaining(rootNode.host, tagName);\n        }\n\n        return null;\n      };\n\n      // Tabbing outside of the containing element closes the panel\n      //\n      // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,\n      // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.\n      setTimeout(() => {\n        const activeElement =\n          this.containingElement?.getRootNode() instanceof ShadowRoot\n            ? getDeepestActiveElement()\n            : document.activeElement;\n\n        if (\n          !this.containingElement ||\n          computeClosestContaining(activeElement, this.containingElement.tagName.toLowerCase()) !==\n            this.containingElement\n        ) {\n          this.hide();\n        }\n      });\n    }\n  };\n\n  private handleDocumentMouseDown = (event: MouseEvent) => {\n    // Close when clicking outside of the containing element\n    const path = event.composedPath();\n    if (this.containingElement && !path.includes(this.containingElement)) {\n      this.hide();\n    }\n  };\n\n  private handlePanelSelect = (event: SynSelectEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === 'syn-menu') {\n      this.hide();\n      this.focusOnTrigger();\n    }\n  };\n\n  handleTriggerClick() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n      this.focusOnTrigger();\n    }\n  }\n\n  async handleTriggerKeyDown(event: KeyboardEvent) {\n    // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same\n    // key again to hide the menu in case they don't want to make a selection.\n    if ([' ', 'Enter'].includes(event.key)) {\n      event.preventDefault();\n      this.handleTriggerClick();\n      return;\n    }\n\n    const menu = this.getMenu();\n\n    if (menu) {\n      const menuItems = menu.getAllItems();\n      const firstMenuItem = menuItems[0];\n      const lastMenuItem = menuItems[menuItems.length - 1];\n\n      // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a\n      // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for\n      // faster navigation.\n      if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n        event.preventDefault();\n\n        // Show the menu if it's not already open\n        if (!this.open) {\n          this.show();\n\n          // Wait for the dropdown to open before focusing, but not the animation\n          await this.updateComplete;\n        }\n\n        if (menuItems.length > 0) {\n          // Focus on the first/last menu item after showing\n          this.updateComplete.then(() => {\n            if (event.key === 'ArrowDown' || event.key === 'Home') {\n              menu.setCurrentItem(firstMenuItem);\n              firstMenuItem.focus();\n            }\n\n            if (event.key === 'ArrowUp' || event.key === 'End') {\n              menu.setCurrentItem(lastMenuItem);\n              lastMenuItem.focus();\n            }\n          });\n        }\n      }\n    }\n  }\n\n  handleTriggerKeyUp(event: KeyboardEvent) {\n    // Prevent space from triggering a click event in Firefox\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n  }\n\n  handleTriggerSlotChange() {\n    this.updateAccessibleTrigger();\n  }\n\n  //\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  // a child of the slotted element, or an element in the slotted element's shadow root.\n  //\n  // For example, the accessible trigger of an <syn-button> is a <button> located inside its shadow root.\n  //\n  // To determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n  //\n  updateAccessibleTrigger() {\n    const assignedElements = this.trigger.assignedElements({ flatten: true }) as HTMLElement[];\n    const accessibleTrigger = assignedElements.find(el => getTabbableBoundary(el).start);\n    let target: HTMLElement;\n\n    if (accessibleTrigger) {\n      switch (accessibleTrigger.tagName.toLowerCase()) {\n        // Synergy buttons have to update the internal button so it's announced correctly by screen readers\n        case 'syn-button':\n        case 'syn-icon-button':\n          target = (accessibleTrigger as SynButton | SynIconButton).button;\n          break;\n\n        default:\n          target = accessibleTrigger;\n      }\n\n      target.setAttribute('aria-haspopup', 'true');\n      target.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n    }\n  }\n\n  /** Shows the dropdown panel. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'syn-after-show');\n  }\n\n  /** Hides the dropdown panel */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'syn-after-hide');\n  }\n\n  /**\n   * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\n   * is activated.\n   */\n  reposition() {\n    this.popup.reposition();\n  }\n\n  addOpenListeners() {\n    this.panel.addEventListener('syn-select', this.handlePanelSelect);\n    if ('CloseWatcher' in window) {\n      this.closeWatcher?.destroy();\n      this.closeWatcher = new CloseWatcher();\n      this.closeWatcher.onclose = () => {\n        this.hide();\n        this.focusOnTrigger();\n      };\n    } else {\n      this.panel.addEventListener('keydown', this.handleKeyDown);\n    }\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n  }\n\n  removeOpenListeners() {\n    if (this.panel) {\n      this.panel.removeEventListener('syn-select', this.handlePanelSelect);\n      this.panel.removeEventListener('keydown', this.handleKeyDown);\n    }\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    this.closeWatcher?.destroy();\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.disabled) {\n      this.open = false;\n      return;\n    }\n\n    this.updateAccessibleTrigger();\n\n    if (this.open) {\n      // Show\n      this.emit('syn-show');\n      this.addOpenListeners();\n\n      await stopAnimations(this);\n      this.panel.hidden = false;\n      this.popup.active = true;\n      const { keyframes, options } = getAnimation(this, 'dropdown.show', { dir: this.localize.dir() });\n      await animateTo(this.popup.popup, keyframes, options);\n\n      this.emit('syn-after-show');\n    } else {\n      // Hide\n      this.emit('syn-hide');\n      this.removeOpenListeners();\n\n      await stopAnimations(this);\n      const { keyframes, options } = getAnimation(this, 'dropdown.hide', { dir: this.localize.dir() });\n      await animateTo(this.popup.popup, keyframes, options);\n      this.panel.hidden = true;\n      this.popup.active = false;\n\n      this.emit('syn-after-hide');\n    }\n  }\n\n  render() {\n    return html`\n      <syn-popup\n        part=\"base\"\n        exportparts=\"popup:base__popup\"\n        id=\"dropdown\"\n        placement=${this.placement}\n        distance=${this.distance}\n        skidding=${this.skidding}\n        flip\n        shift\n        auto-size=\"vertical\"\n        auto-size-padding=\"10\"\n        sync=${ifDefined(this.sync ? this.sync : undefined)}\n        class=${classMap({\n          dropdown: true,\n          'dropdown--open': this.open\n        })}\n      >\n        <slot\n          name=\"trigger\"\n          slot=\"anchor\"\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          @click=${this.handleTriggerClick}\n          @keydown=${this.handleTriggerKeyDown}\n          @keyup=${this.handleTriggerKeyUp}\n          @slotchange=${this.handleTriggerSlotChange}\n        ></slot>\n\n        <div aria-hidden=${this.open ? 'false' : 'true'} aria-labelledby=\"dropdown\">\n          <slot part=\"panel\" class=\"dropdown__panel\"></slot>\n        </div>\n      </syn-popup>\n    `;\n  }\n}\n\nsetDefaultAnimation('dropdown.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.9 },\n    { opacity: 1, scale: 1 }\n  ],\n  options: { duration: 100, easing: 'ease' }\n});\n\nsetDefaultAnimation('dropdown.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.9 }\n  ],\n  options: { duration: 100, easing: 'ease' }\n});\n"],
+  "mappings": "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",
+  "names": ["_a"]
+}

package/dist/chunks/{chunk.6OX2AX3Z.js → chunk.ZC3GXTWV.js}

@@ -124,4 +124,4 @@ var checkbox_styles_default = css`
 export {
   checkbox_styles_default
 };
-//# sourceMappingURL=chunk.6OX2AX3Z.js.map
+//# sourceMappingURL=chunk.ZC3GXTWV.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/checkbox/checkbox.styles.ts"],
+  "sourcesContent": ["/* 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": ";AACA,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.IMZSPXJV.js → chunk.ZNM2KW2N.js}

@@ -1,6 +1,6 @@
 import {
   SynBadge
-} from "./chunk.B3UAPU32.js";
+} from "./chunk.PDY32KGV.js";
 
 // src/components/badge/badge.ts
 var badge_default = SynBadge;
@@ -9,4 +9,4 @@ SynBadge.define("syn-badge");
 export {
   badge_default
 };
-//# sourceMappingURL=chunk.IMZSPXJV.js.map
+//# sourceMappingURL=chunk.ZNM2KW2N.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/badge/badge.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport SynBadge from './badge.component.js';\n\nexport * from './badge.component.js';\nexport default SynBadge;\n\nSynBadge.define('syn-badge');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-badge': SynBadge;\n  }\n}\n"],
+  "mappings": ";;;;;AAIA,IAAO,gBAAQ;AAEf,SAAS,OAAO,WAAW;",
+  "names": []
+}

package/dist/chunks/{chunk.4BRJ5OJE.js → chunk.ZXEPSSXQ.js}

@@ -1,6 +1,6 @@
 import {
   button_styles_default
-} from "./chunk.5SQ7NVBX.js";
+} from "./chunk.UB4EPKCP.js";
 
 // src/components/radio-button/radio-button.styles.ts
 import { css } from "lit";
@@ -34,4 +34,4 @@ var radio_button_styles_default = css`
 export {
   radio_button_styles_default
 };
-//# sourceMappingURL=chunk.4BRJ5OJE.js.map
+//# sourceMappingURL=chunk.ZXEPSSXQ.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio-button/radio-button.styles.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\nimport buttonStyles from '../button/button.styles.js';\n\nexport default css`\n\t/* stylelint-disable */\n  ${buttonStyles}\n\n  .button__prefix,\n  .button__suffix,\n  .button__label {\n    display: inline-flex;\n    position: relative;\n    align-items: center;\n  }\n\n  /* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.\n    We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */\n  .hidden-input {\n    all: unset;\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    outline: dotted 1px red;\n    opacity: 0;\n    z-index: -1;\n  }\n`;\n"],
+  "mappings": ";;;;;AACA,SAAS,WAAW;AAGpB,IAAO,8BAAQ;AAAA;AAAA,IAEX,qBAAY;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/components/accordion/accordion.component.js

@@ -1,14 +1,15 @@
 import {
   SynAccordion
-} from "../../chunks/chunk.FVYPYWJH.js";
-import "../../chunks/chunk.JE5Y2YD7.js";
+} from "../../chunks/chunk.2J5ARXAO.js";
+import "../../chunks/chunk.SMIMHADA.js";
 import "../../chunks/chunk.WNUZ6LH4.js";
-import "../../chunks/chunk.KSWDM4HW.js";
-import "../../chunks/chunk.ZVOOP3PI.js";
-import "../../chunks/chunk.N6C27EXQ.js";
+import "../../chunks/chunk.YACUYJZN.js";
+import "../../chunks/chunk.RY3ZM7MQ.js";
+import "../../chunks/chunk.VL3GX6WV.js";
+import "../../chunks/chunk.VMLERD3J.js";
 import "../../chunks/chunk.QDG5AJZX.js";
-import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.JG7YXWHG.js";
+import "../../chunks/chunk.FXJLG622.js";
+import "../../chunks/chunk.ECNXEYTN.js";
 import "../../chunks/chunk.MO2GTRUM.js";
 export {
   SynAccordion as default

package/dist/components/accordion/accordion.js

@@ -1,15 +1,16 @@
 import {
   accordion_default
-} from "../../chunks/chunk.WPVUSCH3.js";
-import "../../chunks/chunk.FVYPYWJH.js";
-import "../../chunks/chunk.JE5Y2YD7.js";
+} from "../../chunks/chunk.YUK555QP.js";
+import "../../chunks/chunk.2J5ARXAO.js";
+import "../../chunks/chunk.SMIMHADA.js";
 import "../../chunks/chunk.WNUZ6LH4.js";
-import "../../chunks/chunk.KSWDM4HW.js";
-import "../../chunks/chunk.ZVOOP3PI.js";
-import "../../chunks/chunk.N6C27EXQ.js";
+import "../../chunks/chunk.YACUYJZN.js";
+import "../../chunks/chunk.RY3ZM7MQ.js";
+import "../../chunks/chunk.VL3GX6WV.js";
+import "../../chunks/chunk.VMLERD3J.js";
 import "../../chunks/chunk.QDG5AJZX.js";
-import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.JG7YXWHG.js";
+import "../../chunks/chunk.FXJLG622.js";
+import "../../chunks/chunk.ECNXEYTN.js";
 import "../../chunks/chunk.MO2GTRUM.js";
 export {
   accordion_default as default