@duetds/components 10.0.0-alpha.9 → 10.1.0

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

@@ -3,25 +3,79 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-blgG8IJB.js');
+var actionArrowDownSmall = require('./action-arrow-down-small-CDsSJFvZ.js');
+var tokens = require('./tokens-BxWzRxOl.js');
+var themeableComponent = require('./themeable-component-DcR7DztR.js');
+var createId = require('./create-id-DtslnIOq.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
+var slotUtils = require('./slot-utils-Byx247xX.js');
+require('./_commonjsHelpers-4N64IRaP.js');
 
-const index = require('./index-7b1d76ef.js');
-const actionArrowDownSmall = require('./action-arrow-down-small-ef77a2d1.js');
-const tokens = require('./tokens-57e06fe4.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const createId = require('./create-id-1f8c438f.js');
-const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
-const slotUtils = require('./slot-utils-7e6aa48b.js');
-const stringUtils = require('./string-utils-7b13c16e.js');
-
-const duetCollapsibleCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=after-heading]){display:inline-block}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;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:1rem;font-weight:600;line-height:1.5;color:rgb(8, 42, 77)}: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-m-0){margin:0 !important}.duet-collapsible-content{display:none;padding-left:18px;margin-top:8px;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;-webkit-hyphens:auto;hyphens:auto;line-height:1.5;color:rgb(8, 42, 77)}@media (max-width: 35.9375em){.duet-collapsible-content{font-size:0.875rem}}.duet-collapsible-content.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([open])>.duet-collapsible-content{display:block}.duet-collapsible-heading{-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;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.5;color:rgb(8, 42, 77);text-align:left;cursor:pointer;border-radius:4px}.duet-collapsible-heading.full-width{width:100%}.duet-collapsible-heading.duet-collapsible-heading-centered{margin:auto}.duet-collapsible-heading.duet-collapsible-heading-centered .duet-collapsible-heading-caption{margin-inline:auto}.duet-collapsible-heading.duet-collapsible-normal-weight{font-weight:400}.duet-collapsible-heading.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)}.duet-collapsible-heading .duet-collapsible-heading-content{min-width:0}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div{margin-left:16px}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div.float-right{margin-left:auto}.duet-collapsible-heading.has-caption{gap:4px}.duet-collapsible-heading.has-caption .duet-collapsible-heading-caption{margin-left:18px;font-weight:inherit}.duet-collapsible-heading .duet-collapsible-heading-wrapper{display:flex;align-items:center;width:inherit;margin:inherit}.duet-collapsible-heading:focus{outline:0}:host(.user-is-tabbing) .duet-collapsible-heading:focus{border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-collapsible-heading.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-collapsible-heading-icon{margin-right:8px !important;display:flex;align-items:center;justify-content:center;color:rgb(8, 42, 77);transition:transform 300ms ease}.duet-collapsible-heading-icon:last-child,.duet-collapsible-heading-icon:last-of-type{margin-right:0 !important}[aria-expanded=true] .duet-collapsible-heading-icon{transform:rotate(180deg)}:host(.negative) .duet-collapsible-heading,:host(.negative) .duet-collapsible-content,:host(.negative) .duet-collapsible-heading-icon{color:rgb(255, 255, 255)}";
-const DuetCollapsibleStyle0 = duetCollapsibleCss;
+const duetCollapsibleCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}::slotted([slot=after-heading]){display:inline-block}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-bottom:16px !important;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:1rem;font-weight:600;line-height:1.5;color:rgb(8, 42, 77)}: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-m-0){margin:0 !important}.duet-collapsible-content{display:none;padding-left:18px;margin-top:8px;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);-webkit-hyphens:auto;hyphens:auto}@media (max-width: 35.9375em){.duet-collapsible-content{font-size:0.875rem}}.duet-collapsible-content.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([open])>.duet-collapsible-content{display:block}.duet-collapsible-heading{-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;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.5;color:rgb(8, 42, 77);text-align:left;cursor:pointer;border-radius:4px}.duet-collapsible-heading:focus{outline:0}:host(.user-is-tabbing) .duet-collapsible-heading:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva :host(.user-is-tabbing) .duet-collapsible-heading:focus,:host(.user-is-tabbing) .duet-collapsible-heading:focus.duet-theme-turva,.duet-theme-turva2 :host(.user-is-tabbing) .duet-collapsible-heading:focus,:host(.user-is-tabbing) .duet-collapsible-heading:focus.duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}.duet-collapsible-heading.full-width{width:100%}.duet-collapsible-heading.duet-collapsible-heading-centered{margin:auto}.duet-collapsible-heading.duet-collapsible-heading-centered .duet-collapsible-heading-caption{margin-inline:auto}.duet-collapsible-heading.duet-collapsible-normal-weight{font-weight:400}.duet-collapsible-heading.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)}.duet-collapsible-heading .duet-collapsible-heading-content{min-width:0}.duet-collapsible-heading .duet-collapsible-heading-content ::slotted(*){padding:0;margin:0;font-family:inherit !important;font-size:inherit !important;font-weight:inherit !important;color:inherit !important}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div{margin-left:16px}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div.float-right{margin-left:auto}.duet-collapsible-heading.has-caption{gap:4px}.duet-collapsible-heading.has-caption .duet-collapsible-heading-caption{margin-left:18px;font-weight:inherit}.duet-collapsible-heading .duet-collapsible-heading-wrapper{display:flex;align-items:center;width:inherit;margin:inherit}:host(.user-is-tabbing) .duet-collapsible-heading:focus{border-radius:4px}.duet-collapsible-heading-icon{margin-right:8px !important;display:flex;align-items:center;justify-content:center;color:rgb(8, 42, 77);transition:transform 300ms ease}.duet-collapsible-heading-icon:last-child,.duet-collapsible-heading-icon:last-of-type{margin-right:0 !important}[alignment=form-distribute]>.duet-collapsible-heading-icon:last-of-type:not(:last-child){margin-right:8px !important}[aria-expanded=true] .duet-collapsible-heading-icon{transform:rotate(180deg)}:host(.negative) .duet-collapsible-heading,:host(.negative) .duet-collapsible-content,:host(.negative) .duet-collapsible-heading-icon{color:rgb(255, 255, 255)}:host(.duet-theme-turva2){color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-collapsible-content.duet-theme-turva,:host(.duet-theme-turva2) .duet-collapsible-heading.duet-theme-turva{color:rgb(23, 42, 59)}";
 
 const DuetCollapsible = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.duetToggle = index.createEvent(this, "duetToggle", 7);
         this.id = createId.createID("DuetCollapsible");
+        this.headingTags = ["h1", "h2", "h3", "h4", "h5", "h6"];
+        /**
+         * Theme of the collapsible.
+         */
+        this.theme = "";
+        /**
+         * Negative variation for collapsible on dark background
+         */
+        this.negative = false;
+        /**
+         * The content for the collapsible heading.
+         */
+        this.heading = "";
+        /**
+         * The caption text to display below the heading.
+         */
+        this.caption = "";
+        /**
+         * Makes collapsible heading full width
+         */
+        this.headingFullWidth = false;
+        /**
+         * Centers heading inside its container
+         */
+        this.centerHeading = false;
+        /**
+         * The font weight of the heading
+         */
+        this.headingWeight = "semibold";
+        /**
+         * Custom headingSize to be used for font size of heading, as a design token entered
+         * in kebab-case x-small -> font-size-x-small.
+         * Example:
+         * # 12px (0.75rem)  ------  +2px   (x-small)
+         * # 14px (0.875rem) ------  +2px   (small)
+         * # 16px (1rem)     ------  +2px   (medium)
+         * # 20px (1.25rem)  ------  +4px   (large)
+         * # 24px (1.5rem)   ------  +4px   (x-large)
+         * # 36px (2.25rem)  ------  +12px  (xx-large)
+         * # 48px (3rem)     ------  +12px  (xxx-large)
+         * # 72px (4.5rem)   ------  +24px  (xxxx-large)
+         */
+        this.headingSize = undefined;
+        /**
+         * The actual heading level used for the heading in html markup. This setting
+         * exists for accessibility reasons. It doesn’t change the style visually.
+         * only variations of h1-h6 area accepted
+         */
+        this.headingLevel = undefined;
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Is the component expanded or collapsed.
+         */
+        this.open = false;
         this.handleKeyDown = (e) => {
             if (keyboardUtils.isKeyboardClick(e)) {
                 this.handleClick(e);
@@ -64,10 +118,20 @@ const DuetCollapsible = class {
             if (this.accessibleLabel) {
                 return this.accessibleLabel;
             }
-            if (this.heading && this.caption) {
-                return `${this.heading}. ${this.caption}`;
+            const labelParts = [];
+            if (this.heading) {
+                labelParts.push(this.heading);
+            }
+            else if (this.hasHeadingSlot) {
+                labelParts.push(slotUtils.getSlotTextContent(this.element, "heading"));
+            }
+            if (this.hasAfterHeadingSlot) {
+                labelParts.push(slotUtils.getSlotTextContent(this.element, "after-heading"));
             }
-            return this.heading || null;
+            if (this.caption) {
+                labelParts.push(this.caption);
+            }
+            return labelParts.join(". ");
         };
         this.handleClick = (e) => {
             e.preventDefault();
@@ -77,25 +141,20 @@ const DuetCollapsible = class {
                 originalEvent: e,
             });
         };
-        this.theme = "";
-        this.negative = false;
-        this.accessibleLabel = undefined;
-        this.heading = "";
-        this.caption = "";
-        this.headingFullWidth = false;
-        this.centerHeading = false;
-        this.headingWeight = "semibold";
-        this.headingSize = undefined;
-        this.headingLevel = undefined;
-        this.margin = "auto";
-        this.open = false;
     }
     /**
      * Component lifecycle events.
      */
     componentWillLoad() {
         themeableComponent.inheritGlobalTheme(this);
-        this.hasAfterHeading = slotUtils.hasSlot(this.element, "after-heading");
+        this.hasAfterHeadingSlot = slotUtils.hasSlot(this.element, "after-heading");
+        this.hasHeadingSlot = slotUtils.hasSlot(this.element, "heading");
+        slotUtils.checkNamedSlotElement(this.element, "heading", this.headingTags.join(","));
+        // As the slotted heading is inside a button it is assigned a presentational role. To provide the correct
+        // level to assistive technologies we copy the slotted heading's level for the heading wrapping the button.
+        if (this.hasHeadingSlot) {
+            this.headingLevel = slotUtils.getElementsFromNamedSlot(this.element, "heading")[0].tagName.toLowerCase();
+        }
     }
     connectedCallback() {
         keyboardUtils.subscribeTabbingChange(this);
@@ -118,19 +177,19 @@ const DuetCollapsible = class {
      * Always the last one in the class.
      */
     render() {
-        const HeadingTagName = this.headingLevel ? stringUtils.sanitizeString(this.headingLevel) : "div";
-        return (index.h(index.Host, { key: 'a5fe4a3b514f97ad69609df67489b6f2ff1d21a9', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, index.h(HeadingTagName, { key: 'ec94994682ae88699a4f27b64486f6dd5edf9eff' }, index.h("button", { key: '9fe564ae09ba09b01f0f32a48cb8a7812e7c6145', class: {
+        const HeadingTagName = this.headingTags.includes(this.headingLevel) ? this.headingLevel : "div";
+        return (index.h(index.Host, { key: '33d42aa6613b1c4c8d7789ad32a4bc0e02cab4ad', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, index.h(HeadingTagName, { key: '091f0117124e76f5f87b226fe216b69f587d706f' }, index.h("button", { key: 'efec916eea29062394e6e3938c1d26bf2efc1620', class: {
                 "duet-collapsible-heading": true,
                 "duet-collapsible-heading-centered": this.centerHeading,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-collapsible-normal-weight": this.headingWeight === "normal",
-                "has-after-heading": this.hasAfterHeading,
+                "has-after-heading": this.hasAfterHeadingSlot,
                 "full-width": this.headingFullWidth,
                 "has-caption": !!this.caption,
-            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("div", { key: 'fe01498bf3b34196ef3f4a6bf03c02ecfe65bc86', class: "duet-collapsible-heading-wrapper" }, index.h("div", { key: '7497f1b30a5eb295c9d7ba158c39efd4878d9437', class: "duet-collapsible-heading-icon" }, index.h("duet-icon", { key: 'f81a6c6772d17cdf276e82757e405824166404dd', margin: "none", size: this.getEquivalentIconSize(), icon: actionArrowDownSmall.actionArrowDownSmall.svg })), index.h("div", { key: '3c65eff49d214f709088e7a103e24d682a626def', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (index.h("div", { key: '411a824a551f51d2d92e6e8f941b5efd5070f6ee', part: "duet-collapsible-after-heading" }, index.h("slot", { key: '1f5530cea4337eb7a4d20f56871e46ba23da9b63', name: "after-heading" })))), this.caption && (index.h("div", { key: '37286e360e8d4e35c3c80f11ef437a254614334f', class: "duet-collapsible-heading-caption" }, index.h("duet-caption", { key: '9ec1497e017210ed4c10d51a1b2cf547e22762bc', size: "small", margin: "none" }, this.caption))))), index.h("div", { key: '07125a3e519c372a606bcdc1b1744133ff679c03', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, index.h("slot", { key: '7ffb7925697f929df542a126431524e2c20dc233' }))));
+            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("div", { key: '933b0f2222b12e28df931954684fee098ce514e1', class: "duet-collapsible-heading-wrapper" }, index.h("div", { key: '11e4a5a8651be923cd1504af680534ed0ce74814', class: "duet-collapsible-heading-icon" }, index.h("duet-icon", { key: '01d74d252e5642f53f549a6bafe82dc709186355', margin: "none", size: this.getEquivalentIconSize(), icon: actionArrowDownSmall.arrowDownIcon.svg })), index.h("div", { key: '4f61ec6445ea77d863d9fd61c670a981a88ca99a', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading ? this.heading : index.h("slot", { name: "heading" })), this.hasAfterHeadingSlot && (index.h("div", { key: '0a73d177f1fa62144044b314f07461b20a830d2b', part: "duet-collapsible-after-heading" }, index.h("slot", { key: '0a38479abd24db8891c488e7fdf19787ed9e9a55', name: "after-heading" })))), this.caption && (index.h("div", { key: 'b31a6d8a198093d28fa0fd0a552c0806ce86a986', class: "duet-collapsible-heading-caption" }, index.h("duet-caption", { key: 'b13eeb284c4e904f8782660acdf72201269288a2', size: "small", margin: "none" }, this.caption))))), index.h("div", { key: '7529c3164f4b457b85430f62e61d05648f1a5db4', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, index.h("slot", { key: '0124d76ffc82a087323436e7629a0bcbe535fc83' }))));
     }
     get element() { return index.getElement(this); }
 };
-DuetCollapsible.style = DuetCollapsibleStyle0;
+DuetCollapsible.style = duetCollapsibleCss;
 
 exports.duet_collapsible = DuetCollapsible;

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

@@ -3,16 +3,14 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-7b1d76ef.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const createId = require('./create-id-1f8c438f.js');
-const jsUtils = require('./js-utils-92e24ba1.js');
-const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
-const languageUtils = require('./language-utils-a6a152b8.js');
-const slotUtils = require('./slot-utils-7e6aa48b.js');
-const stringUtils = require('./string-utils-7b13c16e.js');
+var index = require('./index-blgG8IJB.js');
+var themeableComponent = require('./themeable-component-DcR7DztR.js');
+var createId = require('./create-id-DtslnIOq.js');
+var jsUtils = require('./js-utils-hJ4A2edy.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
+var languageUtils = require('./language-utils-DWW8tvkB.js');
+var slotUtils = require('./slot-utils-Byx247xX.js');
+var stringUtils = require('./string-utils-B35hEUBv.js');
 
 const DuetComboBoxSelect = ({ item, activeDescendant, selected, label = undefined, clickHandler = e => {
     e.preventDefault();
@@ -31,8 +29,7 @@ const DuetComboBoxSelect = ({ item, activeDescendant, selected, label = undefine
         item.tags && index.h("span", { class: "option-tags" }, item.tags.join(", "))));
 };
 
-const duetComboboxCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:inline-block;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\";color:rgb(8, 42, 77)}:host a{color:rgb(8, 42, 77);transition:none}: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-theme-turva a{color:rgb(23, 28, 58)}.combobox-menu-container{width:var(--popup-width);max-height:200px}";
-const DuetComboboxStyle0 = duetComboboxCss;
+const duetComboboxCss = ":host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;position:relative;display:inline-block;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\";color:rgb(8, 42, 77)}:host a{color:rgb(8, 42, 77);transition:none}: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-theme-turva a{color:rgb(23, 28, 58)}.combobox-menu-container{width:var(--popup-width);max-height:200px}:host(.duet-theme-turva2.duet-theme-turva){color:rgb(23, 42, 59)}:host(.duet-theme-turva2.duet-theme-turva) a{color:rgb(23, 42, 59)}";
 
 const DuetCombobox = class {
     constructor(hostRef) {
@@ -43,6 +40,7 @@ const DuetCombobox = class {
         this.inputId = createId.createID("duet-combobox-input-id");
         this.activeDescendantId = createId.createID("duet-combobox-active-descendant");
         this.isAndroidDevice = ((_b = (_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf("android")) > -1 || null;
+        this.isInsideModal = false;
         this.resizeObserver = new ResizeObserver(jsUtils.debounce(entries => {
             var _a, _b, _c;
             // otherwise, something is wrong, expecting 1 element only
@@ -52,21 +50,95 @@ const DuetCombobox = class {
                 this.listContainer.style.setProperty("--popup-width", `${currentWidth - 2 * popupMenuPadding}px`);
             }
         }, 100));
+        this.processedItems = null;
+        this.inputValue = "";
+        this.listOpen = false;
+        // the selected item is based upon the DuetComboboxItem.id value
+        this.selectedItems = new Set();
+        // the activeItem number is based upon the array.index of the array stored in processedItems
+        this.activeItem = undefined;
+        /**
+         * Defaults for the accessible labels for the select items
+         */
+        this.accessibleLabelDefaults = {
+            en: {
+                heading: "Select:",
+                item: "{name}",
+                itemFiltered: "{name}, {hiddenItems} filtered",
+            },
+            fi: {
+                heading: "Valitse:",
+                item: "{name}",
+                itemFiltered: "{name}, {hiddenItems} suodatettu",
+            },
+            sv: {
+                heading: "Välj:",
+                item: "{name}",
+                itemFiltered: "{name}, {hiddenItems} filtrerade",
+            },
+        };
+        /**
+         * Accessible labels for the select items
+         */
+        this.accessibleLabels = languageUtils.getLocaleString(this.accessibleLabelDefaults, languageUtils.getLanguage());
+        /**
+         * Label for the input if input is not provided as a slotted element.
+         */
+        this.label = "";
+        /**
+         * Caption for the input if input is not provided as a slotted element.
+         */
+        this.caption = "";
+        /**
+         * Theme of the combobox.
+         */
+        this.theme = "";
+        /**
+         * Force the user to make a selection (typing things in the input field will only be used for list search).
+         * This property also sync input value with selected value on blur.
+         */
+        this.force = false;
+        /**
+         * Allow multiple selections. Selections are displayed as DuetChips.
+         */
+        this.multiple = false;
+        /**
+         * A hook to overwrite how the values are displayed in the input field after a User select an item
+         * @example (item) => `${item.name} (${item.value})`
+         * @default undefined
+         */
+        this.formatter = (item) => item && item.name ? item.name : "";
+        /**
+         * Defines minimum number of characters that must be given to show search results
+         */
+        this.minCharacters = 0;
+        /**
+         * Defines if items list should always open after clicking on input
+         */
+        this.openListOnClick = false;
+        /**
+         * Defines if filtering of items should be done by includes or startsWith
+         */
+        this.filterType = "startsWith";
         this.onInputChange = async (e) => {
             const newValue = e.detail.value;
             this.inputValue = newValue;
         };
         this.onInputClick = () => {
-            var _a, _b;
-            if (this.openListOnClick) {
-                this.listOpen = !this.listOpen;
-            }
-            else {
-                this.listOpen = ((_a = this.inputValue) === null || _a === void 0 ? void 0 : _a.length) >= this.minCharacters;
-            }
-            if (!((_b = this.getFilteredItems()) === null || _b === void 0 ? void 0 : _b.length)) {
-                this.listOpen = false;
-            }
+            this.popupMenuController = this.input.nativeInputElement;
+            // change listOpen on next tick so popup controller is set when open changes
+            setTimeout(() => {
+                var _a, _b;
+                if (this.openListOnClick) {
+                    this.listOpen = !this.listOpen;
+                }
+                else {
+                    this.listOpen = ((_a = this.inputValue) === null || _a === void 0 ? void 0 : _a.length) >= this.minCharacters;
+                }
+                if (!((_b = this.getFilteredItems()) === null || _b === void 0 ? void 0 : _b.length)) {
+                    this.listOpen = false;
+                }
+            });
         };
         this.onInputTyping = async (e) => {
             var _a;
@@ -148,40 +220,6 @@ const DuetCombobox = class {
             }
             return;
         };
-        this.processedItems = null;
-        this.inputValue = "";
-        this.listOpen = false;
-        this.selectedItems = new Set();
-        this.activeItem = undefined;
-        this.accessibleLabelDefaults = {
-            en: {
-                heading: "Select:",
-                item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} filtered",
-            },
-            fi: {
-                heading: "Valitse:",
-                item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} suodatettu",
-            },
-            sv: {
-                heading: "Välj:",
-                item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} filtrerade",
-            },
-        };
-        this.accessibleLabels = languageUtils.getLocaleString(this.accessibleLabelDefaults, languageUtils.getLanguage());
-        this.label = "";
-        this.caption = "";
-        this.theme = "";
-        this.force = false;
-        this.multiple = false;
-        this.items = undefined;
-        this.formatter = (item) => item && item.name ? item.name : "";
-        this.value = undefined;
-        this.minCharacters = 0;
-        this.openListOnClick = false;
-        this.filterType = "startsWith";
     }
     popupMenuOpenHandler() {
         if (this.listOpen) {
@@ -289,6 +327,9 @@ const DuetCombobox = class {
      * Component lifecycle events.
      */
     componentWillLoad() {
+        if (this.element.closest("duet-modal")) {
+            this.isInsideModal = true;
+        }
         themeableComponent.inheritGlobalTheme(this);
     }
     connectedCallback() {
@@ -564,7 +605,7 @@ const DuetCombobox = class {
         return (index.h(index.Host, { class: {
                 "duet-combobox": true,
                 [`duet-theme-${this.theme}`]: true,
-            } }, index.h("slot", null), index.h("div", null, index.h("duet-popup-menu", { id: this.listBoxId, controller: this.input, ref: el => (this.listContainer = el), accessibleRole: "listbox", allowVerticalFlip: false }, index.h("div", { class: "combobox-menu-container" }, this.listOpen &&
+            } }, index.h("slot", null), index.h("div", null, index.h("duet-popup-menu", { id: this.listBoxId, controller: this.popupMenuController, ref: el => (this.listContainer = el), accessibleRole: "listbox", allowVerticalFlip: false, class: { "duet-skip-teleport-inert": this.isInsideModal } }, index.h("div", { class: "combobox-menu-container" }, this.listOpen &&
             selectElements.map((item, index$1) => {
                 return (index.h(DuetComboBoxSelect, { id: this.activeDescendantId, item: item, activeDescendant: index$1 === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, index$1, selectElements.length, this.processedItems.length), isAndroidDevice: this.isAndroidDevice }));
             }), index.h("duet-spacer", { size: "x-small" }))))));
@@ -578,6 +619,6 @@ const DuetCombobox = class {
         "value": ["processValue"]
     }; }
 };
-DuetCombobox.style = DuetComboboxStyle0;
+DuetCombobox.style = duetComboboxCss;
 
 exports.duet_combobox = DuetCombobox;

package/lib/cjs/duet-contact-card.cjs.entry.js

@@ -3,15 +3,12 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-blgG8IJB.js');
+var themeableComponent = require('./themeable-component-DcR7DztR.js');
+var languageUtils = require('./language-utils-DWW8tvkB.js');
+require('./string-utils-B35hEUBv.js');
 
-const index = require('./index-7b1d76ef.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const languageUtils = require('./language-utils-a6a152b8.js');
-require('./string-utils-7b13c16e.js');
-
-const duetContactCardCss = "*,*::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;margin-bottom:12px !important;display:block}:host(.duet-m-0){margin:0 !important}::slotted(*){padding-top:1.5rem}@media (min-width: 48em){::slotted(*){grid-column:2/span 2;padding-top:0}}.duet-contact-card{display:grid;grid-template-columns: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:600;line-height:1.5;color:rgb(8, 42, 77)}.duet-contact-card.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)}@media (min-width: 48em){.duet-contact-card{grid-template-columns:min-content minmax(0, 1fr) auto;gap:20px}}.duet-contact-card .image{width:4rem;height:4rem;margin-bottom:8px;border-radius:4px}@media (min-width: 48em){.duet-contact-card .image{width:6rem;height:6rem;padding-bottom:0}}.duet-contact-card .description{padding-bottom:8px}.duet-contact-card .email,.duet-contact-card .phone{display:grid;grid-template-columns:min-content auto;gap:8px;align-items:center;justify-content:flex-start;padding-bottom:8px;overflow-wrap:break-word}";
-const DuetContactCardStyle0 = duetContactCardCss;
+const duetContactCardCss = "*,*::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;margin-bottom:12px !important;display:block}:host(.duet-m-0){margin:0 !important}::slotted(*){padding-top:1.5rem}@media (min-width: 48em){::slotted(*){grid-column:2/span 2;padding-top:0}}.duet-contact-card{display:grid;grid-template-columns: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:600;line-height:1.5;color:rgb(8, 42, 77)}.duet-contact-card.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)}@media (min-width: 48em){.duet-contact-card{grid-template-columns:min-content minmax(0, 1fr) auto;gap:20px}}.duet-contact-card .image{width:4rem;height:4rem;margin-bottom:8px;border-radius:4px}@media (min-width: 48em){.duet-contact-card .image{width:6rem;height:6rem;padding-bottom:0}}.duet-contact-card .description{padding-bottom:8px}.duet-contact-card .email,.duet-contact-card .phone{display:grid;grid-template-columns:min-content auto;gap:8px;align-items:center;justify-content:flex-start;padding-bottom:8px;overflow-wrap:break-word}:host(.duet-theme-turva2) .duet-contact-card.duet-theme-turva{color:rgb(23, 42, 59)}";
 
 const DuetContactCard = class {
     constructor(hostRef) {
@@ -25,16 +22,18 @@ const DuetContactCard = class {
             sv: "Telefon",
         };
         this.language = languageUtils.getLanguage();
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
-        this.image = undefined;
-        this.name = undefined;
-        this.description = undefined;
-        this.email = undefined;
-        this.phone = undefined;
-        this.buttonText = undefined;
+        /**
+         * Button icon.
+         */
         this.buttonIcon = "form-date";
-        this.buttonUrl = undefined;
     }
     /**
      * Component lifecycle events.
@@ -55,13 +54,13 @@ const DuetContactCard = class {
     render() {
         const isTurva = this.theme === "turva";
         const theme = isTurva ? "turva" : "default";
-        return (index.h(index.Host, { key: '14208b0e95965d34e6bd69493480e1014a7d20b2', class: { "duet-m-0": this.margin === "none" } }, index.h("div", { key: '2cf426c1e361e5a9fa15f273edf161a9765dc334', class: {
+        return (index.h(index.Host, { key: 'a29a3dab2ac7fb3079f2c1a159af7f4e7b5c226b', class: { "duet-m-0": this.margin === "none" } }, index.h("div", { key: '14753b1f4fc3901aa2285d438c612e66619fabb5', class: {
                 "duet-contact-card": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, role: "group", "aria-label": this.name }, this.image ? index.h("img", { class: "image", src: this.image, alt: this.name }) : index.h("div", null), index.h("div", { key: 'fdbdd4850c5eeda0de2437ee5f2695f43172d349' }, this.name && (index.h("duet-heading", { key: 'cc46dfe79762b573d0578d0cd9e82ebde6a25cc1', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (index.h("duet-paragraph", { key: 'a5df238b129c11c6fad46bf33f7b21d25494b064', class: "description", margin: "none", theme: theme }, this.description)), this.email && (index.h("div", { key: '2cc46f7a6717f1e5d00ca90871eb89c01b68165e', class: "email" }, index.h("duet-icon", { key: '3a42b434c8b80a6c490070b613ef40d193e1cdcc', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), index.h("duet-link", { key: '08174b40d6d4bf1a395db960f537f1f4d41539bc', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (index.h("div", { key: 'cdb756796522bcd054e2b2f9a26f9e5c491a4c2a', class: "phone" }, index.h("duet-icon", { key: 'b024222cdd66b71f0d1418d28707f9b71c25b07e', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), index.h("duet-link", { key: 'd957c5abcfc923acc7188a5b785e11d15485bbc2', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (index.h("div", { key: '88dd50a394151b3e70ee58d35d907b481e9f634b', class: "call-to-action" }, index.h("duet-button", { key: 'b0d3cd67af298ec002b2c230c66f75c75efb1499', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), index.h("div", { key: '6ec3ea8928bec5867d7a7ddb2e1ba5979cba023a' }), index.h("slot", { key: '1993d3dbe800197ff57dd3942e2bb6a98023bdb0' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? index.h("img", { class: "image", src: this.image, alt: this.name }) : index.h("div", null), index.h("div", { key: 'dc77c6904966d2b6438391dd2c827832ffe86325' }, this.name && (index.h("duet-heading", { key: 'a10e331782d05726446653615ba8effbb1de3257', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (index.h("duet-paragraph", { key: '3f49dc9a8933eb5551f259e2dcca7f434f8e5082', class: "description", margin: "none", theme: theme }, this.description)), this.email && (index.h("div", { key: '99ad9df72533f48e298153aeadf18cb50e37d1e9', class: "email" }, index.h("duet-icon", { key: 'cbe804f4877e52df6f678ace315efe098b3ef914', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), index.h("duet-link", { key: 'e909d9bc1096700ef5fb6d7a1e87c499d585d4dd', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (index.h("div", { key: 'fe217c26608f2f461999844a3a00fe335c1e4509', class: "phone" }, index.h("duet-icon", { key: '1194445745ecb176f6fcc39a18c3e233921524d9', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), index.h("duet-link", { key: 'b83e145b7909c3ef697932ff1cf95d223d4a4b14', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (index.h("div", { key: 'fdb27957cd0b60be23e8b4df7f062da5cc3eafc1', class: "call-to-action" }, index.h("duet-button", { key: 'f7cd81b4f2712057ee507a9f0f01e59121e7960e', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), index.h("div", { key: 'b3a716a438e7793ef194ae0b1067d926b75e0925' }), index.h("slot", { key: '3d4bea81e03b40457deb9fd0731c14a9b80d465e' }))));
     }
     get element() { return index.getElement(this); }
 };
-DuetContactCard.style = DuetContactCardStyle0;
+DuetContactCard.style = duetContactCardCss;
 
 exports.duet_contact_card = DuetContactCard;

package/lib/cjs/duet-cookie-consent.cjs.entry.js

@@ -3,25 +3,28 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-blgG8IJB.js');
+var themeableComponent = require('./themeable-component-DcR7DztR.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
 
-const index = require('./index-7b1d76ef.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
-
-const duetCookieConsentCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:fixed;right:0;bottom:0;left:0;z-index:950;display:block;width:100%;box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}@media (min-width: 48em){:host{right:28px;bottom:28px;left:auto;width:25rem}}:host(:focus){outline:0}:host(.user-is-tabbing:not(.descendant-focused):focus){border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing:not(.descendant-focused).duet-theme-turva:focus){box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-cookie-consent{padding:20px;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;color:rgb(255, 255, 255) !important;background-color:rgba(4, 21, 39, 0.9)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.duet-cookie-consent{background:rgba(4, 21, 39, 0.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.duet-cookie-consent.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\";background-color:rgba(12, 14, 29, 0.9)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.duet-cookie-consent.duet-theme-turva{background:rgba(12, 14, 29, 0.8)}}@media (min-width: 48em){.duet-cookie-consent{padding:20px;border-radius:4px}}.duet-cookie-consent-content{display:flex;align-items:center;max-width:1110px;margin:0 auto}.duet-cookie-consent-content .expand{flex:1}::slotted(a){font-weight:600;color:rgb(255, 255, 255) !important;text-decoration:underline;white-space:nowrap}::slotted(a[target=_blank]){padding-right:16px;background:url(\"data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjUgMmExLjUgMS41IDAgMDEuMTQgM0gzLjc1Yy0uMzggMC0uNy4yOC0uNzQuNjVsLS4wMS4xdjE0LjVjMCAuMzguMjguNy42NS43NGwuMS4wMWgxNC41Yy4zOCAwIC43LS4yOC43NC0uNjVsLjAxLS4xdi02Ljg5YTEuNSAxLjUgMCAwMTMgMHY2Ljg5QTMuNzUgMy43NSAwIDAxMTguMjUgMjRIMy43NUEzLjc1IDMuNzUgMCAwMTAgMjAuMjVWNS43NUEzLjc1IDMuNzUgMCAwMTMuNzUgMnptMTItMmMuNzggMCAxLjQyLjYgMS41IDEuMzZWNy41YTEuNSAxLjUgMCAwMS0zIC4xNFY1LjEybC01LjQ0IDUuNDRhMS41IDEuNSAwIDAxLTIuMjItMmwuMS0uMTJMMTguODggM0gxNi41QTEuNSAxLjUgMCAwMTE1IDEuNjRWMS41YzAtLjc4LjYtMS40MiAxLjM2LTEuNWguMTR6Ii8+PC9zdmc+\") no-repeat right 50%;background-size:12px 10px}::slotted(a:focus){outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva ::slotted(a:focus){outline:0;box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
-const DuetCookieConsentStyle0 = duetCookieConsentCss;
+const duetCookieConsentCss = "*,*::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;position:fixed;right:0;bottom:0;left:0;z-index:950;display:block;width:100%;box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}@media (min-width: 48em){:host{right:28px;bottom:28px;left:auto;width:25rem}}:host(:focus){outline:0}:host(.user-is-tabbing:not(.descendant-focused):focus){outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8);border-radius:4px}.duet-theme-turva :host(.user-is-tabbing:not(.descendant-focused):focus),:host(.user-is-tabbing:not(.descendant-focused):focus).duet-theme-turva,.duet-theme-turva2 :host(.user-is-tabbing:not(.descendant-focused):focus),:host(.user-is-tabbing:not(.descendant-focused):focus).duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}.duet-cookie-consent{padding:20px;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;color:rgb(255, 255, 255) !important;background-color:rgba(4, 21, 39, 0.9)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.duet-cookie-consent{background:rgba(4, 21, 39, 0.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.duet-cookie-consent.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\";background-color:rgba(12, 14, 29, 0.9)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.duet-cookie-consent.duet-theme-turva{background:rgba(12, 14, 29, 0.8)}}@media (min-width: 48em){.duet-cookie-consent{padding:20px;border-radius:4px}}.duet-cookie-consent-content{display:flex;align-items:center;max-width:1110px;margin:0 auto}.duet-cookie-consent-content .expand{flex:1}::slotted(a){font-weight:600;color:rgb(255, 255, 255) !important;white-space:nowrap;text-decoration:underline}::slotted(a[target=_blank]){padding-right:16px;background:url(\"data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjUgMmExLjUgMS41IDAgMDEuMTQgM0gzLjc1Yy0uMzggMC0uNy4yOC0uNzQuNjVsLS4wMS4xdjE0LjVjMCAuMzguMjguNy42NS43NGwuMS4wMWgxNC41Yy4zOCAwIC43LS4yOC43NC0uNjVsLjAxLS4xdi02Ljg5YTEuNSAxLjUgMCAwMTMgMHY2Ljg5QTMuNzUgMy43NSAwIDAxMTguMjUgMjRIMy43NUEzLjc1IDMuNzUgMCAwMTAgMjAuMjVWNS43NUEzLjc1IDMuNzUgMCAwMTMuNzUgMnptMTItMmMuNzggMCAxLjQyLjYgMS41IDEuMzZWNy41YTEuNSAxLjUgMCAwMS0zIC4xNFY1LjEybC01LjQ0IDUuNDRhMS41IDEuNSAwIDAxLTIuMjItMmwuMS0uMTJMMTguODggM0gxNi41QTEuNSAxLjUgMCAwMTE1IDEuNjRWMS41YzAtLjc4LjYtMS40MiAxLjM2LTEuNWguMTR6Ii8+PC9zdmc+\") no-repeat right 50%;background-size:12px 10px}::slotted(a:focus){outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva ::slotted(a:focus),::slotted(a:focus).duet-theme-turva,.duet-theme-turva2 ::slotted(a:focus),::slotted(a:focus).duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}:host(.duet-theme-turva2) .duet-cookie-consent.duet-theme-turva{background-color:rgba(12, 21, 30, 0.9)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){:host(.duet-theme-turva2) .duet-cookie-consent.duet-theme-turva{background:rgba(12, 21, 30, 0.8)}}";
 
 const DuetCookieConsent = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.duetCookieConsent = index.createEvent(this, "duetCookieConsent", 7);
+        /**
+         * Adds accessible label for the cookie consent ok button.
+         */
+        this.accessibleLabel = "Hyväksyn evästeiden käytön";
+        /**
+         * Theme of the cookie consent banner.
+         */
+        this.theme = "";
         this.handleClick = e => {
             e.preventDefault();
             this.duetCookieConsent.emit({ component: "duet-cookie-consent" });
         };
-        this.accessibleLabel = "Hyväksyn evästeiden käytön";
-        this.theme = "";
     }
     handleFocusIn(event) {
         const eventPath = event.composedPath();
@@ -50,10 +53,10 @@ const DuetCookieConsent = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '5ecdf44dd4be485abf9b8a258434c97081726dc7', tabindex: "0", class: { "duet-theme-turva": this.theme === "turva" } }, index.h("div", { key: '47a040daff0fdd1253499dcb01cdaa802d1484b3', class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, index.h("div", { key: '62ea5784fb31f6620917e3d62c4b74beb7ac823e', class: "duet-cookie-consent-content" }, index.h("div", { key: '5d44320d810efaa0898e2032487b1d8558634826', class: "expand" }, index.h("slot", { key: '74da22647cc3c33ff92422d3ab3738a58140fcf9' })), index.h("duet-spacer", { key: '34327d47088d894446d686e048527d96c310cc70', size: "large", direction: "horizontal" }), index.h("div", { key: 'bcc7ce62f2bed4fa938852c3196341333feeefd3' }, index.h("duet-button", { key: '6d4ae72e1552e46504fc40f94478a683d202b5cf', variation: "negative", size: "small", onClick: this.handleClick, margin: "none", "aria-label": this.accessibleLabel, theme: this.theme }, "OK"))))));
+        return (index.h(index.Host, { key: '1f83ab5838f565e3dee5a11151f17c13009c0e7d', tabindex: "-1", class: { "duet-theme-turva": this.theme === "turva" } }, index.h("div", { key: 'e4a913e6c68d60f6c8237e35f5bf8b23d6a8be97', class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, index.h("div", { key: 'd594b4b907a5b770c58630163e35c3f358172db6', class: "duet-cookie-consent-content" }, index.h("div", { key: 'f8c60f7176d18f1519252e03035ffe3ded682811', class: "expand" }, index.h("slot", { key: '764178fb0a91f3ef68a07050d9f3d4b84b2e3757' })), index.h("duet-spacer", { key: '82473e1be587999e8b0e714843f3edb1dd9b9161', size: "large", direction: "horizontal" }), index.h("div", { key: 'b70b7134335e98505b9a485daf9849e3e7453be2' }, index.h("duet-button", { key: 'e721e4a7d82f0b68949924fab5ea4f82386d31f5', variation: "negative", size: "small", onClick: this.handleClick, margin: "none", "aria-label": this.accessibleLabel, theme: this.theme }, "OK"))))));
     }
     get element() { return index.getElement(this); }
 };
-DuetCookieConsent.style = DuetCookieConsentStyle0;
+DuetCookieConsent.style = duetCookieConsentCss;
 
 exports.duet_cookie_consent = DuetCookieConsent;