@duetds/components 4.34.1 → 4.35.0

package/lib/types/components.d.ts

@@ -112,6 +112,30 @@ export namespace Components {
          */
         "variation": DuetStatus;
     }
+    interface DuetBreadcrumb {
+        /**
+          * Adds accessible label for the link that is only shown for screen readers. Typically, this label text replaces the visible text on the link for users who use assistive technology.
+         */
+        "accessibleLabel": string;
+        /**
+          * Href
+         */
+        "href": string;
+        /**
+          * Icon
+         */
+        "icon": DuetIconName;
+        /**
+          * Theme
+         */
+        "theme": DuetTheme;
+    }
+    interface DuetBreadcrumbs {
+        /**
+          * Theme
+         */
+        "theme": DuetTheme;
+    }
     interface DuetButton {
         /**
           * Indicates the id of a related component’s visually focused element.
@@ -243,6 +267,7 @@ export namespace Components {
         /**
           * Style variation of the button.
           * @negative - value is deprecated and should be used in combination with negative prop in the future
+          * @destructive - value is deprecated and should be replace with destructive-secondary
          */
         "variation": DuetButtonVariation;
         /**
@@ -1539,6 +1564,10 @@ export namespace Components {
           * Use this property when you need to have the modal dialog initially active.
          */
         "active": boolean;
+        /**
+          * Use this property when you want the modal to close when clicked outside of modal.
+         */
+        "closeOnBlur": boolean;
         /**
           * Custom color to be used for the icon, as a design token entered in camelCase or kebab-case. Example: "primary".
          */
@@ -2093,6 +2122,16 @@ export namespace Components {
          */
         "value": number;
     }
+    interface DuetScrollable {
+        /**
+          * Selected element
+         */
+        "selected": number;
+        /**
+          * 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.
+         */
+        "theme": DuetTheme;
+    }
     interface DuetSelect {
         /**
           * Indicates the id of a related component’s visually focused element.
@@ -2264,6 +2303,16 @@ export namespace Components {
         "theme": DuetTheme;
     }
     interface DuetTab {
+        /**
+          * String for AccessibleLabel
+          * @default null
+         */
+        "accessibleDescription": string;
+        /**
+          * Defaults for AccessibleLabel
+          * @default null
+         */
+        "accessibleDescriptionDefault": DuetLangObject | string;
         /**
           * Label for the tab.
          */
@@ -2274,6 +2323,10 @@ export namespace Components {
         "selected": boolean;
     }
     interface DuetTabGroup {
+        /**
+          * Whether the tab-group collapses to a select dropwdown in minor breakpoints
+         */
+        "collapses": boolean;
         /**
           * Label for the select element which gets shown on mobile.
           * @default {fi: "Valitse", en: "Choose", sv: "Välja"}
@@ -2311,6 +2364,10 @@ export namespace Components {
           * @deprecated
          */
         "refresh": () => Promise<void>;
+        /**
+          * Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens), if this is a number instead of true it will be used as "amount of items to scroll"
+         */
+        "scrolls": boolean;
         /**
           * Theme of the component.
          */
@@ -2772,6 +2829,10 @@ export namespace Components {
           * Name of the upload component.
          */
         "name": string;
+        /**
+          * Method for forcing a render of the upload list, element.files can be changed externally But it will only rerender on a new Map or a top Level change - this can be used to update the tabular data if the automatic re-render is no sufficient
+         */
+        "refresh": () => Promise<void>;
         /**
           * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them. When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
          */
@@ -2860,6 +2921,18 @@ declare global {
         prototype: HTMLDuetBadgeElement;
         new (): HTMLDuetBadgeElement;
     };
+    interface HTMLDuetBreadcrumbElement extends Components.DuetBreadcrumb, HTMLStencilElement {
+    }
+    var HTMLDuetBreadcrumbElement: {
+        prototype: HTMLDuetBreadcrumbElement;
+        new (): HTMLDuetBreadcrumbElement;
+    };
+    interface HTMLDuetBreadcrumbsElement extends Components.DuetBreadcrumbs, HTMLStencilElement {
+    }
+    var HTMLDuetBreadcrumbsElement: {
+        prototype: HTMLDuetBreadcrumbsElement;
+        new (): HTMLDuetBreadcrumbsElement;
+    };
     interface HTMLDuetButtonElement extends Components.DuetButton, HTMLStencilElement {
     }
     var HTMLDuetButtonElement: {
@@ -3088,6 +3161,12 @@ declare global {
         prototype: HTMLDuetRangeSliderElement;
         new (): HTMLDuetRangeSliderElement;
     };
+    interface HTMLDuetScrollableElement extends Components.DuetScrollable, HTMLStencilElement {
+    }
+    var HTMLDuetScrollableElement: {
+        prototype: HTMLDuetScrollableElement;
+        new (): HTMLDuetScrollableElement;
+    };
     interface HTMLDuetSelectElement extends Components.DuetSelect, HTMLStencilElement {
     }
     var HTMLDuetSelectElement: {
@@ -3181,6 +3260,8 @@ declare global {
     interface HTMLElementTagNameMap {
         "duet-alert": HTMLDuetAlertElement;
         "duet-badge": HTMLDuetBadgeElement;
+        "duet-breadcrumb": HTMLDuetBreadcrumbElement;
+        "duet-breadcrumbs": HTMLDuetBreadcrumbsElement;
         "duet-button": HTMLDuetButtonElement;
         "duet-caption": HTMLDuetCaptionElement;
         "duet-card": HTMLDuetCardElement;
@@ -3219,6 +3300,7 @@ declare global {
         "duet-radio": HTMLDuetRadioElement;
         "duet-radio-group": HTMLDuetRadioGroupElement;
         "duet-range-slider": HTMLDuetRangeSliderElement;
+        "duet-scrollable": HTMLDuetScrollableElement;
         "duet-select": HTMLDuetSelectElement;
         "duet-spacer": HTMLDuetSpacerElement;
         "duet-spinner": HTMLDuetSpinnerElement;
@@ -3299,6 +3381,30 @@ declare namespace LocalJSX {
          */
         "variation"?: DuetStatus;
     }
+    interface DuetBreadcrumb {
+        /**
+          * Adds accessible label for the link that is only shown for screen readers. Typically, this label text replaces the visible text on the link for users who use assistive technology.
+         */
+        "accessibleLabel"?: string;
+        /**
+          * Href
+         */
+        "href"?: string;
+        /**
+          * Icon
+         */
+        "icon"?: DuetIconName;
+        /**
+          * Theme
+         */
+        "theme"?: DuetTheme;
+    }
+    interface DuetBreadcrumbs {
+        /**
+          * Theme
+         */
+        "theme"?: DuetTheme;
+    }
     interface DuetButton {
         /**
           * Indicates the id of a related component’s visually focused element.
@@ -3434,6 +3540,7 @@ declare namespace LocalJSX {
         /**
           * Style variation of the button.
           * @negative - value is deprecated and should be used in combination with negative prop in the future
+          * @destructive - value is deprecated and should be replace with destructive-secondary
          */
         "variation"?: DuetButtonVariation;
         /**
@@ -4797,6 +4904,10 @@ declare namespace LocalJSX {
           * Use this property when you need to have the modal dialog initially active.
          */
         "active"?: boolean;
+        /**
+          * Use this property when you want the modal to close when clicked outside of modal.
+         */
+        "closeOnBlur"?: boolean;
         /**
           * Custom color to be used for the icon, as a design token entered in camelCase or kebab-case. Example: "primary".
          */
@@ -4824,7 +4935,7 @@ declare namespace LocalJSX {
          */
         "language"?: DuetLanguage;
         /**
-          * Emitted when the close button or esc is hit, but before the modal is closed. To prevent the modal from actually closing, use ev.detail.originalEvent.preventDefault().
+          * Emitted before the modal is closed. To prevent the modal from actually closing, use ev.detail.originalEvent.preventDefault().
          */
         "onDuetBeforeClose"?: (event: CustomEvent<DuetModalCloseEvent>) => void;
         /**
@@ -5357,6 +5468,16 @@ declare namespace LocalJSX {
          */
         "value"?: number;
     }
+    interface DuetScrollable {
+        /**
+          * Selected element
+         */
+        "selected"?: number;
+        /**
+          * 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.
+         */
+        "theme"?: DuetTheme;
+    }
     interface DuetSelect {
         /**
           * Indicates the id of a related component’s visually focused element.
@@ -5536,6 +5657,16 @@ declare namespace LocalJSX {
         "theme"?: DuetTheme;
     }
     interface DuetTab {
+        /**
+          * String for AccessibleLabel
+          * @default null
+         */
+        "accessibleDescription"?: string;
+        /**
+          * Defaults for AccessibleLabel
+          * @default null
+         */
+        "accessibleDescriptionDefault"?: DuetLangObject | string;
         /**
           * Label for the tab.
          */
@@ -5546,6 +5677,10 @@ declare namespace LocalJSX {
         "selected"?: boolean;
     }
     interface DuetTabGroup {
+        /**
+          * Whether the tab-group collapses to a select dropwdown in minor breakpoints
+         */
+        "collapses"?: boolean;
         /**
           * Label for the select element which gets shown on mobile.
           * @default {fi: "Valitse", en: "Choose", sv: "Välja"}
@@ -5582,6 +5717,10 @@ declare namespace LocalJSX {
           * Controls the padding of the component.
          */
         "padding"?: DuetPadding;
+        /**
+          * Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens), if this is a number instead of true it will be used as "amount of items to scroll"
+         */
+        "scrolls"?: boolean;
         /**
           * Theme of the component.
          */
@@ -6151,6 +6290,8 @@ declare namespace LocalJSX {
     interface IntrinsicElements {
         "duet-alert": DuetAlert;
         "duet-badge": DuetBadge;
+        "duet-breadcrumb": DuetBreadcrumb;
+        "duet-breadcrumbs": DuetBreadcrumbs;
         "duet-button": DuetButton;
         "duet-caption": DuetCaption;
         "duet-card": DuetCard;
@@ -6189,6 +6330,7 @@ declare namespace LocalJSX {
         "duet-radio": DuetRadio;
         "duet-radio-group": DuetRadioGroup;
         "duet-range-slider": DuetRangeSlider;
+        "duet-scrollable": DuetScrollable;
         "duet-select": DuetSelect;
         "duet-spacer": DuetSpacer;
         "duet-spinner": DuetSpinner;
@@ -6212,6 +6354,8 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "duet-alert": LocalJSX.DuetAlert & JSXBase.HTMLAttributes<HTMLDuetAlertElement>;
             "duet-badge": LocalJSX.DuetBadge & JSXBase.HTMLAttributes<HTMLDuetBadgeElement>;
+            "duet-breadcrumb": LocalJSX.DuetBreadcrumb & JSXBase.HTMLAttributes<HTMLDuetBreadcrumbElement>;
+            "duet-breadcrumbs": LocalJSX.DuetBreadcrumbs & JSXBase.HTMLAttributes<HTMLDuetBreadcrumbsElement>;
             "duet-button": LocalJSX.DuetButton & JSXBase.HTMLAttributes<HTMLDuetButtonElement>;
             "duet-caption": LocalJSX.DuetCaption & JSXBase.HTMLAttributes<HTMLDuetCaptionElement>;
             "duet-card": LocalJSX.DuetCard & JSXBase.HTMLAttributes<HTMLDuetCardElement>;
@@ -6250,6 +6394,7 @@ declare module "@stencil/core" {
             "duet-radio": LocalJSX.DuetRadio & JSXBase.HTMLAttributes<HTMLDuetRadioElement>;
             "duet-radio-group": LocalJSX.DuetRadioGroup & JSXBase.HTMLAttributes<HTMLDuetRadioGroupElement>;
             "duet-range-slider": LocalJSX.DuetRangeSlider & JSXBase.HTMLAttributes<HTMLDuetRangeSliderElement>;
+            "duet-scrollable": LocalJSX.DuetScrollable & JSXBase.HTMLAttributes<HTMLDuetScrollableElement>;
             "duet-select": LocalJSX.DuetSelect & JSXBase.HTMLAttributes<HTMLDuetSelectElement>;
             "duet-spacer": LocalJSX.DuetSpacer & JSXBase.HTMLAttributes<HTMLDuetSpacerElement>;
             "duet-spinner": LocalJSX.DuetSpinner & JSXBase.HTMLAttributes<HTMLDuetSpinnerElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "4.34.1",
+  "version": "4.35.0",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -36,6 +36,7 @@
     "version": "npm run build",
     "build": "run-s stencil:build copy:vscode",
     "stencil:build": "stencil build",
+    "stencil:build:dev": "stencil build --dev",
     "stencil:stats": "stencil build --log --stats",
     "stencil:dev": "stencil build --dev --watch --serve",
     "stencil:koa": "stencil build --dev --watch",
@@ -52,11 +53,11 @@
     "koa-colorful-logger": "0.0.3"
   },
   "devDependencies": {
-    "@duetds/fonts": "1.4.7",
-    "@duetds/icons": "2.2.7",
+    "@duetds/fonts": "1.4.11",
+    "@duetds/icons": "2.2.11",
     "@duetds/stencil-angular-output-target": "0.0.2",
     "@duetds/stencil-react-output-target": "0.0.10",
-    "@duetds/tokens": "2.4.7",
+    "@duetds/tokens": "2.4.11",
     "@koa/cors": "3.1.0",
     "@rollup/plugin-replace": "3.0.1",
     "@stencil/core": "2.12.1",
@@ -95,5 +96,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "ee288fef3139a19ec36024d7994b3bbefa9483f3"
+  "gitHead": "82c1e6f02105189828663a62d980e570239f3e33"
 }

package/lib/cjs/duet-tab_2.cjs.entry.js

@@ -1,213 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-1c10bbfb.js');
-const createId = require('./create-id-c3b984b1.js');
-const keyboardUtils = require('./keyboard-utils-b4e3d1d3.js');
-const languageUtils = require('./language-utils-aa282901.js');
-const themeableComponent = require('./themeable-component-0c1be552.js');
-require('./string-utils-267e3dbb.js');
-
-const duetTabCss = ".sc-duet-tab-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.duet-tab.sc-duet-tab{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:none;width:100%}.duet-tab.selected.sc-duet-tab{display:block}";
-
-let DuetTab = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    {
-      return (index.h("div", { role: "tabpanel", class: { "duet-tab": true, selected: this.selected } }, index.h("slot", null)));
-    }
-  }
-};
-DuetTab.style = duetTabCss;
-
-const duetTabGroupCss = "*.sc-duet-tab-group,*.sc-duet-tab-group::after,*.sc-duet-tab-group::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-tab-group-h{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;display:block;width:100%}.duet-tab-group-tabs.sc-duet-tab-group{margin-bottom:28px !important;display:block;width:100%;max-width:100%;padding-top:2px;list-style:none}.duet-tab-group-tabs.duet-m-0.sc-duet-tab-group{margin:0 !important}.duet-tab-group-tabs.duet-tab-group-hidden.sc-duet-tab-group{display:none}@media (min-width: 36em){.duet-tab-group-tabs.duet-tab-group-hidden.sc-duet-tab-group{display:block}}.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-group-tabs.sc-duet-tab-group{border-bottom:1px solid #e1e3e6}.duet-theme-turva.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-group-tabs.sc-duet-tab-group{border-bottom-color:#e4e4e6 !important}@media (min-width: 36em){duet-select.sc-duet-tab-group{display:none !important}}.duet-tab-button.sc-duet-tab-group{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;padding:20px;margin-top:-2px;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.1;color:#00294d !important;text-align:left;text-decoration:none;cursor:pointer;background:white;border:2px solid #e1e3e6;border-style:solid;border-radius:0;transition:150ms ease}.duet-tab-button.duet-p-0.sc-duet-tab-group{padding:0 !important}.duet-tab-button.duet-m-0.sc-duet-tab-group{margin:0 !important}.duet-theme-turva.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group{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 !important;border-color:#e4e4e6}.duet-tab-button.duet-p-0.sc-duet-tab-group{padding:0 !important}@media (min-width: 36em){.duet-tab-button.sc-duet-tab-group{display:inline-block;width:auto;margin-left:-2px;border-right:2px solid #e1e3e6;border-radius:0}}.duet-tab-button.sc-duet-tab-group:hover{z-index:200;border-color:#909599}.duet-theme-turva.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group:hover{border-color:#747475 !important}.duet-tab-button.sc-duet-tab-group:active{opacity:0.75;transition:none}.duet-tab-button.selected.sc-duet-tab-group{z-index:201;color:white !important;background:#00294d;border-color:#00294d;outline:0;box-shadow:none !important}.duet-theme-turva.sc-duet-tab-group .duet-tab-button.selected.sc-duet-tab-group{color:white !important;background-color:#171c3a;border-color:#171c3a !important}.duet-tab-button.sc-duet-tab-group:focus{z-index:200;outline:0}.user-is-tabbing.sc-duet-tab-group-h .duet-tab-button.sc-duet-tab-group:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important}.user-is-tabbing.sc-duet-tab-group-h .duet-theme-turva.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important}.duet-tab-button.sc-duet-tab-group:first-child{border-top-left-radius:4px;border-top-right-radius:4px}@media (min-width: 36em){.duet-tab-button.sc-duet-tab-group:first-child{border-top-right-radius:0;border-bottom-left-radius:4px}}.duet-tab-button.sc-duet-tab-group:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}@media (min-width: 36em){.duet-tab-button.sc-duet-tab-group:last-child{border-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}}.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group{display:inline-block;width:auto;padding-right:0;padding-left:0;border:0;border-radius:0;transition:none}.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group+.duet-tab-button.sc-duet-tab-group{margin-left:36px}.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-button.selected.sc-duet-tab-group{color:#0077b3 !important;background:white;border-bottom:3px solid #0077b3}.duet-theme-turva.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-button.selected.sc-duet-tab-group{color:#c60c30 !important;border-bottom-color:#c60c30 !important}.duet-tab-group-content.sc-duet-tab-group{position:relative;width:100%;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:400;line-height:1.5;color:#00294d;text-align:left}.duet-theme-turva.sc-duet-tab-group .duet-tab-group-content.sc-duet-tab-group{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}";
-
-let DuetTabGroup = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.duetChange = index.createEvent(this, "duetChange", 3);
-    this.duetTabChange = index.createEvent(this, "duetTabChange", 7);
-    this.id = createId.createID("DuetTabGroup");
-    /**
-     * State() variables
-     * Inlined decorator, alphabetical order.
-     */
-    this.tabs = [];
-    this.selected = 0;
-    /**
-     * Theme of the component.
-     */
-    this.theme = "";
-    /**
-     * Style variation of the tab group.
-     */
-    this.variation = "default";
-    /**
-     * 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 = languageUtils.getLanguage();
-    /**
-     * Defaults for Label
-     * @default {fi: "Valitse", en: "Choose", sv: "Välja"}
-     */
-    this.labelDefaults = {
-      fi: "Valitse",
-      en: "Choose",
-      sv: "Välj",
-    };
-    /**
-     * Label for the select element which gets shown on mobile.
-     * @default {fi: "Valitse", en: "Choose", sv: "Välja"}
-     */
-    this.label = languageUtils.getLocaleString(this.labelDefaults, this.language);
-    /**
-     * Determines whether the label for the select element shown on mobile is visually hidden.
-     */
-    this.labelHidden = true;
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Controls the padding of the component.
-     */
-    this.padding = "auto";
-    /**
-     * Component event handling.
-     */
-    this.handleKeyDown = ev => {
-      let button;
-      if (keyboardUtils.isArrowLeftKey(ev) || keyboardUtils.isArrowUpKey(ev)) {
-        button = ev.target.previousElementSibling;
-      }
-      else if (keyboardUtils.isArrowRightKey(ev) || keyboardUtils.isArrowDownKey(ev)) {
-        button = ev.target.nextElementSibling;
-      }
-      if (button) {
-        ev.preventDefault();
-        button.click();
-        button.focus();
-      }
-    };
-    this.renderTab = (tab, index$1) => {
-      return (index.h("button", { role: "tab", id: this.getButtonId(index$1), "aria-controls": this.getTabId(index$1), "aria-selected": tab.selected ? "true" : "false", type: "button", class: {
-          "duet-p-0": this.padding === "none",
-          "duet-tab-button": true,
-          selected: tab.selected,
-        }, onClick: () => this.openTab(index$1), onKeyDown: ev => this.handleKeyDown(ev) }, tab.label));
-    };
-  }
-  /**
-   * Component lifecycle events.
-   */
-  async connectedCallback() {
-    if (typeof MutationObserver !== "undefined") {
-      this.mutationO = new MutationObserver(() => {
-        this.updateTabs();
-      });
-      this.mutationO.observe(this.element, {
-        attributes: true,
-        attributeFilter: ["label"],
-        childList: true,
-        characterData: true,
-        subtree: true,
-      });
-    }
-    this.updateTabs();
-  }
-  disconnectedCallback() {
-    if (this.mutationO) {
-      this.mutationO.disconnect();
-      this.mutationO = undefined;
-    }
-  }
-  componentWillLoad() {
-    themeableComponent.inheritGlobalTheme(this);
-  }
-  /**
-   * This method allows you to open any of the tabs by calling the method and
-   * passing the index of the tab. Please note that index starts from zero.
-   */
-  async openTab(tabIndex) {
-    if (tabIndex >= this.tabs.length) {
-      throw new Error(`[duet-tabs] Index ${tabIndex} is out of bounds of tabs length`);
-    }
-    this.selected = tabIndex;
-    this.tabs.forEach((tab, i) => {
-      tab.selected = i === tabIndex;
-    });
-    const event = {
-      value: tabIndex,
-      component: "duet-tab-group",
-    };
-    this.duetChange.emit(event);
-    this.duetTabChange.emit(event);
-  }
-  /**
-   * This method used to refresh the contents of the tab group
-   * but is now deprecated as this is done automatically.
-   * @deprecated
-   */
-  async refresh() {
-    console.log("[duet-tabs] Refresh method is deprecated and will be removed in the future version.");
-  }
-  /**
-   * Local methods.
-   */
-  getButtonId(index) {
-    return `${this.id}-button-${index}`;
-  }
-  getTabId(index) {
-    return `${this.id}-tab-${index}`;
-  }
-  async updateTabs() {
-    const allTabs = Array.from(this.element.querySelectorAll("duet-tab"));
-    // filter out any nested tabs
-    this.tabs = allTabs.filter(tab => tab.closest("duet-tab-group") === this.element);
-    if (this.tabs.length === 0) {
-      throw new Error("[duet-tabs] Must have at least one tab");
-    }
-    this.tabs.forEach((tab, index) => {
-      tab.id = this.getTabId(index);
-      tab.setAttribute("aria-labelledby", this.getButtonId(index));
-      if (tab.selected) {
-        this.selected = index;
-      }
-    });
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    return (index.h("div", { class: {
-        "duet-tab-group": true,
-        "duet-theme-turva": this.theme === "turva",
-        [`duet-tab-variation-${this.variation}`]: true,
-      } }, this.tabs.length > 3 && (index.h("duet-select", { value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.openTab(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
-        return { label: tab.label, value: index.toString() };
-      }) })), index.h("div", { role: "tablist", class: {
-        "duet-m-0": this.margin === "none",
-        "duet-tab-group-tabs": true,
-        "duet-tab-group-hidden": this.tabs.length > 3,
-      } }, this.tabs.map(this.renderTab)), index.h("div", { class: { "duet-tab-group-content": true, "duet-m-0": this.margin === "none" } }, index.h("slot", null))));
-  }
-  get element() { return index.getElement(this); }
-};
-DuetTabGroup.style = duetTabGroupCss;
-
-exports.duet_tab = DuetTab;
-exports.duet_tab_group = DuetTabGroup;