@duetds/components 10.0.0-alpha.13 → 10.0.0-alpha.14

package/lib/esm/duet-scrollable_3.entry.js

@@ -1,18 +1,17 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-a830b2de.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { h as hasSlot, b as getElementsFromDefaultSlot } from './slot-utils-4096ff0d.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange, o as isTabKey, p as isShiftTabKey, d as isArrowLeftKey, b as isArrowUpKey, a as isArrowRightKey, c as isArrowDownKey } from './keyboard-utils-daf80d44.js';
-import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, a as getLanguage } from './language-utils-40caac4f.js';
-import { d as getShadowByName } from './token-utils-b9ba8c5e.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import './string-utils-192eb3c8.js';
-import './tokens.module-2d02f5ff.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-BGuG-JHD.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { h as hasSlot, g as getElementsFromDefaultSlot } from './slot-utils-B1zQ6tzO.js';
+import { s as subscribeTabbingChange, u as unsubscribeTabbingChange, b as isTabKey, p as isShiftTabKey, d as isArrowLeftKey, e as isArrowUpKey, f as isArrowRightKey, g as isArrowDownKey } from './keyboard-utils-Db8rvjPI.js';
+import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, a as getLanguage } from './language-utils-BxXgd2r7.js';
+import { d as getShadowByName } from './token-utils-D2bU4zM_.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import './string-utils-C6E9F6QT.js';
+import './tokens.module-UQH7pb1d.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{position:relative;display:flex}:host .duet-scrollable-items.buttons .duet-scrollable-button-container{position:relative;flex:0 0 auto;flex-basis:40px}:host .duet-scrollable-items.buttons .duet-scrollable-button-container--occluded{flex-basis:0;flex-shrink:1;width:0;padding:10px 0;overflow:hidden;visibility:hidden}:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute{position:absolute;top:0;z-index:210;width:auto;height:100%;padding:0 16px;background-color:rgb(255, 255, 255)}:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute.left{left:0}:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute.right{right:0}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button{position:absolute;display:flex;flex:0 0 auto;flex-basis:40px;align-items:center;height:100%;cursor:pointer;transition:transform 300ms ease}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button:active duet-icon{transition:transform 300ms ease;transform:scale(0.8)}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--left{left:0;padding:10px 10px 10px 0}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--right{right:0;padding:10px 0 10px 10px}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--top{align-items:flex-start}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--bottom{align-items:flex-end}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute{padding:0 7px;border:1px solid rgb(212, 223, 229)}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute.duet-scrollable-button--left{border-radius:8px 0 0 8px}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute.duet-scrollable-button--right{border-radius:0 8px 8px 0}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute:hover{border-color:rgb(0, 119, 179);border-width:2px;}.duet-theme-turva :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute:hover{border-color:rgb(113, 118, 132)}:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button[hidden]{display:none !important}:host .duet-scrollable-items.duet-theme-turva .duet-scrollable-button-container .duet-scrollable-button--absolute:hover{border-color:rgb(113, 118, 132)}:host .duet-scrollable-items .duet-scrollable-list{display:flex;flex-wrap:nowrap;padding-inline:10px;margin-inline:-10px;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;-webkit-mask:linear-gradient(to right, transparent 0, #fff 10px), linear-gradient(to left, transparent 0, #fff 10px);-webkit-mask-size:50% 100%, 50% 100%;-webkit-mask-position:left, right;-webkit-mask-repeat:no-repeat;mask:linear-gradient(to right, transparent 0, #fff 10px), linear-gradient(to left, transparent 0, #fff 10px);mask-size:50% 100%, 50% 100%;mask-position:left, right;mask-repeat:no-repeat;}:host .duet-scrollable-items .duet-scrollable-list--absolute{padding-right:0;padding-left:2px;margin-inline:0;-webkit-mask:none !important;mask:none !important}:host .duet-scrollable-items .duet-scrollable-list:not(.buttons){white-space:normal}:host .duet-scrollable-items .duet-scrollable-list::-webkit-scrollbar{display:none}:host .duet-scrollable-items .duet-scrollable-list.collapsed{flex-wrap:wrap}:host .duet-scrollable-items .duet-scrollable-list.gap-none{gap:0}:host .duet-scrollable-items .duet-scrollable-list.gap-large{gap:20px}:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--xx-small{padding-top:4px;padding-bottom:4px}:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--x-small{padding-top:8px;padding-bottom:8px}:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--small{padding-top:12px;padding-bottom:12px}:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--medium{padding-top:16px;padding-bottom:16px}:host .duet-scrollable-items .duet-scrollable-list.duet-scrollable-stretch{width:100%}:host .duet-scrollable-items.center{justify-content:center}:host .duet-scrollable-items.center .duet-scrollable-list.collapsed{justify-content:center}.collapse{width:100%;text-align:center}.collapse.hide{visibility:hidden}::slotted(*){flex-shrink:0;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;scroll-snap-align:center}";
-const DuetScrollableStyle0 = duetScrollableCss;
 
 const DuetScrollable = class {
     constructor(hostRef) {
@@ -23,6 +22,10 @@ const DuetScrollable = class {
         this.currentIndex = 0;
         this.scrollPaneElement = undefined;
         this.hasCollapseButtonLabelSlot = false;
+        this.scrollPaneAtStart = true;
+        this.needsScrolling = true;
+        this.scrollPaneAtEnd = false;
+        this.childrenData = {};
         /**
          * Observer to check if the scrollable content is wider than the scroll pane,
          * and thus needs scrolling.
@@ -33,24 +36,57 @@ const DuetScrollable = class {
                 this.checkScrollingNeeded(entries[0].target, threshold);
             }
         });
-        this.collapsedOnClick = () => {
-            this.collapsed = !this.collapsed;
-        };
-        this.scrollPaneAtStart = true;
-        this.needsScrolling = true;
-        this.scrollPaneAtEnd = false;
-        this.childrenData = {};
+        /**
+         * 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 = "";
+        /**
+         * Boolean to collapse scrollable items into normal flow.
+         */
         this.collapsed = false;
+        /**
+         * Whether or not include previous and forward buttons. Defaults to true.
+         */
         this.buttons = true;
+        /**
+         * Vertical alignment of the previous and forward buttons. Defaults to center.
+         */
         this.buttonAlignment = "center";
+        /**
+         * @internal
+         */
         this.buttonPosition = "relative";
+        /**
+         * Center the scrollable list. Defaults to false.
+         */
         this.center = false;
+        /**
+         * Whether to add padding to the scrollable list to account for
+         * overflowing elements, such as shadows or outlines.
+         */
         this.padding = "none";
+        /**
+         * @internal
+         */
         this.gap = "large";
+        /**
+         * Selected element
+         */
         this.selected = 0;
+        /**
+         * Enables stretch mode for tab groups
+         * @internal
+         */
         this.stretch = false;
+        this.collapsedOnClick = () => {
+            this.collapsed = !this.collapsed;
+        };
     }
     watchPropHandler(newValue) {
         this.scrollToElement(newValue, "center");
@@ -261,14 +297,39 @@ const DuetScrollable = class {
         "selected": ["watchPropHandler"]
     }; }
 };
-DuetScrollable.style = DuetScrollableStyle0;
+DuetScrollable.style = duetScrollableCss;
 
 const duetTabCss = ":host{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{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{display:block}.duet-tab.has-content-id,.duet-tab.has-content-id.selected{display:none}:host(.user-is-tabbing) .duet-tab:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-tab.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
-const DuetTabStyle0 = duetTabCss;
 
 const DuetTab = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Theme of the component.
+         */
+        this.theme = "";
+        /**
+         * Defaults for AccessibleLabel
+         * @default null
+         */
+        this.accessibleDescriptionDefault = null;
+        /**
+         * String for AccessibleLabel
+         * @default null
+         */
+        this.accessibleDescription = this
+            .accessibleDescriptionDefault
+            ? getLocaleString(this.accessibleDescriptionDefault)
+            : null;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
+        this.accessibleLabelledBy = undefined;
+        /**
+         * HTML id of element that is to be used when opening this tab.
+         * This enables decoupling the content from the tab buttons.
+         */
+        this.contentId = undefined;
         this.setupContentElement = () => {
             if (this.contentId) {
                 this.tabpanelElement = document.getElementById(this.contentId);
@@ -304,18 +365,6 @@ const DuetTab = class {
             this.tabpanelElement.style.outline = null;
             this.tabpanelElement.style.boxShadow = null;
         };
-        this.theme = "";
-        this.label = undefined;
-        this.caption = undefined;
-        this.selected = undefined;
-        this.notificationMark = undefined;
-        this.accessibleDescriptionDefault = null;
-        this.accessibleDescription = this
-            .accessibleDescriptionDefault
-            ? getLocaleString(this.accessibleDescriptionDefault)
-            : null;
-        this.accessibleLabelledBy = undefined;
-        this.contentId = undefined;
     }
     componentWillLoad() {
         inheritGlobalTheme(this);
@@ -370,10 +419,9 @@ const DuetTab = class {
         "selected": ["setupSelected"]
     }; }
 };
-DuetTab.style = DuetTabStyle0;
+DuetTab.style = duetTabCss;
 
 const duetTabGroupCss = "*,*::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;display:block;width:100%}.duet-tab-group-tabs{margin-bottom:28px !important;display:block;width:100%;max-width:100%;padding-top:2px;list-style:none}.duet-tab-group-tabs.duet-m-0{margin:0 !important}.duet-tab-variation-plain .duet-tab-group-tabs{border-bottom:1px solid rgb(212, 223, 229)}.duet-theme-turva.duet-tab-variation-plain .duet-tab-group-tabs{border-bottom-color:rgb(222, 224, 228)}.duet-tab-variation-checked .duet-tab-group-tabs{display:flex;gap:4px;padding-top:0;padding-right:12px;padding-left:12px;overflow-x:scroll;-ms-overflow-style:none;scrollbar-width:none;}.duet-tab-variation-checked .duet-tab-group-tabs::-webkit-scrollbar{display:none}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-group-tabs{gap:8px;padding-right:16px;padding-left:16px;overflow:visible}}.duet-tab-plain-scrolling .duet-tab-group-tabs{display:flex;overflow-x:scroll;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;}.duet-tab-plain-scrolling .duet-tab-group-tabs::-webkit-scrollbar{display:none}@media (min-width: 36em){.duet-tab-plain-scrolling .duet-tab-group-tabs{display:block;overflow:auto}}.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper{}.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper{position:relative;width:100%;overflow:hidden;border-radius:8px;}.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay{display:contents}.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .background,.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .border{position:absolute;width:100%;height:100%;pointer-events:none;border-radius:8px}.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .background{z-index:100;background:rgb(245, 248, 250)}.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .background::after{position:absolute;top:0;left:0;width:100%;height:100%;margin-block:1px;content:\"\";border-radius:8px;box-shadow:0 3px 2px -1px rgba(0, 41, 77, 0.1) inset, 0 0 0 rgb(212, 223, 229)}.duet-theme-turva .duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .background::after{box-shadow:0 3px 2px -1px rgba(23, 28, 58, 0.1) inset, 0 0 0 rgb(222, 224, 228)}.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .border{z-index:206;border:1px solid rgb(212, 223, 229)}@media (min-width: 36em){duet-select{display:none !important}}.duet-tab-button{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:inline-block;width:auto;padding:20px;margin-left:-2px;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-weight:600;line-height:1.1;text-align:left;text-decoration:none;cursor:pointer;border-right:2px solid rgb(212, 223, 229);border-radius:0;transition:150ms ease}.duet-tab-button.duet-p-0{padding:0 !important}.duet-tab-button.duet-m-0{margin:0 !important}.duet-tab-group-stretch .duet-tab-button{flex:1 1 0;min-width:fit-content;text-align:center}.duet-tab-button.duet-notification-mark-warning::after{position:absolute;top:6px;right:6px;display:inline-block;width:6px;height:6px;content:\"\";border-radius:50%;background:rgb(247, 178, 40);box-shadow:0 0 0 1px #dea024}.duet-tab-variation-plain .duet-tab-button.duet-notification-mark-warning::after{top:calc(50% - 0.5rem - 6px);right:-6px}.duet-tab-button.duet-notification-mark-danger::after{position:absolute;top:6px;right:6px;display:inline-block;width:6px;height:6px;content:\"\";border-radius:50%;background:rgb(214, 28, 82);box-shadow:0 0 0 1px #c1194a}.duet-tab-variation-plain .duet-tab-button.duet-notification-mark-danger::after{top:calc(50% - 0.5rem - 6px);right:-6px}.duet-theme-turva .duet-tab-button{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)}.duet-theme-turva .duet-tab-button.duet-notification-mark-warning::after{position:absolute;top:6px;right:6px;display:inline-block;width:6px;height:6px;content:\"\";border-radius:50%;background:rgb(247, 178, 40);box-shadow:0 0 0 1px #dea024}.duet-tab-variation-plain .duet-theme-turva .duet-tab-button.duet-notification-mark-warning::after{top:calc(50% - 0.5rem - 6px);right:-6px}.duet-theme-turva .duet-tab-button.duet-notification-mark-danger::after{position:absolute;top:6px;right:6px;display:inline-block;width:6px;height:6px;content:\"\";border-radius:50%;background:rgb(214, 28, 82);box-shadow:0 0 0 1px #c1194a}.duet-tab-variation-plain .duet-theme-turva .duet-tab-button.duet-notification-mark-danger::after{top:calc(50% - 0.5rem - 6px);right:-6px}.duet-tab-button.duet-p-0{padding:0 !important}.duet-tab-button:hover{z-index:200;border-color:rgb(127, 150, 165)}.duet-theme-turva .duet-tab-button:hover{border-color:rgba(199, 202, 207, 0.8)}.duet-tab-button:active{opacity:0.75;transition:none}.duet-tab-button.selected{z-index:201;color:rgb(0, 119, 179);background:rgb(255, 255, 255);border-bottom:3px solid rgb(0, 119, 179);outline:0;box-shadow:none !important}.duet-theme-turva .duet-tab-button.selected{color:rgb(198, 12, 48);border-color:rgb(222, 224, 228);border-bottom-color:rgb(198, 12, 48)}.duet-tab-button:focus{z-index:205;outline:0}:host(.user-is-tabbing) .duet-tab-button: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-tab-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-tab-variation-default .duet-tab-button{z-index:200;padding:11px 20px 13px 20px;overflow:hidden;font-size:0.875rem;color:rgb(62, 84, 102);background:rgb(245, 248, 250);border:1px solid rgb(212, 223, 229)}.duet-tab-variation-default .duet-tab-button.switch-large-at-always{padding:15px 28px 17px 28px;font-size:1rem}@media (min-width: 36em){.duet-tab-variation-default .duet-tab-button.switch-large-at-small{padding:15px 28px 17px 28px;font-size:1rem}}.duet-tab-variation-default .duet-tab-button.selected{color:rgb(8, 42, 77);background:rgb(255, 255, 255);transition:none}.duet-tab-variation-default .duet-tab-button.selected::before{position:absolute;right:-1px;bottom:0;z-index:300;display:block;width:calc(100% + 2px);height:2px;content:\"\";background-color:rgb(0, 119, 179)}.duet-tab-variation-default .duet-tab-button.selected:focus-visible{outline:2px solid rgba(0, 119, 179, 0.8);outline-offset:-5px;box-shadow:none !important}.duet-tab-variation-default .duet-tab-button.selected:focus-visible::before{height:0}.duet-tab-variation-default .duet-tab-button:not(.selected){box-shadow:0 3px 2px -1px rgba(0, 41, 77, 0.1) inset, 0 0 0 rgb(212, 223, 229)}.duet-tab-variation-default .duet-tab-button:hover:not(.selected){color:rgb(30, 45, 59);background:rgb(228, 236, 239)}.duet-tab-variation-default .duet-tab-button:first-child{border-radius:8px 0 0 8px}.duet-tab-variation-default .duet-tab-button:last-child{border-radius:0 8px 8px 0}.duet-tab-variation-default .duet-tab-group-fill-space .duet-tab-button{z-index:200}.duet-tab-variation-default .duet-tab-group-fill-space .duet-tab-button:last-child{border-radius:0}.duet-theme-turva.duet-tab-variation-default .duet-tab-group-fill-space .duet-tab-button::before{height:3px}.duet-theme-turva.duet-tab-variation-default .duet-tab-button{color:rgb(71, 78, 101)}.duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected{color:rgb(23, 28, 58);background:rgb(255, 255, 255)}.duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected::before{background-color:rgb(198, 12, 48)}.duet-theme-turva.duet-tab-variation-default .duet-tab-button:not(.selected){z-index:200;box-shadow:0 3px 2px -1px rgba(23, 28, 58, 0.1) inset, 0 0 0 rgb(222, 224, 228)}.duet-theme-turva.duet-tab-variation-default .duet-tab-button:hover:not(.selected){z-index:200;color:rgb(45, 52, 79);background:rgb(234, 235, 239)}.duet-theme-turva.duet-tab-variation-default .duet-tab-button:focus-visible{border-color:rgb(222, 224, 228);outline-color:rgba(199, 202, 207, 0.8)}.duet-tab-variation-plain .duet-tab-button{display:inline-block;width:auto;padding:12px 0;margin-left:0;font-size:0.875rem;color:rgb(81, 105, 123);border-width:0;border-bottom:2px solid transparent;border-radius:0;transition:none}.duet-tab-variation-plain .duet-tab-button.switch-large-at-always{padding:20px 0;font-size:1rem}@media (min-width: 36em){.duet-tab-variation-plain .duet-tab-button.switch-large-at-small{padding:20px 0;font-size:1rem}}.duet-tab-variation-plain .duet-tab-button:hover{color:rgb(8, 42, 77);border-bottom:2px solid rgb(0, 119, 179)}.duet-tab-variation-plain .duet-tab-button.selected{color:rgb(8, 42, 77);border-bottom:2px solid rgb(0, 119, 179)}.duet-tab-variation-plain .duet-tab-button+.duet-tab-button{margin-left:36px}.duet-theme-turva.duet-tab-variation-plain .duet-tab-button{color:rgb(71, 78, 101)}.duet-theme-turva.duet-tab-variation-plain .duet-tab-button:hover{color:rgb(45, 52, 79);border-bottom:2px solid rgb(198, 12, 48)}.duet-theme-turva.duet-tab-variation-plain .duet-tab-button.selected{color:rgb(23, 28, 58);border-bottom:2px solid rgb(198, 12, 48)}.duet-tab-variation-checked .duet-tab-button{position:relative;display:inline-block;flex-basis:0;flex-grow:1;width:200px;min-width:200px;padding:8px 4px;border-color:rgb(181, 198, 208);border-top:2px solid rgb(181, 198, 208);border-bottom-color:rgb(0, 119, 179);border-left:2px solid rgb(181, 198, 208);border-radius:4px 4px 0 0;transition:none}.duet-theme-turva.duet-tab-variation-checked .duet-tab-button{border-color:rgb(181, 198, 208);border-bottom-color:rgb(113, 118, 132)}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button{min-width:0;padding:16px}}.duet-tab-variation-checked .duet-tab-button.stackable-tab{min-width:0}.duet-tab-variation-checked .duet-tab-button:first-child{margin-left:auto}.duet-tab-variation-checked .duet-tab-button:last-child{margin-right:auto}.duet-tab-variation-checked .duet-tab-button:active{opacity:1;transition:none}.duet-tab-variation-checked .duet-tab-button.selected{color:rgb(0, 119, 179);background:linear-gradient(180deg, rgb(240, 247, 250) 0%, rgb(255, 255, 255) 100%);border-color:rgb(0, 119, 179);border-bottom-color:#fff}.duet-theme-turva.duet-tab-variation-checked .duet-tab-button.selected{color:rgb(23, 28, 58);background:linear-gradient(180deg, rgb(245, 247, 250) 0%, rgb(255, 255, 255) 100%);border-color:rgb(113, 118, 132);border-bottom-color:#fff}.duet-tab-variation-checked .duet-tab-button .checked-tab-content{display:flex;flex-direction:row;justify-content:space-between}.duet-tab-variation-checked .duet-tab-button .checked-tab-content.stackable-checked-tab-content{flex-direction:column;height:100%}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button .checked-tab-content.stackable-checked-tab-content{flex-direction:row}}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description{display:flex;flex-direction:column;overflow:hidden;overflow-wrap:break-word}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description.stackable-description{text-align:center}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description.stackable-description{text-align:left}}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption{margin-top:4px;font-size:0.875rem;font-weight:400;color:rgb(98, 121, 138)}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption{font-size:1rem;text-align:left}}.duet-theme-turva.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption{color:rgb(113, 118, 132)}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption.selected{color:rgb(0, 119, 179)}.duet-theme-turva.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption.selected{color:rgb(113, 118, 132)}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .stackable-checkmark{order:-1;margin-top:8px;margin-bottom:8px}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button .checked-tab-content .stackable-checkmark{order:1}}.duet-tab-group-content{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:rgb(8, 42, 77);text-align:left}.duet-tab-group-content:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important}.duet-theme-turva .duet-tab-group-content:focus,.duet-tab-group-content:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important}.duet-tab-group-content.checked-group-content{padding:28px 0 28px 0}.duet-tab-group-content.checked-group-content::after{position:absolute;top:-2px;left:0;width:100%;height:2px;content:\" \";background-color:rgb(0, 119, 179)}.duet-theme-turva .duet-tab-group-content{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)}.duet-theme-turva .duet-tab-group-content.checked-group-content::after{background-color:rgb(113, 118, 132)}";
-const DuetTabGroupStyle0 = duetTabGroupCss;
 
 const DuetTabGroup = class {
     constructor(hostRef) {
@@ -382,6 +430,96 @@ const DuetTabGroup = class {
         this.duetTabChange = createEvent(this, "duetTabChange", 7);
         this.duetTabChangeRequested = createEvent(this, "duetTabChangeRequested", 7);
         this.id = createID("DuetTabGroup");
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
+        this.tabs = [];
+        this.selected = undefined;
+        /**
+         * Theme of the component.
+         */
+        this.theme = "";
+        /**
+         * Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens)
+         * @deprecated scrolling is now the deafult behavior which can not be overridden, and this attribute has no effect
+         */
+        this.scrolls = true;
+        /**
+         * Whether the tab-group collapses to a select dropwdown in minor breakpoints
+         * @deprecated as scrolls is now always enabled, tabs never collapse to a dropdown, and this attribute has no effect
+         */
+        this.collapses = false;
+        /**
+         * Aria label for the entire tab-group
+         */
+        this.accessibleLabel = undefined;
+        /**
+         * Style variation of the tab group. Note that "plain-scrolling" is deprecated, as tab-group now allways has scrolling
+         * behavior, use values "default", "plain" or "checked"
+         */
+        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 = 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 = getLocaleString(this.labelDefaults, this.language);
+        /**
+         * Determines whether the label for the select element shown on mobile is visually hidden.
+         */
+        this.labelHidden = true;
+        /**
+         * Optional identifier to add to buttons in the tab group
+         */
+        this.identifier = this.id;
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Controls the padding of the component.
+         */
+        this.padding = "auto";
+        /**
+         * @deprecated in favour of Duet Tab component owning the tab indexing
+         * Controls if tab container should have tab index and be accessible by pressing tab
+         */
+        this.setTabIndex = true;
+        /**
+         * If this property is set to true, tab won't change immediately after clicking it.
+         * Component will emit "duetTabChangeRequested" event, and it needs to be handled manually in order to change tab.
+         */
+        this.tabChangeConfirm = false;
+        /**
+         * By default switches to larger size from small breakpoint.
+         * Never disables switching to larger size and always forces it.
+         */
+        this.switchLargeBreakpoint = "small";
+        /**
+         * Makes the tab group fill the space with background, only used
+         * when tab-group variation is default.
+         */
+        this.fillSpace = false;
+        /**
+         * Makes the tab buttons stretch to fill the available space
+         */
+        this.stretch = false;
         /**
          * Component event handling.
          */
@@ -425,29 +563,6 @@ const DuetTabGroup = class {
                 }
             }, 50);
         };
-        this.tabs = [];
-        this.selected = undefined;
-        this.theme = "";
-        this.scrolls = true;
-        this.collapses = false;
-        this.accessibleLabel = undefined;
-        this.variation = "default";
-        this.language = getLanguage();
-        this.labelDefaults = {
-            fi: "Valitse",
-            en: "Choose",
-            sv: "Välj",
-        };
-        this.label = getLocaleString(this.labelDefaults, this.language);
-        this.labelHidden = true;
-        this.identifier = this.id;
-        this.margin = "auto";
-        this.padding = "auto";
-        this.setTabIndex = true;
-        this.tabChangeConfirm = false;
-        this.switchLargeBreakpoint = "small";
-        this.fillSpace = false;
-        this.stretch = false;
     }
     /**
      * Component lifecycle events.
@@ -605,6 +720,6 @@ const DuetTabGroup = class {
     }
     get element() { return getElement(this); }
 };
-DuetTabGroup.style = DuetTabGroupStyle0;
+DuetTabGroup.style = duetTabGroupCss;
 
 export { DuetScrollable as duet_scrollable, DuetTab as duet_tab, DuetTabGroup as duet_tab_group };

package/lib/esm/duet-section-layout.entry.js

@@ -1,17 +1,26 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-a830b2de.js';
-import { i as isInternetExplorer } from './is-internet-explorer-2c48f686.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { i as isInternetExplorer } from './is-internet-explorer-DxESMgwA.js';
 
 const duetSectionLayoutCss = "*,*::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;display:block;flex:1 0 auto;width:100%}:host(.duet-middle) .duet-layout{padding:36px 28px !important}@media (min-width: 36em){:host(.duet-middle) .duet-layout{padding:48px 36px !important}}@media (min-width: 62em){:host(.duet-middle) .duet-layout{padding:56px !important}}:host(.duet-ie){height:100%}:host(.duet-middle.duet-ie){height:auto}.duet-layout-wrapper{display:block;margin:48px 0 36px;overflow-x:clip}@media (min-width: 36em){.duet-layout-wrapper{margin-top:72px}}@media (min-width: 62em){.duet-layout-wrapper{margin-bottom:48px}}.duet-layout-wrapper.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout-wrapper>*{width:100%}.duet-layout{position:relative;padding:0 16px;margin:0 auto}@media (max-width: 20.5em){.duet-layout.padding-xxx-small{padding:0}}@media (max-width: 22.5em){.duet-layout.padding-xx-small{padding:0}}@media (max-width: 35.9375em){.duet-layout.padding-x-small{padding:0}}@media (min-width: 36em){.duet-layout.padding-small{padding:0}}@media (min-width: 48em){.duet-layout.padding-medium{padding:0}}@media (min-width: 62em){.duet-layout.padding-large{padding:0}}@media (min-width: 64.0625em){.duet-layout.padding-x-large{padding:0}}@media (min-width: 76.25em){.duet-layout.padding-xx-large{padding:0}}@media (min-width: 106.25em){.duet-layout.padding-xxx-large{padding:0}}@media (min-width: 36em){.duet-layout{padding:0 28px}}@media (min-width: 62em){.duet-layout{display:flex;flex-direction:row;padding:0 56px}}@media (min-width: 76.25em){.duet-layout{max-width:1110px;padding:0}}.duet-main{display:block;width:100%}@media (min-width: 62em){.duet-main{min-width:600px;margin:0 auto}}";
-const DuetSectionLayoutStyle0 = duetSectionLayoutCss;
 
 const DuetSectionLayout = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Align container vertically in the middle when the space allows it.
+         */
         this.middle = false;
+        /**
+         * Breakpoint used to remove padding. These match to
+         * similar media query tokens: $media-query-small and $media-query-medium.
+         */
         this.paddingBreakpoint = undefined;
     }
     /**
@@ -29,6 +38,6 @@ const DuetSectionLayout = class {
     }
     get element() { return getElement(this); }
 };
-DuetSectionLayout.style = DuetSectionLayoutStyle0;
+DuetSectionLayout.style = duetSectionLayoutCss;
 
 export { DuetSectionLayout as duet_section_layout };

package/lib/esm/duet-select.entry.js

@@ -1,15 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a830b2de.js';
-import { D as DuetInternalLabel } from './label-52e2e3f9.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { c as checkNamedSlotElement } from './slot-utils-4096ff0d.js';
-import { p as parsePossibleJSON } from './string-utils-192eb3c8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { D as DuetInternalLabel } from './label-BrSxwvH-.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { c as checkNamedSlotElement } from './slot-utils-B1zQ6tzO.js';
+import { p as parsePossibleJSON } from './string-utils-C6E9F6QT.js';
 
 const duetSelectCss = ".duet-internal-label{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;position:relative;z-index:100;display:inline-flex;width:auto;margin-top:8px !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 !important;line-height:1.25;line-height:1.25;color:rgb(8, 42, 77);text-align:left;word-break:break-word;cursor:default}.duet-internal-label.duet-p-0{padding:0 !important}.duet-internal-label.duet-m-0{margin:0 !important}.duet-internal-label span{font-size:1rem;font-weight:600 !important;word-break:break-word}.duet-internal-label.duet-m-0{margin-bottom:0 !important}.duet-internal-label.duet-small-margin{margin-top:8px !important;margin-bottom:4px !important}.duet-internal-label.duet-has-tooltip{padding-right:48px}@media (min-width: 48em){.duet-internal-label.duet-has-tooltip{padding-right:0}}.duet-internal-label.duet-internal-label-small{font-size:0.875rem}.duet-internal-label.duet-internal-label-small span{font-size:0.875rem}.duet-internal-label.duet-weight-normal{font-weight:400 !important}.duet-internal-label.duet-weight-normal span{font-weight:400 !important}.duet-internal-label.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)}*,*::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;display:inline-flex;width:100%;max-width:100%;vertical-align:bottom}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}:host.duet-expand{width:100% !important}}:host(:not(.duet-m-0)){margin-right:16px !important;margin-bottom:12px !important}:host(:not(.duet-m-0)):last-child,:host(:not(.duet-m-0)):last-of-type{margin-right:0 !important}@media (min-width: 36em){:host(.duet-expand){width:100% !important}}:host(.duet-select-variation-tiny),:host(.duet-select-variation-compact){position:relative;top:-2px;width:72px;margin:0;vertical-align:baseline}:host(.duet-select-variation-compact){width:auto}duet-tooltip,::slotted(duet-tooltip){position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip,::slotted(duet-tooltip){position:relative;top:4px;right:auto}}.duet-select-placeholder{position:absolute;top:-9px;left:9px;z-index:200;display:block;width:auto;max-width:60%;padding:0 0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgb(255, 255, 255)}.duet-select-container{position:relative;width:100%}.duet-select-container.duet-select-variation-tiny{width:72px}.duet-select-wrapper{position:relative;width:100%;padding:15px 14px !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:400;line-height:1.25}.duet-theme-turva .duet-select-wrapper{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-select-variation-tiny .duet-select-wrapper{width:81px;padding:0 !important}.duet-select-variation-compact .duet-select-wrapper{padding:0 !important;line-height:1}.duet-select-wrapper select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:200;width:100%;height:100%;padding:0;margin:0;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;cursor:pointer;border:0;outline:none;opacity:0}.duet-theme-turva .duet-select-wrapper select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-select-wrapper select:hover+.duet-select{border-color:rgb(127, 150, 165);box-shadow:0 0 0 1px #909599}.duet-theme-turva .duet-select-wrapper select:hover+.duet-select{border-color:rgb(143, 147, 158);box-shadow:0 0 0 1px #747475}.has-error .duet-select-wrapper select:hover+.duet-select{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-select-wrapper select:hover+.duet-select{box-shadow:0 0 0 1px #e55039}.duet-select-wrapper select:focus+.duet-select{border-color:rgb(0, 119, 179);outline:0;box-shadow:0 0 0 1px #0077b3 !important;transition:none}.duet-theme-turva .duet-select-wrapper select:focus+.duet-select{border-color:rgb(23, 28, 58);box-shadow:0 0 0 1px #171c3a !important}.duet-theme-turva .duet-select-wrapper select:focus+.duet-select .duet-select-icon{color:rgb(23, 28, 58)}.duet-select-wrapper select:focus+.duet-select .duet-select-icon{color:rgb(0, 119, 179)}.has-error .duet-select-wrapper select:focus+.duet-select{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-select-wrapper select:focus+.duet-select{box-shadow:0 0 0 1px #e55039}.duet-select-wrapper select[disabled]{cursor:default !important}.duet-select-wrapper select[disabled]+.duet-select{color:rgb(8, 42, 77) !important;cursor:default !important;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important;box-shadow:none !important;opacity:1 !important;-webkit-text-fill-color:rgb(8, 42, 77) !important}.duet-theme-turva .duet-select-wrapper select[disabled]+.duet-select{color:rgb(23, 28, 58) !important;background:rgb(245, 247, 250) !important;border-color:rgb(245, 247, 250) !important;-webkit-text-fill-color:rgb(23, 28, 58) !important}.duet-select-wrapper span.duet-keep-container-height{opacity:0}.duet-select-variation-compact .duet-select-wrapper span.duet-keep-container-height{display:none}.duet-select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;display:block;width:100%;min-width:8rem;padding:12px 14px !important;padding-right:48px !important;overflow:hidden;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;font-variant-numeric:tabular-nums;line-height:1.5;color:rgb(8, 42, 77);text-align:left;text-overflow:ellipsis;white-space:nowrap;background:rgb(255, 255, 255);border:1px solid rgb(127, 150, 165);border-radius:4px;transition:150ms ease}.has-error .duet-select{border-color:rgb(214, 28, 82) !important}.has-error .duet-select .duet-select-icon{color:rgb(214, 28, 82) !important}.duet-theme-turva.has-error .duet-select{border-color:rgb(214, 28, 82) !important}.duet-theme-turva.has-error .duet-select .duet-select-icon{color:rgb(214, 28, 82) !important}.duet-theme-turva .duet-select{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);border-color:rgb(143, 147, 158)}.duet-select svg{position:absolute;top:50%;right:16px;z-index:200;width:20px;height:20px;color:rgb(8, 42, 77);pointer-events:none;transform:translateY(-50%)}.duet-theme-turva .duet-select svg{color:rgb(23, 28, 58)}.duet-select-variation-tiny .duet-select,.duet-select-variation-compact .duet-select{width:72px;min-width:inherit;padding:0 !important;margin-bottom:-4px;overflow:visible;font-weight:600;text-align:center}.duet-select-variation-tiny .duet-select duet-icon,.duet-select-variation-compact .duet-select duet-icon{padding-left:10px}.duet-select-variation-compact .duet-select{position:relative;width:fit-content;padding:7px 16px !important;font-size:0.875rem;line-height:1.1;text-align:right;border-radius:8px}.duet-select-help{display:block;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:rgb(98, 121, 138);border-radius:4px}.duet-select-help span{display:block;margin-top:8px}.duet-theme-turva .duet-select-help{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(143, 147, 158)}.has-error .duet-select-help{color:rgb(214, 28, 82)}.duet-theme-turva.has-error .duet-select-help{color:rgb(214, 28, 82)}.duet-label-hidden .duet-internal-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
-const DuetSelectStyle0 = duetSelectCss;
 
 function isOptionGroup(item) {
     return "options" in item;
@@ -39,6 +38,78 @@ const DuetSelect = class {
         this.labelId = createID("DuetLabel");
         this.topCaptionId = createID("DuetCaptionTop");
         this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
+        this.processedItems = null;
+        /**
+         * Variation of dropdown. Tiny is used for small numbers / tiny option ranges. Compact works well with adjacent buttons,
+         * like with compact pagination.
+         */
+        this.variation = "default";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Display the select in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
+         * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
+         * the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message
+         * unread by screen readers.
+         */
+        this.accessibleLiveError = "polite";
+        /**
+         * Expands the input to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Theme of the select.
+         */
+        this.theme = "";
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * Hint text to display.
+         */
+        this.placeholder = "";
+        /**
+         * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),
+         * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
+         */
+        this.echoPlaceholder = false;
+        /**
+         * Makes the select component disabled. This prevents users from being able
+         * to interact with the select, and conveys its inactive state to assistive
+         * technologies.
+         */
+        this.disabled = false;
+        /**
+         * 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.
+         */
+        this.required = false;
+        /**
+         * Label for the select.
+         */
+        this.label = "label";
+        /**
+         * Tooltip to display next to the label of the input.
+         */
+        this.tooltip = "";
+        /**
+         * With direction setting you can force the tooltip to always open towards left
+         * or right instead of automatically determining the direction.
+         */
+        this.tooltipDirection = "auto";
         /**
          * Component event handling.
          */
@@ -79,33 +150,6 @@ const DuetSelect = class {
             }
             return describedBy.length > 0 ? describedBy.join(" ") : null;
         };
-        this.processedItems = null;
-        this.variation = "default";
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.margin = "auto";
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.error = "";
-        this.accessibleLiveError = "polite";
-        this.expand = false;
-        this.value = undefined;
-        this.theme = "";
-        this.labelHidden = false;
-        this.identifier = undefined;
-        this.name = undefined;
-        this.placeholder = "";
-        this.caption = undefined;
-        this.echoPlaceholder = false;
-        this.items = undefined;
-        this.disabled = false;
-        this.required = false;
-        this.label = "label";
-        this.labelColor = undefined;
-        this.labelWeight = undefined;
-        this.role = undefined;
-        this.tooltip = "";
-        this.tooltipDirection = "auto";
     }
     valueChanged() {
         if (this.nativeSelect) {
@@ -180,6 +224,6 @@ const DuetSelect = class {
         "items": ["refresh"]
     }; }
 };
-DuetSelect.style = DuetSelectStyle0;
+DuetSelect.style = duetSelectCss;
 
 export { DuetSelect as duet_select };

package/lib/esm/duet-shaped-image.entry.js

@@ -1,19 +1,26 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host } from './index-a830b2de.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
+import { r as registerInstance, h, H as Host } from './index-BGuG-JHD.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
 
 const duetShapedImageCss = "*,*::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;display:inline-block;width:100%;height:100%;margin:5%}:host(.duet-theme-turva){margin:3%}:host(.duet-m-0){margin:0}.shaped-image{position:relative;display:inline-block;width:100%;height:100%}.shaped-image .shaped-image-mask{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:25%;transform:rotate(var(--rotation))}.shaped-image .shaped-image-mask .shaped-image-img{position:relative;display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;transform:scale(1.07) rotate(calc(-1 * var(--rotation)));transform-origin:center}:host(.duet-theme-turva) .shaped-image .shaped-image-mask{transform:none;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");-webkit-mask-repeat:no-repeat;mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");mask-repeat:no-repeat}:host(.duet-theme-turva) .shaped-image .shaped-image-mask .shaped-image-img{transform:none}";
-const DuetShapedImageStyle0 = duetShapedImageCss;
 
 const DuetShapedImage = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Theme of the component.
+         */
         this.theme = "";
-        this.accessibleLabel = undefined;
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
-        this.src = undefined;
+        /**
+         * Rotation. Note: in 'turva' theme there's no rotation.
+         * @default "7"
+         */
         this.rotation = 7;
     }
     /**
@@ -35,6 +42,6 @@ const DuetShapedImage = class {
             }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '40f7cd9536a69fd2871a473ddd382acf393bd1b9', class: "shaped-image-mask", role: "presentation" }, h("span", { key: 'eda5c54d79dd7b3d06cac81547b5ca56e626597f', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
     }
 };
-DuetShapedImage.style = DuetShapedImageStyle0;
+DuetShapedImage.style = duetShapedImageCss;
 
 export { DuetShapedImage as duet_shaped_image };