@duetds/components 6.0.2 → 6.0.4

package/lib/dist-custom-elements/p-88511d7a.js

@@ -0,0 +1,275 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { c as createID } from './p-c1325e35.js';
+import { a as getLanguage, g as getLocaleString } from './p-ede854e1.js';
+import { d as defineCustomElement$2 } from './p-7739604d.js';
+import { d as defineCustomElement$1 } from './p-b08e57cf.js';
+
+const duetTooltipCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;z-index:200;display:inline-flex;width:auto;margin-top:-16px !important;margin-left:-3px !important;-webkit-tap-highlight-color:transparent}.duet-tooltip{position:absolute;right:-21px;bottom:100%;z-index:950;display:block;width:282px;min-height:48px;max-height:340px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;line-height:1.25;color:#00294d;visibility:hidden;background:white;border:1px solid #e1e3e6;border-radius:4px;box-shadow:0 2px 10px 0 rgba(0, 41, 77, 0.07);opacity:0;transition:300ms ease;transform:scale(0.9) translateZ(0) translateY(20px);transform-origin:100% 100%}.duet-tooltip.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a;border-color:#e4e4e6;box-shadow:0 2px 10px 0 rgba(117, 117, 117, 0.13)}.duet-tooltip::after{position:absolute;right:22px;bottom:-20px;z-index:200;width:0;height:0;content:\"\";border:10px solid transparent;border-top:10px solid white}.duet-tooltip::before{position:absolute;right:21px;bottom:-22px;z-index:100;width:0;height:0;content:\"\";border:11px solid transparent;border-top:11px solid #e1e3e6}.duet-theme-turva .duet-tooltip::before{border-top:11px solid #e4e4e6}.duet-tooltip.duet-tooltip-down{top:100%;bottom:auto;transform:scale(0.9) translateZ(0) translateY(-20px);transform-origin:100% 0}.duet-tooltip.duet-tooltip-down::after{top:-20px;bottom:auto;border:10px solid transparent;border-bottom:10px solid white}.duet-tooltip.duet-tooltip-down::before{top:-22px;bottom:auto;border:11px solid transparent;border-bottom:11px solid #e1e3e6}.duet-theme-turva .duet-tooltip.duet-tooltip-down::before{border-bottom:11px solid #e4e4e6}.duet-tooltip.duet-tooltip-left{right:-21px !important;transform-origin:100% 100% !important}.duet-tooltip.duet-tooltip-left::after{right:22px !important;transform:none !important}.duet-tooltip.duet-tooltip-left::before{right:21px !important;transform:none !important}.duet-tooltip.duet-tooltip-right{right:auto !important;left:-9px !important;transform-origin:100% 100% !important}.duet-tooltip.duet-tooltip-right::after{right:auto !important;left:22px !important;transform:none !important}.duet-tooltip.duet-tooltip-right::before{right:auto !important;left:21px !important;transform:none !important}.duet-tooltip.duet-tooltip-has-label{right:auto !important;left:0;width:282px !important;transform-origin:0 0 !important}.duet-tooltip.duet-tooltip-has-label::after{right:auto !important;left:1px !important;transform:none !important}.duet-tooltip.duet-tooltip-has-label::before{right:auto !important;left:0 !important;transform:none !important}.duet-tooltip.duet-tooltip-active{visibility:visible;opacity:1;transition-property:transform, opacity;transform:scale(1.0001) translateZ(0) translateY(-8px)}.duet-tooltip.duet-tooltip-active.duet-tooltip-down{transform:scale(1.0001) translateZ(0) translateY(8px)}.duet-tooltip-button{z-index:100;display:inline-block;align-items:center;justify-content:center;min-width:48px;height:48px;padding:0 !important;margin-right:-12px;line-height:normal !important;color:#0077b3;white-space:nowrap;cursor:pointer;background:transparent !important;border-radius:4px}.duet-tooltip-button.duet-theme-turva{color:#c60c30}.duet-tooltip-button:hover{color:#004d80}.duet-tooltip-button:hover.duet-theme-turva{color:#940925}.duet-tooltip-button:focus{background:transparent !important;outline:0}:host(.user-is-tabbing) .duet-tooltip-button:focus{background:transparent !important;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important}:host(.user-is-tabbing) .duet-tooltip-button.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important}.duet-tooltip-button svg{width:20px;height:20px;pointer-events:none}.duet-tooltip-button-has-label{margin-right:0}.duet-tooltip-scrollable{padding:20px !important;width:100%;max-height:250px;padding-right:25px !important;overflow-y:auto;-webkit-hyphens:auto;hyphens:auto;border-radius:4px;-webkit-overflow-scrolling:touch}.duet-tooltip-scrollable:focus{outline:none}:host(.user-is-tabbing) .duet-tooltip-scrollable:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-theme-turva .duet-tooltip-scrollable:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-tooltip-scrollable::-webkit-scrollbar{width:4px}.duet-tooltip-scrollable::-webkit-scrollbar-track{border-radius:4px}.duet-tooltip-scrollable::-webkit-scrollbar-thumb{background:#e1e3e6;border-radius:4px}.duet-theme-turva .duet-tooltip-scrollable::-webkit-scrollbar-thumb{background:#e4e4e6}.duet-tooltip-label{position:relative;z-index:100;display:inline-block;max-width:calc(100% - 30px);margin-left:12px !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.25;text-align:left;white-space:normal;vertical-align:top}.duet-theme-turva .duet-tooltip-label{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-tooltip-close{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:17px;height:17px;min-height:0 !important;padding:0 !important;margin:0 !important;line-height:normal;color:#00294d;cursor:pointer;background:#f5f8fa;border-radius:50%;-webkit-appearance:none;appearance:none}.duet-tooltip-close:focus{outline:none;box-shadow:0 0 0 2px #0077b3}.duet-theme-turva .duet-tooltip-close:focus{color:#171c3a;box-shadow:0 0 0 2px #171c3a}@media (min-width: 48em){.duet-tooltip.duet-mq-medium{right:-148px;width:320px;transform-origin:50% 100%}.duet-tooltip.duet-mq-medium::after{right:50%;transform:translateX(50%)}.duet-tooltip.duet-mq-medium::before{right:50%;transform:translateX(50%)}.duet-tooltip.duet-mq-medium.duet-tooltip-down{transform-origin:50% 0}}@media (min-width: 62em){.duet-tooltip.duet-mq-large{right:-148px;width:320px;transform-origin:50% 100%}.duet-tooltip.duet-mq-large::after{right:50%;transform:translateX(50%)}.duet-tooltip.duet-mq-large::before{right:50%;transform:translateX(50%)}.duet-tooltip.duet-mq-large.duet-tooltip-down{transform-origin:50% 0}}";
+
+const DuetTooltip = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Own Properties.
+     */
+    this.tooltipId = createID("DuetTooltip");
+    this.lastScrollTop = 0;
+    /**
+     * State() variables
+     * Inlined decorator, alphabetical order.
+     */
+    this.openDown = false;
+    /**
+     * Theme of the tooltip.
+     */
+    this.theme = "";
+    /**
+     * The currently active language. This setting changes the accessible labels to match the
+     * chosen language.
+     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+     * @default "fi"
+     */
+    this.language = getLanguage();
+    /**
+     * Default language strings for the accessibleLabel
+     * @default {fi: "Näytä lisätietoja", en: "See more information", sv: "Se mer information"}
+     */
+    this.accessibleLabelDefault = {
+      fi: "Näytä lisätietoja",
+      en: "Show more information",
+      sv: "Visa mer tilläggsuppgifter",
+    };
+    /**
+     * Adds accessible label for the info icon that is only shown for screen
+     * readers. This property is always required to create an accessible interface!
+     * @default {fi: "Näytä lisätietoja", en: "See more information", sv: "Se mer information"}
+     */
+    this.accessibleLabel = getLocaleString(this.accessibleLabelDefault, this.language);
+    /**
+     * Default language strings for the accessibleCloseLabel
+     * @default {fi: "Sulje lisätiedot", en: "Close details", sv: "Stäng detaljer"}
+     */
+    this.accessibleCloseLabelDefault = {
+      fi: "Sulje lisätiedot",
+      en: "Close details",
+      sv: "Stäng tilläggsuppgifter",
+    };
+    /**
+     * Adds accessible label for the close icon that is only shown for screen
+     * readers. This property is always required to create an accessibly interface!
+     * @default {fi: "Sulje lisätiedot", en: "Close details", sv: "Stäng detaljer"}
+     */
+    this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefault, this.language);
+    /**
+     * Label of the tooltip. If used, replaces the accessibleLabel option.
+     */
+    this.label = "";
+    /**
+     * Adjust the responsive breakpoint where tooltip starts opening towards left.
+     */
+    this.breakpoint = "medium";
+    /**
+     * With direction setting you can force the tooltip to always open towards left
+     * or right instead of automatically determining the direction.
+     */
+    this.direction = "auto";
+    /**
+     * Adjust the vertical positioning of the tooltip toggle in pixels. Can be a
+     * negative value as well. E.g. "-13px".
+     */
+    this.positionVertical = "0";
+    /**
+     * Adjust the horizontal positioning of the tooltip toggle in pixels. Can be a
+     * negative value as well. E.g. "-13px".
+     */
+    this.positionHorizontal = "0";
+    /**
+     * Toggle whether the tooltip is initially visible or not. This property should
+     * not be used in production in most cases.
+     */
+    this.active = false;
+    /**
+     * Local methods
+     */
+    this.openTooltip = () => {
+      this.focusTarget = "tooltip";
+      this.active = true;
+    };
+    this.closeTooltip = (moveFocusToButton = false) => {
+      if (moveFocusToButton) {
+        this.focusTarget = "trigger";
+      }
+      this.active = false;
+    };
+    this.toggleOpen = () => {
+      this.active ? this.closeTooltip() : this.openTooltip();
+    };
+    this.handleFocusOut = (e) => {
+      if (!this.active) {
+        return;
+      }
+      const relatedTarget = e.relatedTarget;
+      if (
+      // if we don't know where focus went
+      relatedTarget == null ||
+        // if focus is within the tooltip itself
+        this.element.shadowRoot.contains(relatedTarget) ||
+        // if focus is within the tooltip light DOM
+        this.element.contains(relatedTarget)) {
+        // then we can skip closing
+        return;
+      }
+      this.closeTooltip();
+    };
+    this.handleKeyDown = (e) => {
+      const isEscapeKey = e.keyCode === 27;
+      const isTabbingOut = e.target === this.scrollableEl && e.shiftKey && e.keyCode === 9;
+      if (isEscapeKey || isTabbingOut) {
+        this.closeTooltip(true);
+      }
+    };
+    this.handleCloseClick = () => {
+      this.closeTooltip(true);
+    };
+    this.isElementInViewport = (el) => {
+      if (!el) {
+        return false;
+      }
+      var rect = el.getBoundingClientRect();
+      return (
+      // This takes the possible Nav component into account
+      rect.top >= 100 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth));
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  componentDidUpdate() {
+    switch (this.focusTarget) {
+      case "tooltip":
+        this.scrollableEl.focus({ preventScroll: true });
+        break;
+      case "trigger":
+        this.buttonEl.focus({ preventScroll: true });
+        break;
+    }
+    this.focusTarget = null;
+  }
+  /**
+   * Component event handling.
+   */
+  onScroll() {
+    clearTimeout(this.scrollTimer);
+    this.scrollTimer = setTimeout(() => {
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      if (!this.isElementInViewport(this.tooltipEl)) {
+        this.openDown = scrollTop > this.lastScrollTop;
+      }
+      this.lastScrollTop = Math.max(0, scrollTop);
+    }, 100);
+  }
+  handleDocumentClick(e) {
+    if (!this.active) {
+      return;
+    }
+    const path = e.composedPath();
+    const isClickOutside = path.every(el => el !== this.element);
+    if (isClickOutside) {
+      this.closeTooltip();
+    }
+  }
+  async handleActiveChange(newActiveValue) {
+    if (newActiveValue) {
+      this.openDown = !this.isElementInViewport(this.tooltipEl);
+    }
+    else {
+      setTimeout(() => (this.openDown = false), 300);
+    }
+  }
+  /**
+   * render() function.
+   * Always the last one in the class.
+   */
+  render() {
+    const tooltipStyles = {
+      transform: `translateY(${this.positionVertical}) translateX(${this.positionHorizontal})`,
+      // This is needed to that the active tooltip stacks on
+      // top of other tooltips and the header.
+      zIndex: this.active ? "201" : "",
+    };
+    return (h(Host, { style: tooltipStyles }, h("button", { ref: element => (this.buttonEl = element), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", onClick: this.toggleOpen, type: "button", class: {
+        "duet-tooltip-button": true,
+        "duet-tooltip-button-has-label": !!this.label,
+        "duet-theme-turva": this.theme === "turva",
+      } }, h("svg", { "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m13.5 17.25c-1.241 0-2.25-1.009-2.25-2.25v-3.75h-.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h.75c.827 0 1.5.673 1.5 1.5v3.75c0 .414.336.75.75.75h.75c.414 0 .75.336.75.75s-.336.75-.75.75z" }), h("circle", { cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { d: "m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z" })), this.label ? (h("span", { class: "duet-tooltip-label" }, this.label)) : (h("duet-visually-hidden", null, this.accessibleInputLabel
+      ? `${this.accessibleInputLabel}, ${this.accessibleLabel}`
+      : this.accessibleLabel))), h("div", { ref: element => (this.tooltipEl = element), class: {
+        "duet-tooltip": true,
+        "duet-mq-large": this.breakpoint === "large",
+        "duet-mq-medium": this.breakpoint === "medium",
+        "duet-theme-turva": this.theme === "turva",
+        "duet-tooltip-down": this.openDown,
+        "duet-tooltip-has-label": !!this.label,
+        "duet-tooltip-left": this.direction === "left",
+        "duet-tooltip-right": this.direction === "right",
+        "duet-tooltip-active": this.active === true,
+      }, onClick: e => e.stopPropagation(), onKeyDown: this.handleKeyDown, onFocusout: this.handleFocusOut }, h("div", { ref: element => (this.scrollableEl = element), class: "duet-tooltip-scrollable", tabindex: "0", id: this.tooltipId }, h("slot", null)), h("button", { type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick }, h("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", null, this.accessibleCloseLabel)))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "active": ["handleActiveChange"]
+  }; }
+  static get style() { return duetTooltipCss; }
+}, [1, "duet-tooltip", {
+    "theme": [1025],
+    "language": [1025],
+    "accessibleLabelDefault": [1, "accessible-label-default"],
+    "accessibleLabel": [1, "accessible-label"],
+    "accessibleInputLabel": [1, "accessible-input-label"],
+    "accessibleCloseLabelDefault": [1, "accessible-close-label-default"],
+    "accessibleCloseLabel": [1, "accessible-close-label"],
+    "label": [1],
+    "breakpoint": [1],
+    "direction": [1],
+    "positionVertical": [513, "position-vertical"],
+    "positionHorizontal": [513, "position-horizontal"],
+    "active": [1540],
+    "openDown": [32]
+  }, [[9, "scroll", "onScroll"], [4, "click", "handleDocumentClick"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-tooltip", "duet-icon", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-tooltip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetTooltip);
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DuetTooltip as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-9c732bb9.js

@@ -0,0 +1,193 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { d as defineCustomElement$1 } from './p-7739604d.js';
+
+const duetScrollableCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}:host{position:relative !important}:host .duet-scrollable-items{display:flex}:host .duet-scrollable-items .duet-scrollable-button{position:relative;flex:0 0 auto;flex-basis:40px;padding:10px;cursor:pointer}:host .duet-scrollable-items .duet-scrollable-button:active{transform:scale(0.8)}:host .duet-scrollable-items .duet-scrollable-button--left{left:-12px}:host .duet-scrollable-items .duet-scrollable-button--right{right:-12px}:host .duet-scrollable-items .duet-scrollable-button--occluded{display:none}:host .duet-scrollable-items .duet-scrollable-list{display:flex;flex-wrap:nowrap;gap:20px;padding-top:2px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-margin:0 20px;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch;}:host .duet-scrollable-items .duet-scrollable-list::-webkit-scrollbar{display:none}::slotted(*){scroll-snap-align:center;margin-left:0;-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out}";
+
+const DuetScrollable = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Private variables and constants index
+     */
+    this.currentIndex = 0;
+    this.tabListElement = undefined;
+    this.tabListClass = "duet-scrollable-list";
+    this.tablistAtStart = true;
+    this.isTabContentSmallerThanWrapper = false;
+    this.tablistAtEnd = false;
+    this.childrenData = {};
+    this.resizeObserver = new ResizeObserver(entries => {
+      var _a, _b, _c, _d;
+      // otherwise, something is wrong, expecting 1 element only
+      if ((entries === null || entries === void 0 ? void 0 : entries.length) === 1) {
+        const currentWidth = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
+        const scrollWidth = (_d = (_c = entries[0]) === null || _c === void 0 ? void 0 : _c.target) === null || _d === void 0 ? void 0 : _d.scrollWidth;
+        // in order to avoid state "jumping" on the boundary condition we add a few pixels to the comparison
+        this.isTabContentSmallerThanWrapper = scrollWidth > currentWidth + 5;
+      }
+    });
+    /**
+     * Theme of duet-tab-scrollable. When used this will override the color setting and
+     * use "primary" or "primary-turva" as the color depending on which theme
+     * is chosen.
+     */
+    this.theme = "";
+    /**
+     * Optional identifier to add to buttons in the tab group
+     */
+    this.identifier = "";
+    /**
+     * Selected element
+     */
+    this.selected = 0;
+  }
+  watchPropHandler(newValue) {
+    this.scrollToTab(newValue, "center");
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    const slotted = this.host.children;
+    this.childrenData = { hasChildren: slotted && slotted.length > 0, numberOfChildren: slotted && slotted.length };
+  }
+  componentDidLoad() {
+    this.resizeObserver.observe(this.tabListElement);
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  /**
+   * Private methods.
+   */
+  getLastVisibleElement() {
+    const clientWidth = this.tabListElement.clientWidth;
+    const xValues = Array.from(this.host.querySelectorAll("button")).findIndex(element => element.getBoundingClientRect().x > clientWidth);
+    return xValues;
+  }
+  getFirstVisibleElement() {
+    const buttonCollection = this.host.querySelectorAll("button");
+    // reverse the array because we want the first invisible element form the middle, not the first in the list
+    const arrayOfXValues = Array.from(buttonCollection).map(el => el.getBoundingClientRect().x - el.getBoundingClientRect().width);
+    const xValues = arrayOfXValues.findIndex(element => {
+      return element > 0;
+    });
+    return xValues;
+  }
+  updateScrollButtons(container = this.tabListElement) {
+    if (container.scrollLeft <= 0) {
+      this.tablistAtStart = true;
+    }
+    else if (container.scrollLeft > 0) {
+      this.tablistAtStart = false;
+    }
+    if (container.clientWidth + container.scrollLeft + 10 >= container.scrollWidth) {
+      this.tablistAtEnd = true;
+    }
+    else if (container.clientWidth + container.scrollLeft + 10 < container.scrollWidth) {
+      this.tablistAtEnd = false;
+    }
+  }
+  scrollToTab(index = this.currentIndex, inline) {
+    if (!this.childrenData.hasChildren) {
+      return;
+    }
+    if (index + 1 >= this.childrenData.numberOfChildren) {
+      index = this.childrenData.numberOfChildren - 1;
+    }
+    if (index < 0) {
+      index = 0;
+    }
+    const buttons = this.host.querySelectorAll("button");
+    // store previous position
+    let prevPosition = buttons[0].getBoundingClientRect().x;
+    // iterations to run
+    let ticksWhereScrollDidNotHappen = 5;
+    const getAnimationFrame = () => {
+      // if we get the same value enter the logic loop
+      if (buttons[0].getBoundingClientRect().x === prevPosition) {
+        ticksWhereScrollDidNotHappen--;
+        // When iteration is not complete run the calculation again
+        if (ticksWhereScrollDidNotHappen !== 0) {
+          window.requestAnimationFrame(getAnimationFrame);
+          return;
+        }
+        this.updateScrollButtons();
+      }
+      else {
+        window.requestAnimationFrame(getAnimationFrame);
+        prevPosition = buttons[0].getBoundingClientRect().x;
+      }
+    };
+    buttons[index].scrollIntoView({ behavior: "smooth", inline });
+    window.requestAnimationFrame(getAnimationFrame);
+  }
+  scrollLeft() {
+    this.tablistAtEnd = false;
+    const first = this.getFirstVisibleElement() - 1;
+    this.scrollToTab(first, "center");
+  }
+  scrollRight() {
+    this.tablistAtStart = false;
+    const last = this.getLastVisibleElement() + 1;
+    this.scrollToTab(last, "center");
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { class: {
+        "duet-theme-turva": this.theme === "turva",
+        "duet-theme-default": this.theme === "default",
+      } }, h("div", { class: "duet-scrollable-items" }, h("button", { part: `${this.identifier}-button-left`, "aria-hidden": "true", class: {
+        "duet-scrollable-button": true,
+        "duet-scrollable-button--left": true,
+        "duet-scrollable-button--occluded": !this.isTabContentSmallerThanWrapper,
+      }, onClick: () => this.scrollLeft(), disabled: this.tablistAtStart, tabindex: "-1" }, h("duet-icon", { name: "action-arrow-left-small", size: "small", margin: "none" })), h("div", { class: this.tabListClass, onScroll: () => this.updateScrollButtons(), ref: element => (this.tabListElement = element) }, h("slot", null)), h("button", { part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
+        "duet-scrollable-button": true,
+        "duet-scrollable-button--right": true,
+        "duet-scrollable-button--occluded": !this.isTabContentSmallerThanWrapper,
+      }, onClick: () => this.scrollRight(), disabled: this.tablistAtEnd, tabindex: "-1" }, h("duet-icon", { name: "action-arrow-right-small", size: "small", margin: "none" })))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "selected": ["watchPropHandler"]
+  }; }
+  static get style() { return duetScrollableCss; }
+}, [1, "duet-scrollable", {
+    "theme": [1025],
+    "identifier": [1],
+    "selected": [1026],
+    "tablistAtStart": [32],
+    "isTabContentSmallerThanWrapper": [32],
+    "tablistAtEnd": [32],
+    "childrenData": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-scrollable", "duet-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-scrollable":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetScrollable);
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DuetScrollable as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-acdba2db.js

@@ -0,0 +1,114 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { c as createID } from './p-c1325e35.js';
+import { g as getLocaleString } from './p-ede854e1.js';
+import { d as defineCustomElement$1 } from './p-b08e57cf.js';
+
+const duetProgressCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:inherit}.duet-progress{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%;min-height:1px;}.duet-progress .progress-bar{position:relative;display:block;width:100%;height:inherit;min-height:1px;background-color:#f3f9fc;border-radius:0;box-shadow:none}.duet-theme-turva .duet-progress .progress-bar{background-color:#fcf3f4}.duet-progress .progress-bar>span{display:block;height:inherit;text-indent:-9999px;background-color:#0077b3;border-radius:0}.duet-theme-turva .duet-progress .progress-bar>span{background-color:#c60c30}.duet-progress progress[value]{display:flex;width:100%;height:inherit;min-height:1px;color:#0077b3;border:0 none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.duet-theme-turva .duet-progress progress[value]{color:#c60c30}.duet-progress progress[value]::-webkit-progress-bar{background-color:#f3f9fc;border-radius:0}.duet-theme-turva .duet-progress progress[value]::-webkit-progress-bar{background-color:#fcf3f4}.duet-progress progress[value]::-webkit-progress-value{background-color:#0077b3;background-size:35px 20px, 100% 100%, 100% 100%;border-radius:0;-webkit-animation:animate-stripes 5s linear infinite;animation:animate-stripes 5s linear infinite}.duet-theme-turva .duet-progress progress[value]::-webkit-progress-value{background-color:#c60c30}.duet-progress progress[value] ::-moz-progress-bar{background-color:#f3f9fc}.duet-theme-turva .duet-progress progress[value] ::-moz-progress-bar{background-color:#fcf3f4}";
+
+const DuetProgress = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Own Properties
+     */
+    this.progressId = createID("DuetProgress");
+    this.progressLabelId = createID("DuetProgressLabel");
+    /**
+     * Aria Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
+    /**
+     * Defaults for accessibleLabel
+     */
+    this.accessibleLabelUploadDefaults = {
+      fi: ["lähetys valmis", "lähetys käynnissä"],
+      sv: ["Uppladdningen är klar", "Uppladdning pågår"],
+      en: ["upload completed", "upload in progress"],
+    };
+    /**
+     * Adds accessible label for upload in progress and upload complete states
+     * @default {fi: ["lähetys valmis", "lähetys käynnissä"],sv: ["Uppladdningen är klar", "Uppladdning pågår"], en:  ["completed", "in progress"]}
+     */
+    this.accessibleLabelUpload = getLocaleString(this.accessibleLabelUploadDefaults);
+    /**
+     * Progress of the bar, a value from 0-100
+     */
+    this.progress = 0;
+    /**
+     * Height of progressbar
+     */
+    this.height = "10px";
+    /**
+     * Theme of the input.
+     */
+    this.theme = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null, h("div", { "aria-live": this.accessibleLabel ? "polite" : "off", "aria-hidden": this.accessibleLabel ? "false" : "true", "aria-atomic": "true", style: {
+        height: this.height,
+      }, id: this.progressId, class: {
+        "duet-progress": true,
+        "duet-progress-done": this.progress === 100,
+        "duet-progress-start": this.progress === 0,
+        "duet-progress-inprogress": this.progress < 99 && this.progress !== 0,
+        "duet-theme-turva": this.theme === "turva",
+      } }, h("duet-visually-hidden", null, h("label", { htmlFor: this.progressLabelId }, this.progress !== 0 && (h("span", null, this.accessibleLabel, ", ", this.accessibleLabelUpload[this.progress < 99 ? 1 : 0])))), this.caption && (h("div", { class: "duet-progress-caption" }, h("span", null, this.caption))), h("progress", { id: this.progressLabelId, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, role: "progressbar", value: this.progress, max: "100", "aria-valuemin": "0", "aria-valuemax": "100" }, h("div", { class: "progress-bar" }, h("span", { style: { width: `${this.progress}%;` } }, "Progress: ", this.progress, "%"))))));
+  }
+  get element() { return this; }
+  static get style() { return duetProgressCss; }
+}, [0, "duet-progress", {
+    "accessibleDescribedBy": [1, "accessible-described-by"],
+    "accessibleDetails": [1, "accessible-details"],
+    "accessibleLabelledBy": [1, "accessible-labelled-by"],
+    "accessibleDescription": [1, "accessible-description"],
+    "accessibleLabel": [1, "accessible-label"],
+    "accessibleLabelUploadDefaults": [1, "accessible-label-upload-defaults"],
+    "accessibleLabelUpload": [1, "accessible-label-upload"],
+    "progress": [1538],
+    "caption": [1],
+    "height": [1],
+    "theme": [1025]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-progress", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-progress":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetProgress);
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DuetProgress as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-b08e57cf.js

@@ -0,0 +1,37 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-3fc2d124.js';
+
+const duetVisuallyHiddenCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}";
+
+const DuetVisuallyHidden = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { class: "duet-visually-hidden" }, h("slot", null)));
+  }
+  static get style() { return duetVisuallyHiddenCss; }
+}, [1, "duet-visually-hidden"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetVisuallyHidden);
+      }
+      break;
+  } });
+}
+
+export { DuetVisuallyHidden as D, defineCustomElement as d };