@scania/tegel 0.0.5 → 0.0.6

package/dist/cjs/sdds-side-menu-dropdown.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-side-menu-dropdown.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,+2BAA+2B;;MCQ93B,gBAAgB;;;uBAII,KAAK;;oBAOR,KAAK;gBAER,KAAK;;qBAIA,KAAK;;EAKnC,6BAA6B,CAAC,KAAkC;IAC9D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;GACzC;EAGD,mBAAmB;IACjB,IAAI,CAAC,iBAAiB,EAAE,CAAC;GAC1B;EAGD,YAAY;IACV,IAAI,CAAC,iBAAiB,EAAE,CAAC;GAC1B;EAGD,mBAAmB;IACjB,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC5B;EAGD,WAAW;IACT,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC5B;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;GAC9D;EAED,mBAAmB;IACjB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IAC1B,MAAM,uBAAuB,GAAG,GAAG,CAAC;IACpC,UAAU,CAAC;MACT,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,MAAM,EAAE;QACnE,IAAI,CAAC,UAAU,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;OAC/D;KACF,EAAE,uBAAuB,CAAC,CAAC;GAC7B;EAED,cAAc;;IACZ,OAAO,IAAI,CAAC,SAAS,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC;GAChE;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACtD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;IAC3C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;GAC9B;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBACE,KAAK,EAAE;QACL,SAAS,EAAE,IAAI;QACf,YAAY,EAAE,IAAI,CAAC,cAAc,EAAE;QACnC,iBAAiB,EAAE,IAAI,CAAC,SAAS;OAClC,IAEDA,iCACE,KAAK,EAAC,QAAQ,EACd,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE;QACP,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;OACxB,IAEDA,wBACEA,kBAAM,IAAI,EAAC,aAAa,GAAQ,EAC/B,CAAC,IAAI,CAAC,SAAS,KACdA,QAACE,cAAQ,QACN,IAAI,CAAC,WAAW,EACjBF,kBAAM,IAAI,EAAC,cAAc,GAAQ,EACjCA,uBAAW,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CACpE,CACZ,CACM,CACW,EACtBA,iBAAK,KAAK,EAAC,MAAM,IACd,IAAI,CAAC,SAAS,KACbA,gBAAI,KAAK,EAAC,mBAAmB,IAC1B,IAAI,CAAC,WAAW,EACjBA,kBAAM,IAAI,EAAC,cAAc,GAAQ,CAC9B,CACN,EACDA,qBAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;","names":["h","Host","Fragment"],"sources":["./src/components/side-menu/webcomponent/side-menu-dropdown/side-menu-dropdown.scss?tag=sdds-side-menu-dropdown&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-dropdown/side-menu-dropdown.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .dropdown-icon {\n    margin-left: auto;\n    transition: all 0.2s ease-in-out;\n  }\n\n  .state-open {\n    .dropdown-icon {\n      transform: rotateZ(180deg);\n    }\n\n    .menu {\n      display: block;\n    }\n  }\n\n  .state-collapsed {\n    .menu {\n      --side-menu-width: 68px;\n\n      position: absolute;\n      left: var(--side-menu-width);\n      box-shadow: var(--sdds-nav-dropdown-menu-box);\n      background-color: var(--sdds-header-app-launcher-menu-background);\n\n      .heading-collapsed {\n        all: unset;\n        box-sizing: border-box;\n        padding: 16px 24px 15px;\n        min-height: 48px;\n        display: flex;\n        align-items: center;\n        border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);\n        font: var(--sdds-headline-07);\n        letter-spacing: var(--sdds-headline-07-ls);\n      }\n    }\n  }\n\n  :not(.state-collapsed) {\n    .menu {\n      ::slotted(sdds-side-menu-dropdown-list) {\n        width: 100%;\n      }\n    }\n  }\n\n  .menu {\n    display: none;\n    flex-direction: column;\n  }\n}\n","import { Component, Element, Fragment, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { CollapsedEvent } from '../side-menu';\n\n@Component({\n  tag: 'sdds-side-menu-dropdown',\n  styleUrl: 'side-menu-dropdown.scss',\n  shadow: true,\n})\nexport class SideMenuDropdown {\n  @Element() host: HTMLElement;\n\n  /** If the dropdown should be open from the start. */\n  @Prop() defaultOpen: boolean = false;\n\n  /** The label of the button that opens the dropdown.\n   * This is an alternative to the button-label slot. */\n  @Prop() buttonLabel: string;\n\n  /** If the button that opens the dropdown should appear selected. */\n  @Prop() selected: boolean = false;\n\n  @State() open: boolean = false;\n\n  @State() hoverState: { isHovered: boolean; updatedAt: number };\n\n  @State() collapsed: boolean = false;\n\n  private sideMenuEl: HTMLSddsSideMenuElement;\n\n  @Listen('sddsSideMenuCollapsed', { target: 'body' })\n  collapsedSideMenuEventHandler(event: CustomEvent<CollapsedEvent>) {\n    this.collapsed = event.detail.collapsed;\n  }\n\n  @Listen('pointerenter')\n  onEventPointerEnter() {\n    this.setHoverStateOpen();\n  }\n\n  @Listen('focusin')\n  onEventFocus() {\n    this.setHoverStateOpen();\n  }\n\n  @Listen('pointerleave')\n  onEventPointerLeave() {\n    this.setHoverStateClosed();\n  }\n\n  @Listen('focusout')\n  onEventBlur() {\n    this.setHoverStateClosed();\n  }\n\n  setHoverStateOpen() {\n    this.hoverState = { isHovered: true, updatedAt: Date.now() };\n  }\n\n  setHoverStateClosed() {\n    const leftAt = Date.now();\n    const toleranceInMilliseconds = 150;\n    setTimeout(() => {\n      if (this.hoverState.isHovered && this.hoverState.updatedAt < leftAt) {\n        this.hoverState = { isHovered: false, updatedAt: Date.now() };\n      }\n    }, toleranceInMilliseconds);\n  }\n\n  getIsOpenState() {\n    return this.collapsed ? this.hoverState?.isHovered : this.open;\n  }\n\n  connectedCallback() {\n    this.sideMenuEl = this.host.closest('sdds-side-menu');\n    this.collapsed = this.sideMenuEl.collapsed;\n    this.open = this.defaultOpen;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'wrapper': true,\n            'state-open': this.getIsOpenState(),\n            'state-collapsed': this.collapsed,\n          }}\n        >\n          <sdds-side-menu-item\n            class=\"button\"\n            active={this.getIsOpenState()}\n            selected={this.selected}\n            onClick={() => {\n              this.open = !this.open;\n            }}\n          >\n            <button>\n              <slot name=\"button-icon\"></slot>\n              {!this.collapsed && (\n                <Fragment>\n                  {this.buttonLabel}\n                  <slot name=\"button-label\"></slot>\n                  <sdds-icon class=\"dropdown-icon\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n                </Fragment>\n              )}\n            </button>\n          </sdds-side-menu-item>\n          <div class=\"menu\">\n            {this.collapsed && (\n              <h3 class=\"heading-collapsed\">\n                {this.buttonLabel}\n                <slot name=\"button-label\"></slot>\n              </h3>\n            )}\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/sdds-side-menu-item.cjs.entry.js

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-681dc796.js');
+const utils = require('./utils-2776882d.js');
+
+const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:12px;padding:0 24px;border:none;background-color:var(--sdds-sidebar-side-menu-background-cover);font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-sidebar-side-menu-single-item-color)}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){cursor:pointer;background-color:var(--sdds-sidebar-item-state-hover)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button){border-left:4px solid var(--sdds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--sdds-sidebar-item-state-selected)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
+
+const SddsSideMenuItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selected = false;
+    this.active = false;
+    this.collapsed = false;
+  }
+  updateSlotted(searchPredicate, mutationCallback) {
+    const assignedElements = this.slotEl.assignedElements({ flatten: true });
+    const firstSlottedElement = assignedElements[0];
+    if (firstSlottedElement) {
+      const foundElement = utils.dfs(firstSlottedElement, searchPredicate);
+      if (foundElement) {
+        mutationCallback(foundElement);
+      }
+    }
+  }
+  /**
+   * This function is needed because we can't use CSS selectors to style something in the light dom
+   */
+  updateSlottedElements() {
+    if (this.slotEl) {
+      const isIconOrSvg = (element) => element.tagName.toLowerCase() === 'sdds-icon' || element.tagName.toLowerCase() === 'svg';
+      const addIconClass = (element) => {
+        element.classList.add('__sdds-side-menu-item-icon');
+        if (this.collapsed) {
+          element.classList.add('__sdds-side-menu-item-icon-collapsed');
+        }
+        else {
+          element.classList.remove('__sdds-side-menu-item-icon-collapsed');
+        }
+      };
+      this.updateSlotted(isIconOrSvg, addIconClass);
+    }
+  }
+  connectedCallback() {
+    var _a;
+    // closest() will return null if side-menu-item is inside a shadowRoot that
+    // does not contain a side-menu. This is the case for the side-menu-dropdown.
+    this.sideMenuEl = this.host.closest('sdds-side-menu');
+    this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
+  }
+  componentDidLoad() {
+    this.slotEl = this.host.shadowRoot.querySelector('slot');
+    this.updateSlottedElements();
+    this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
+  }
+  collapsedSideMenuEventHandeler(event) {
+    this.collapsed = event.detail.collapsed;
+    this.updateSlottedElements();
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: {
+        'component': true,
+        'component-selected': this.selected,
+        'component-active': this.active,
+        'component-collapsed': this.collapsed,
+      } }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+};
+SddsSideMenuItem.style = sideMenuItemCss;
+
+exports.sdds_side_menu_item = SddsSideMenuItem;
+
+//# sourceMappingURL=sdds-side-menu-item.cjs.entry.js.map

package/dist/cjs/sdds-side-menu-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-side-menu-item.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,8yCAA8yC;;MCSzzC,gBAAgB;;;oBAIC,KAAK;kBAIP,KAAK;qBAED,KAAK;;EAMnC,aAAa,CACX,eAAkD,EAClD,gBAAgD;IAEhD,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACzE,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,CAAC,CAAgB,CAAC;IAC/D,IAAI,mBAAmB,EAAE;MACvB,MAAM,YAAY,GAAGA,SAAG,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;MAC/D,IAAI,YAAY,EAAE;QAChB,gBAAgB,CAAC,YAAY,CAAC,CAAC;OAChC;KACF;GACF;;;;EAKD,qBAAqB;IACnB,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,MAAM,WAAW,GAAG,CAAC,OAAO,KAC1B,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,WAAW,IAAI,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC;MAC3F,MAAM,YAAY,GAAG,CAAC,OAAO;QAC3B,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC;QACpD,IAAI,IAAI,CAAC,SAAS,EAAE;UAClB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,sCAAsC,CAAC,CAAC;SAC/D;aAAM;UACL,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,sCAAsC,CAAC,CAAC;SAClE;OACF,CAAC;MACF,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;KAC/C;GACF;EAED,iBAAiB;;;;IAGf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACtD,IAAI,CAAC,SAAS,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,SAAS,CAAC;GAC7C;EAED,gBAAgB;IACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACzD,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC7B,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;GACxE;EAGD,8BAA8B,CAAC,KAAkC;IAC/D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;IACxC,IAAI,CAAC,qBAAqB,EAAE,CAAC;GAC9B;EAED,MAAM;IACJ,QACEC,QAACC,UAAI,QACHD,iBACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;QACjB,oBAAoB,EAAE,IAAI,CAAC,QAAQ;QACnC,kBAAkB,EAAE,IAAI,CAAC,MAAM;QAC/B,qBAAqB,EAAE,IAAI,CAAC,SAAS;OACtC,IAEDA,qBAAa,CACT,CACD,EACP;GACH;;;;;;;","names":["dfs","h","Host"],"sources":["./src/components/side-menu/webcomponent/side-menu-item/side-menu-item.scss?tag=sdds-side-menu-item&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-item/side-menu-item.tsx"],"sourcesContent":["@import '../theme/core/spacing/vars';\n@import '../../../../mixins/focus-state';\n\n:host {\n  display: block;\n\n  .component {\n    ::slotted(a),\n    ::slotted(button) {\n      all: unset;\n      box-sizing: border-box;\n      height: 68px;\n      width: 100%;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 0 24px;\n      border: none;\n      background-color: var(--sdds-sidebar-side-menu-background-cover);\n      font: var(--sdds-headline-07);\n      letter-spacing: var(--sdds-headline-07-ls);\n      color: var(--sdds-sidebar-side-menu-single-item-color);\n    }\n\n    ::slotted(a:focus-visible),\n    ::slotted(button:focus-visible) {\n      @include sdds-focus-state;\n    }\n\n    &:hover {\n      ::slotted(a),\n      ::slotted(button) {\n        cursor: pointer;\n        background-color: var(--sdds-sidebar-item-state-hover);\n      }\n    }\n\n    &-collapsed {\n      ::slotted(a),\n      ::slotted(button) {\n        padding: 0;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n    }\n\n    &-selected:not(&-active) {\n      ::slotted(a),\n      ::slotted(button) {\n        border-left: 4px solid var(--sdds-sidebar-side-menu-single-subitem-selected-border-color);\n        padding-left: 20px;\n        background-color: var(--sdds-sidebar-item-state-selected);\n      }\n    }\n  }\n}\n\n@media (min-width: $grid-lg) {\n  :host {\n    .component.component-collapsed {\n      ::slotted(a),\n      ::slotted(button) {\n        color: rgb(90 90 90 / 0%);\n        overflow: hidden;\n      }\n    }\n  }\n}\n","import { Component, h, Host, Element, Listen, Prop, State } from '@stencil/core';\nimport { CollapsedEvent } from '../side-menu';\nimport { dfs } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-side-menu-item',\n  styleUrl: 'side-menu-item.scss',\n  shadow: true,\n})\nexport class SddsSideMenuItem {\n  @Element() host: HTMLSddsSideMenuItemElement;\n\n  /** If the item should appear selected. */\n  @Prop() selected: boolean = false;\n\n  /** If the item should appear active. Can be used when the item is\n   * triggering a dropdown, and the dropdown is open, for example. */\n  @Prop() active: boolean = false;\n\n  @State() collapsed: boolean = false;\n\n  private sideMenuEl: HTMLSddsSideMenuElement;\n\n  private slotEl: HTMLSlotElement;\n\n  updateSlotted(\n    searchPredicate: (element: HTMLElement) => boolean,\n    mutationCallback: (element: HTMLElement) => void,\n  ) {\n    const assignedElements = this.slotEl.assignedElements({ flatten: true });\n    const firstSlottedElement = assignedElements[0] as HTMLElement;\n    if (firstSlottedElement) {\n      const foundElement = dfs(firstSlottedElement, searchPredicate);\n      if (foundElement) {\n        mutationCallback(foundElement);\n      }\n    }\n  }\n\n  /**\n   * This function is needed because we can't use CSS selectors to style something in the light dom\n   */\n  updateSlottedElements() {\n    if (this.slotEl) {\n      const isIconOrSvg = (element) =>\n        element.tagName.toLowerCase() === 'sdds-icon' || element.tagName.toLowerCase() === 'svg';\n      const addIconClass = (element) => {\n        element.classList.add('__sdds-side-menu-item-icon');\n        if (this.collapsed) {\n          element.classList.add('__sdds-side-menu-item-icon-collapsed');\n        } else {\n          element.classList.remove('__sdds-side-menu-item-icon-collapsed');\n        }\n      };\n      this.updateSlotted(isIconOrSvg, addIconClass);\n    }\n  }\n\n  connectedCallback() {\n    // closest() will return null if side-menu-item is inside a shadowRoot that\n    // does not contain a side-menu. This is the case for the side-menu-dropdown.\n    this.sideMenuEl = this.host.closest('sdds-side-menu');\n    this.collapsed = this.sideMenuEl?.collapsed;\n  }\n\n  componentDidLoad() {\n    this.slotEl = this.host.shadowRoot.querySelector('slot');\n    this.updateSlottedElements();\n    this.slotEl.addEventListener('slotchange', this.updateSlottedElements);\n  }\n\n  @Listen('sddsSideMenuCollapsed', { target: 'body' })\n  collapsedSideMenuEventHandeler(event: CustomEvent<CollapsedEvent>) {\n    this.collapsed = event.detail.collapsed;\n    this.updateSlottedElements();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'component': true,\n            'component-selected': this.selected,\n            'component-active': this.active,\n            'component-collapsed': this.collapsed,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/sdds-side-menu-overlay.cjs.entry.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-681dc796.js');
+
+const sideMenuOverlayCss = ":host{position:absolute;width:100%;height:100%;background-color:black;transition:opacity 0.4s linear;opacity:0}";
+
+const SideMenuOverlay = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", null)));
+  }
+};
+SideMenuOverlay.style = sideMenuOverlayCss;
+
+exports.sdds_side_menu_overlay = SideMenuOverlay;
+
+//# sourceMappingURL=sdds-side-menu-overlay.cjs.entry.js.map

package/dist/cjs/sdds-side-menu-overlay.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-side-menu-overlay.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,iHAAiH;;MCO/H,eAAe;;;;EAC1B,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,oBAAW,CACN,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/side-menu/webcomponent/side-menu-overlay/side-menu-overlay.scss?tag=sdds-side-menu-overlay&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-overlay/side-menu-overlay.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-color: black;\n  transition: opacity 0.4s linear;\n  opacity: 0;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-side-menu-overlay',\n  styleUrl: 'side-menu-overlay.scss',\n  shadow: true,\n})\nexport class SideMenuOverlay {\n  render() {\n    return (\n      <Host>\n        <div></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/sdds-side-menu-user-image_2.cjs.entry.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-681dc796.js');
+
+const sideMenuUserImageCss = ":host img,:host ::slotted(*){width:34px;height:34px;border-radius:50%}";
+
+const SideMenuUserImage = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.src = undefined;
+    this.alt = undefined;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null), this.src && index.h("img", { src: this.src, alt: this.alt })));
+  }
+};
+SideMenuUserImage.style = sideMenuUserImageCss;
+
+const sideMenuUserLabelCss = ":host{display:block;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-sidebar-side-menu-single-item-color)}:host .subheading{color:var(--sdds-grey-500)}";
+
+const SideMenuUserLabel = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.heading = undefined;
+    this.subheading = undefined;
+  }
+  render() {
+    return (index.h(index.Host, null, this.heading, this.subheading && index.h("div", { class: "subheading" }, this.subheading)));
+  }
+};
+SideMenuUserLabel.style = sideMenuUserLabelCss;
+
+exports.sdds_side_menu_user_image = SideMenuUserImage;
+exports.sdds_side_menu_user_label = SideMenuUserLabel;
+
+//# sourceMappingURL=sdds-side-menu-user-image_2.cjs.entry.js.map

package/dist/cjs/sdds-side-menu-user-image_2.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-side-menu-user-image.sdds-side-menu-user-label.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,oBAAoB,GAAG,wEAAwE;;MCSxF,iBAAiB;;;;;;EAO5B,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,qBAAa,EACZ,IAAI,CAAC,GAAG,IAAIA,iBAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAC7C,EACP;GACH;;;;ACvBH,MAAM,oBAAoB,GAAG,gMAAgM;;MCOhN,iBAAiB;;;;;;EAO5B,MAAM;IACJ,QACEA,QAACC,UAAI,QACF,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,UAAU,IAAID,iBAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,UAAU,CAAO,CAC9D,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/side-menu/webcomponent/side-menu-user-image/side-menu-user-image.scss?tag=sdds-side-menu-user-image&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-user-image/side-menu-user-image.tsx","./src/components/side-menu/webcomponent/side-menu-user-label/side-menu-user-label.scss?tag=sdds-side-menu-user-label&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-user-label/side-menu-user-label.tsx"],"sourcesContent":[":host {\n  img,\n  ::slotted(*) {\n    width: 34px;\n    height: 34px;\n    border-radius: 50%;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n// TODO this component is just for the dropdown detecting that it should\n// change layout\n@Component({\n  tag: 'sdds-side-menu-user-image',\n  styleUrl: 'side-menu-user-image.scss',\n  shadow: true,\n})\nexport class SideMenuUserImage {\n  /** The image source. */\n  @Prop() src: string;\n\n  /** The image alt text. */\n  @Prop() alt: string;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n        {this.src && <img src={this.src} alt={this.alt} />}\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n  font: var(--sdds-headline-07);\n  letter-spacing: var(--sdds-headline-07-ls);\n  color: var(--sdds-sidebar-side-menu-single-item-color);\n\n  .subheading {\n    color: var(--sdds-grey-500);\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-side-menu-user-label',\n  styleUrl: 'side-menu-user-label.scss',\n  shadow: true,\n})\nexport class SideMenuUserLabel {\n  /** The heading text. */\n  @Prop() heading!: string;\n\n  /** The subheading text. */\n  @Prop() subheading: string;\n\n  render() {\n    return (\n      <Host>\n        {this.heading}\n        {this.subheading && <div class=\"subheading\">{this.subheading}</div>}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/sdds-side-menu-user.cjs.entry.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-681dc796.js');
+
+const sideMenuUserCss = ":host{display:flex;align-items:center;gap:12px;height:68px}:host sdds-side-menu-user-image{margin-left:-4px}";
+
+const SideMenuUser = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.heading = undefined;
+    this.subheading = undefined;
+    this.imgSrc = undefined;
+    this.imgAlt = undefined;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("sdds-side-menu-user-image", { src: this.imgSrc, alt: this.imgAlt }, index.h("slot", { name: "image" })), index.h("sdds-side-menu-user-label", { heading: this.heading, subheading: this.subheading })));
+  }
+};
+SideMenuUser.style = sideMenuUserCss;
+
+exports.sdds_side_menu_user = SideMenuUser;
+
+//# sourceMappingURL=sdds-side-menu-user.cjs.entry.js.map

package/dist/cjs/sdds-side-menu-user.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-side-menu-user.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,8GAA8G;;MCOzH,YAAY;;;;;;;;EAavB,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,uCAA2B,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,IAC3DA,kBAAM,IAAI,EAAC,OAAO,GAAQ,CACA,EAC5BA,uCACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,UAAU,EAAE,IAAI,CAAC,UAAU,GACA,CACxB,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/side-menu/webcomponent/side-menu-user/side-menu-user.scss?tag=sdds-side-menu-user&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-user/side-menu-user.tsx"],"sourcesContent":[":host {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  height: 68px;\n\n  sdds-side-menu-user-image {\n    margin-left: -4px;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-side-menu-user',\n  styleUrl: 'side-menu-user.scss',\n  shadow: true,\n})\nexport class SideMenuUser {\n  /** The heading text. */\n  @Prop() heading!: string;\n\n  /** The subheading text. */\n  @Prop() subheading: string;\n\n  /** The image source. */\n  @Prop() imgSrc: string;\n\n  /** The image alt text. */\n  @Prop() imgAlt: string;\n\n  render() {\n    return (\n      <Host>\n        <sdds-side-menu-user-image src={this.imgSrc} alt={this.imgAlt}>\n          <slot name=\"image\"></slot>\n        </sdds-side-menu-user-image>\n        <sdds-side-menu-user-label\n          heading={this.heading}\n          subheading={this.subheading}\n        ></sdds-side-menu-user-label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/sdds-side-menu.cjs.entry.js

@@ -0,0 +1,110 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-681dc796.js');
+const utils = require('./utils-2776882d.js');
+
+const sideMenuCss = ":host([open]){pointer-events:auto;z-index:301}:host{pointer-events:none;display:block;position:fixed;top:0;width:100%;height:100%}:host .wrapper{height:inherit;}:host .wrapper slot:not([name])::slotted(*){border-bottom:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper ::slotted([slot=end]){border-top:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper .sdds-side-menu-list-end{margin-top:68px}:host .state-closed{display:none}:host .state-open slot[name=overlay]::slotted(sdds-side-menu-overlay){opacity:0.4}:host .state-open slot[name=close-button]::slotted(sdds-side-menu-close-button){opacity:1}:host .state-open .sdds-side-menu-wrapper{transform:scaleY(1)}:host .state-upper-slot-empty .sdds-side-menu-list-upper{display:none}:host .state-upper-slot-empty .sdds-side-menu-list-end{margin-top:0}:host .state-upper-slot-empty ::slotted([slot=end]){border-top:none;border-bottom:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top)}@media (min-width: 992px){:host([persistent]){pointer-events:auto;position:static;width:272px;height:auto;border-right:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top)}:host([persistent]) .wrapper slot[name=overlay]::slotted(sdds-side-menu-overlay){display:none}:host([persistent]) .wrapper slot[name=close-button]::slotted(sdds-side-menu-close-button){display:none}:host([persistent]) .wrapper .sdds-side-menu-wrapper{transform:none}:host([persistent]) .menu{width:272px}:host([persistent]) .state-closed{display:block}:host([persistent]):host([collapsed]){width:69px}:host([persistent]):host([collapsed]) .menu{width:68px}:host([persistent]) slot[name=end]::slotted(*){display:none}}.menu{width:80%;height:inherit;position:relative;left:0;display:flex;flex-direction:column;justify-content:space-between}.menu *{padding:0;margin:0;box-sizing:border-box}@media (max-width: 384px){.menu{width:100%}}aside .sdds-side-menu-wrapper{display:flex;justify-content:space-between;flex-direction:column;flex-grow:1;background-color:var(--sdds-sidebar-side-menu-background-cover);transition:transform 250ms ease;transform-origin:top;transform:scaleY(0);overflow-y:auto}aside .sdds-side-menu-wrapper::-webkit-scrollbar{width:4px;background-color:inherit}aside .sdds-side-menu-wrapper::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-300)}aside .sdds-side-menu-wrapper ::-webkit-scrollbar-button{height:0;width:0}";
+
+const GRID_LG_BREAKPOINT = '992px';
+const OPENING_ANIMATION_DURATION = 400;
+const INITIALIZE_ANIMATION_DELAY = 500;
+const SddsSideMenu = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.collapsedEventEmitter = index.createEvent(this, "sddsSideMenuCollapsed", 7);
+    this.handleMatchesLgBreakpointChange = (e) => {
+      const isBelowLg = !e.matches;
+      if (isBelowLg) {
+        this.collapsed = false;
+      }
+    };
+    this.open = false;
+    this.persistent = false;
+    this.collapsed = false;
+    this.isUpperSlotEmpty = false;
+    this.isClosed = true;
+    this.isOpen = false;
+    this.isClosing = false;
+    this.isOpening = false;
+  }
+  connectedCallback() {
+    this.collapsedEventEmitter.emit({
+      collapsed: this.collapsed,
+    });
+    this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT})`);
+    this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);
+  }
+  componentDidLoad() {
+    setTimeout(() => this.onOpenChange(this.open), INITIALIZE_ANIMATION_DELAY);
+    const upperSlot = this.host.shadowRoot.querySelector('slot:not([name])');
+    const upperSlotElements = upperSlot.assignedElements();
+    const hasUpperSlotElements = (upperSlotElements === null || upperSlotElements === void 0 ? void 0 : upperSlotElements.length) > 0;
+    if (!hasUpperSlotElements) {
+      this.isUpperSlotEmpty = true;
+    }
+  }
+  disconnectedCallback() {
+    this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);
+  }
+  onOpenChange(newVal, oldVal) {
+    if (newVal && !oldVal) {
+      this.setOpening();
+    }
+    if (!newVal && oldVal) {
+      this.setClosing();
+    }
+  }
+  onCollapsedChange(newVal) {
+    this.collapsedEventEmitter.emit({
+      collapsed: newVal,
+    });
+  }
+  onIsOpenChange(newVal) {
+    if (newVal) {
+      const firstFocusableElement = utils.dfs(this.host, utils.isFocusable, true);
+      firstFocusableElement.focus();
+    }
+  }
+  async setOpening() {
+    this.isClosed = false;
+    await new Promise((resolve) => {
+      setTimeout(resolve, 0);
+    });
+    this.isOpening = true;
+    await new Promise((resolve) => {
+      setTimeout(resolve, OPENING_ANIMATION_DURATION);
+    });
+    this.isOpening = false;
+    this.isOpen = true;
+  }
+  async setClosing() {
+    this.isOpen = false;
+    this.isClosing = true;
+    await new Promise((resolve) => {
+      setTimeout(resolve, OPENING_ANIMATION_DURATION);
+    });
+    this.isClosing = false;
+    this.isClosed = true;
+  }
+  render() {
+    return (index.h(index.Host, { role: "navigation" }, index.h("div", { class: {
+        'wrapper': true,
+        'state-upper-slot-empty': this.isUpperSlotEmpty,
+        'state-open': this.isOpen || this.isOpening,
+        'state-closed': this.isClosed,
+      } }, index.h("slot", { name: "overlay" }), index.h("aside", { class: `menu` }, index.h("slot", { name: "close-button" }), index.h("div", { class: "sdds-side-menu-wrapper" }, index.h("ul", { class: `sdds-side-menu-list sdds-side-menu-list-upper` }, index.h("slot", null)), index.h("ul", { class: `sdds-side-menu-list sdds-side-menu-list-end` }, index.h("slot", { name: "end" }))), index.h("slot", { name: "sticky-end" })))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "open": ["onOpenChange"],
+    "collapsed": ["onCollapsedChange"],
+    "isOpening": ["onIsOpenChange"]
+  }; }
+};
+SddsSideMenu.style = sideMenuCss;
+
+exports.sdds_side_menu = SddsSideMenu;
+
+//# sourceMappingURL=sdds-side-menu.cjs.entry.js.map

package/dist/cjs/sdds-side-menu.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-side-menu.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,y3EAAy3E;;ACiB74E,MAAM,kBAAkB,GAAG,OAAO,CAAC;AACnC,MAAM,0BAA0B,GAAG,GAAG,CAAC;AACvC,MAAM,0BAA0B,GAAG,GAAG,CAAC;MAO1B,YAAY;;;;IAiCvB,oCAA+B,GAAqC,CAAC,CAAC;MACpE,MAAM,SAAS,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC;MAC7B,IAAI,SAAS,EAAE;QACb,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;OACxB;KACF,CAAC;gBAzBuC,KAAK;sBAGC,KAAK;qBAGN,KAAK;4BAEd,KAAK;oBAEb,IAAI;kBAEN,KAAK;qBAEF,KAAK;qBAEL,KAAK;;EAWnC,iBAAiB;IACf,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;MAC9B,SAAS,EAAE,IAAI,CAAC,SAAS;KAC1B,CAAC,CAAC;IAEH,IAAI,CAAC,qBAAqB,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,kBAAkB,GAAG,CAAC,CAAC;IACrF,IAAI,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,+BAA+B,CAAC,CAAC;GAC7F;EAED,gBAAgB;IACd,UAAU,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,0BAA0B,CAAC,CAAC;IAE3E,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAoB,CAAC;IAC5F,MAAM,iBAAiB,GAAG,SAAS,CAAC,gBAAgB,EAAE,CAAC;IACvD,MAAM,oBAAoB,GAAG,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,MAAM,IAAG,CAAC,CAAC;IAE3D,IAAI,CAAC,oBAAoB,EAAE;MACzB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;KAC9B;GACF;EAED,oBAAoB;IAClB,IAAI,CAAC,qBAAqB,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,+BAA+B,CAAC,CAAC;GAChG;EAGD,YAAY,CAAC,MAAe,EAAE,MAAgB;IAC5C,IAAI,MAAM,IAAI,CAAC,MAAM,EAAE;MACrB,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;IACD,IAAI,CAAC,MAAM,IAAI,MAAM,EAAE;MACrB,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;GACF;EAGD,iBAAiB,CAAC,MAAe;IAC/B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;MAC9B,SAAS,EAAE,MAAM;KAClB,CAAC,CAAC;GACJ;EAGD,cAAc,CAAC,MAAe;IAC5B,IAAI,MAAM,EAAE;MACV,MAAM,qBAAqB,GAAGA,SAAG,CAAC,IAAI,CAAC,IAAI,EAAEC,iBAAW,EAAE,IAAI,CAAC,CAAC;MAChE,qBAAqB,CAAC,KAAK,EAAE,CAAC;KAC/B;GACF;EAED,MAAM,UAAU;IACd,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IAEtB,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO;MACxB,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;KACxB,CAAC,CAAC;IACH,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IAEtB,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO;MACxB,UAAU,CAAC,OAAO,EAAE,0BAA0B,CAAC,CAAC;KACjD,CAAC,CAAC;IACH,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACvB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACpB;EAED,MAAM,UAAU;IACd,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IAEtB,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO;MACxB,UAAU,CAAC,OAAO,EAAE,0BAA0B,CAAC,CAAC;KACjD,CAAC,CAAC;IACH,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;GACtB;EAED,MAAM;IACJ,QACEC,QAACC,UAAI,IAAC,IAAI,EAAC,YAAY,IACrBD,iBACE,KAAK,EAAE;QACL,SAAS,EAAE,IAAI;QACf,wBAAwB,EAAE,IAAI,CAAC,gBAAgB;QAC/C,YAAY,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS;QAC3C,cAAc,EAAE,IAAI,CAAC,QAAQ;OAC9B,IAEDA,kBAAM,IAAI,EAAC,SAAS,GAAQ,EAC5BA,mBAAO,KAAK,EAAE,MAAM,IAClBA,kBAAM,IAAI,EAAC,cAAc,GAAQ,EACjCA,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,gBAAI,KAAK,EAAE,+CAA+C,IACxDA,qBAAa,CACV,EACLA,gBAAI,KAAK,EAAE,6CAA6C,IACtDA,kBAAM,IAAI,EAAC,KAAK,GAAQ,CACrB,CACD,EACNA,kBAAM,IAAI,EAAC,YAAY,GAAQ,CACzB,CACJ,CACD,EACP;GACH;;;;;;;;;;;;","names":["dfs","isFocusable","h","Host"],"sources":["./src/components/side-menu/webcomponent/side-menu.scss?tag=sdds-side-menu&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu.tsx"],"sourcesContent":["@import '../theme/core/spacing/vars';\n@import '../../../mixins/scrollbar';\n@import '../../../mixins/z-index';\n@import '../../../global/variables';\n\n:host([open]) {\n  pointer-events: auto;\n  z-index: z(header) + 1;\n}\n\n:host {\n  pointer-events: none;\n  display: block;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  height: 100%;\n\n  .wrapper {\n    height: inherit;\n\n    /* default slot */\n    slot:not([name])::slotted(*) {\n      border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);\n    }\n\n    /* 'end' slot */\n    ::slotted([slot='end']) {\n      border-top: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);\n    }\n\n    .sdds-side-menu-list-end {\n      margin-top: 68px;\n    }\n  }\n\n  .state-closed {\n    display: none;\n  }\n\n  .state-open {\n    slot[name='overlay']::slotted(sdds-side-menu-overlay) {\n      opacity: 0.4;\n    }\n\n    slot[name='close-button']::slotted(sdds-side-menu-close-button) {\n      opacity: 1;\n    }\n\n    .sdds-side-menu-wrapper {\n      transform: scaleY(1);\n    }\n  }\n\n  .state-upper-slot-empty {\n    .sdds-side-menu-list-upper {\n      display: none;\n    }\n\n    .sdds-side-menu-list-end {\n      margin-top: 0;\n    }\n\n    ::slotted([slot='end']) {\n      border-top: none;\n      border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);\n    }\n  }\n}\n\n@media (min-width: $grid-lg) {\n  :host([persistent]) {\n    pointer-events: auto;\n    position: static;\n    width: 272px;\n    height: auto;\n    border-right: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);\n\n    .wrapper {\n      slot[name='overlay']::slotted(sdds-side-menu-overlay) {\n        display: none;\n      }\n\n      slot[name='close-button']::slotted(sdds-side-menu-close-button) {\n        display: none;\n      }\n\n      .sdds-side-menu-wrapper {\n        transform: none;\n      }\n    }\n\n    .menu {\n      width: 272px;\n    }\n\n    .state-closed {\n      display: block;\n    }\n\n    &:host([collapsed]) {\n      width: 69px; // 68 + 1px for border\n\n      .menu {\n        width: 68px;\n      }\n    }\n\n    slot[name='end']::slotted(*) {\n      display: none;\n    }\n  }\n}\n\n.menu {\n  * {\n    padding: 0;\n    margin: 0;\n    box-sizing: border-box;\n  }\n\n  width: 80%;\n  height: inherit;\n  position: relative;\n  left: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n@media (max-width: $media-fullwidth) {\n  .menu {\n    width: 100%;\n  }\n}\n\naside {\n  .sdds-side-menu-wrapper {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: column;\n    flex-grow: 1;\n    background-color: var(--sdds-sidebar-side-menu-background-cover);\n    transition: transform 250ms ease;\n    transform-origin: top;\n    transform: scaleY(0);\n\n    @include sdds-scrollbar;\n\n    overflow-y: auto;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { dfs, isFocusable } from '../../../utils/utils';\n\nexport interface CollapsedEvent {\n  collapsed: boolean;\n}\n\nconst GRID_LG_BREAKPOINT = '992px';\nconst OPENING_ANIMATION_DURATION = 400;\nconst INITIALIZE_ANIMATION_DELAY = 500;\n\n@Component({\n  tag: 'sdds-side-menu',\n  styleUrl: 'side-menu.scss',\n  shadow: true,\n})\nexport class SddsSideMenu {\n  @Element() host: HTMLSddsSideMenuElement;\n\n  /** Broadcasts collapsed state to child components. */\n  @Event({\n    eventName: 'sddsSideMenuCollapsed',\n    bubbles: true,\n    composed: true,\n    cancelable: true,\n  })\n  collapsedEventEmitter: EventEmitter<CollapsedEvent>;\n\n  /** If the side menu is open or not. */\n  @Prop({ reflect: true }) open: boolean = false;\n\n  /** If the side menu should always be shown on desktop screens to the side. */\n  @Prop({ reflect: true }) persistent: boolean = false;\n\n  /** If the side menu is collapsed. Only a persistent desktop menu can be collapsed. */\n  @Prop({ reflect: true }) collapsed: boolean = false;\n\n  @State() isUpperSlotEmpty: boolean = false;\n\n  @State() isClosed: boolean = true;\n\n  @State() isOpen: boolean = false;\n\n  @State() isClosing: boolean = false;\n\n  @State() isOpening: boolean = false;\n\n  private matchesLgBreakpointMq: MediaQueryList;\n\n  handleMatchesLgBreakpointChange: (e: MediaQueryListEvent) => void = (e) => {\n    const isBelowLg = !e.matches;\n    if (isBelowLg) {\n      this.collapsed = false;\n    }\n  };\n\n  connectedCallback() {\n    this.collapsedEventEmitter.emit({\n      collapsed: this.collapsed,\n    });\n\n    this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT})`);\n    this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);\n  }\n\n  componentDidLoad() {\n    setTimeout(() => this.onOpenChange(this.open), INITIALIZE_ANIMATION_DELAY);\n\n    const upperSlot = this.host.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement;\n    const upperSlotElements = upperSlot.assignedElements();\n    const hasUpperSlotElements = upperSlotElements?.length > 0;\n\n    if (!hasUpperSlotElements) {\n      this.isUpperSlotEmpty = true;\n    }\n  }\n\n  disconnectedCallback() {\n    this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);\n  }\n\n  @Watch('open')\n  onOpenChange(newVal: boolean, oldVal?: boolean) {\n    if (newVal && !oldVal) {\n      this.setOpening();\n    }\n    if (!newVal && oldVal) {\n      this.setClosing();\n    }\n  }\n\n  @Watch('collapsed')\n  onCollapsedChange(newVal: boolean) {\n    this.collapsedEventEmitter.emit({\n      collapsed: newVal,\n    });\n  }\n\n  @Watch('isOpening')\n  onIsOpenChange(newVal: boolean) {\n    if (newVal) {\n      const firstFocusableElement = dfs(this.host, isFocusable, true);\n      firstFocusableElement.focus();\n    }\n  }\n\n  async setOpening() {\n    this.isClosed = false;\n\n    await new Promise((resolve) => {\n      setTimeout(resolve, 0);\n    });\n    this.isOpening = true;\n\n    await new Promise((resolve) => {\n      setTimeout(resolve, OPENING_ANIMATION_DURATION);\n    });\n    this.isOpening = false;\n    this.isOpen = true;\n  }\n\n  async setClosing() {\n    this.isOpen = false;\n    this.isClosing = true;\n\n    await new Promise((resolve) => {\n      setTimeout(resolve, OPENING_ANIMATION_DURATION);\n    });\n    this.isClosing = false;\n    this.isClosed = true;\n  }\n\n  render() {\n    return (\n      <Host role=\"navigation\">\n        <div\n          class={{\n            'wrapper': true,\n            'state-upper-slot-empty': this.isUpperSlotEmpty,\n            'state-open': this.isOpen || this.isOpening,\n            'state-closed': this.isClosed,\n          }}\n        >\n          <slot name=\"overlay\"></slot>\n          <aside class={`menu`}>\n            <slot name=\"close-button\"></slot>\n            <div class=\"sdds-side-menu-wrapper\">\n              <ul class={`sdds-side-menu-list sdds-side-menu-list-upper`}>\n                <slot></slot>\n              </ul>\n              <ul class={`sdds-side-menu-list sdds-side-menu-list-end`}>\n                <slot name=\"end\"></slot>\n              </ul>\n            </div>\n            <slot name=\"sticky-end\"></slot>\n          </aside>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/sdds-slider.cjs.entry.js

@@ -2,25 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5ad19933.js');
+const index = require('./index-681dc796.js');
 
-const sliderCss = ":root,.sdds-mode-light{--sdds-slider-label-color:var(--sdds-grey-958);--sdds-slider-label-color-disabled:var(--sdds-grey-400);--sdds-slider-thumb-color:var(--sdds-blue-800);--sdds-slider-divider-color:var(--sdds-grey-400);--sdds-slider-track-color:var(--sdds-grey-400);--sdds-slider-track-fill-color:var(--sdds-blue-800);--sdds-slider-input-inputfield-color:var(--sdds-grey-700);--sdds-slider-inputfield-color:var(--sdds-grey-400);--sdds-slider-controls-color:var(--sdds-grey-958);--sdds-slider-inputfield-background:var(--sdds-white);--sdds-slider-inputfield-box-shadow:var(--sdds-grey-400);--sdds-slider-divider-values-color:var(--sdds-grey-958)}.sdds-mode-dark{--sdds-slider-label-color:var(--sdds-grey-100);--sdds-slider-label-color-disabled:var(--sdds-grey-700);--sdds-slider-thumb-color:var(--sdds-grey-100);--sdds-slider-divider-color:var(--sdds-grey-700);--sdds-slider-track-color:var(--sdds-grey-700);--sdds-slider-track-fill-color:var(--sdds-grey-100);--sdds-slider-inputfield-color:var(--sdds-grey-700);--sdds-slider-input-inputfield-color:var(--sdds-grey-400);--sdds-slider-controls-color:var(--sdds-grey-100);--sdds-slider-inputfield-background:var(--sdds-grey-900);--sdds-slider-inputfield-box-shadow:var(--sdds-grey-800);--sdds-slider-divider-values-color:var(--sdds-grey-100)}sdds-slider{box-sizing:border-box;width:100%}sdds-slider *{box-sizing:border-box}sdds-slider input[type=range].sdds-slider-native-element{display:none}.sdds-slider-wrapper{width:100%}.sdds-slider-wrapper.read-only{pointer-events:none}.sdds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.sdds-slider .sdds-slider-inner{width:100%;height:20px;position:relative}.sdds-slider .sdds-slider__controls{position:relative;top:-25px}.sdds-slider .sdds-slider__controls .sdds-slider__control{cursor:pointer}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus{padding:18px 18px 18px 0}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus{padding:18px 0 18px 18px}.sdds-slider .sdds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.sdds-slider .sdds-slider__input-values .sdds-slider__input-value{user-select:none;padding:18px;color:var(--sdds-grey-700);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper{background-color:var(--sdds-slider-inputfield-background);display:flex;align-items:center;justify-content:center}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--sdds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--sdds-grey-600)}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--sdds-blue-400);outline:0}.sdds-slider label{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);user-select:none;position:absolute;color:var(--sdds-slider-label-color);top:-16px;transform:translateY(-100%)}.sdds-slider label.offset{top:-35px}.sdds-slider .sdds-slider__value{font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--sdds-grey-800);color:var(--sdds-white)}.sdds-slider .sdds-slider__value svg{position:absolute;left:50%;transform:translateX(-50%);top:34px}.sdds-slider .sdds-slider__scrubber{position:absolute}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:20px;height:20px;border-radius:100%;background-color:var(--sdds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{content:\" \";display:none;width:48px;height:48px;background-color:var(--sdds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner:hover::before{display:block;opacity:0.08}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed{width:24px;height:24px}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed::before{display:block;opacity:0.16 !important}.sdds-slider .sdds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.sdds-slider .sdds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--sdds-slider-divider-color);color:var(--sdds-slider-divider-values-color);width:1px}.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider span{display:block;user-select:none;color:var(-sdds-grey-700);font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.sdds-slider .sdds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--sdds-slider-track-color);position:relative}.sdds-slider .sdds-slider__track:focus{outline:0}.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:24px;height:24px}.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{display:block;opacity:0.08}.sdds-slider .sdds-slider__track .sdds-slider__track-fill{background-color:var(--sdds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.sdds-slider.disabled{cursor:not-allowed}.sdds-slider.disabled>*{pointer-events:none}.sdds-slider.disabled label{color:var(--sdds-slider-label-color-disabled)}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg,.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg{fill:var(--sdds-slider-controls-color)}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-value{color:var(--sdds-slider-controls-color)}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper{pointer-events:none}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field{color:var(--sdds-slider-controls-color);pointer-events:none}.sdds-slider.disabled .sdds-slider__value{display:none}.sdds-slider.disabled .sdds-slider__track .sdds-slider__track-fill{background-color:var(--sdds-slider-track-fill-color)}.sdds-slider.disabled .sdds-slider__value-dividers .sdds-slider__value-divider span{color:var(--sdds-slider-track-fill-color)}.sdds-slider.disabled .sdds-slider__scrubber{pointer-events:none}.sdds-slider.disabled .sdds-slider__scrubber .sdds-slider__scrubber-inner{background:var(--sdds-slider-track-color);cursor:default}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:16px;height:16px}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{width:40px;height:40px}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed{width:20px;height:20px}.sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg,.sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg{fill:var(--sdds-slider-controls-color)}";
+const sliderCss = ":root,.sdds-mode-light{--sdds-slider-label-color:var(--sdds-grey-958);--sdds-slider-thumb-color:var(--sdds-blue-800);--sdds-slider-divider-color:var(--sdds-grey-400);--sdds-slider-track-color:var(--sdds-grey-400);--sdds-slider-track-fill-color:var(--sdds-blue-800);--sdds-slider-input-inputfield-color:var(--sdds-grey-700);--sdds-slider-inputfield-color:var(--sdds-grey-400);--sdds-slider-controls-color:var(--sdds-grey-958);--sdds-slider-inputfield-background:var(--sdds-white);--sdds-slider-inputfield-box-shadow:var(--sdds-grey-400);--sdds-slider-divider-values-color:var(--sdds-grey-958);--sdds-slider-disabled:var(--sdds-grey-400);--sdds-slider-value-tooltip-background:var(--sdds-grey-800);--sdds-slider-value-tooltip-color:var(--sdds-white)}.sdds-mode-dark{--sdds-slider-label-color:var(--sdds-grey-100);--sdds-slider-thumb-color:var(--sdds-grey-100);--sdds-slider-divider-color:var(--sdds-grey-700);--sdds-slider-track-color:var(--sdds-grey-700);--sdds-slider-track-fill-color:var(--sdds-grey-100);--sdds-slider-inputfield-color:var(--sdds-grey-700);--sdds-slider-input-inputfield-color:var(--sdds-grey-400);--sdds-slider-controls-color:var(--sdds-grey-100);--sdds-slider-inputfield-background:var(--sdds-grey-900);--sdds-slider-inputfield-box-shadow:var(--sdds-grey-800);--sdds-slider-divider-values-color:var(--sdds-grey-100);--sdds-slider-disabled:var(--sdds-grey-700);--sdds-slider-value-tooltip-background:var(--sdds-grey-200);--sdds-slider-value-tooltip-color:var(--sdds-grey-958)}sdds-slider{box-sizing:border-box;width:100%}sdds-slider *{box-sizing:border-box}sdds-slider input[type=range].sdds-slider-native-element{display:none}.sdds-slider-wrapper{width:100%}.sdds-slider-wrapper.read-only{pointer-events:none}.sdds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.sdds-slider .sdds-slider-inner{width:100%;height:20px;position:relative}.sdds-slider .sdds-slider__controls{position:relative;top:-25px}.sdds-slider .sdds-slider__controls .sdds-slider__control{cursor:pointer}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus{padding:18px 18px 18px 0}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus{padding:18px 0 18px 18px}.sdds-slider .sdds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.sdds-slider .sdds-slider__input-values .sdds-slider__input-value{user-select:none;padding:18px;color:var(--sdds-grey-700);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}.sdds-slider .sdds-slider__input-values .sdds-slider__input-value.min-value{padding-left:0px}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper{background-color:var(--sdds-slider-inputfield-background);display:flex;align-items:center;justify-content:center;border-radius:4px 4px 0 0}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--sdds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--sdds-grey-600)}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--sdds-blue-400);outline:0}.sdds-slider label{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);user-select:none;position:absolute;color:var(--sdds-slider-label-color);padding-bottom:16px;transform:translateY(-100%)}.sdds-slider label.offset{padding-bottom:34px}.sdds-slider .sdds-slider__value{font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--sdds-slider-value-tooltip-background);color:var(--sdds-slider-value-tooltip-color)}.sdds-slider .sdds-slider__value svg{color:var(--sdds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.sdds-slider .sdds-slider__scrubber{position:absolute}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:20px;height:20px;border-radius:100%;background-color:var(--sdds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{content:\" \";display:none;width:48px;height:48px;background-color:var(--sdds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner:hover::before{display:block;opacity:0.08}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed{width:24px;height:24px}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed::before{display:block;opacity:0.16 !important}.sdds-slider .sdds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.sdds-slider .sdds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--sdds-slider-divider-color);color:var(--sdds-slider-divider-values-color);width:1px}.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider span{display:block;user-select:none;color:var(-sdds-grey-700);font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.sdds-slider .sdds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--sdds-slider-track-color);position:relative}.sdds-slider .sdds-slider__track:focus{outline:0}.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:24px;height:24px}.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{display:block;opacity:0.08}.sdds-slider .sdds-slider__track .sdds-slider__track-fill{background-color:var(--sdds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.sdds-slider.disabled{cursor:not-allowed}.sdds-slider.disabled>*{pointer-events:none}.sdds-slider.disabled label{color:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg,.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg{fill:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-value{color:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper{pointer-events:none}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field{color:var(--sdds-slider-disabled);pointer-events:none}.sdds-slider.disabled .sdds-slider__value{display:none}.sdds-slider.disabled .sdds-slider__track .sdds-slider__track-fill{background-color:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__value-dividers .sdds-slider__value-divider span{color:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__scrubber{pointer-events:none}.sdds-slider.disabled .sdds-slider__scrubber .sdds-slider__scrubber-inner{background-color:var(--sdds-slider-disabled);cursor:default}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:16px;height:16px}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{width:40px;height:40px}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed{width:20px;height:20px}.sdds-slider .sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus sdds-icon,.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus sdds-icon{color:var(--sdds-slider-controls-color)}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus sdds-icon,.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus sdds-icon{color:var(--sdds-slider-disabled)}";
 
 const Slider = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.sddsChange = index.createEvent(this, "sddsChange", 7);
+    this.sddsChange = index.createEvent(this, "sddsChange", 6);
     this.wrapperElement = null;
     this.scrubberElement = null;
     this.scrubberInnerElement = null;
-    this.dividersElement = null;
     this.trackElement = null;
     this.trackFillElement = null;
     this.minusElement = null;
     this.plusElement = null;
     this.inputElement = null;
-    this.nativeRangeInputElement = null;
-    this.scrubberGrabPos = { x: 0, y: 0 };
     this.scrubberGrabbed = false;
     this.scrubberLeft = 0;
     this.tickValues = [];
@@ -88,33 +85,43 @@ const Slider = class {
     if (!this.scrubberGrabbed) {
       return;
     }
-    const numTicks = parseInt(this.ticks);
-    const trackRect = this.trackElement.getBoundingClientRect();
-    let localLeft = event.clientX - trackRect.left;
-    this.supposedValueSlot = -1;
-    if (this.useSnapping && numTicks > 0) {
-      const v = Math.round(this.getTrackWidth() / (numTicks + 1));
-      localLeft = Math.round(localLeft / v) * v;
-      this.supposedValueSlot = Math.round(localLeft / v);
-    }
-    this.scrubberLeft = this.constrainScrubber(localLeft);
-    this.scrubberElement.style.left = `${this.scrubberLeft}px`;
-    this.updateValue();
-    this.updateTrack();
+    this.scrubberCore(event);
   }
   handleTouchMove(event) {
     event.preventDefault();
     if (!this.scrubberGrabbed) {
       return;
     }
+    this.scrubberCore(event);
+  }
+  scrubberCore(event) {
     const numTicks = parseInt(this.ticks);
     const trackRect = this.trackElement.getBoundingClientRect();
-    let localLeft = event.touches[0].clientX - trackRect.left;
+    let localLeft = 0;
+    if (event.type === 'mousemove') {
+      localLeft = event.clientX - trackRect.left;
+    }
+    else if (event.type === 'touchmove') {
+      localLeft = event.touches[0].clientX - trackRect.left;
+    }
+    else
+      console.warn('Slider component: Unsupported event!');
     this.supposedValueSlot = -1;
     if (this.useSnapping && numTicks > 0) {
-      const v = Math.round(this.getTrackWidth() / (numTicks + 1));
-      localLeft = Math.round(localLeft / v) * v;
-      this.supposedValueSlot = Math.round(localLeft / v);
+      const trackWidth = this.getTrackWidth();
+      const distanceBetweenTicks = Math.round(trackWidth / (numTicks + 1));
+      localLeft = Math.round(localLeft / distanceBetweenTicks) * distanceBetweenTicks;
+      let scrubberPositionPX = 0;
+      if (localLeft >= 0 && localLeft <= trackWidth) {
+        scrubberPositionPX = localLeft;
+      }
+      else if (localLeft > trackWidth) {
+        scrubberPositionPX = trackWidth;
+      }
+      else if (localLeft < 0) {
+        scrubberPositionPX = 0;
+      }
+      this.supposedValueSlot = Math.round(scrubberPositionPX / distanceBetweenTicks);
     }
     this.scrubberLeft = this.constrainScrubber(localLeft);
     this.scrubberElement.style.left = `${this.scrubberLeft}px`;
@@ -188,13 +195,10 @@ const Slider = class {
       this.eventListenersAdded = true;
       this.scrubberElement.addEventListener('mousedown', (event) => {
         event.preventDefault();
-        this.grabScrubber(event.offsetX, event.offsetY);
+        this.grabScrubber();
       });
-      this.scrubberElement.addEventListener('touchstart', (event) => {
-        const rect = this.scrubberElement.getBoundingClientRect();
-        const x = event.targetTouches[0].pageX - rect.left;
-        const y = event.targetTouches[0].pageY - rect.top;
-        this.grabScrubber(x, y);
+      this.scrubberElement.addEventListener('touchstart', () => {
+        this.grabScrubber();
       });
       if (this.useControls) {
         this.minusElement.addEventListener('click', () => {
@@ -227,14 +231,10 @@ const Slider = class {
     this.calculateScrubberLeftFromValue(this.value);
     this.updateTrack();
   }
-  grabScrubber(xOffset, yOffset) {
+  grabScrubber() {
     if (this.readonlyState) {
       return;
     }
-    this.scrubberGrabPos = {
-      x: xOffset,
-      y: yOffset,
-    };
     this.scrubberGrabbed = true;
     this.scrubberInnerElement.classList.add('pressed');
   }
@@ -288,13 +288,13 @@ const Slider = class {
       }
       this.tickValues.push(this.getMax());
     }
-    if (this.disabled !== null) {
+    if (this.disabled) {
       this.disabledState = true;
     }
     else {
       this.disabledState = false;
     }
-    if (this.readOnly !== null) {
+    if (this.readOnly) {
       this.readonlyState = true;
     }
     else {
@@ -302,10 +302,10 @@ const Slider = class {
     }
     this.useInput = false;
     this.useControls = false;
-    if (this.controls !== null) {
+    if (this.controls) {
       this.useControls = true;
     }
-    else if (this.input !== null) {
+    else if (this.input) {
       this.useInput = true;
     }
     this.useSmall = false;
@@ -313,7 +313,7 @@ const Slider = class {
       this.useSmall = true;
     }
     this.useSnapping = false;
-    if (this.snap !== null) {
+    if (this.snap) {
       this.useSnapping = true;
     }
     const min = this.getMin();
@@ -324,21 +324,17 @@ const Slider = class {
     }
   }
   render() {
-    return (index.h("div", { class: `sdds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}` }, index.h("input", { ref: (el) => {
-        this.nativeRangeInputElement = el;
-      }, class: "sdds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled, id: this.sliderId }), index.h("div", { class: `sdds-slider ${this.disabledState ? 'disabled' : ''} ${this.useSmall ? 'sdds-slider-small' : ''}`, ref: (el) => {
+    return (index.h("div", { class: `sdds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}` }, index.h("input", { class: "sdds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled }), index.h("div", { class: `sdds-slider ${this.disabledState ? 'disabled' : ''} ${this.useSmall ? 'sdds-slider-small' : ''}`, ref: (el) => {
         this.wrapperElement = el;
-      } }, this.useInput && (index.h("div", { class: "sdds-slider__input-values" }, index.h("div", { ref: (el) => {
+      } }, index.h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (index.h("div", { class: "sdds-slider__input-values" }, index.h("div", { ref: (el) => {
         this.minusElement = el;
-      }, class: "sdds-slider__input-value" }, this.min))), this.useControls && (index.h("div", { class: "sdds-slider__controls" }, index.h("div", { ref: (el) => (this.minusElement = el), class: "sdds-slider__control sdds-slider__control-minus" }, index.h("sdds-icon", { name: "minus", size: "16px" })))), index.h("div", { class: "sdds-slider-inner" }, index.h("label", { class: this.tickValues.length > 0 && 'offset' }, this.label), this.tickValues.length > 0 && (index.h("div", { class: "sdds-slider__value-dividers-wrapper" }, index.h("div", { ref: (el) => {
-        this.dividersElement = el;
-      }, class: "sdds-slider__value-dividers" }, this.tickValues.map((value) => (index.h("div", { class: "sdds-slider__value-divider" }, this.showTickNumbers && index.h("span", null, value))))))), index.h("div", { class: "sdds-slider__track", ref: (el) => {
+      }, class: "sdds-slider__input-value min-value" }, this.min))), this.useControls && (index.h("div", { class: "sdds-slider__controls" }, index.h("div", { ref: (el) => (this.minusElement = el), class: "sdds-slider__control sdds-slider__control-minus" }, index.h("sdds-icon", { name: "minus", size: "16px" })))), index.h("div", { class: "sdds-slider-inner" }, this.tickValues.length > 0 && (index.h("div", { class: "sdds-slider__value-dividers-wrapper" }, index.h("div", { class: "sdds-slider__value-dividers" }, this.tickValues.map((value) => (index.h("div", { class: "sdds-slider__value-divider" }, this.showTickNumbers && index.h("span", null, value))))))), index.h("div", { class: "sdds-slider__track", ref: (el) => {
         this.trackElement = el;
       }, tabindex: this.disabled ? '-1' : '0' }, index.h("div", { class: "sdds-slider__track-fill", ref: (el) => {
         this.trackFillElement = el;
       } }), index.h("div", { class: "sdds-slider__scrubber", ref: (el) => {
         this.scrubberElement = el;
-      } }, this.tooltip !== null && (index.h("div", { class: "sdds-slider__value" }, this.value, index.h("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "#37414F" })))), index.h("div", { class: "sdds-slider__scrubber-inner", ref: (el) => {
+      } }, this.tooltip && (index.h("div", { class: "sdds-slider__value" }, this.value, index.h("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), index.h("div", { class: "sdds-slider__scrubber-inner", ref: (el) => {
         this.scrubberInnerElement = el;
       } })))), this.useInput && (index.h("div", { class: "sdds-slider__input-values" }, index.h("div", { ref: (el) => {
         this.minusElement = el;