@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

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

@@ -3,25 +3,79 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-CKsfMbRW.js');
+var actionArrowDownSmall = require('./action-arrow-down-small-CDsSJFvZ.js');
+var tokens = require('./tokens-9aevMbB1.js');
+var themeableComponent = require('./themeable-component-BuC0WY98.js');
+var createId = require('./create-id-DtslnIOq.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
+var slotUtils = require('./slot-utils-D4QyzHw3.js');
+var stringUtils = require('./string-utils-B35hEUBv.js');
+require('./_commonjsHelpers-4N64IRaP.js');
 
-const index = require('./index-21e67ab3.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-681e11ec.js');
-const slotUtils = require('./slot-utils-382633cf.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;align-items:center;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-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: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{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, 28, 58)}";
 
 const DuetCollapsible = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.duetToggle = index.createEvent(this, "duetToggle", 7);
         this.id = createId.createID("DuetCollapsible");
+        /**
+         * 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);
@@ -60,6 +114,25 @@ const DuetCollapsible = class {
                     return "xx-small";
             }
         };
+        this.getAccessibleLabel = () => {
+            if (this.accessibleLabel) {
+                return this.accessibleLabel;
+            }
+            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"));
+            }
+            if (this.caption) {
+                labelParts.push(this.caption);
+            }
+            return labelParts.join(". ");
+        };
         this.handleClick = (e) => {
             e.preventDefault();
             this.open = !this.open;
@@ -68,24 +141,15 @@ const DuetCollapsible = class {
                 originalEvent: e,
             });
         };
-        this.theme = "";
-        this.negative = false;
-        this.accessibleLabel = undefined;
-        this.heading = "";
-        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", "h1, h2, h3, h4, h5, h6");
     }
     connectedCallback() {
         keyboardUtils.subscribeTabbingChange(this);
@@ -108,18 +172,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: '41f36dde4e54009a1eb69c87caa20fe7174f54aa', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, index.h(HeadingTagName, { key: '2dfbc738dabf00e09f0dc410f340a2c149616e23' }, index.h("button", { key: '9cdec6df9a1ad914a9b1f7add28b4327a40026ea', class: {
+        const HeadingTagName = this.headingLevel && !this.hasHeadingSlot ? stringUtils.sanitizeString(this.headingLevel) : "div";
+        return (index.h(index.Host, { key: '9bcf97fc89fd369b94d23c5b831bea13eac20b7d', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, index.h(HeadingTagName, { key: '527383f38812e7513a28076931168ef39c03064c' }, index.h("button", { key: '551c207fbf0854a42586047cf5b268ed2f94f5f8', 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,
-            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.accessibleLabel, "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("div", { key: '20969919d9bacce2a30a27f6b174a0d34ed2f87a', class: "duet-collapsible-heading-icon" }, index.h("duet-icon", { key: '8b1ce16944925dcbe76add2736fb4a9c2c4d8143', margin: "none", size: this.getEquivalentIconSize(), icon: actionArrowDownSmall.actionArrowDownSmall.svg })), index.h("div", { key: 'ae5481e1aa50ea5752835acca560509f9e1ef31b', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (index.h("div", { key: '495b61f0b3f7d484f7af56bd8cde74b0fe6ae6b4', part: "duet-collapsible-after-heading" }, index.h("slot", { key: 'c95c048eba7d76b176a734ce678f9a26e124b495', name: "after-heading" }))))), index.h("div", { key: '291f50f458f1951bb540412845f77c3034969d7d', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, index.h("slot", { key: '2b23d5343903b1fdb4e8977c1c6a1ab373928fe4' }))));
+                "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: '4aad2e89f69b6fed07e44a09c3241613123b3342', class: "duet-collapsible-heading-wrapper" }, index.h("div", { key: '7abe552666752e707bf9f04110e2d6c583c7e347', class: "duet-collapsible-heading-icon" }, index.h("duet-icon", { key: 'f2a581dd211e3ebd464489804ec1aa3ffa8b2150', margin: "none", size: this.getEquivalentIconSize(), icon: actionArrowDownSmall.arrowDownIcon.svg })), index.h("div", { key: '032bd7dc645014356c7358e9b44f99deb0251720', 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: 'e19dbc0d389446ee8896f91a8586ff698ef229ad', part: "duet-collapsible-after-heading" }, index.h("slot", { key: '63677c9042bfd7ed63e90dee05ee6c272be0e302', name: "after-heading" })))), this.caption && (index.h("div", { key: 'f7ec83268e2209b3aee51e2b2a6178374142f1aa', class: "duet-collapsible-heading-caption" }, index.h("duet-caption", { key: 'c019c4f61a1cf0cfb85ad80de67f2f9edf384663', size: "small", margin: "none" }, this.caption))))), index.h("div", { key: '4e3dcc1b56589d71d04c0a4d8be5b879ae847ad4', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, index.h("slot", { key: '87eedca46d5d29fb19442138b1aa523f82e1029a' }))));
     }
     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-21e67ab3.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-681e11ec.js');
-const languageUtils = require('./language-utils-b5940c7b.js');
-const slotUtils = require('./slot-utils-382633cf.js');
-const stringUtils = require('./string-utils-7b13c16e.js');
+var index = require('./index-CKsfMbRW.js');
+var themeableComponent = require('./themeable-component-BuC0WY98.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-CYOjMfnd.js');
+var slotUtils = require('./slot-utils-D4QyzHw3.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,6 +50,76 @@ 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;
@@ -148,40 +216,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 +323,9 @@ const DuetCombobox = class {
      * Component lifecycle events.
      */
     componentWillLoad() {
+        if (this.element.closest("duet-modal")) {
+            this.isInsideModal = true;
+        }
         themeableComponent.inheritGlobalTheme(this);
     }
     connectedCallback() {
@@ -564,7 +601,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.input, 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 +615,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-CKsfMbRW.js');
+var themeableComponent = require('./themeable-component-BuC0WY98.js');
+var languageUtils = require('./language-utils-CYOjMfnd.js');
+require('./string-utils-B35hEUBv.js');
 
-const index = require('./index-21e67ab3.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const languageUtils = require('./language-utils-b5940c7b.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: '5ed61598b80af8711f3d2f9eaa4fdecd21f25924', class: { "duet-m-0": this.margin === "none" } }, index.h("div", { key: '1cc0451adbb00abb3f21f72772afafc607645537', 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: '18669b66f9db7ee238adfdfc6fbc051b8eddfe93' }, this.name && (index.h("duet-heading", { key: '47ef0fd1bd6d7f48668c8db2acb186776edb1485', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (index.h("duet-paragraph", { key: 'b5810cd6f66e76919a62aff08048b053b5fcb7e1', class: "description", margin: "none", theme: theme }, this.description)), this.email && (index.h("div", { key: '8a769cdb536d5c6beb27c9ce4b6c4b582382997d', class: "email" }, index.h("duet-icon", { key: '4f6925ceb4dd1aa420856b88f60c49571a9275c4', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), index.h("duet-link", { key: '21348f029d675509c0a0f2bbe8cd8488d20723ce', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (index.h("div", { key: '5567f627d05c5a4773885f41067d44977e923195', class: "phone" }, index.h("duet-icon", { key: '0acdaacb76ec2ff9ab686ae8745eb844040bb59f', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), index.h("duet-link", { key: '402ad36efc575a97ab671058825c90b09bc0ad75', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (index.h("div", { key: '5ad0f70d4b0df654d19d4e47117d2144c76320e5', class: "call-to-action" }, index.h("duet-button", { key: '8f6f819df1e2808610de2e526e861a8af2220616', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), index.h("div", { key: '7491aa743dcd2c9c0c36d27e3c2b699ff8b3dd6b' }), index.h("slot", { key: 'ec876a8327e9c365021dcf5703d994caf048ad2e' }))));
+            }, 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-CKsfMbRW.js');
+var themeableComponent = require('./themeable-component-BuC0WY98.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
 
-const index = require('./index-21e67ab3.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const keyboardUtils = require('./keyboard-utils-681e11ec.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: '689e6e934833d5b1952ca793e3a1ab6348d0580a', tabindex: "0", class: { "duet-theme-turva": this.theme === "turva" } }, index.h("div", { key: '0632d30885fd6a4fee5e2a27c3036377bddb87a7', class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, index.h("div", { key: '2d8ee174ee56238b523a76ddabd1f8509a9a748d', class: "duet-cookie-consent-content" }, index.h("div", { key: '5477148aef761c9cf27ecf9881b2339271b4e356', class: "expand" }, index.h("slot", { key: 'b197d83da8b0abb133777f549dfab7f173e0dee5' })), index.h("duet-spacer", { key: '28c43b3724d64df6b911148cdf0d9de88aed7b0f', size: "large", direction: "horizontal" }), index.h("div", { key: '8a6d2e2f97ea12a9860b95692101fbc72aa3708a' }, index.h("duet-button", { key: '8642e8dccf5bd08d316245487af38820badf80ad', 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;