@synergy-design-system/components 2.5.0 → 2.7.0

package/dist/chunks/{chunk.HVJGBGHT.js → chunk.EZRPX4D7.js}

@@ -6,14 +6,14 @@ import {
 } from "./chunk.FSZIE7IO.js";
 import {
   watch
-} from "./chunk.QJMO7V5R.js";
+} from "./chunk.74IOULXM.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.BWVISANJ.js";
+} from "./chunk.JTYYYMG2.js";
 import {
   __decorateClass
-} from "./chunk.QNDC5KWA.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/divider/divider.component.ts
 import { property } from "lit/decorators.js";
@@ -41,4 +41,4 @@ __decorateClass([
 export {
   SynDivider
 };
-//# sourceMappingURL=chunk.HVJGBGHT.js.map
+//# sourceMappingURL=chunk.EZRPX4D7.js.map

package/dist/chunks/{chunk.EG23UW3V.js → chunk.FK6MAJIJ.js}

@@ -6,14 +6,14 @@ import {
 } from "./chunk.Y5TMYX2L.js";
 import {
   LocalizeController
-} from "./chunk.ZTEMBLJH.js";
+} from "./chunk.ESQAXAFE.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.BWVISANJ.js";
+} from "./chunk.JTYYYMG2.js";
 import {
   __decorateClass
-} from "./chunk.QNDC5KWA.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/badge/badge.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -58,4 +58,4 @@ __decorateClass([
 export {
   SynBadge
 };
-//# sourceMappingURL=chunk.EG23UW3V.js.map
+//# sourceMappingURL=chunk.FK6MAJIJ.js.map

package/dist/chunks/{chunk.HLE65RI4.js → chunk.FKKJBKYL.js}

@@ -102,18 +102,16 @@ var form_control_custom_styles_default = css2`
     color: var(--syn-input-help-text-color-error);
    }
 
-    /* DISABLED */
-
+  /* DISABLED */
   :host([disabled]) .form-control--has-label .form-control__label,
   :host([disabled]) .form-control--has-help-text .form-control__help-text {
     cursor: not-allowed;
     opacity: 0.5;
   }
-
 `;
 
 export {
   form_control_styles_default,
   form_control_custom_styles_default
 };
-//# sourceMappingURL=chunk.HLE65RI4.js.map
+//# sourceMappingURL=chunk.FKKJBKYL.js.map

package/dist/chunks/{chunk.HLE65RI4.js.map → chunk.FKKJBKYL.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styles/form-control.styles.ts", "../../src/styles/form-control.custom.styles.ts"],
-  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: var(--syn-input-label-color);\n    margin-bottom: var(--syn-spacing-3x-small);\n  }\n\n  .form-control--has-label.form-control--small .form-control__label {\n    font-size: var(--syn-input-label-font-size-small);\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--syn-input-label-font-size-medium);\n  }\n\n  .form-control--has-label.form-control--large .form-control__label {\n    font-size: var(--syn-input-label-font-size-large);\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: var(--syn-input-required-content);\n    margin-inline-start: var(--syn-input-required-content-offset);\n    color: var(--syn-input-required-content-color);\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--syn-input-help-text-color);\n    margin-top: var(--syn-spacing-3x-small);\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: var(--syn-input-help-text-font-size-small);\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--syn-input-help-text-font-size-medium);\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: var(--syn-input-help-text-font-size-large);\n  }\n\n  .form-control--has-help-text.form-control--radio-group .form-control__help-text {\n    margin-top: var(--syn-spacing-2x-small);\n  }\n`;\n", "import { css } from 'lit';\n\nexport default css` \n\n   /* Label */\n  .form-control--has-label .form-control__label {\n   font-weight: var(--syn-font-weight-semibold);\n  }\n\n  .form-control--has-label.form-control--small .form-control__label {\n    margin-bottom: var(--syn-spacing-x-small);\n  }\n  \n  .form-control--has-label.form-control--medium .form-control__label {\n    margin-bottom: var(--syn-input-spacing-small);\n  }\n\n  .form-control--has-label.form-control--large .form-control__label {\n    margin-bottom: var(--syn-input-spacing-medium);\n  }\n\n    /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    margin-top: var(--syn-spacing-x-small);\n  }\n\n  .form-control--small.form-control--has-prefix .input__control  {\n    padding: var(--syn-spacing-3x-small) 0;\n  }\n\n  .form-control--has-prefix.form-control--medium .input__control {\n    padding: var(--syn-spacing-x-small) 0;\n  }\n\n  .form-control--large.form-control--has-prefix .input__control {\n   padding: var(--syn-input-spacing-small) 0;\n  }\n\n    /* ERROR */\n  :host([data-user-invalid]:not([disabled])) .form-control__help-text {\n    color: var(--syn-input-help-text-color-error);\n   }\n\n    /* DISABLED */\n\n  :host([disabled]) .form-control--has-label .form-control__label,\n  :host([disabled]) .form-control--has-help-text .form-control__help-text {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n`;\n"],
-  "mappings": ";AAQA,SAAS,WAAW;AAEpB,IAAO,8BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACVf,SAAS,OAAAA,YAAW;AAEpB,IAAO,qCAAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: var(--syn-input-label-color);\n    margin-bottom: var(--syn-spacing-3x-small);\n  }\n\n  .form-control--has-label.form-control--small .form-control__label {\n    font-size: var(--syn-input-label-font-size-small);\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--syn-input-label-font-size-medium);\n  }\n\n  .form-control--has-label.form-control--large .form-control__label {\n    font-size: var(--syn-input-label-font-size-large);\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: var(--syn-input-required-content);\n    margin-inline-start: var(--syn-input-required-content-offset);\n    color: var(--syn-input-required-content-color);\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--syn-input-help-text-color);\n    margin-top: var(--syn-spacing-3x-small);\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: var(--syn-input-help-text-font-size-small);\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--syn-input-help-text-font-size-medium);\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: var(--syn-input-help-text-font-size-large);\n  }\n\n  .form-control--has-help-text.form-control--radio-group .form-control__help-text {\n    margin-top: var(--syn-spacing-2x-small);\n  }\n`;\n", "import { css } from 'lit';\n\nexport default css` \n\n   /* Label */\n  .form-control--has-label .form-control__label {\n   font-weight: var(--syn-font-weight-semibold);\n  }\n\n  .form-control--has-label.form-control--small .form-control__label {\n    margin-bottom: var(--syn-spacing-x-small);\n  }\n  \n  .form-control--has-label.form-control--medium .form-control__label {\n    margin-bottom: var(--syn-input-spacing-small);\n  }\n\n  .form-control--has-label.form-control--large .form-control__label {\n    margin-bottom: var(--syn-input-spacing-medium);\n  }\n\n    /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    margin-top: var(--syn-spacing-x-small);\n  }\n\n  .form-control--small.form-control--has-prefix .input__control  {\n    padding: var(--syn-spacing-3x-small) 0;\n  }\n\n  .form-control--has-prefix.form-control--medium .input__control {\n    padding: var(--syn-spacing-x-small) 0;\n  }\n\n  .form-control--large.form-control--has-prefix .input__control {\n   padding: var(--syn-input-spacing-small) 0;\n  }\n\n    /* ERROR */\n  :host([data-user-invalid]:not([disabled])) .form-control__help-text {\n    color: var(--syn-input-help-text-color-error);\n   }\n\n  /* DISABLED */\n  :host([disabled]) .form-control--has-label .form-control__label,\n  :host([disabled]) .form-control--has-help-text .form-control__help-text {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n`;\n"],
+  "mappings": ";AAQA,SAAS,WAAW;AAEpB,IAAO,8BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACVf,SAAS,OAAAA,YAAW;AAEpB,IAAO,qCAAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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": ["css"]
 }

package/dist/chunks/{chunk.RSPZU72C.js → chunk.FP4J6SI7.js}

@@ -4,10 +4,10 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.BWVISANJ.js";
+} from "./chunk.JTYYYMG2.js";
 import {
   __decorateClass
-} from "./chunk.QNDC5KWA.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/button-group/button-group.component.ts
 import { html } from "lit";
@@ -87,4 +87,4 @@ function findButton(el) {
 export {
   SynButtonGroup
 };
-//# sourceMappingURL=chunk.RSPZU72C.js.map
+//# sourceMappingURL=chunk.FP4J6SI7.js.map

package/dist/chunks/{chunk.TCGQ6I55.js → chunk.FPIGVZSR.js}

@@ -3,14 +3,14 @@ import {
 } from "./chunk.WNUZ6LH4.js";
 import {
   watch
-} from "./chunk.QJMO7V5R.js";
+} from "./chunk.74IOULXM.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.BWVISANJ.js";
+} from "./chunk.JTYYYMG2.js";
 import {
   __decorateClass
-} from "./chunk.QNDC5KWA.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/accordion/accordion.component.ts
 import { html } from "lit";
@@ -103,4 +103,4 @@ __decorateClass([
 export {
   SynAccordion
 };
-//# sourceMappingURL=chunk.TCGQ6I55.js.map
+//# sourceMappingURL=chunk.FPIGVZSR.js.map

package/dist/chunks/{chunk.MLP2VIC7.js → chunk.FSWTBNSI.js}

@@ -148,9 +148,14 @@ var menu_item_styles_default = css`
       outline-offset: -1px;
     }
   }
+
+  ::slotted(syn-menu) {
+    max-width: var(--auto-size-available-width) !important;
+    max-height: var(--auto-size-available-height) !important;
+  }
 `;
 
 export {
   menu_item_styles_default
 };
-//# sourceMappingURL=chunk.MLP2VIC7.js.map
+//# sourceMappingURL=chunk.FSWTBNSI.js.map

package/dist/chunks/{chunk.MLP2VIC7.js.map → chunk.FSWTBNSI.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/menu-item/menu-item.styles.ts"],
-  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    --submenu-offset: -2px;\n\n    display: block;\n  }\n\n  :host([inert]) {\n    display: none;\n  }\n\n  .menu-item {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-medium);\n    font-weight: var(--syn-font-weight-normal);\n    line-height: var(--syn-line-height-normal);\n    letter-spacing: var(--syn-letter-spacing-normal);\n    color: var(--syn-color-neutral-700);\n    padding: var(--syn-spacing-2x-small) var(--syn-spacing-2x-small);\n    transition: var(--syn-transition-fast) fill;\n    user-select: none;\n    -webkit-user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n  }\n\n  .menu-item.menu-item--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .menu-item.menu-item--loading {\n    outline: none;\n    cursor: wait;\n  }\n\n  .menu-item.menu-item--loading *:not(syn-spinner) {\n    opacity: 0.5;\n  }\n\n  .menu-item--loading syn-spinner {\n    --indicator-color: currentColor;\n    --track-width: 1px;\n    position: absolute;\n    font-size: 0.75em;\n    top: calc(50% - 0.5em);\n    left: 0.65rem;\n    opacity: 1;\n  }\n\n  .menu-item .menu-item__label {\n    flex: 1 1 auto;\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n\n  .menu-item .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .menu-item .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  /* Safe triangle */\n  .menu-item--submenu-expanded::after {\n    content: '';\n    position: fixed;\n    z-index: calc(var(--syn-z-index-dropdown) - 1);\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    clip-path: polygon(\n      var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),\n      var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),\n      var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)\n    );\n  }\n\n  :host(:focus-visible) {\n    outline: none;\n  }\n\n  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,\n  .menu-item--submenu-expanded {\n    background-color: var(--syn-color-neutral-100);\n    color: var(--syn-color-neutral-1000);\n  }\n\n  :host(:focus-visible) .menu-item {\n    outline: none;\n    background-color: var(--syn-color-primary-600);\n    color: var(--syn-color-neutral-0);\n    opacity: 1;\n  }\n\n  .menu-item .menu-item__check,\n  .menu-item .menu-item__chevron {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5em;\n    visibility: hidden;\n  }\n\n  .menu-item--checked .menu-item__check,\n  .menu-item--has-submenu .menu-item__chevron {\n    visibility: visible;\n  }\n\n  /* Add elevation and z-index to submenus */\n  syn-popup::part(popup) {\n    box-shadow: var(--syn-shadow-large);\n    z-index: var(--syn-z-index-dropdown);\n    margin-left: var(--submenu-offset);\n  }\n\n  .menu-item--rtl syn-popup::part(popup) {\n    margin-left: calc(-1 * var(--submenu-offset));\n  }\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .menu-item,\n    :host(:focus-visible) .menu-item {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n"],
-  "mappings": ";AAQA,SAAS,WAAW;AAEpB,IAAO,2BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    --submenu-offset: -2px;\n\n    display: block;\n  }\n\n  :host([inert]) {\n    display: none;\n  }\n\n  .menu-item {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-medium);\n    font-weight: var(--syn-font-weight-normal);\n    line-height: var(--syn-line-height-normal);\n    letter-spacing: var(--syn-letter-spacing-normal);\n    color: var(--syn-color-neutral-700);\n    padding: var(--syn-spacing-2x-small) var(--syn-spacing-2x-small);\n    transition: var(--syn-transition-fast) fill;\n    user-select: none;\n    -webkit-user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n  }\n\n  .menu-item.menu-item--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .menu-item.menu-item--loading {\n    outline: none;\n    cursor: wait;\n  }\n\n  .menu-item.menu-item--loading *:not(syn-spinner) {\n    opacity: 0.5;\n  }\n\n  .menu-item--loading syn-spinner {\n    --indicator-color: currentColor;\n    --track-width: 1px;\n    position: absolute;\n    font-size: 0.75em;\n    top: calc(50% - 0.5em);\n    left: 0.65rem;\n    opacity: 1;\n  }\n\n  .menu-item .menu-item__label {\n    flex: 1 1 auto;\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n\n  .menu-item .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .menu-item .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  /* Safe triangle */\n  .menu-item--submenu-expanded::after {\n    content: '';\n    position: fixed;\n    z-index: calc(var(--syn-z-index-dropdown) - 1);\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    clip-path: polygon(\n      var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),\n      var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),\n      var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)\n    );\n  }\n\n  :host(:focus-visible) {\n    outline: none;\n  }\n\n  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,\n  .menu-item--submenu-expanded {\n    background-color: var(--syn-color-neutral-100);\n    color: var(--syn-color-neutral-1000);\n  }\n\n  :host(:focus-visible) .menu-item {\n    outline: none;\n    background-color: var(--syn-color-primary-600);\n    color: var(--syn-color-neutral-0);\n    opacity: 1;\n  }\n\n  .menu-item .menu-item__check,\n  .menu-item .menu-item__chevron {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5em;\n    visibility: hidden;\n  }\n\n  .menu-item--checked .menu-item__check,\n  .menu-item--has-submenu .menu-item__chevron {\n    visibility: visible;\n  }\n\n  /* Add elevation and z-index to submenus */\n  syn-popup::part(popup) {\n    box-shadow: var(--syn-shadow-large);\n    z-index: var(--syn-z-index-dropdown);\n    margin-left: var(--submenu-offset);\n  }\n\n  .menu-item--rtl syn-popup::part(popup) {\n    margin-left: calc(-1 * var(--submenu-offset));\n  }\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .menu-item,\n    :host(:focus-visible) .menu-item {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n\n  ::slotted(syn-menu) {\n    max-width: var(--auto-size-available-width) !important;\n    max-height: var(--auto-size-available-height) !important;\n  }\n`;\n"],
+  "mappings": ";AAQA,SAAS,WAAW;AAEpB,IAAO,2BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.JSPLWE2A.js → chunk.GHGGBS4N.js}

@@ -16,10 +16,8 @@ var translation = {
   loading: "Loading",
   nextSlide: "Next slide",
   numOptionsSelected: (num) => {
-    if (num === 0)
-      return "No options selected";
-    if (num === 1)
-      return "1 option selected";
+    if (num === 0) return "No options selected";
+    if (num === 1) return "1 option selected";
     return `${num} options selected`;
   },
   previousSlide: "Previous slide",
@@ -42,11 +40,12 @@ var translation = {
   menu: "Menu",
   notification: "Notification",
   numFilesSelected: (num) => {
-    if (num === 0)
-      return "No files chosen";
+    if (num === 0) return "No files chosen";
     return `${num} files`;
   },
   openMenu: "Open menu",
+  rangeMax: "Maximum",
+  rangeMin: "Minimum",
   sideNav: "Side navigation",
   success: "Success",
   warning: "Warning"
@@ -57,4 +56,4 @@ var en_default = translation;
 export {
   en_default
 };
-//# sourceMappingURL=chunk.JSPLWE2A.js.map
+//# sourceMappingURL=chunk.GHGGBS4N.js.map

package/dist/chunks/{chunk.JSPLWE2A.js.map → chunk.GHGGBS4N.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/translations/en.ts"],
-  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { registerTranslation } from '@shoelace-style/localize';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'en',\n  $name: 'English',\n  $dir: 'ltr',\n\n  carousel: 'Carousel',\n  clearEntry: 'Clear entry',\n  close: 'Close',\n  copied: 'Copied',\n  copy: 'Copy',\n  currentValue: 'Current value',\n  error: 'Error',\n  goToSlide: (slide, count) => `Go to slide ${slide} of ${count}`,\n  hidePassword: 'Hide password',\n  loading: 'Loading',\n  nextSlide: 'Next slide',\n  numOptionsSelected: num => {\n    if (num === 0) return 'No options selected';\n    if (num === 1) return '1 option selected';\n    return `${num} options selected`;\n  },\n  previousSlide: 'Previous slide',\n  progress: 'Progress',\n  remove: 'Remove',\n  resize: 'Resize',\n  scrollToEnd: 'Scroll to end',\n  scrollToStart: 'Scroll to start',\n  selectAColorFromTheScreen: 'Select a color from the screen',\n  showPassword: 'Show password',\n  slideNum: slide => `Slide ${slide}`,\n  toggleColorFormat: 'Toggle color format',\n\n  // Automatically generated custom translations.\n  // @see scripts/vendorism/translations.vendorism.js\n  closeMenu: 'Close menu',\n  danger: 'Danger',\n  fileButtonText: 'Choose file',\n  fileButtonTextMultiple: 'Choose files',\n  fileDragDrop: 'Drop or choose file',\n  menu: 'Menu',\n  notification: 'Notification',\n  numFilesSelected: num => {\n      if (num === 0) return 'No files chosen';\n      return `${num} files`;\n    },\n  openMenu: 'Open menu',\n  sideNav: 'Side navigation',\n  success: 'Success',\n  warning: 'Warning',\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"],
-  "mappings": ";AAQA,SAAS,2BAA2B;AAGpC,IAAM,cAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,EAEN,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW,CAAC,OAAO,UAAU,eAAe,KAAK,OAAO,KAAK;AAAA,EAC7D,cAAc;AAAA,EACd,SAAS;AAAA,EACT,WAAW;AAAA,EACX,oBAAoB,SAAO;AACzB,QAAI,QAAQ;AAAG,aAAO;AACtB,QAAI,QAAQ;AAAG,aAAO;AACtB,WAAO,GAAG,GAAG;AAAA,EACf;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd,UAAU,WAAS,SAAS,KAAK;AAAA,EACjC,mBAAmB;AAAA;AAAA;AAAA,EAInB,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,wBAAwB;AAAA,EACxB,cAAc;AAAA,EACd,MAAM;AAAA,EACN,cAAc;AAAA,EACd,kBAAkB,SAAO;AACrB,QAAI,QAAQ;AAAG,aAAO;AACtB,WAAO,GAAG,GAAG;AAAA,EACf;AAAA,EACF,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,oBAAoB,WAAW;AAE/B,IAAO,aAAQ;",
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { registerTranslation } from '@shoelace-style/localize';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'en',\n  $name: 'English',\n  $dir: 'ltr',\n\n  carousel: 'Carousel',\n  clearEntry: 'Clear entry',\n  close: 'Close',\n  copied: 'Copied',\n  copy: 'Copy',\n  currentValue: 'Current value',\n  error: 'Error',\n  goToSlide: (slide, count) => `Go to slide ${slide} of ${count}`,\n  hidePassword: 'Hide password',\n  loading: 'Loading',\n  nextSlide: 'Next slide',\n  numOptionsSelected: num => {\n    if (num === 0) return 'No options selected';\n    if (num === 1) return '1 option selected';\n    return `${num} options selected`;\n  },\n  previousSlide: 'Previous slide',\n  progress: 'Progress',\n  remove: 'Remove',\n  resize: 'Resize',\n  scrollToEnd: 'Scroll to end',\n  scrollToStart: 'Scroll to start',\n  selectAColorFromTheScreen: 'Select a color from the screen',\n  showPassword: 'Show password',\n  slideNum: slide => `Slide ${slide}`,\n  toggleColorFormat: 'Toggle color format',\n\n  // Automatically generated custom translations.\n  // @see scripts/vendorism/translations.vendorism.js\n  closeMenu: 'Close menu',\n  danger: 'Danger',\n  fileButtonText: 'Choose file',\n  fileButtonTextMultiple: 'Choose files',\n  fileDragDrop: 'Drop or choose file',\n  menu: 'Menu',\n  notification: 'Notification',\n  numFilesSelected: num => {\n      if (num === 0) return 'No files chosen';\n      return `${num} files`;\n    },\n  openMenu: 'Open menu',\n  rangeMax: 'Maximum',\n  rangeMin: 'Minimum',\n  sideNav: 'Side navigation',\n  success: 'Success',\n  warning: 'Warning',\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"],
+  "mappings": ";AAQA,SAAS,2BAA2B;AAGpC,IAAM,cAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,EAEN,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW,CAAC,OAAO,UAAU,eAAe,KAAK,OAAO,KAAK;AAAA,EAC7D,cAAc;AAAA,EACd,SAAS;AAAA,EACT,WAAW;AAAA,EACX,oBAAoB,SAAO;AACzB,QAAI,QAAQ,EAAG,QAAO;AACtB,QAAI,QAAQ,EAAG,QAAO;AACtB,WAAO,GAAG,GAAG;AAAA,EACf;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd,UAAU,WAAS,SAAS,KAAK;AAAA,EACjC,mBAAmB;AAAA;AAAA;AAAA,EAInB,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,wBAAwB;AAAA,EACxB,cAAc;AAAA,EACd,MAAM;AAAA,EACN,cAAc;AAAA,EACd,kBAAkB,SAAO;AACrB,QAAI,QAAQ,EAAG,QAAO;AACtB,WAAO,GAAG,GAAG;AAAA,EACf;AAAA,EACF,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,oBAAoB,WAAW;AAE/B,IAAO,aAAQ;",
   "names": []
 }

package/dist/chunks/{chunk.445GTYI7.js → chunk.GWQWHDLF.js}

@@ -10,10 +10,10 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.BWVISANJ.js";
+} from "./chunk.JTYYYMG2.js";
 import {
   __decorateClass
-} from "./chunk.QNDC5KWA.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/card/card.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -53,4 +53,4 @@ __decorateClass([
 export {
   SynCard
 };
-//# sourceMappingURL=chunk.445GTYI7.js.map
+//# sourceMappingURL=chunk.GWQWHDLF.js.map

package/dist/chunks/{chunk.MSUX23ZJ.js → chunk.HQ6QUSK7.js}

@@ -1,7 +1,7 @@
 import {
   __spreadProps,
   __spreadValues
-} from "./chunk.QNDC5KWA.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/utilities/animation-registry.ts
 var defaultAnimationRegistry = /* @__PURE__ */ new Map();
@@ -44,4 +44,4 @@ export {
   setAnimation,
   getAnimation
 };
-//# sourceMappingURL=chunk.MSUX23ZJ.js.map
+//# sourceMappingURL=chunk.HQ6QUSK7.js.map

package/dist/chunks/{chunk.R6VT7GM5.js → chunk.HTRLN6MZ.js}

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

package/dist/chunks/{chunk.P7GNMVZ4.js → chunk.HY4Y3IF2.js}

@@ -6,14 +6,14 @@ import {
 } from "./chunk.HVXG4JG6.js";
 import {
   watch
-} from "./chunk.QJMO7V5R.js";
+} from "./chunk.74IOULXM.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.BWVISANJ.js";
+} from "./chunk.JTYYYMG2.js";
 import {
   __decorateClass
-} from "./chunk.QNDC5KWA.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/tab-panel/tab-panel.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -62,4 +62,4 @@ __decorateClass([
 export {
   SynTabPanel
 };
-//# sourceMappingURL=chunk.P7GNMVZ4.js.map
+//# sourceMappingURL=chunk.HY4Y3IF2.js.map

package/dist/chunks/chunk.I6YARDHH.js

@@ -0,0 +1,39 @@
+// src/components/range-tick/range-tick.styles.ts
+import { css } from "lit";
+var range_tick_styles_default = css`
+  :host {
+    --tick-height: var(--syn-spacing-x-small);
+    --tick-label-top: 10px;
+  }
+
+  .tick {
+    color: var(--syn-input-icon-color);
+    font-family: var(--syn-font-family);
+    font-weight: var(--syn-font-weight-normal);
+    line-height: var(--syn-line-height-denser);
+    width: 1px;
+  }
+
+  .tick-line {
+    background: var(--syn-color-neutral-400);
+    height: var(--tick-height);
+  }
+
+  .tick--subdivision .tick-line{
+    height: calc(var(--tick-height) / 2);
+  }
+
+  .tick-label {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    margin-top: var(--tick-label-top);
+    text-align: center;
+    white-space: nowrap;
+  }
+`;
+
+export {
+  range_tick_styles_default
+};
+//# sourceMappingURL=chunk.I6YARDHH.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/range-tick/range-tick.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --tick-height: var(--syn-spacing-x-small);\n    --tick-label-top: 10px;\n  }\n\n  .tick {\n    color: var(--syn-input-icon-color);\n    font-family: var(--syn-font-family);\n    font-weight: var(--syn-font-weight-normal);\n    line-height: var(--syn-line-height-denser);\n    width: 1px;\n  }\n\n  .tick-line {\n    background: var(--syn-color-neutral-400);\n    height: var(--tick-height);\n  }\n\n  .tick--subdivision .tick-line{\n    height: calc(var(--tick-height) / 2);\n  }\n\n  .tick-label {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n    margin-top: var(--tick-label-top);\n    text-align: center;\n    white-space: nowrap;\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,4BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.36WNAWGH.js → chunk.IGLR5WAI.js}

@@ -1,6 +1,6 @@
 import {
   SynButton
-} from "./chunk.QVULMTSN.js";
+} from "./chunk.TWPYJVSU.js";
 
 // src/components/button/button.ts
 var button_default = SynButton;
@@ -9,4 +9,4 @@ SynButton.define("syn-button");
 export {
   button_default
 };
-//# sourceMappingURL=chunk.36WNAWGH.js.map
+//# sourceMappingURL=chunk.IGLR5WAI.js.map

package/dist/chunks/{chunk.OZ7PQTHB.js → chunk.IL3FC72M.js}

@@ -7,39 +7,39 @@ import {
 import {
   form_control_custom_styles_default,
   form_control_styles_default
-} from "./chunk.HLE65RI4.js";
+} from "./chunk.FKKJBKYL.js";
 import {
   SynButton
-} from "./chunk.QVULMTSN.js";
+} from "./chunk.TWPYJVSU.js";
 import {
   FormControlController
-} from "./chunk.QBVLTYU7.js";
+} from "./chunk.BBNQVEPD.js";
 import {
   animateTo
-} from "./chunk.MLOZ4D3V.js";
+} from "./chunk.A3OYJILJ.js";
 import {
   getAnimation,
   setDefaultAnimation
-} from "./chunk.MSUX23ZJ.js";
+} from "./chunk.HQ6QUSK7.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.OUSXEKQG.js";
+} from "./chunk.XNGZHSRO.js";
 import {
   LocalizeController
-} from "./chunk.ZTEMBLJH.js";
+} from "./chunk.ESQAXAFE.js";
 import {
   watch
-} from "./chunk.QJMO7V5R.js";
+} from "./chunk.74IOULXM.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.BWVISANJ.js";
+} from "./chunk.JTYYYMG2.js";
 import {
   __decorateClass
-} from "./chunk.QNDC5KWA.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/file/file.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -480,4 +480,4 @@ setDefaultAnimation("file.text.appear", {
 export {
   SynFile
 };
-//# sourceMappingURL=chunk.OZ7PQTHB.js.map
+//# sourceMappingURL=chunk.IL3FC72M.js.map

package/dist/chunks/{chunk.ML6NOYHV.js → chunk.IMXRJ3YT.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.GZQPS6JH.js";
+} from "./chunk.RKZLWXOJ.js";
 
 // src/components/icon-button/icon-button.ts
 var icon_button_default = SynIconButton;
@@ -9,4 +9,4 @@ SynIconButton.define("syn-icon-button");
 export {
   icon_button_default
 };
-//# sourceMappingURL=chunk.ML6NOYHV.js.map
+//# sourceMappingURL=chunk.IMXRJ3YT.js.map

package/dist/chunks/{chunk.RUUKH7KZ.js → chunk.J6AAV3AV.js}

@@ -1,6 +1,6 @@
 import {
   SynDropdown
-} from "./chunk.HPWFMICA.js";
+} from "./chunk.3BYNCSYI.js";
 
 // src/components/dropdown/dropdown.ts
 var dropdown_default = SynDropdown;
@@ -9,4 +9,4 @@ SynDropdown.define("syn-dropdown");
 export {
   dropdown_default
 };
-//# sourceMappingURL=chunk.RUUKH7KZ.js.map
+//# sourceMappingURL=chunk.J6AAV3AV.js.map