@synergy-design-system/components 3.4.1 → 3.6.0

package/dist/chunks/{chunk.TSWB7UFK.js → chunk.UA5B6CPN.js}

@@ -1,6 +1,14 @@
-// src/components/alert/alert.custom.styles.ts
+// src/components/alert/alert.styles.ts
 import { css } from "lit";
-var alert_custom_styles_default = css`
+var alert_styles_default = css`
+  /* stylelint-disable no-descending-specificity */
+  :host {
+    display: contents;
+
+    /* For better DX, we'll reset the margin here so the base part can inherit it */
+    margin: 0;
+  }
+
   .alert {
     /* Defines the used border and icon color for variants */
     --variant-color-border: var(--syn-alert-informative-color-border);
@@ -16,15 +24,21 @@ var alert_custom_styles_default = css`
     --size-icon-padding-block: var(--syn-spacing-medium);
     --size-icon-padding-inline: var(--syn-spacing-medium);
 
+    align-items: stretch;
     background-color: var(--variant-color-background);
     border: var(--syn-panel-border-width) solid var(--variant-color-border);
     border-left: 0;
     border-radius: var(--syn-border-radius-none);
     box-sizing: content-box;
     color: var(--syn-typography-color-text);
+    display: flex;
+    font-family: var(--syn-font-sans);
     font-size: var(--size-font-size);
+    font-weight: var(--syn-font-weight-normal);
     line-height: var(--syn-line-height-normal);
+    margin: inherit;
     min-height: var(--size-min-height);
+    position: relative;
   }
 
   /**
@@ -46,39 +60,88 @@ var alert_custom_styles_default = css`
     margin-inline-start: var(--syn-spacing-2x-small);
   }
 
+  .alert:not(.alert--has-icon) .alert__icon,
+  .alert:not(.alert--closable) .alert__close-button {
+    display: none;
+  }
+
   /**
    * Make sure everything is aligned to top
    */
-  .alert__icon,
-  .alert__close-button {
+  .alert__icon {
     align-items: flex-start;
+    color: var(--variant-color-icon);
+    display: flex;
+    flex: 0 0 auto;
     font-size: var(--size-icon-size);
+    padding-block-start: var(--size-icon-padding-block);
+    padding-inline-start: var(--size-icon-padding-inline);
+  }
+
+  .alert--has-countdown {
+    border-bottom: none;
   }
 
   .alert__message {
     align-self: center;
+    display: block;
+    flex: 1 1 auto;
     padding: var(--size-message-padding);
   }
 
-  /**
-   * Alert Icon
-   */
-  .alert__icon {
-    color: var(--variant-color-icon);
-    padding-block-start: var(--size-icon-padding-block);
-    padding-inline-start: var(--size-icon-padding-inline);
-  }
-
   /**
    * Close Icon
    */
   .alert__close-button {
+    align-items: flex-start;
     align-self: start; /* #1135: Fix alignment for the close icon */
     color: var(--syn-typography-color-text);
+    display: flex;
+    flex: 0 0 auto;
+    font-size: var(--size-icon-size);
     margin-block: calc(var(--syn-spacing-x-small) - var(--syn-panel-border-width));
     margin-inline-end: var(--syn-spacing-x-small);
   }
 
+  .alert__countdown {
+    background-color: var(--syn-panel-border-color);
+    bottom: 0;
+    display: flex;
+    height: calc(var(--syn-panel-border-width) * 3);
+    left: 0;
+    position: absolute;
+    width: 100%;
+  }
+
+  .alert__countdown--ltr {
+    justify-content: flex-end;
+  }
+
+  .alert__countdown .alert__countdown-elapsed {
+    height: 100%;
+    width: 0;
+  }
+
+  .alert--primary .alert__countdown-elapsed {
+    background-color: var(--syn-color-primary-600);
+  }
+
+  .alert--success .alert__countdown-elapsed {
+    background-color: var(--syn-color-success-600);
+  }
+
+  .alert--neutral .alert__countdown-elapsed {
+    background-color: var(--syn-color-neutral-600);
+  }
+
+  .alert--warning .alert__countdown-elapsed {
+    background-color: var(--syn-color-warning-600);
+  }
+
+  .alert--danger .alert__countdown-elapsed {
+    background-color: var(--syn-color-danger-600);
+  }
+
   /**
    * Variant colors
    */
@@ -133,9 +196,13 @@ var alert_custom_styles_default = css`
     --size-icon-padding-block: var(--syn-spacing-medium-large);
     --size-icon-padding-inline: var(--syn-spacing-medium-large);
   }
+
+  .alert__timer {
+    display: none;
+  }
 `;
 
 export {
-  alert_custom_styles_default
+  alert_styles_default
 };
-//# sourceMappingURL=chunk.TSWB7UFK.js.map
+//# sourceMappingURL=chunk.UA5B6CPN.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/alert/alert.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /* stylelint-disable no-descending-specificity */\n  :host {\n    display: contents;\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: 0;\n  }\n\n  .alert {\n    /* Defines the used border and icon color for variants */\n    --variant-color-border: var(--syn-alert-informative-color-border);\n    --variant-color-background: var(--syn-alert-informative-color-background);\n    --variant-color-icon: var(--syn-alert-informative-color-icon);\n    --variant-color-indicator: var(--syn-alert-informative-color-indicator);\n\n    /* Defines special settings for sizes */\n    --size-font-size: var(--syn-font-size-medium);\n    --size-icon-size: var(--syn-font-size-x-large);\n    --size-min-height: 54px;\n    --size-message-padding: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-medium) var(--syn-spacing-medium);\n    --size-icon-padding-block: var(--syn-spacing-medium);\n    --size-icon-padding-inline: var(--syn-spacing-medium);\n\n    align-items: stretch;\n    background-color: var(--variant-color-background);\n    border: var(--syn-panel-border-width) solid var(--variant-color-border);\n    border-left: 0;\n    border-radius: var(--syn-border-radius-none);\n    box-sizing: content-box;\n    color: var(--syn-typography-color-text);\n    display: flex;\n    font-family: var(--syn-font-sans);\n    font-size: var(--size-font-size);\n    font-weight: var(--syn-font-weight-normal);\n    line-height: var(--syn-line-height-normal);\n    margin: inherit;\n    min-height: var(--size-min-height);\n    position: relative;\n  }\n\n  /**\n   * Add back the items left borders\n   * This is done to prevent border clipping with the large border-left needed on .alert\n   * Note we also need to adjust our paddings to add the border width here\n   */\n  .alert::before {\n    background: var(--variant-color-indicator);\n    bottom: -1px;\n    content: \"\";\n    left: 0;\n    position: absolute;\n    top: -1px;\n    width: var(--syn-spacing-2x-small);\n  }\n\n  .alert :first-child {\n    margin-inline-start: var(--syn-spacing-2x-small);\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  /**\n   * Make sure everything is aligned to top\n   */\n  .alert__icon {\n    align-items: flex-start;\n    color: var(--variant-color-icon);\n    display: flex;\n    flex: 0 0 auto;\n    font-size: var(--size-icon-size);\n    padding-block-start: var(--size-icon-padding-block);\n    padding-inline-start: var(--size-icon-padding-inline);\n  }\n\n  .alert--has-countdown {\n    border-bottom: none;\n  }\n\n  .alert__message {\n    align-self: center;\n    display: block;\n    flex: 1 1 auto;\n    padding: var(--size-message-padding);\n  }\n\n  /**\n   * Close Icon\n   */\n  .alert__close-button {\n    align-items: flex-start;\n    align-self: start; /* #1135: Fix alignment for the close icon */\n    color: var(--syn-typography-color-text);\n    display: flex;\n    flex: 0 0 auto;\n    font-size: var(--size-icon-size);\n    margin-block: calc(var(--syn-spacing-x-small) - var(--syn-panel-border-width));\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .alert__countdown {\n    background-color: var(--syn-panel-border-color);\n    bottom: 0;\n    display: flex;\n    height: calc(var(--syn-panel-border-width) * 3);\n    left: 0;\n    position: absolute;\n    width: 100%;\n  }\n\n  .alert__countdown--ltr {\n    justify-content: flex-end;\n  }\n\n  .alert__countdown .alert__countdown-elapsed {\n    height: 100%;\n    width: 0;\n  }\n\n  .alert--primary .alert__countdown-elapsed {\n    background-color: var(--syn-color-primary-600);\n  }\n\n  .alert--success .alert__countdown-elapsed {\n    background-color: var(--syn-color-success-600);\n  }\n\n  .alert--neutral .alert__countdown-elapsed {\n    background-color: var(--syn-color-neutral-600);\n  }\n\n  .alert--warning .alert__countdown-elapsed {\n    background-color: var(--syn-color-warning-600);\n  }\n\n  .alert--danger .alert__countdown-elapsed {\n    background-color: var(--syn-color-danger-600);\n  }\n\n  /**\n   * Variant colors\n   */\n  .alert--success {\n    --variant-color-border: var(--syn-alert-success-color-border);\n    --variant-color-background: var(--syn-alert-success-color-background);\n    --variant-color-icon: var(--syn-alert-success-color-icon);\n    --variant-color-indicator: var(--syn-alert-success-color-indicator);\n  }\n\n  .alert--neutral {\n    --variant-color-border: var(--syn-alert-neutral-color-border);\n    --variant-color-background: var(--syn-alert-neutral-color-background);\n    --variant-color-icon: var(--syn-alert-neutral-color-icon);\n    --variant-color-indicator: var(--syn-alert-neutral-color-indicator);\n  }\n\n  .alert--warning {\n    --variant-color-border: var(--syn-alert-warning-color-border);\n    --variant-color-background: var(--syn-alert-warning-color-background);\n    --variant-color-icon: var(--syn-alert-warning-color-icon);\n    --variant-color-indicator: var(--syn-alert-warning-color-indicator);\n  }\n\n  .alert--danger {\n    --variant-color-border: var(--syn-alert-error-color-border);\n    --variant-color-background: var(--syn-alert-error-color-background);\n    --variant-color-icon: var(--syn-alert-error-color-icon);\n    --variant-color-indicator: var(--syn-alert-error-color-indicator);\n  }\n\n  /* #1119: Alert Sizes */\n  .alert--small {\n    --size-font-size: var(--syn-font-size-small);\n    --size-icon-size: var(--syn-font-size-large);\n    --size-min-height: 44px;\n    --size-message-padding: var(--syn-spacing-small) var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-small);\n    --size-icon-padding-block: var(--syn-spacing-small);\n    --size-icon-padding-inline: var(--syn-spacing-small);\n  }\n\n  /* Adjust close button size for small alerts */\n  .alert--small .alert__close-button {\n    font-size: var(--syn-font-size-medium);\n  }\n\n  .alert--large {\n    --size-font-size: var(--syn-font-size-large);\n    --size-icon-size: var(--syn-font-size-2x-large);\n    --size-min-height: 68px;\n    --size-message-padding: var(--syn-spacing-medium-large) var(--syn-spacing-large) var(--syn-spacing-medium-large) var(--syn-spacing-medium-large);\n    --size-icon-padding-block: var(--syn-spacing-medium-large);\n    --size-icon-padding-inline: var(--syn-spacing-medium-large);\n  }\n\n  .alert__timer {\n    display: none;\n  }\n`;\n"],
+  "mappings": ";AAAA,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.KRFWZXI7.js → chunk.VLCNIRQP.js}

@@ -1,21 +1,21 @@
-import {
-  SynIcon
-} from "./chunk.3BNYHBTW.js";
 import {
   breadcrumb_custom_styles_default
 } from "./chunk.32CYREEV.js";
 import {
   breadcrumb_styles_default
 } from "./chunk.WRPQ3635.js";
+import {
+  SynIcon
+} from "./chunk.6GMIINJO.js";
 import {
   LocalizeController
 } from "./chunk.QLETXF4A.js";
 import {
   component_styles_default
-} from "./chunk.FXJLG622.js";
+} from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.BYE5W5XF.js";
+} from "./chunk.FUWJV6FF.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -91,4 +91,4 @@ __decorateClass([
 export {
   SynBreadcrumb
 };
-//# sourceMappingURL=chunk.KRFWZXI7.js.map
+//# sourceMappingURL=chunk.VLCNIRQP.js.map

package/dist/chunks/{chunk.FESJPZKL.js → chunk.VO4T33T2.js}

@@ -1,6 +1,6 @@
 import {
   SynCombobox
-} from "./chunk.T5IJK23O.js";
+} from "./chunk.6EWCMDOQ.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = SynCombobox;
@@ -9,4 +9,4 @@ SynCombobox.define("syn-combobox");
 export {
   combobox_default
 };
-//# sourceMappingURL=chunk.FESJPZKL.js.map
+//# sourceMappingURL=chunk.VO4T33T2.js.map

package/dist/chunks/chunk.VOUZJK5T.js

@@ -0,0 +1,187 @@
+// src/components/checkbox/checkbox.styles.ts
+import { css } from "lit";
+var checkbox_styles_default = css`
+  /* stylelint-disable no-descending-specificity */
+  :host {
+    display: inline-block;
+  }
+
+  .checkbox {
+    align-items: flex-start;
+    color: var(--syn-input-label-color);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: var(--syn-input-font-family);
+    font-weight: var(--syn-input-font-weight);
+    padding: var(--syn-spacing-2x-small) 0; /* #1083: This adds spacing around multi-line labels */
+    position: relative;
+    vertical-align: middle;
+  }
+
+  .checkbox--small {
+    --toggle-size: var(--syn-toggle-size-small);
+
+    font-size: var(--syn-input-font-size-small);
+    padding: var(--syn-spacing-3x-small) 0;
+  }
+
+  .checkbox--medium {
+    --toggle-size: var(--syn-toggle-size-medium);
+
+    font-size: var(--syn-input-font-size-medium);
+  }
+
+  .checkbox--large {
+    --toggle-size: var(--syn-toggle-size-large);
+
+    font-size: var(--syn-input-font-size-large);
+  }
+
+  .checkbox__control {
+    align-items: center;
+    background-color: var(--syn-input-background-color);
+    border: solid var(--syn-input-border-width) var(--syn-input-border-color);
+    border-radius: var(--syn-checkbox-border-radius);
+    color: var(--syn-color-neutral-0);
+    display: inline-flex;
+    flex: 0 0 auto;
+    height: var(--toggle-size);
+    justify-content: center;
+    margin: 0.1em 0; /* #1083: This adds spacing around multi-line labels */
+    position: relative;
+    transition:
+      var(--syn-transition-fast) border-color,
+      var(--syn-transition-fast) background-color,
+      var(--syn-transition-fast) color,
+      var(--syn-transition-fast) box-shadow;
+    width: var(--toggle-size);
+  }
+
+  .checkbox__input {
+    margin: 0;
+    opacity: 0;
+    padding: 0;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  .checkbox__checked-icon,
+  .checkbox__indeterminate-icon {
+    display: inline-flex;
+    height: var(--toggle-size);
+    width: var(--toggle-size);
+  }
+
+  /**
+   * Hover
+   * Applies the hover state to the whole component
+   */
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(.checkbox--readonly):hover .checkbox__control {
+    background-color: var(--syn-input-background-color-hover);
+    border-color: var(--syn-input-border-color-hover);
+  }
+
+  /* Focus */
+  .checkbox:not(.checkbox--disabled):not(.checkbox--readonly) .checkbox__input:focus-visible ~ .checkbox__control {
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
+  }
+
+  /* Checked/indeterminate */
+  .checkbox--checked .checkbox__control,
+  .checkbox--indeterminate .checkbox__control {
+    background-color: var(--syn-interactive-emphasis-color);
+    border-color: var(--syn-interactive-emphasis-color);
+  }
+
+  /**
+   * Checked/indeterminate + hover
+   * Applies the hover state to the whole component
+   */
+  .checkbox.checkbox--checked:not(.checkbox--disabled):not(.checkbox--readonly):hover .checkbox__control,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled):not(.checkbox--readonly):hover .checkbox__control {
+    background-color: var(--syn-interactive-emphasis-color-hover);
+    border-color: var(--syn-interactive-emphasis-color-hover);
+  }
+
+  /*
+   * #443: Add active styles
+   * The checked and unchecked states have different active colors
+   * Note the fallback is defined to match the hover color.
+   * This is done to make sure no active state is shown at all if no active color is defined.
+   * Still better than showing one for the unchecked state but not for the checked state.
+   */
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(.checkbox--readonly):active .checkbox__control {
+    border-color: var(--syn-input-border-color-active);
+  }
+
+  /* Checked/indeterminate */
+  .checkbox.checkbox--checked:not(.checkbox--disabled):not(.checkbox--readonly):active .checkbox__control,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled):not(.checkbox--readonly):active .checkbox__control {
+    background: var(--syn-interactive-emphasis-color-active);
+    border-color: var(--syn-interactive-emphasis-color-active);
+  }
+
+  /** #429: Use token for opacity */
+  .checkbox--disabled {
+    cursor: not-allowed;
+    opacity: var(--syn-input-disabled-opacity);
+  }
+
+  .checkbox__label {
+    align-self: center;
+    color: var(--syn-input-label-color);
+    display: inline-block;
+    line-height: var(--syn-line-height-normal);
+    margin-inline-start: var(--syn-spacing-x-small);
+    user-select: none;
+  }
+
+  :host([required]) .checkbox__label::after {
+    color: var(--syn-input-required-content-color);
+    content: var(--syn-input-required-content);
+    margin-inline-start: var(--syn-input-required-content-offset);
+  }
+
+  :host([data-user-invalid]) .checkbox__control {
+    background: var(--syn-input-border-color-focus-error);
+    border-color: var(--syn-input-border-color-focus-error);
+  }
+
+  /**
+   * #943: When invalid, use a transparent background if not checked or indeterminate
+   */
+  :host([data-user-invalid]:not([checked]):not([indeterminate])) .checkbox__control {
+    background: transparent;
+  }
+
+  /**
+   * #1171: Readonly state
+   */
+  .checkbox.checkbox--readonly {
+    cursor: default;
+  }
+
+  .checkbox.checkbox--readonly .checkbox__label {
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-user-select: auto;
+    user-select: auto;
+  }
+
+  .checkbox.checkbox--readonly .checkbox__control {
+    background: var(--syn-input-readonly-background-color);
+    border-color: var(--syn-input-readonly-background-color);
+    color: var(--syn-readonly-indicator-color);
+    cursor: default;
+  }
+
+  .checkbox.checkbox--readonly .checkbox__input:focus ~ .checkbox__control {
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
+  }
+`;
+
+export {
+  checkbox_styles_default
+};
+//# sourceMappingURL=chunk.VOUZJK5T.js.map

package/dist/chunks/chunk.VOUZJK5T.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  /* stylelint-disable no-descending-specificity */\n  :host {\n    display: inline-block;\n  }\n\n  .checkbox {\n    align-items: flex-start;\n    color: var(--syn-input-label-color);\n    cursor: pointer;\n    display: inline-flex;\n    font-family: var(--syn-input-font-family);\n    font-weight: var(--syn-input-font-weight);\n    padding: var(--syn-spacing-2x-small) 0; /* #1083: This adds spacing around multi-line labels */\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .checkbox--small {\n    --toggle-size: var(--syn-toggle-size-small);\n\n    font-size: var(--syn-input-font-size-small);\n    padding: var(--syn-spacing-3x-small) 0;\n  }\n\n  .checkbox--medium {\n    --toggle-size: var(--syn-toggle-size-medium);\n\n    font-size: var(--syn-input-font-size-medium);\n  }\n\n  .checkbox--large {\n    --toggle-size: var(--syn-toggle-size-large);\n\n    font-size: var(--syn-input-font-size-large);\n  }\n\n  .checkbox__control {\n    align-items: center;\n    background-color: var(--syn-input-background-color);\n    border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n    border-radius: var(--syn-checkbox-border-radius);\n    color: var(--syn-color-neutral-0);\n    display: inline-flex;\n    flex: 0 0 auto;\n    height: var(--toggle-size);\n    justify-content: center;\n    margin: 0.1em 0; /* #1083: This adds spacing around multi-line labels */\n    position: relative;\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    width: var(--toggle-size);\n  }\n\n  .checkbox__input {\n    margin: 0;\n    opacity: 0;\n    padding: 0;\n    pointer-events: none;\n    position: absolute;\n  }\n\n  .checkbox__checked-icon,\n  .checkbox__indeterminate-icon {\n    display: inline-flex;\n    height: var(--toggle-size);\n    width: var(--toggle-size);\n  }\n\n  /**\n   * Hover\n   * Applies the hover state to the whole component\n   */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(.checkbox--readonly):hover .checkbox__control {\n    background-color: var(--syn-input-background-color-hover);\n    border-color: var(--syn-input-border-color-hover);\n  }\n\n  /* Focus */\n  .checkbox:not(.checkbox--disabled):not(.checkbox--readonly) .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    background-color: var(--syn-interactive-emphasis-color);\n    border-color: var(--syn-interactive-emphasis-color);\n  }\n\n  /**\n   * Checked/indeterminate + hover\n   * Applies the hover state to the whole component\n   */\n  .checkbox.checkbox--checked:not(.checkbox--disabled):not(.checkbox--readonly):hover .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled):not(.checkbox--readonly):hover .checkbox__control {\n    background-color: var(--syn-interactive-emphasis-color-hover);\n    border-color: var(--syn-interactive-emphasis-color-hover);\n  }\n\n  /*\n   * #443: Add active styles\n   * The checked and unchecked states have different active colors\n   * Note the fallback is defined to match the hover color.\n   * This is done to make sure no active state is shown at all if no active color is defined.\n   * Still better than showing one for the unchecked state but not for the checked state.\n   */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(.checkbox--readonly):active .checkbox__control {\n    border-color: var(--syn-input-border-color-active);\n  }\n\n  /* Checked/indeterminate */\n  .checkbox.checkbox--checked:not(.checkbox--disabled):not(.checkbox--readonly):active .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled):not(.checkbox--readonly):active .checkbox__control {\n    background: var(--syn-interactive-emphasis-color-active);\n    border-color: var(--syn-interactive-emphasis-color-active);\n  }\n\n  /** #429: Use token for opacity */\n  .checkbox--disabled {\n    cursor: not-allowed;\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .checkbox__label {\n    align-self: center;\n    color: var(--syn-input-label-color);\n    display: inline-block;\n    line-height: var(--syn-line-height-normal);\n    margin-inline-start: var(--syn-spacing-x-small);\n    user-select: none;\n  }\n\n  :host([required]) .checkbox__label::after {\n    color: var(--syn-input-required-content-color);\n    content: var(--syn-input-required-content);\n    margin-inline-start: var(--syn-input-required-content-offset);\n  }\n\n  :host([data-user-invalid]) .checkbox__control {\n    background: var(--syn-input-border-color-focus-error);\n    border-color: var(--syn-input-border-color-focus-error);\n  }\n\n  /**\n   * #943: When invalid, use a transparent background if not checked or indeterminate\n   */\n  :host([data-user-invalid]:not([checked]):not([indeterminate])) .checkbox__control {\n    background: transparent;\n  }\n\n  /**\n   * #1171: Readonly state\n   */\n  .checkbox.checkbox--readonly {\n    cursor: default;\n  }\n\n  .checkbox.checkbox--readonly .checkbox__label {\n    /* stylelint-disable-next-line property-no-vendor-prefix */\n    -webkit-user-select: auto;\n    user-select: auto;\n  }\n\n  .checkbox.checkbox--readonly .checkbox__control {\n    background: var(--syn-input-readonly-background-color);\n    border-color: var(--syn-input-readonly-background-color);\n    color: var(--syn-readonly-indicator-color);\n    cursor: default;\n  }\n\n  .checkbox.checkbox--readonly .checkbox__input:focus ~ .checkbox__control {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.CKCAQK4L.js → chunk.W4UYS7NY.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.YAKMH4QL.js";
+} from "./chunk.OF4BZKDQ.js";
 
 // src/components/nav-item/nav-item.ts
 var nav_item_default = SynNavItem;
@@ -9,4 +9,4 @@ SynNavItem.define("syn-nav-item");
 export {
   nav_item_default
 };
-//# sourceMappingURL=chunk.CKCAQK4L.js.map
+//# sourceMappingURL=chunk.W4UYS7NY.js.map

package/dist/chunks/{chunk.3XGSZICI.js → chunk.WAFGHUVD.js}

@@ -1,6 +1,6 @@
 import {
   SynTabPanel
-} from "./chunk.A2WIAKI6.js";
+} from "./chunk.DQIPVU4J.js";
 
 // src/components/tab-panel/tab-panel.ts
 var tab_panel_default = SynTabPanel;
@@ -9,4 +9,4 @@ SynTabPanel.define("syn-tab-panel");
 export {
   tab_panel_default
 };
-//# sourceMappingURL=chunk.3XGSZICI.js.map
+//# sourceMappingURL=chunk.WAFGHUVD.js.map

package/dist/chunks/{chunk.XJTZAA2Z.js → chunk.WDW65L3W.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.RFZFX5DB.js";
+} from "./chunk.IR3P3QGG.js";
 
 // src/components/radio-group/radio-group.ts
 var radio_group_default = SynRadioGroup;
@@ -9,4 +9,4 @@ SynRadioGroup.define("syn-radio-group");
 export {
   radio_group_default
 };
-//# sourceMappingURL=chunk.XJTZAA2Z.js.map
+//# sourceMappingURL=chunk.WDW65L3W.js.map

package/dist/chunks/{chunk.CRK3CDIA.js → chunk.WVO75K4L.js}

@@ -12,10 +12,10 @@ import {
 } from "./chunk.SMIMHADA.js";
 import {
   component_styles_default
-} from "./chunk.FXJLG622.js";
+} from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.BYE5W5XF.js";
+} from "./chunk.FUWJV6FF.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -120,4 +120,4 @@ __decorateClass([
 export {
   SynBreadcrumbItem
 };
-//# sourceMappingURL=chunk.CRK3CDIA.js.map
+//# sourceMappingURL=chunk.WVO75K4L.js.map

package/dist/chunks/{chunk.FAHK4E5U.js → chunk.XHZZLHOD.js}

@@ -1,6 +1,6 @@
 import {
   SynAlert
-} from "./chunk.LAS6ZMG3.js";
+} from "./chunk.N2YN3NX6.js";
 
 // src/components/alert/alert.ts
 var alert_default = SynAlert;
@@ -9,4 +9,4 @@ SynAlert.define("syn-alert");
 export {
   alert_default
 };
-//# sourceMappingURL=chunk.FAHK4E5U.js.map
+//# sourceMappingURL=chunk.XHZZLHOD.js.map

package/dist/chunks/{chunk.NK4LRKZH.js → chunk.XJSWRSR5.js}

@@ -1,6 +1,6 @@
 import {
   SynTooltip
-} from "./chunk.FIRUUZ72.js";
+} from "./chunk.MTRKCZX4.js";
 
 // src/components/tooltip/tooltip.ts
 var tooltip_default = SynTooltip;
@@ -9,4 +9,4 @@ SynTooltip.define("syn-tooltip");
 export {
   tooltip_default
 };
-//# sourceMappingURL=chunk.NK4LRKZH.js.map
+//# sourceMappingURL=chunk.XJSWRSR5.js.map

package/dist/chunks/{chunk.JRG45QJG.js → chunk.YFDRVJUV.js}

@@ -9,10 +9,10 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   component_styles_default
-} from "./chunk.FXJLG622.js";
+} from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.BYE5W5XF.js";
+} from "./chunk.FUWJV6FF.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -60,4 +60,4 @@ __decorateClass([
 export {
   SynCard
 };
-//# sourceMappingURL=chunk.JRG45QJG.js.map
+//# sourceMappingURL=chunk.YFDRVJUV.js.map

package/dist/chunks/{chunk.LWPDGLHA.js → chunk.YFETCWLT.js}

@@ -1,18 +1,18 @@
-import {
-  spinner_custom_styles_default
-} from "./chunk.WQMTAEYE.js";
 import {
   spinner_styles_default
 } from "./chunk.7V7XEBE2.js";
+import {
+  spinner_custom_styles_default
+} from "./chunk.WQMTAEYE.js";
 import {
   LocalizeController
 } from "./chunk.QLETXF4A.js";
 import {
   component_styles_default
-} from "./chunk.FXJLG622.js";
+} from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.BYE5W5XF.js";
+} from "./chunk.FUWJV6FF.js";
 
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -35,4 +35,4 @@ SynSpinner.styles = [component_styles_default, spinner_styles_default, spinner_c
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.LWPDGLHA.js.map
+//# sourceMappingURL=chunk.YFETCWLT.js.map

package/dist/chunks/{chunk.TMIMLIC2.js → chunk.ZBHF3VT7.js}

@@ -1,6 +1,6 @@
 import {
   SynDropdown
-} from "./chunk.YDGDQPP5.js";
+} from "./chunk.SEGXW66J.js";
 
 // src/components/dropdown/dropdown.ts
 var dropdown_default = SynDropdown;
@@ -9,4 +9,4 @@ SynDropdown.define("syn-dropdown");
 export {
   dropdown_default
 };
-//# sourceMappingURL=chunk.TMIMLIC2.js.map
+//# sourceMappingURL=chunk.ZBHF3VT7.js.map

package/dist/chunks/{chunk.YWLPEZQC.js → chunk.ZCUQMK2T.js}

@@ -1,6 +1,6 @@
 import {
   SynRangeTick
-} from "./chunk.TJGW3F7V.js";
+} from "./chunk.DHCEQX56.js";
 
 // src/components/range-tick/range-tick.ts
 var range_tick_default = SynRangeTick;
@@ -9,4 +9,4 @@ SynRangeTick.define("syn-range-tick");
 export {
   range_tick_default
 };
-//# sourceMappingURL=chunk.YWLPEZQC.js.map
+//# sourceMappingURL=chunk.ZCUQMK2T.js.map

package/dist/chunks/{chunk.MCD4BAD3.js → chunk.ZEBIZ2UZ.js}

@@ -4,18 +4,18 @@ import {
 import {
   HasSlotController
 } from "./chunk.CHFWLQN5.js";
+import {
+  enableDefaultSettings
+} from "./chunk.4BEGBAQD.js";
 import {
   watch
 } from "./chunk.SMIMHADA.js";
-import {
-  enableDefaultSettings
-} from "./chunk.YACUYJZN.js";
 import {
   component_styles_default
-} from "./chunk.FXJLG622.js";
+} from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.BYE5W5XF.js";
+} from "./chunk.FUWJV6FF.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -138,4 +138,4 @@ SynRadioButton = __decorateClass([
 export {
   SynRadioButton
 };
-//# sourceMappingURL=chunk.MCD4BAD3.js.map
+//# sourceMappingURL=chunk.ZEBIZ2UZ.js.map

package/dist/chunks/{chunk.VTL7TKW3.js → chunk.ZKCT75DI.js}

@@ -9,10 +9,10 @@ import {
 } from "./chunk.QLETXF4A.js";
 import {
   component_styles_default
-} from "./chunk.FXJLG622.js";
+} from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.BYE5W5XF.js";
+} from "./chunk.FUWJV6FF.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -76,4 +76,4 @@ __decorateClass([
 export {
   SynProgressRing
 };
-//# sourceMappingURL=chunk.VTL7TKW3.js.map
+//# sourceMappingURL=chunk.ZKCT75DI.js.map