@synergy-design-system/components 3.4.0 → 3.5.0

package/dist/chunks/{chunk.IM54DI3K.js → chunk.KEO5PHF2.js}

@@ -213,20 +213,26 @@ var range_styles_default = css`
     cursor: not-allowed;
   }
 
+  :host([readonly]) .track__wrapper,
+  :host([readonly]) .thumb,
+  :host([readonly]) .thumb.grabbed {
+    cursor: default;
+  }
+
   /*
    * Guard against mobile devices not removing the transform
    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover
    */
   @media (any-hover: hover) {
-    :host(:not([disabled])) .thumb:hover  {
+    :host(:not([disabled]):not([readonly])) .thumb:hover  {
       transform: scale(var(--thumb-hit-area-size));
     }
 
-    :host(:not([disabled])) .thumb:not(.grabbed):hover  {
+    :host(:not([disabled]):not([readonly])) .thumb:not(.grabbed):hover  {
       background: var(--syn-interactive-emphasis-color-hover);
     }
     
-    :host(:not([disabled])) .thumb:hover::after  {
+    :host(:not([disabled]):not([readonly])) .thumb:hover::after  {
       /* Unset the area of the thumb click and drag area space, so it does not scale with the hover */
       inset: unset;
     }
@@ -282,9 +288,27 @@ var range_styles_default = css`
   :host([data-user-invalid]) .thumb {
     background-color: var(--syn-range-error-color);
   }
+
+  /**
+   * #1176: Readonly state
+   */
+  :host([readonly]) {
+    --track-color-active: var(--syn-readonly-indicator-color);
+    --track-color-inactive: var(--syn-readonly-background-color);
+  }
+
+  :host([readonly]) .thumb {
+    background-color: var(--syn-readonly-indicator-color);
+  }
+
+  :host([readonly]) .thumb:focus {
+    background-color: var(--syn-readonly-indicator-color);
+    outline: var(--syn-focus-ring);
+    outline-offset: 0;
+  }
 `;
 
 export {
   range_styles_default
 };
-//# sourceMappingURL=chunk.IM54DI3K.js.map
+//# sourceMappingURL=chunk.KEO5PHF2.js.map

package/dist/chunks/{chunk.IM54DI3K.js.map → chunk.KEO5PHF2.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/range/range.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    /*\n     * Values here apply for the default size of \"medium\"\n     * For other sizes, see below\n     */\n    --thumb-size: var(--syn-spacing-medium);\n    --thumb-hit-area-size: 1.4;\n    --track-hit-area-size: var(--syn-spacing-medium);\n    --track-active-offset: 0px;\n    --track-color-active: var(--syn-range-track-color-active);\n    --track-color-inactive: var(--syn-range-color-inactive);\n    --track-height: var(--syn-spacing-2x-small);\n\n    /* This is needed to get the full with of the element, including the border */\n    --full-thumb-size: calc(var(--thumb-size) + (var(--syn-focus-ring-width) * 2));\n\n    /*\n     * There are multiple places where we need the half width of the thumb\n     * This is needed for example to position the knob on the track or\n     * provide the spacing to the left and right for the track to make it stand \"over\"\n     */\n    --half-thumb-size: calc(var(--full-thumb-size) / 2);\n  }\n\n  /* Sizes */\n  :host([size='small']) {\n    --thumb-size: var(--syn-spacing-small);\n  }\n\n  :host([size='large']) {\n    --thumb-size: var(--syn-spacing-medium-large);\n  }\n\n  .form-control {\n    align-items: stretch;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    writing-mode: horizontal-tb;\n  }\n\n  .base {\n    align-items: center;\n    cursor: text;\n    display: inline-flex;\n    flex: 1 1 auto;\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    justify-content: start;\n    letter-spacing: var(--syn-input-letter-spacing);\n    position: relative;\n    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */\n    touch-action: none; /* Prevent misbehavior in mobile by disabling native touch */\n    -webkit-touch-callout: none;\n    transition: var(--syn-transition-fast) color, var(--syn-transition-fast) border, var(--syn-transition-fast) box-shadow, var(--syn-transition-fast) background-color;\n    /* stylelint-disable-next-line property-no-vendor-prefix */\n    -webkit-user-select: none;\n    vertical-align: middle;\n    width: 100%;\n  }\n\n  .input__wrapper {\n    flex: 1 0 auto;\n    margin: 0 var(--half-thumb-size);\n    position: relative;\n  }\n\n  :host([disabled]) .base {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .input__prefix,\n  .input__suffix {\n    align-items: center;\n    color: var(--syn-input-icon-color);\n    cursor: default;\n    display: inline-flex;\n    flex: 0 0 auto;\n  }\n\n  /* Sizing for the prefix and suffix */\n  .form-control--small .input__prefix ::slotted(*) {\n    font-size: var(--syn-input-font-size-small);\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .form-control--small .input__suffix ::slotted(*) {\n    font-size: var(--syn-input-font-size-small);\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .form-control--medium .input__prefix ::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .form-control--medium .input__suffix ::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .form-control--large .input__prefix ::slotted(*) {\n    font-size: var(--syn-input-font-size-large);\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .form-control--large .input__suffix ::slotted(*) {\n    font-size: var(--syn-input-font-size-large);\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .form-control--small .input__prefix ::slotted(syn-icon),\n  .form-control--small .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n  }\n\n  .form-control--medium .input__prefix ::slotted(syn-icon),\n  .form-control--medium .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n  }\n  \n  .form-control--large .input__prefix ::slotted(syn-icon),\n  .form-control--large .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-2x-large);\n  }\n\n  .track__wrapper {\n    cursor: pointer;\n    position: relative;\n  }\n\n  /* Internal helper for a better click surface on tracks */\n  .track__click-helper {\n    inset: calc(var(--track-hit-area-size) * -1) calc(var(--half-thumb-size) * -1);\n    position: absolute;\n  }\n\n  .track {\n    background-color: var(--track-color-inactive);\n    border-radius: var(--syn-border-radius-pill);\n    height: var(--track-height);\n    margin: calc((var(--full-thumb-size) - var(--track-height)) / 2) calc(var(--half-thumb-size) * -1);\n  }\n\n  .active-track {\n    background-color: var(--track-color-active);\n    border-radius: var(--syn-border-radius-pill);\n    height: var(--track-height);\n    margin: 0 calc(var(--half-thumb-size) * -1);\n    position: absolute;\n    top: 0;\n    z-index: 2;\n  }\n\n  .thumb {\n    background-color: var(--syn-interactive-emphasis-color);\n    border: var(--syn-focus-ring-width) solid var(--syn-input-border-color-offset);\n    border-radius: var(--syn-border-radius-circle);\n    cursor: pointer;\n    display: block;\n    height: var(--full-thumb-size);\n    position: absolute;\n    top: 0;\n    transition: transform var(--syn-transition-fast) ease-in-out, background-color var(--syn-transition-fast) ease-in-out, box-shadow var(--syn-transition-fast) ease-in-out;\n    user-select: none;\n    width: var(--full-thumb-size);\n    z-index: 3;\n  }\n\n  /**\n   * Adds some space to the thumb that makes it easier to click and drag\n   */\n  .thumb::after {\n    background: transparent;\n    border-radius: var(--syn-border-radius-circle);\n    content: \"\";\n    display: block;\n  \n    /* The --thumb-size needs to be used to subtract from, because the border of the thumb is not calculated into the inset */\n    inset: calc((var(--thumb-size) - (var(--full-thumb-size) * var(--thumb-hit-area-size)) ) / 2);\n\n    /* This is needed as we also attach a pointerleave listener that stops */\n    pointer-events: none;\n    position: absolute;\n  }\n\n  .thumb:hover {\n    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */\n    cursor: grab;\n  }\n\n  .thumb.grabbed {\n    background: var(--syn-interactive-emphasis-color-active);\n    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */\n    cursor: grabbing;\n  }\n\n  .thumb:focus-visible {\n    outline: none;\n  }\n\n  .thumb:not(.grabbed):focus-visible {\n    background: var(--syn-interactive-emphasis-color-hover);\n    outline: var(--syn-focus-ring);\n    outline-offset: 0;\n  }\n\n  :host([disabled]) .track__wrapper,\n  :host([disabled]) .thumb,\n  :host([disabled]) .thumb.grabbed {\n    cursor: not-allowed;\n  }\n\n  /*\n   * Guard against mobile devices not removing the transform\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover\n   */\n  @media (any-hover: hover) {\n    :host(:not([disabled])) .thumb:hover  {\n      transform: scale(var(--thumb-hit-area-size));\n    }\n\n    :host(:not([disabled])) .thumb:not(.grabbed):hover  {\n      background: var(--syn-interactive-emphasis-color-hover);\n    }\n    \n    :host(:not([disabled])) .thumb:hover::after  {\n      /* Unset the area of the thumb click and drag area space, so it does not scale with the hover */\n      inset: unset;\n    }\n  }\n\n  /* Ticks */\n  .ticks {\n    cursor: pointer;\n    margin: 1px 0;\n    position: relative;\n    user-select: none;\n  }\n\n  .form-control--small .ticks ::slotted(*) {\n    font-size: var(--syn-font-size-small);\n  }\n\n  .form-control--large .ticks ::slotted(*) {\n    font-size: var(--syn-font-size-large);\n  }\n\n  /**\n   * Visually hide elements without display:none to make aria and other accessibility stuff work correctly\n   * This is necessary for accessibility reasons and e.g. for the native html input validation popup to be\n   * shown.\n   */\n  .visually-hidden {\n    border: 0;\n    /* stylelint-disable-next-line property-no-deprecated */\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  /**\n   * Position the validation input to the bottom and center of the range track\n   */\n  .range__validation-input {\n    bottom: 0;\n    left: 50%;\n  }\n  \n\n  :host([data-user-invalid]) .active-track {\n    --track-color-active: var(--syn-range-error-color);\n  }\n\n  :host([data-user-invalid]) .thumb {\n    background-color: var(--syn-range-error-color);\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    /*\n     * Values here apply for the default size of \"medium\"\n     * For other sizes, see below\n     */\n    --thumb-size: var(--syn-spacing-medium);\n    --thumb-hit-area-size: 1.4;\n    --track-hit-area-size: var(--syn-spacing-medium);\n    --track-active-offset: 0px;\n    --track-color-active: var(--syn-range-track-color-active);\n    --track-color-inactive: var(--syn-range-color-inactive);\n    --track-height: var(--syn-spacing-2x-small);\n\n    /* This is needed to get the full with of the element, including the border */\n    --full-thumb-size: calc(var(--thumb-size) + (var(--syn-focus-ring-width) * 2));\n\n    /*\n     * There are multiple places where we need the half width of the thumb\n     * This is needed for example to position the knob on the track or\n     * provide the spacing to the left and right for the track to make it stand \"over\"\n     */\n    --half-thumb-size: calc(var(--full-thumb-size) / 2);\n  }\n\n  /* Sizes */\n  :host([size='small']) {\n    --thumb-size: var(--syn-spacing-small);\n  }\n\n  :host([size='large']) {\n    --thumb-size: var(--syn-spacing-medium-large);\n  }\n\n  .form-control {\n    align-items: stretch;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    writing-mode: horizontal-tb;\n  }\n\n  .base {\n    align-items: center;\n    cursor: text;\n    display: inline-flex;\n    flex: 1 1 auto;\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    justify-content: start;\n    letter-spacing: var(--syn-input-letter-spacing);\n    position: relative;\n    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */\n    touch-action: none; /* Prevent misbehavior in mobile by disabling native touch */\n    -webkit-touch-callout: none;\n    transition: var(--syn-transition-fast) color, var(--syn-transition-fast) border, var(--syn-transition-fast) box-shadow, var(--syn-transition-fast) background-color;\n    /* stylelint-disable-next-line property-no-vendor-prefix */\n    -webkit-user-select: none;\n    vertical-align: middle;\n    width: 100%;\n  }\n\n  .input__wrapper {\n    flex: 1 0 auto;\n    margin: 0 var(--half-thumb-size);\n    position: relative;\n  }\n\n  :host([disabled]) .base {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .input__prefix,\n  .input__suffix {\n    align-items: center;\n    color: var(--syn-input-icon-color);\n    cursor: default;\n    display: inline-flex;\n    flex: 0 0 auto;\n  }\n\n  /* Sizing for the prefix and suffix */\n  .form-control--small .input__prefix ::slotted(*) {\n    font-size: var(--syn-input-font-size-small);\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .form-control--small .input__suffix ::slotted(*) {\n    font-size: var(--syn-input-font-size-small);\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .form-control--medium .input__prefix ::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .form-control--medium .input__suffix ::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .form-control--large .input__prefix ::slotted(*) {\n    font-size: var(--syn-input-font-size-large);\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .form-control--large .input__suffix ::slotted(*) {\n    font-size: var(--syn-input-font-size-large);\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .form-control--small .input__prefix ::slotted(syn-icon),\n  .form-control--small .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n  }\n\n  .form-control--medium .input__prefix ::slotted(syn-icon),\n  .form-control--medium .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n  }\n  \n  .form-control--large .input__prefix ::slotted(syn-icon),\n  .form-control--large .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-2x-large);\n  }\n\n  .track__wrapper {\n    cursor: pointer;\n    position: relative;\n  }\n\n  /* Internal helper for a better click surface on tracks */\n  .track__click-helper {\n    inset: calc(var(--track-hit-area-size) * -1) calc(var(--half-thumb-size) * -1);\n    position: absolute;\n  }\n\n  .track {\n    background-color: var(--track-color-inactive);\n    border-radius: var(--syn-border-radius-pill);\n    height: var(--track-height);\n    margin: calc((var(--full-thumb-size) - var(--track-height)) / 2) calc(var(--half-thumb-size) * -1);\n  }\n\n  .active-track {\n    background-color: var(--track-color-active);\n    border-radius: var(--syn-border-radius-pill);\n    height: var(--track-height);\n    margin: 0 calc(var(--half-thumb-size) * -1);\n    position: absolute;\n    top: 0;\n    z-index: 2;\n  }\n\n  .thumb {\n    background-color: var(--syn-interactive-emphasis-color);\n    border: var(--syn-focus-ring-width) solid var(--syn-input-border-color-offset);\n    border-radius: var(--syn-border-radius-circle);\n    cursor: pointer;\n    display: block;\n    height: var(--full-thumb-size);\n    position: absolute;\n    top: 0;\n    transition: transform var(--syn-transition-fast) ease-in-out, background-color var(--syn-transition-fast) ease-in-out, box-shadow var(--syn-transition-fast) ease-in-out;\n    user-select: none;\n    width: var(--full-thumb-size);\n    z-index: 3;\n  }\n\n  /**\n   * Adds some space to the thumb that makes it easier to click and drag\n   */\n  .thumb::after {\n    background: transparent;\n    border-radius: var(--syn-border-radius-circle);\n    content: \"\";\n    display: block;\n  \n    /* The --thumb-size needs to be used to subtract from, because the border of the thumb is not calculated into the inset */\n    inset: calc((var(--thumb-size) - (var(--full-thumb-size) * var(--thumb-hit-area-size)) ) / 2);\n\n    /* This is needed as we also attach a pointerleave listener that stops */\n    pointer-events: none;\n    position: absolute;\n  }\n\n  .thumb:hover {\n    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */\n    cursor: grab;\n  }\n\n  .thumb.grabbed {\n    background: var(--syn-interactive-emphasis-color-active);\n    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */\n    cursor: grabbing;\n  }\n\n  .thumb:focus-visible {\n    outline: none;\n  }\n\n  .thumb:not(.grabbed):focus-visible {\n    background: var(--syn-interactive-emphasis-color-hover);\n    outline: var(--syn-focus-ring);\n    outline-offset: 0;\n  }\n\n  :host([disabled]) .track__wrapper,\n  :host([disabled]) .thumb,\n  :host([disabled]) .thumb.grabbed {\n    cursor: not-allowed;\n  }\n\n  :host([readonly]) .track__wrapper,\n  :host([readonly]) .thumb,\n  :host([readonly]) .thumb.grabbed {\n    cursor: default;\n  }\n\n  /*\n   * Guard against mobile devices not removing the transform\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover\n   */\n  @media (any-hover: hover) {\n    :host(:not([disabled]):not([readonly])) .thumb:hover  {\n      transform: scale(var(--thumb-hit-area-size));\n    }\n\n    :host(:not([disabled]):not([readonly])) .thumb:not(.grabbed):hover  {\n      background: var(--syn-interactive-emphasis-color-hover);\n    }\n    \n    :host(:not([disabled]):not([readonly])) .thumb:hover::after  {\n      /* Unset the area of the thumb click and drag area space, so it does not scale with the hover */\n      inset: unset;\n    }\n  }\n\n  /* Ticks */\n  .ticks {\n    cursor: pointer;\n    margin: 1px 0;\n    position: relative;\n    user-select: none;\n  }\n\n  .form-control--small .ticks ::slotted(*) {\n    font-size: var(--syn-font-size-small);\n  }\n\n  .form-control--large .ticks ::slotted(*) {\n    font-size: var(--syn-font-size-large);\n  }\n\n  /**\n   * Visually hide elements without display:none to make aria and other accessibility stuff work correctly\n   * This is necessary for accessibility reasons and e.g. for the native html input validation popup to be\n   * shown.\n   */\n  .visually-hidden {\n    border: 0;\n    /* stylelint-disable-next-line property-no-deprecated */\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  /**\n   * Position the validation input to the bottom and center of the range track\n   */\n  .range__validation-input {\n    bottom: 0;\n    left: 50%;\n  }\n  \n\n  :host([data-user-invalid]) .active-track {\n    --track-color-active: var(--syn-range-error-color);\n  }\n\n  :host([data-user-invalid]) .thumb {\n    background-color: var(--syn-range-error-color);\n  }\n\n  /**\n   * #1176: Readonly state\n   */\n  :host([readonly]) {\n    --track-color-active: var(--syn-readonly-indicator-color);\n    --track-color-inactive: var(--syn-readonly-background-color);\n  }\n\n  :host([readonly]) .thumb {\n    background-color: var(--syn-readonly-indicator-color);\n  }\n\n  :host([readonly]) .thumb:focus {\n    background-color: var(--syn-readonly-indicator-color);\n    outline: var(--syn-focus-ring);\n    outline-offset: 0;\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.UNEKO4DQ.js → chunk.KGECDG22.js}

@@ -1,6 +1,6 @@
 import {
   SynSwitch
-} from "./chunk.XNWASDT5.js";
+} from "./chunk.EX4R7WUE.js";
 
 // src/components/switch/switch.ts
 var switch_default = SynSwitch;
@@ -9,4 +9,4 @@ SynSwitch.define("syn-switch");
 export {
   switch_default
 };
-//# sourceMappingURL=chunk.UNEKO4DQ.js.map
+//# sourceMappingURL=chunk.KGECDG22.js.map

package/dist/chunks/{chunk.HLBSU5HB.js → chunk.KT6MHQM6.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.YOFWLXEH.js";
 import {
   SynPopup
-} from "./chunk.PFYIQKRP.js";
+} from "./chunk.GIEAMHSU.js";
 import {
   waitForEvent
 } from "./chunk.LQDIH4Z5.js";
@@ -27,10 +27,10 @@ import {
 } from "./chunk.SMIMHADA.js";
 import {
   component_styles_default
-} from "./chunk.FXJLG622.js";
+} from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.XBQWANZE.js";
+} from "./chunk.V4GFOKBI.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -270,4 +270,4 @@ setDefaultAnimation("tooltip.hide", {
 export {
   SynTooltip
 };
-//# sourceMappingURL=chunk.HLBSU5HB.js.map
+//# sourceMappingURL=chunk.KT6MHQM6.js.map

package/dist/chunks/{chunk.FBC4N7NR.js → chunk.KUTXV7RO.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.XBQWANZE.js";
+} from "./chunk.V4GFOKBI.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -60,4 +60,4 @@ __decorateClass([
 export {
   SynCard
 };
-//# sourceMappingURL=chunk.FBC4N7NR.js.map
+//# sourceMappingURL=chunk.KUTXV7RO.js.map

package/dist/chunks/{chunk.J6VJSOK2.js → chunk.LALGMGC2.js}

@@ -1,6 +1,6 @@
 import {
   SynOptgroup
-} from "./chunk.QC4VGSZW.js";
+} from "./chunk.MCKS4JLW.js";
 
 // src/components/optgroup/optgroup.ts
 var optgroup_default = SynOptgroup;
@@ -9,4 +9,4 @@ SynOptgroup.define("syn-optgroup");
 export {
   optgroup_default
 };
-//# sourceMappingURL=chunk.J6VJSOK2.js.map
+//# sourceMappingURL=chunk.LALGMGC2.js.map

package/dist/chunks/{chunk.XAZXQY2M.js → chunk.LKMV5MVK.js}

@@ -1,12 +1,12 @@
-import {
-  dialog_styles_default
-} from "./chunk.PN64BR66.js";
 import {
   Modal
 } from "./chunk.P4JFVVSO.js";
 import {
   dialog_custom_styles_default
 } from "./chunk.EHZBQTCT.js";
+import {
+  dialog_styles_default
+} from "./chunk.PN64BR66.js";
 import {
   lockBodyScrolling,
   unlockBodyScrolling
@@ -16,7 +16,7 @@ import {
 } from "./chunk.WXVOTRW5.js";
 import {
   SynIconButton
-} from "./chunk.MQG45CA3.js";
+} from "./chunk.FKDUVEOP.js";
 import {
   waitForEvent
 } from "./chunk.LQDIH4Z5.js";
@@ -39,10 +39,10 @@ import {
 } from "./chunk.SMIMHADA.js";
 import {
   component_styles_default
-} from "./chunk.FXJLG622.js";
+} from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.XBQWANZE.js";
+} from "./chunk.V4GFOKBI.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -292,4 +292,4 @@ setDefaultAnimation("dialog.overlay.hide", {
 export {
   SynDialog
 };
-//# sourceMappingURL=chunk.XAZXQY2M.js.map
+//# sourceMappingURL=chunk.LKMV5MVK.js.map

package/dist/chunks/{chunk.C4N7J54S.js → chunk.MCAB6KY5.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.XBQWANZE.js";
+} from "./chunk.V4GFOKBI.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -68,4 +68,4 @@ __decorateClass([
 export {
   SynProgressBar
 };
-//# sourceMappingURL=chunk.C4N7J54S.js.map
+//# sourceMappingURL=chunk.MCAB6KY5.js.map

package/dist/chunks/{chunk.QC4VGSZW.js → chunk.MCKS4JLW.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.3T6ULO23.js";
 import {
   SynDivider
-} from "./chunk.TWCC2CP6.js";
+} from "./chunk.VH6SKOPX.js";
 import {
   HasSlotController
 } from "./chunk.CHFWLQN5.js";
 import {
   SynergyElement
-} from "./chunk.XBQWANZE.js";
+} from "./chunk.V4GFOKBI.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -131,4 +131,4 @@ __decorateClass([
 export {
   SynOptgroup
 };
-//# sourceMappingURL=chunk.QC4VGSZW.js.map
+//# sourceMappingURL=chunk.MCKS4JLW.js.map

package/dist/chunks/{chunk.HUPHWV4R.js → chunk.MJA5HEFN.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.XBQWANZE.js";
+} from "./chunk.V4GFOKBI.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -120,4 +120,4 @@ __decorateClass([
 export {
   SynBreadcrumbItem
 };
-//# sourceMappingURL=chunk.HUPHWV4R.js.map
+//# sourceMappingURL=chunk.MJA5HEFN.js.map

package/dist/chunks/{chunk.ZV4CF3ZJ.js → chunk.MZJLG4BF.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.XBQWANZE.js";
+} from "./chunk.V4GFOKBI.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -76,4 +76,4 @@ __decorateClass([
 export {
   SynProgressRing
 };
-//# sourceMappingURL=chunk.ZV4CF3ZJ.js.map
+//# sourceMappingURL=chunk.MZJLG4BF.js.map

package/dist/chunks/{chunk.H7S3NKK3.js → chunk.N4Y2OUEA.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumbItem
-} from "./chunk.HUPHWV4R.js";
+} from "./chunk.MJA5HEFN.js";
 
 // src/components/breadcrumb-item/breadcrumb-item.ts
 var breadcrumb_item_default = SynBreadcrumbItem;
@@ -9,4 +9,4 @@ SynBreadcrumbItem.define("syn-breadcrumb-item");
 export {
   breadcrumb_item_default
 };
-//# sourceMappingURL=chunk.H7S3NKK3.js.map
+//# sourceMappingURL=chunk.N4Y2OUEA.js.map

package/dist/chunks/{chunk.KPHDBL43.js → chunk.NDJJVGQL.js}

@@ -1,27 +1,29 @@
 // src/components/textarea/textarea.styles.ts
 import { css } from "lit";
 var textarea_styles_default = css`
-	/* stylelint-disable */
+  /* stylelint-disable no-descending-specificity */
+  /* stylelint-disable plugin/no-unsupported-browser-features */
+  /* stylelint-disable property-no-vendor-prefix */
   :host {
     display: block;
   }
 
   .textarea {
-    display: grid;
     align-items: center;
-    position: relative;
-    width: 100%;
+    cursor: text;
+    display: grid;
     font-family: var(--syn-input-font-family);
     font-weight: var(--syn-input-font-weight);
-    line-height: var(--syn-line-height-normal);
     letter-spacing: var(--syn-input-letter-spacing);
-    vertical-align: middle;
+    line-height: var(--syn-line-height-normal);
+    position: relative;
     transition:
       var(--syn-transition-fast) color,
       var(--syn-transition-fast) border,
       var(--syn-transition-fast) box-shadow,
       var(--syn-transition-fast) background-color;
-    cursor: text;
+    vertical-align: middle;
+    width: 100%;
   }
 
   /* Standard textareas */
@@ -34,6 +36,7 @@ var textarea_styles_default = css`
     background-color: var(--syn-input-background-color-hover);
     border-color: var(--syn-input-border-color-hover);
   }
+
   .textarea--standard:hover:not(.textarea--disabled) .textarea__control {
     color: var(--syn-input-color-hover);
   }
@@ -41,8 +44,8 @@ var textarea_styles_default = css`
   .textarea--standard.textarea--focused:not(.textarea--disabled) {
     background-color: var(--syn-input-background-color-focus);
     border-color: var(--syn-input-border-color-focus);
-    color: var(--syn-input-color-focus);
     box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);
+    color: var(--syn-input-color-focus);
   }
 
   .textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {
@@ -52,8 +55,8 @@ var textarea_styles_default = css`
   .textarea--standard.textarea--disabled {
     background-color: var(--syn-input-background-color-disabled);
     border-color: var(--syn-input-border-color-disabled);
-    opacity: 0.5;
     cursor: not-allowed;
+    opacity: var(--syn-input-disabled-opacity); /* #429: Use token for opacity */
   }
 
   .textarea__control,
@@ -62,9 +65,9 @@ var textarea_styles_default = css`
   }
 
   .textarea__size-adjuster {
-    visibility: hidden;
-    pointer-events: none;
     opacity: 0;
+    pointer-events: none;
+    visibility: hidden;
   }
 
   .textarea--standard.textarea--disabled .textarea__control {
@@ -77,8 +80,8 @@ var textarea_styles_default = css`
 
   /* Readonly textareas */
   .textarea--readonly {
-    border: none;
     background-color: var(--syn-input-readonly-background-color);
+    border: none;
     color: var(--syn-input-color);
   }
 
@@ -94,21 +97,29 @@ var textarea_styles_default = css`
 
   .textarea--readonly.textarea--disabled {
     background-color: var(--syn-input-readonly-background-color-disabled);
-    opacity: 0.5;
     cursor: not-allowed;
+    opacity: var(--syn-input-disabled-opacity);
   }
 
   .textarea__control {
+    -webkit-appearance: none;
+    appearance: none;
+    background: none;
+    border: none;
+    box-shadow: none;
+    color: var(--syn-input-color);
+    cursor: inherit;
     font-family: inherit;
     font-size: inherit;
     font-weight: inherit;
     line-height: 1.4;
-    color: var(--syn-input-color);
-    border: none;
-    background: none;
-    box-shadow: none;
-    cursor: inherit;
-    -webkit-appearance: none;
+
+    /*
+    Unfortunately we need to add a small margin to the textarea control. This is needed for the new sick 2025 theme,
+    as because of the big border-radius the resize icon will otherwise overlap with the border
+    This added margin needs to be subtracted from the padding of the textarea
+    */
+    margin: var(--syn-spacing-3x-small);
   }
 
   .textarea__control::-webkit-search-decoration,
@@ -116,12 +127,13 @@ var textarea_styles_default = css`
   .textarea__control::-webkit-search-results-button,
   .textarea__control::-webkit-search-results-decoration {
     -webkit-appearance: none;
+    appearance: none;
   }
 
   .textarea__control::placeholder {
     color: var(--syn-input-placeholder-color);
-    user-select: none;
     -webkit-user-select: none;
+    user-select: none;
   }
 
   .textarea__control:focus {
@@ -131,14 +143,17 @@ var textarea_styles_default = css`
   /*
    * Size modifiers
    */
-
   .textarea--small {
     border-radius: var(--syn-input-border-radius-small);
     font-size: var(--syn-input-font-size-small);
   }
 
   .textarea--small .textarea__control {
-    padding: 0.5em var(--syn-input-spacing-small);
+    /* TODO: Wait for Design response, how to handle this left / right spacing. Design has "--syn-input-spacing-medium" for all sizes,
+      but we have different (coming from shoelace) */
+
+    /* We need to subtract the added margin of the textarea control from the padding */
+    padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-small) - var(--syn-spacing-3x-small));
   }
 
   .textarea--medium {
@@ -147,7 +162,8 @@ var textarea_styles_default = css`
   }
 
   .textarea--medium .textarea__control {
-    padding: 0.5em var(--syn-input-spacing-medium);
+    /* We need to subtract the added margin of the textarea control from the padding */
+    padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-medium) - var(--syn-spacing-3x-small));
   }
 
   .textarea--large {
@@ -156,13 +172,16 @@ var textarea_styles_default = css`
   }
 
   .textarea--large .textarea__control {
-    padding: 0.5em var(--syn-input-spacing-large);
+    /* TODO: Wait for Design response, how to handle this left / right spacing. Design has "--syn-input-spacing-medium" for all sizes,
+      but we have different (coming from shoelace) */
+
+    /* We need to subtract the added margin of the textarea control from the padding */
+    padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-large) - var(--syn-spacing-3x-small));
   }
 
   /*
    * Resize types
    */
-
   .textarea--resize-none .textarea__control {
     resize: none;
   }
@@ -173,12 +192,22 @@ var textarea_styles_default = css`
 
   .textarea--resize-auto .textarea__control {
     height: auto;
-    resize: none;
     overflow-y: hidden;
+    resize: none;
+  }
+
+  /* Validation */
+  :host([data-user-invalid]) .textarea--standard {
+    border-color: var(--syn-input-border-color-focus-error);
+  }
+
+  :host([data-user-invalid]) .textarea--standard.textarea--focused:not(.textarea--disabled) {
+    border-color: var(--syn-input-border-color-focus-error);
+    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);
   }
 `;
 
 export {
   textarea_styles_default
 };
-//# sourceMappingURL=chunk.KPHDBL43.js.map
+//# sourceMappingURL=chunk.NDJJVGQL.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/textarea/textarea.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /* stylelint-disable no-descending-specificity */\n  /* stylelint-disable plugin/no-unsupported-browser-features */\n  /* stylelint-disable property-no-vendor-prefix */\n  :host {\n    display: block;\n  }\n\n  .textarea {\n    align-items: center;\n    cursor: text;\n    display: grid;\n    font-family: var(--syn-input-font-family);\n    font-weight: var(--syn-input-font-weight);\n    letter-spacing: var(--syn-input-letter-spacing);\n    line-height: var(--syn-line-height-normal);\n    position: relative;\n    transition:\n      var(--syn-transition-fast) color,\n      var(--syn-transition-fast) border,\n      var(--syn-transition-fast) box-shadow,\n      var(--syn-transition-fast) background-color;\n    vertical-align: middle;\n    width: 100%;\n  }\n\n  /* Standard textareas */\n  .textarea--standard {\n    background-color: var(--syn-input-background-color);\n    border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n  }\n\n  .textarea--standard:hover:not(.textarea--disabled) {\n    background-color: var(--syn-input-background-color-hover);\n    border-color: var(--syn-input-border-color-hover);\n  }\n\n  .textarea--standard:hover:not(.textarea--disabled) .textarea__control {\n    color: var(--syn-input-color-hover);\n  }\n\n  .textarea--standard.textarea--focused:not(.textarea--disabled) {\n    background-color: var(--syn-input-background-color-focus);\n    border-color: var(--syn-input-border-color-focus);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);\n    color: var(--syn-input-color-focus);\n  }\n\n  .textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {\n    color: var(--syn-input-color-focus);\n  }\n\n  .textarea--standard.textarea--disabled {\n    background-color: var(--syn-input-background-color-disabled);\n    border-color: var(--syn-input-border-color-disabled);\n    cursor: not-allowed;\n    opacity: var(--syn-input-disabled-opacity); /* #429: Use token for opacity */\n  }\n\n  .textarea__control,\n  .textarea__size-adjuster {\n    grid-area: 1 / 1 / 2 / 2;\n  }\n\n  .textarea__size-adjuster {\n    opacity: 0;\n    pointer-events: none;\n    visibility: hidden;\n  }\n\n  .textarea--standard.textarea--disabled .textarea__control {\n    color: var(--syn-input-color-disabled);\n  }\n\n  .textarea--standard.textarea--disabled .textarea__control::placeholder {\n    color: var(--syn-input-placeholder-color-disabled);\n  }\n\n  /* Readonly textareas */\n  .textarea--readonly {\n    background-color: var(--syn-input-readonly-background-color);\n    border: none;\n    color: var(--syn-input-color);\n  }\n\n  .textarea--readonly:hover:not(.textarea--disabled) {\n    background-color: var(--syn-input-readonly-background-color-hover);\n  }\n\n  .textarea--readonly.textarea--focused:not(.textarea--disabled) {\n    background-color: var(--syn-input-readonly-background-color-focus);\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  .textarea--readonly.textarea--disabled {\n    background-color: var(--syn-input-readonly-background-color-disabled);\n    cursor: not-allowed;\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .textarea__control {\n    -webkit-appearance: none;\n    appearance: none;\n    background: none;\n    border: none;\n    box-shadow: none;\n    color: var(--syn-input-color);\n    cursor: inherit;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: 1.4;\n\n    /*\n    Unfortunately we need to add a small margin to the textarea control. This is needed for the new sick 2025 theme,\n    as because of the big border-radius the resize icon will otherwise overlap with the border\n    This added margin needs to be subtracted from the padding of the textarea\n    */\n    margin: var(--syn-spacing-3x-small);\n  }\n\n  .textarea__control::-webkit-search-decoration,\n  .textarea__control::-webkit-search-cancel-button,\n  .textarea__control::-webkit-search-results-button,\n  .textarea__control::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .textarea__control::placeholder {\n    color: var(--syn-input-placeholder-color);\n    -webkit-user-select: none;\n    user-select: none;\n  }\n\n  .textarea__control:focus {\n    outline: none;\n  }\n\n  /*\n   * Size modifiers\n   */\n  .textarea--small {\n    border-radius: var(--syn-input-border-radius-small);\n    font-size: var(--syn-input-font-size-small);\n  }\n\n  .textarea--small .textarea__control {\n    /* TODO: Wait for Design response, how to handle this left / right spacing. Design has \"--syn-input-spacing-medium\" for all sizes,\n      but we have different (coming from shoelace) */\n\n    /* We need to subtract the added margin of the textarea control from the padding */\n    padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-small) - var(--syn-spacing-3x-small));\n  }\n\n  .textarea--medium {\n    border-radius: var(--syn-input-border-radius-medium);\n    font-size: var(--syn-input-font-size-medium);\n  }\n\n  .textarea--medium .textarea__control {\n    /* We need to subtract the added margin of the textarea control from the padding */\n    padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-medium) - var(--syn-spacing-3x-small));\n  }\n\n  .textarea--large {\n    border-radius: var(--syn-input-border-radius-large);\n    font-size: var(--syn-input-font-size-large);\n  }\n\n  .textarea--large .textarea__control {\n    /* TODO: Wait for Design response, how to handle this left / right spacing. Design has \"--syn-input-spacing-medium\" for all sizes,\n      but we have different (coming from shoelace) */\n\n    /* We need to subtract the added margin of the textarea control from the padding */\n    padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-large) - var(--syn-spacing-3x-small));\n  }\n\n  /*\n   * Resize types\n   */\n  .textarea--resize-none .textarea__control {\n    resize: none;\n  }\n\n  .textarea--resize-vertical .textarea__control {\n    resize: vertical;\n  }\n\n  .textarea--resize-auto .textarea__control {\n    height: auto;\n    overflow-y: hidden;\n    resize: none;\n  }\n\n  /* Validation */\n  :host([data-user-invalid]) .textarea--standard {\n    border-color: var(--syn-input-border-color-focus-error);\n  }\n\n  :host([data-user-invalid]) .textarea--standard.textarea--focused:not(.textarea--disabled) {\n    border-color: var(--syn-input-border-color-focus-error);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);\n  }\n`;\n"],
+  "mappings": ";AAAA,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;AAAA;AAAA;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.P7EQPLEZ.js → chunk.NTBDBGG7.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.IGU6STLS.js";
+} from "./chunk.CMCJB5AA.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.P7EQPLEZ.js.map
+//# sourceMappingURL=chunk.NTBDBGG7.js.map