@duetds/components 9.19.0 → 9.20.0

package/lib/types/components.d.ts

@@ -933,7 +933,7 @@ export namespace Components {
         "expand": boolean;
         "groupDirection": DuetDirection;
         "groupDisabled": boolean;
-        "groupResponsive": boolean;
+        "groupResponsive": DuetChoiceGroupBreakpoint;
         /**
           * Icon to display to the left of the choice button label.
          */
@@ -1974,7 +1974,7 @@ export namespace Components {
          */
         "accessibleExpanded": string;
         /**
-          * Indicates value of any popup element associated with the input.
+          * @deprecated , use `accessiblePopup` property instead
          */
         "accessibleHasPopup": string;
         /**
@@ -1989,6 +1989,10 @@ export namespace Components {
           * Indicates the id of a component owned by the input.
          */
         "accessibleOwns": string;
+        /**
+          * Indicates value of any popup element associated with the input.
+         */
+        "accessiblePopup": string;
         /**
           * Add a chip to the input. Property "chips" must be true.
          */
@@ -2098,6 +2102,10 @@ export namespace Components {
           * Name of the input.
          */
         "name": string;
+        /**
+          * @readonly
+         */
+        "nativeInputElement": HTMLElement;
         /**
           * Enable numeric keyboard for the input.
          */
@@ -2907,13 +2915,13 @@ export namespace Components {
          */
         "accessibleActiveDescendant": string;
         /**
-          * Accessible label for the add button that is read for screen reader users.
-          * @default {fi: "Lisää summaan", en: "Add to the amount", sv: "Lägg till beloppet"}
+          * Accessible label for the add button that is read for screen reader users. The placeholders {step} and {unit} are replaced with respective properties.
+          * @default {fi: "Lisää {step} {unit}", en: "Add {step} {unit}", sv: "Lägg till {step} {unit}"}
          */
         "accessibleAdd": string;
         /**
           * Defaults for accessibleAdd
-          * @default {fi: "Lisää summaan", en: "Add to the amount", sv: "Lägg till beloppet"}
+          * @default {fi: "Lisää {step} {unit}", en: "Add {step} {unit}", sv: "Lägg till {step} {unit}"}
          */
         "accessibleAddDefaults": DuetLangObject | string;
         /**
@@ -2955,13 +2963,13 @@ export namespace Components {
          */
         "accessibleOwns": string;
         /**
-          * Accessible label for the subtract button that is read for screen reader users.
-          * @default {fi: "Vähennä summasta", en: "Subtract from the amount", sv: "Dra från beloppet"}
+          * Accessible label for the subtract button that is read for screen reader users. The placeholders {step} and {unit} are replaced with respective properties.
+          * @default {fi: "Vähennä {step} {unit}", en: "Subtract {step} {unit}", sv: "Sutrahera {step} {unit}"}
          */
         "accessibleSubtract": string;
         /**
           * Defaults for accessibleSubtract
-          * @default {fi: "Vähennä summasta", en: "Subtract from the amount", sv: "Dra från beloppet"}
+          * @default {fi: "Vähenn {step} {unit}ä", en: "Subtract {step} {unit}", sv: "Sutrahera {step} {unit}"}
          */
         "accessibleSubtractDefaults": DuetLangObject | string;
         /**
@@ -3361,7 +3369,7 @@ export namespace Components {
         /**
           * Element, or id of an element, that controls the opening and closing of the popup menu. If id is given, the component automatically sets the click event listener to open and close the popup-menu.
          */
-        "controller": string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent);
+        "controller": string | HTMLElement | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent);
         /**
           * By default Popup Menu adds "action-arrow-down-small" icon to the controller. This can be removed with controller-icon="".
          */
@@ -3389,7 +3397,7 @@ export namespace Components {
         /**
           * Alias for property controller.
          */
-        "opener": string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent);
+        "opener": string | HTMLElement | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent);
         /**
           * Placement of the popup menu relative to its controller. Possible values: "top", "bottom", "left" and "right", optionally combined with "-start" or "-end".
          */
@@ -3880,6 +3888,19 @@ export namespace Components {
           * Whether to add padding to the scrollable list to account for overflowing elements, such as shadows or outlines.
          */
         "padding": DuetOverflowPadding;
+        /**
+          * Scrolls the scrollable so that the last item is visible
+         */
+        "scrollToEnd": () => Promise<void>;
+        /**
+          * Scrolls the scrollable so that the desired item is visible
+          * @param itemIndex The first item is 1
+         */
+        "scrollToItem": (itemIndex: number) => Promise<void>;
+        /**
+          * Scrolls the scrollable so that the first item is visible
+         */
+        "scrollToStart": () => Promise<void>;
         /**
           * Selected element
          */
@@ -4132,7 +4153,7 @@ export namespace Components {
         /**
           * Alias for property opener.
          */
-        "controller": string | (HTMLElement & FocusableComponent & OpenerComponent);
+        "controller": string | HTMLElement | (HTMLElement & FocusableComponent & OpenerComponent);
         /**
           * Hides the slideout dialog and puts focus back to the original element that triggered the slideout (if we’re still in the same view).
          */
@@ -4148,7 +4169,7 @@ export namespace Components {
         /**
           * DuetMenuBarButton or DuetButton element, or id of an element, that opens the slideout. If id is given, the component automatically sets the click event listener to open the slideout.
          */
-        "opener": string | (HTMLElement & FocusableComponent & OpenerComponent);
+        "opener": string | HTMLElement | (HTMLElement & FocusableComponent & OpenerComponent);
         /**
           * Sets focus. Use this method instead of the global focus().
          */
@@ -4724,8 +4745,7 @@ export namespace Components {
          */
         "counter": boolean;
         /**
-          * Accessible label for character counter.
-          * @default fi: "merkkiä jäljellä", en: "characters remaining", sv: "tecken kvar"
+          * @deprecated , the visually hidden counter label is no longer changeable
          */
         "counterLabel": string;
         /**
@@ -4796,6 +4816,10 @@ export namespace Components {
           * Defines a specific role attribute for the input.
          */
         "role": string | null;
+        /**
+          * Rows attribute for the contained native textarea element. If set, overrides the default style's minheight.
+         */
+        "rows": number;
         /**
           * Sets focus on the specified `duet-textarea`. Use this method instead of the global `textarea.focus()`.
          */
@@ -8845,7 +8869,7 @@ declare namespace LocalJSX {
          */
         "accessibleExpanded"?: string;
         /**
-          * Indicates value of any popup element associated with the input.
+          * @deprecated , use `accessiblePopup` property instead
          */
         "accessibleHasPopup"?: string;
         /**
@@ -8860,6 +8884,10 @@ declare namespace LocalJSX {
           * Indicates the id of a component owned by the input.
          */
         "accessibleOwns"?: string;
+        /**
+          * Indicates value of any popup element associated with the input.
+         */
+        "accessiblePopup"?: string;
         /**
           * Enable or disable automatic completion by the browser
          */
@@ -9728,13 +9756,13 @@ declare namespace LocalJSX {
          */
         "accessibleActiveDescendant"?: string;
         /**
-          * Accessible label for the add button that is read for screen reader users.
-          * @default {fi: "Lisää summaan", en: "Add to the amount", sv: "Lägg till beloppet"}
+          * Accessible label for the add button that is read for screen reader users. The placeholders {step} and {unit} are replaced with respective properties.
+          * @default {fi: "Lisää {step} {unit}", en: "Add {step} {unit}", sv: "Lägg till {step} {unit}"}
          */
         "accessibleAdd"?: string;
         /**
           * Defaults for accessibleAdd
-          * @default {fi: "Lisää summaan", en: "Add to the amount", sv: "Lägg till beloppet"}
+          * @default {fi: "Lisää {step} {unit}", en: "Add {step} {unit}", sv: "Lägg till {step} {unit}"}
          */
         "accessibleAddDefaults"?: DuetLangObject | string;
         /**
@@ -9776,13 +9804,13 @@ declare namespace LocalJSX {
          */
         "accessibleOwns"?: string;
         /**
-          * Accessible label for the subtract button that is read for screen reader users.
-          * @default {fi: "Vähennä summasta", en: "Subtract from the amount", sv: "Dra från beloppet"}
+          * Accessible label for the subtract button that is read for screen reader users. The placeholders {step} and {unit} are replaced with respective properties.
+          * @default {fi: "Vähennä {step} {unit}", en: "Subtract {step} {unit}", sv: "Sutrahera {step} {unit}"}
          */
         "accessibleSubtract"?: string;
         /**
           * Defaults for accessibleSubtract
-          * @default {fi: "Vähennä summasta", en: "Subtract from the amount", sv: "Dra från beloppet"}
+          * @default {fi: "Vähenn {step} {unit}ä", en: "Subtract {step} {unit}", sv: "Sutrahera {step} {unit}"}
          */
         "accessibleSubtractDefaults"?: DuetLangObject | string;
         /**
@@ -10206,7 +10234,7 @@ declare namespace LocalJSX {
         /**
           * Element, or id of an element, that controls the opening and closing of the popup menu. If id is given, the component automatically sets the click event listener to open and close the popup-menu.
          */
-        "controller"?: string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent);
+        "controller"?: string | HTMLElement | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent);
         /**
           * By default Popup Menu adds "action-arrow-down-small" icon to the controller. This can be removed with controller-icon="".
          */
@@ -10230,7 +10258,7 @@ declare namespace LocalJSX {
         /**
           * Alias for property controller.
          */
-        "opener"?: string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent);
+        "opener"?: string | HTMLElement | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent);
         /**
           * Placement of the popup menu relative to its controller. Possible values: "top", "bottom", "left" and "right", optionally combined with "-start" or "-end".
          */
@@ -10978,7 +11006,7 @@ declare namespace LocalJSX {
         /**
           * Alias for property opener.
          */
-        "controller"?: string | (HTMLElement & FocusableComponent & OpenerComponent);
+        "controller"?: string | HTMLElement | (HTMLElement & FocusableComponent & OpenerComponent);
         /**
           * Whether the slideout behaves as a modal, i.e. with an overlay and preventing scrolling of the page content. Note that even when false, we still use focus guards to contain keyboard navigation within, as moving focus out could result in unexpected behavior.
          */
@@ -10994,7 +11022,7 @@ declare namespace LocalJSX {
         /**
           * DuetMenuBarButton or DuetButton element, or id of an element, that opens the slideout. If id is given, the component automatically sets the click event listener to open the slideout.
          */
-        "opener"?: string | (HTMLElement & FocusableComponent & OpenerComponent);
+        "opener"?: string | HTMLElement | (HTMLElement & FocusableComponent & OpenerComponent);
         /**
           * Theme.
          */
@@ -11536,8 +11564,7 @@ declare namespace LocalJSX {
          */
         "counter"?: boolean;
         /**
-          * Accessible label for character counter.
-          * @default fi: "merkkiä jäljellä", en: "characters remaining", sv: "tecken kvar"
+          * @deprecated , the visually hidden counter label is no longer changeable
          */
         "counterLabel"?: string;
         /**
@@ -11624,6 +11651,10 @@ declare namespace LocalJSX {
           * Defines a specific role attribute for the input.
          */
         "role"?: string | null;
+        /**
+          * Rows attribute for the contained native textarea element. If set, overrides the default style's minheight.
+         */
+        "rows"?: number;
         /**
           * Theme of the textarea.
          */

package/lib/types/utils/a11y-utils.d.ts

@@ -1,4 +1,6 @@
+import { OpenerComponent } from "../common";
 import { DuetLangObject } from "./language-utils";
+type ariaPopup = "true" | "menu" | "listbox" | "tree" | "grid" | "dialog";
 interface A11yLabel {
     element: HTMLElement;
     accessibleLabel?: string;
@@ -8,4 +10,13 @@ interface A11yLabel {
     download?: string;
 }
 export declare function getAccessibleLinkLabel(component: A11yLabel): string;
+/**
+ * An element that controls open/close state of a Duet component can itself be either a Duet component or an HTML element,
+ * this helper handles the setting of the relevant attributes accordingly.
+ *
+ * @param el Duet component or HTML element that is used for controlling the popup
+ * @param expanded is the controlled element open
+ * @param popup The type of the popup, defaults to "true" which equals to "menu"
+ */
+export declare function setOpenerExpanded(el: OpenerComponent | HTMLElement, expanded: boolean, popup?: ariaPopup): void;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "9.19.0",
+  "version": "9.20.0",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -44,9 +44,9 @@
     "body-scroll-lock": "3.1.5"
   },
   "devDependencies": {
-    "@duetds/fonts": "3.0.53",
-    "@duetds/icons": "4.2.10",
-    "@duetds/tokens": "4.1.1",
+    "@duetds/fonts": "3.0.55",
+    "@duetds/icons": "4.2.12",
+    "@duetds/tokens": "4.1.3",
     "@percy/cli": "1.30.1",
     "@rollup/plugin-replace": "5.0.2",
     "@stencil/core": "4.23.0",
@@ -77,5 +77,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "b4c031f3c8d08ff78bb3dac0b20142340e3d4e2f"
+  "gitHead": "f35b80af5cfe064525ce16c2be724201e1d1becc"
 }

package/lib/cjs/a11y-utils-27715462.js

@@ -1,25 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-'use strict';
-
-const slotUtils = require('./slot-utils-0ce4686e.js');
-
-function getAccessibleLinkLabel(component) {
-    const textContent = component.element.textContent;
-    if (component.accessibleLabel) {
-        return component.accessibleLabel;
-    }
-    if ((!!component.download || component.download === "") && textContent) {
-        return `${textContent}. ${component.accessibleLabelDownload}.`;
-    }
-    if (component.external && textContent) {
-        return `${textContent}. ${component.accessibleLabelExternal}.`;
-    }
-    if (slotUtils.getElementsFromDefaultSlot(component.element).length) {
-        return textContent;
-    }
-    return null;
-}
-
-exports.getAccessibleLinkLabel = getAccessibleLinkLabel;

package/lib/dist-custom-elements/p-6b2617d7.js

@@ -1,58 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-370b0653.js';
-import { i as inheritGlobalTheme } from './p-3757c660.js';
-
-const duetListItemCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;flex-direction:column;display:flex;width:100%;overflow:visible;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-style:normal;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.25;color:rgb(8, 42, 77)}:host dt{padding-bottom:4px}:host dd{padding-top:0}:host dt,:host dd{flex-basis:100%}:host dt,:host dd{width:100%;margin-inline-start:0;text-align:left;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}:host dt{font-weight:600}.duet-theme-turva :host dt{font-weight:700}:host dd{margin-left:auto}:host(.duet-list-striped) dt,:host(.duet-list-striped) dd{padding:16px}:host(.duet-list-striped) dt{padding-bottom:4px}:host(.duet-list-striped) dd{padding-top:0}:host(.duet-list-striped.duet-no-stacking) dt,:host(.duet-list-striped.duet-no-stacking) dd{padding:16px}:host(:not(.duet-list-striped)) dt,:host(:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(:not(.duet-list-striped)) dt{padding-bottom:4px}:host(:not(.duet-list-striped)) dd{padding-top:0}:host(:not(.duet-list-striped).duet-no-stacking) dt,:host(:not(.duet-list-striped).duet-no-stacking) dd{padding:8px;padding-inline:0}:host(.duet-p-0) dt,:host(.duet-p-0) dd{padding:0 !important}:host(.duet-list-mobile-center) dt,:host(.duet-list-mobile-center) dd{text-align:center}:host(.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:rgb(23, 28, 58)}:host(.duet-list-striped:nth-child(odd)) dt,:host(.duet-list-striped:nth-child(odd)) dd{background:rgb(245, 248, 250)}:host(.duet-list-striped.duet-theme-turva:nth-child(odd)) dt,:host(.duet-list-striped.duet-theme-turva:nth-child(odd)) dd{background:rgb(245, 247, 250)}:host(.duet-list-bordered){border-block-start:1px solid rgb(212, 223, 229)}:host(.duet-list-bordered:last-child){border-block-end:1px solid rgb(212, 223, 229)}:host(.duet-list-bordered.duet-theme-turva){border-block-start:1px solid rgb(222, 224, 228)}:host(.duet-list-bordered.duet-theme-turva:last-child){border-block-end:1px solid rgb(222, 224, 228)}:host(.duet-list-inner-bordered:not(:last-child)){border-block-end:1px solid rgb(212, 223, 229)}:host(.duet-list-inner-bordered.duet-theme-turva:not(:last-child)){border-block-end:1px solid rgb(222, 224, 228)}:host(.duet-no-stacking){flex-direction:row}:host(.duet-list-mobile-center.duet-no-stacking) dt,:host(.duet-list-mobile-center.duet-no-stacking) dd{text-align:left}:host(.duet-no-stacking.duet-list-width-30) dt{flex-basis:33%}:host(.duet-no-stacking.duet-list-width-30) dd{flex-basis:67%}:host(.duet-no-stacking.duet-list-width-50) dt{flex-basis:47%}:host(.duet-no-stacking.duet-list-width-50) dd{flex-basis:53%}:host(.duet-no-stacking.duet-list-width-70) dt{flex-basis:65%}:host(.duet-no-stacking.duet-list-width-70) dd{flex-basis:35%}:host(.duet-list-item-breakpoint-x-small){flex-direction:row}:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dd{padding:16px}:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dt,:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(.duet-list-item-breakpoint-x-small.duet-p-0) dt,:host(.duet-list-item-breakpoint-x-small.duet-p-0) dd{padding:0 !important}:host(.duet-list-item-breakpoint-x-small.duet-list-mobile-center) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-mobile-center) dd{text-align:left}:host(.duet-list-item-breakpoint-x-small.duet-list-width-30) dt{flex-basis:33%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-30) dd{flex-basis:67%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-50) dt{flex-basis:47%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-50) dd{flex-basis:53%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-70) dt{flex-basis:65%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-70) dd{flex-basis:35%}@media (max-width: 22.5em){:host(.duet-list-item-breakpoint-x-small){flex-direction:column}:host(.duet-list-item-breakpoint-x-small) dt{padding-bottom:4px}:host(.duet-list-item-breakpoint-x-small) dd{padding-top:0}:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dd{padding:16px}:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dt{padding-bottom:4px}:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dd{padding-top:0}:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dt,:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dt{padding-bottom:4px}:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dd{padding-top:0}:host(.duet-list-item-breakpoint-x-small.duet-p-0) dt,:host(.duet-list-item-breakpoint-x-small.duet-p-0) dd{padding:0 !important}:host(.duet-list-item-breakpoint-x-small.duet-list-mobile-center) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-mobile-center) dd{text-align:center}:host(.duet-list-item-breakpoint-x-small.duet-list-width-30) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-width-30) dd{flex-basis:100%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-50) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-width-50) dd{flex-basis:100%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-70) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-width-70) dd{flex-basis:100%}}@media (min-width: 36em){:host(.duet-list-item-breakpoint-small){flex-direction:row}:host(.duet-list-item-breakpoint-small.duet-list-striped) dt,:host(.duet-list-item-breakpoint-small.duet-list-striped) dd{padding:16px}:host(.duet-list-item-breakpoint-small:not(.duet-list-striped)) dt,:host(.duet-list-item-breakpoint-small:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(.duet-list-item-breakpoint-small.duet-p-0) dt,:host(.duet-list-item-breakpoint-small.duet-p-0) dd{padding:0 !important}:host(.duet-list-item-breakpoint-small.duet-list-mobile-center) dt,:host(.duet-list-item-breakpoint-small.duet-list-mobile-center) dd{text-align:left}:host(.duet-list-item-breakpoint-small.duet-list-width-30) dt{flex-basis:33%}:host(.duet-list-item-breakpoint-small.duet-list-width-30) dd{flex-basis:67%}:host(.duet-list-item-breakpoint-small.duet-list-width-50) dt{flex-basis:47%}:host(.duet-list-item-breakpoint-small.duet-list-width-50) dd{flex-basis:53%}:host(.duet-list-item-breakpoint-small.duet-list-width-70) dt{flex-basis:65%}:host(.duet-list-item-breakpoint-small.duet-list-width-70) dd{flex-basis:35%}}@media (min-width: 48em){:host(.duet-list-item-breakpoint-medium){flex-direction:row}:host(.duet-list-item-breakpoint-medium.duet-list-striped) dt,:host(.duet-list-item-breakpoint-medium.duet-list-striped) dd{padding:16px}:host(.duet-list-item-breakpoint-medium:not(.duet-list-striped)) dt,:host(.duet-list-item-breakpoint-medium:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(.duet-list-item-breakpoint-medium.duet-p-0) dt,:host(.duet-list-item-breakpoint-medium.duet-p-0) dd{padding:0 !important}:host(.duet-list-item-breakpoint-medium.duet-list-mobile-center) dt,:host(.duet-list-item-breakpoint-medium.duet-list-mobile-center) dd{text-align:left}:host(.duet-list-item-breakpoint-medium.duet-list-width-30) dt{flex-basis:33%}:host(.duet-list-item-breakpoint-medium.duet-list-width-30) dd{flex-basis:67%}:host(.duet-list-item-breakpoint-medium.duet-list-width-50) dt{flex-basis:47%}:host(.duet-list-item-breakpoint-medium.duet-list-width-50) dd{flex-basis:53%}:host(.duet-list-item-breakpoint-medium.duet-list-width-70) dt{flex-basis:65%}:host(.duet-list-item-breakpoint-medium.duet-list-width-70) dd{flex-basis:35%}}@media (min-width: 62em){:host(.duet-list-item-breakpoint-large){flex-direction:row}:host(.duet-list-item-breakpoint-large.duet-list-striped) dt,:host(.duet-list-item-breakpoint-large.duet-list-striped) dd{padding:16px}:host(.duet-list-item-breakpoint-large:not(.duet-list-striped)) dt,:host(.duet-list-item-breakpoint-large:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(.duet-list-item-breakpoint-large.duet-p-0) dt,:host(.duet-list-item-breakpoint-large.duet-p-0) dd{padding:0 !important}:host(.duet-list-item-breakpoint-large.duet-list-mobile-center) dt,:host(.duet-list-item-breakpoint-large.duet-list-mobile-center) dd{text-align:left}:host(.duet-list-item-breakpoint-large.duet-list-width-30) dt{flex-basis:33%}:host(.duet-list-item-breakpoint-large.duet-list-width-30) dd{flex-basis:67%}:host(.duet-list-item-breakpoint-large.duet-list-width-50) dt{flex-basis:47%}:host(.duet-list-item-breakpoint-large.duet-list-width-50) dd{flex-basis:53%}:host(.duet-list-item-breakpoint-large.duet-list-width-70) dt{flex-basis:65%}:host(.duet-list-item-breakpoint-large.duet-list-width-70) dd{flex-basis:35%}}@media (min-width: 64.0625em){:host(.duet-list-item-breakpoint-x-large){flex-direction:row}:host(.duet-list-item-breakpoint-x-large.duet-list-striped) dt,:host(.duet-list-item-breakpoint-x-large.duet-list-striped) dd{padding:16px}:host(.duet-list-item-breakpoint-x-large:not(.duet-list-striped)) dt,:host(.duet-list-item-breakpoint-x-large:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(.duet-list-item-breakpoint-x-large.duet-p-0) dt,:host(.duet-list-item-breakpoint-x-large.duet-p-0) dd{padding:0 !important}:host(.duet-list-item-breakpoint-x-large.duet-list-mobile-center) dt,:host(.duet-list-item-breakpoint-x-large.duet-list-mobile-center) dd{text-align:left}:host(.duet-list-item-breakpoint-x-large.duet-list-width-30) dt{flex-basis:33%}:host(.duet-list-item-breakpoint-x-large.duet-list-width-30) dd{flex-basis:67%}:host(.duet-list-item-breakpoint-x-large.duet-list-width-50) dt{flex-basis:47%}:host(.duet-list-item-breakpoint-x-large.duet-list-width-50) dd{flex-basis:53%}:host(.duet-list-item-breakpoint-x-large.duet-list-width-70) dt{flex-basis:65%}:host(.duet-list-item-breakpoint-x-large.duet-list-width-70) dd{flex-basis:35%}}:host(.duet-theme-turva2.duet-theme-turva){color:rgb(23, 42, 59)}:host(.duet-theme-turva2.duet-list-striped.duet-theme-turva:nth-child(odd)) dt,:host(.duet-theme-turva2.duet-list-striped.duet-theme-turva:nth-child(odd)) dd{background:rgb(245, 246, 247)}:host(.duet-theme-turva2.duet-list-bordered.duet-theme-turva){border-block-start:1px solid rgb(212, 221, 226)}:host(.duet-theme-turva2.duet-list-bordered.duet-theme-turva:last-child){border-block-end:1px solid rgb(212, 221, 226)}:host(.duet-theme-turva2.duet-list-inner-bordered.duet-theme-turva:not(:last-child)){border-block-end:1px solid rgb(212, 221, 226)}";
-const DuetListItemStyle0 = duetListItemCss;
-
-const DuetListItem = /*@__PURE__*/ proxyCustomElement(class DuetListItem extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.theme = "";
-        this.responsive = false;
-        this.breakpoint = "small";
-    }
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h(Host, { key: 'a1d59eef6ebf95b35ba47c0c5d08dce588f79e2e', class: {
-                "duet-theme-turva": this.theme === "turva",
-                "duet-no-stacking": !this.responsive,
-                "duet-list-item-breakpoint-x-small": this.breakpoint === "x-small",
-                "duet-list-item-breakpoint-small": this.breakpoint === "small",
-                "duet-list-item-breakpoint-medium": this.breakpoint === "medium",
-                "duet-list-item-breakpoint-large": this.breakpoint === "large",
-                "duet-list-item-breakpoint-x-large": this.breakpoint === "x-large",
-            } }, h("dt", { key: '945de6fd1adcfbeff921e2adbc31c2252a6a0a4f' }, h("slot", { key: 'c0c9a3a4cc5c7b0522946d4f32b3eebf83f55b64', name: "label" })), h("dd", { key: 'a283cfff317b10c86778c3d104e4f911f499ee53' }, h("slot", { key: '5ada9a783edd1778553a2240cac92c796276989e', name: "value" }))));
-    }
-    get element() { return this; }
-    static get style() { return DuetListItemStyle0; }
-}, [1, "duet-list-item", {
-        "theme": [1025],
-        "responsive": [4],
-        "breakpoint": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-list-item"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-list-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetListItem);
-            }
-            break;
-    } });
-}
-
-export { DuetListItem as D, defineCustomElement as d };