@duetds/components 10.0.0-alpha.9 → 10.1.0

package/lib/cjs/duet-slideout-lang.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 duetSlideoutLangCss = "*,*::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}.duet-slideout-lang{display:flex;gap:20px;align-items:center;justify-content:flex-start;width:min-content;white-space:nowrap}::slotted(*){position:relative}::slotted(:not(:first-child)){padding-right:0;padding-left:0.5rem}::slotted(:not(:last-child))::after{position:absolute;top:25%;right:-16px;width:2px;height:50%;content:\"\";background:rgb(8, 42, 77)}.duet-theme-turva ::slotted(:not(:last-child))::after{background:rgb(23, 28, 58)}";
-const DuetSlideoutLangStyle0 = duetSlideoutLangCss;
+const duetSlideoutLangCss = "*,*::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}.duet-slideout-lang{display:flex;gap:16px;align-items:center;justify-content:flex-start;width:min-content;white-space:nowrap}::slotted(*){position:relative}::slotted(:not(:first-child)){padding-right:0;padding-left:0.5rem}::slotted(:not(:last-child))::after{position:absolute;top:25%;right:-14px;width:2px;height:50%;content:\"\";background:rgb(8, 42, 77)}.duet-theme-turva ::slotted(:not(:last-child))::after{background:rgb(23, 28, 58)}:host(.duet-theme-turva2) .duet-theme-turva ::slotted(:not(:last-child))::after{background:rgb(23, 42, 59)}";
 
 const DuetSlideoutLang = class {
     constructor(hostRef) {
@@ -25,6 +22,9 @@ const DuetSlideoutLang = class {
             sv: "Välj språk",
         };
         this.language = languageUtils.getLanguage();
+        /**
+         * Theme.
+         */
         this.theme = "";
     }
     /**
@@ -45,10 +45,10 @@ const DuetSlideoutLang = class {
      */
     render() {
         const langTranslation = languageUtils.getLocaleString(this.chooseLangObject);
-        return (index.h(index.Host, { key: '82d609a07657275a896f954d42228e38dc7ca182' }, index.h("div", { key: '45d49c23924aa9683a2f9e98dab285adaa2ea875', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, index.h("duet-icon", { key: '66225e67ec928fa394d67bb50a932f629488014a', name: "navigation-language", margin: "none", color: "secondary" }), index.h("slot", { key: '71c3a499a32c1ed8f398120a7ee4f7e8ce1613e4' }))));
+        return (index.h(index.Host, { key: '8847b4894f616c58b889e51d183c71ec672554fc' }, index.h("div", { key: '86a6652e67569a898f9aceea571fd656ae22bfa6', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, index.h("duet-icon", { key: '038bdf514daccd3f28a27ad0225f4a46ea84ecea', name: "navigation-language", margin: "none", color: "secondary", size: "small" }), index.h("slot", { key: '49e912e3e178c2d4c3042c4d9d1ae39991bbef52' }))));
     }
     get element() { return index.getElement(this); }
 };
-DuetSlideoutLang.style = DuetSlideoutLangStyle0;
+DuetSlideoutLang.style = duetSlideoutLangCss;
 
 exports.duet_slideout_lang = DuetSlideoutLang;

package/lib/cjs/duet-slideout-link.cjs.entry.js

@@ -3,34 +3,67 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-blgG8IJB.js');
+var actionNewWindowSmall = require('./action-new-window-small-BWlVx6YN.js');
+var commonStrings = require('./common-strings-CC6Xpjb8.js');
+var themeableComponent = require('./themeable-component-DcR7DztR.js');
+var a11yUtils = require('./a11y-utils-DzwEPbds.js');
+var languageUtils = require('./language-utils-DWW8tvkB.js');
+require('./_commonjsHelpers-4N64IRaP.js');
+require('./slot-utils-Byx247xX.js');
+require('./string-utils-B35hEUBv.js');
 
-const index = require('./index-7b1d76ef.js');
-const actionNewWindowSmall = require('./action-new-window-small-fa51dfb9.js');
-const commonStrings = require('./common-strings-2984301e.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const a11yUtils = require('./a11y-utils-be617c0c.js');
-const languageUtils = require('./language-utils-a6a152b8.js');
-require('./slot-utils-7e6aa48b.js');
-require('./string-utils-7b13c16e.js');
-
-const duetSlideoutLinkCss = "*,*::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;width:100%;height:100%}.duet-slideout-link{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:inherit;font-weight:inherit;line-height:1.25;color:inherit;text-align:left;text-decoration:none}.duet-slideout-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-slideout-link:focus,.duet-slideout-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-link.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\"}.duet-slideout-link.active span{position:relative}.duet-slideout-link.active .label-content::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:var(--active-height, 2px);content:\"\";background:rgb(0, 119, 179);transform:var(--active-translate-y, translateY(2px))}.duet-slideout-link.active.duet-theme-turva span::after{background:rgb(198, 12, 48)}.duet-slideout-link.small{font-size:1rem;font-weight:600}.duet-slideout-link.small span::after{--active-height:1px;--active-translate-y:1px}.duet-slideout-link.medium{font-size:1.25rem;font-weight:600}.duet-slideout-link.large{font-size:1.5rem;font-weight:800}.duet-slideout-link .label{display:flex;gap:8px;align-items:center;justify-content:space-between;width:100%}.duet-slideout-link .label-container{display:flex;gap:8px;align-items:center;justify-content:flex-start;width:100%}.duet-slideout-link .external-icon{width:10px;height:10px}.duet-slideout-link.medium .external-icon,.duet-slideout-link.large .external-icon{width:12px;height:12px}slot[name=description]::slotted(*){display:block;padding:8px 0 0;font-size:1rem;font-size:1.25;font-weight:400;color:rgb(98, 121, 138)}.duet-theme-turva slot[name=description]::slotted(*){color:rgb(113, 118, 132)}";
-const DuetSlideoutLinkStyle0 = duetSlideoutLinkCss;
+const duetSlideoutLinkCss = "*,*::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;width:100%;height:100%}.duet-slideout-link{position:relative;display:flex;gap:16px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:inherit;font-weight:inherit;line-height:1.25;color:inherit;text-align:left;text-decoration:none}.duet-slideout-link:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-slideout-link:focus,.duet-slideout-link:focus.duet-theme-turva,.duet-theme-turva2 .duet-slideout-link:focus,.duet-slideout-link:focus.duet-theme-turva2{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-slideout-link.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\"}.duet-slideout-link.active span{position:relative}.duet-slideout-link.active .label-content::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:var(--active-height, 2px);content:\"\";background:rgb(0, 119, 179);transform:var(--active-translate-y, translateY(2px))}.duet-slideout-link.active.duet-theme-turva span::after{background:rgb(198, 12, 48)}.duet-slideout-link.small{font-size:1rem;font-weight:600}.duet-slideout-link.small span::after{--active-height:1px;--active-translate-y:1px}.duet-slideout-link.medium{font-size:1rem;font-weight:600}.duet-slideout-link.large{font-size:1.25rem;font-weight:800}.duet-slideout-link .label{display:flex;gap:8px;align-items:center;justify-content:space-between;width:100%}.duet-slideout-link .label-container{display:flex;gap:8px;align-items:center;justify-content:flex-start;width:100%}.duet-slideout-link .external-icon{width:10px;height:10px}.duet-slideout-link.medium .external-icon,.duet-slideout-link.large .external-icon{width:12px;height:12px}slot[name=description]::slotted(*){display:block;padding:8px 0 0;font-size:1rem;font-size:1.25;font-weight:400;color:rgb(98, 121, 138)}.duet-theme-turva slot[name=description]::slotted(*){color:rgb(113, 118, 132)}:host(.duet-theme-turva2) .duet-slideout-link.duet-theme-turva{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-slideout-link.duet-theme-turva.active .label-content::after{background:rgb(230, 23, 64)}:host(.duet-theme-turva2) slot[name=description]::slotted(*){color:rgb(23, 42, 59)}";
 
 const DuetSlideoutLink = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.accessibleLabel = undefined;
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Language of the link. Use this only for language selection links.
+         */
         this.targetLanguage = undefined;
+        /**
+         * Active
+         */
         this.active = false;
+        /**
+         * Href
+         */
         this.href = "#";
+        /**
+         * Icon
+         */
         this.icon = undefined;
+        /**
+         * Size. Inherit, small, medium or large. Inherit value inherits styles from the value in the underlying slot.
+         */
         this.size = "inherit";
+        /**
+         * Caret
+         */
         this.caret = false;
+        /**
+         * @internal
+         * Indicates the component is used where aria-role menuitem is expected
+         */
         this.menuItem = false;
+        /**
+         * Defaults for accessibleLabelExternal
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternalDefaults = commonStrings.DuetStringsExternalDefaults;
+        /**
+         * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternal = languageUtils.getLocaleString(this.accessibleLabelExternalDefaults);
+        /**
+         * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
         this.external = false;
     }
     /**
@@ -53,15 +86,15 @@ const DuetSlideoutLink = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '121e34853f26e00de78952097a9274c4686c8544' }, index.h("a", { key: 'd763e1596026eae24a9c92b2e5a44fdfaacac07d', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
+        return (index.h(index.Host, { key: 'eca2104ff848dfd3c52bab08c4377d19e374d13d' }, index.h("a", { key: '9915adbb807d80081d2d791f36926a5b8a6b2a3e', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
                 "duet-slideout-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [this.size]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": (this.href && a11yUtils.getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (index.h("duet-icon", { key: '22db6ed1bb56b9882e83734253a359d9c59fb18a', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), index.h("div", { key: '8c7c3459c06993a8318d092423dc512f60a0da06', class: "label" }, index.h("span", { key: 'af54ceb2cf36fb115fca5c250aaa6ed2b14f083d' }, index.h("span", { key: '799c0aa7fb41c06556242d822c4a817bc3cff780', class: "label-container" }, index.h("span", { key: '1e16cdb23d22bfe2d090eb026c17bcca4b109234', class: "label-content" }, index.h("slot", { key: '285a99e5f9837bdb6fc39f3bd06e1902fd66da1a' })), this.external && (index.h("duet-icon", { key: '786e1f369d8f5f23b359d4f61528d5f614efd411', class: "external-icon", theme: this.theme, name: actionNewWindowSmall.actionNewWindowSmall.title, margin: "none", size: "auto", color: "currentColor" }))), index.h("slot", { key: '23100e60c7e0f616021ea001b8aa5095af48bbde', name: "description" })), this.caret && (index.h("duet-icon", { key: 'fbdd722ae15f64f8879142371b6eaa79cd0faa43', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": (this.href && a11yUtils.getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (index.h("duet-icon", { key: 'eabe8fda17546094fafc6fa4a253e05c63fc1938', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "small", margin: "none" })), index.h("div", { key: '98d30980e7ac325c36be8bb86b788d60cd36831d', class: "label" }, index.h("span", { key: '7f96584e0ee24069a7cc9afc2649d3a0a7fe8758' }, index.h("span", { key: '2b844eb1ae6ff0f7215e7979776c673e6f1accfb', class: "label-container" }, index.h("span", { key: 'd6de09afc6dbb0cfd6855f98e34c6b7b0b2c6421', class: "label-content" }, index.h("slot", { key: 'ef0c11c80556e88596d115ef534f86cc044362f8' })), this.external && (index.h("duet-icon", { key: 'ffe4c9d8a90105199e4a79702847705f958adf00', class: "external-icon", theme: this.theme, name: actionNewWindowSmall.newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), index.h("slot", { key: 'd329594665a0964175ea0872747342f4e070227d', name: "description" })), this.caret && (index.h("duet-icon", { key: 'aafabb173724e1a6b736f289a7d76582f03f78c4', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
     }
     get element() { return index.getElement(this); }
 };
-DuetSlideoutLink.style = DuetSlideoutLinkStyle0;
+DuetSlideoutLink.style = duetSlideoutLinkCss;
 
 exports.duet_slideout_link = DuetSlideoutLink;

package/lib/cjs/duet-slideout-panel-dropdown.cjs.entry.js

@@ -3,24 +3,33 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-blgG8IJB.js');
+var themeableComponent = require('./themeable-component-DcR7DztR.js');
 
-const index = require('./index-7b1d76ef.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-
-const duetSlideoutPanelDropdownCss = "*,*::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;width:100%;height:100%}:host slot:not([name=label])::slotted(*){position:relative;top:-0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot:not([name=label])::slotted(*){top:0;opacity:1}.duet-slideout-panel-dropdown{position:relative;width:100%;height:100%}.duet-slideout-panel-dropdown button{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1.25rem;font-weight:800;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none;cursor:pointer}.duet-slideout-panel-dropdown button .label{position:relative;display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-slideout-panel-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel-dropdown button.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:calc(100% - 18px);height:1px;content:\"\";background:rgb(0, 119, 179);transform:translateY(1px)}.duet-slideout-panel-dropdown .items{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-height:1000px;padding:4px 20px 8px 44px;overflow-y:auto;visibility:visible;transition:max-height 0.3s ease-in, padding-bottom 0.3s ease-in;-ms-overflow-style:none;scrollbar-width:none}.duet-slideout-panel-dropdown .items::-webkit-scrollbar{display:none}.duet-slideout-panel-dropdown .items.hidden{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-out, padding-bottom 0.3s ease-out}.duet-slideout-panel-dropdown.duet-theme-turva button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-slideout-panel-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after{background:rgb(198, 12, 48)}slot{--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:400;color:rgb(8, 42, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}slot[name=label]{font-size:1rem;font-weight:600}";
-const DuetSlideoutPanelDropdownStyle0 = duetSlideoutPanelDropdownCss;
+const duetSlideoutPanelDropdownCss = "*,*::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;width:100%;height:100%}:host slot:not([name=label])::slotted(*){position:relative;top:-0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot:not([name=label])::slotted(*){top:0;opacity:1}.duet-slideout-panel-dropdown{position:relative;width:100%;height:100%}.duet-slideout-panel-dropdown button{position:relative;display:flex;gap:16px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1.25rem;font-weight:800;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none;cursor:pointer}.duet-slideout-panel-dropdown button:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-slideout-panel-dropdown button:focus,.duet-slideout-panel-dropdown button:focus.duet-theme-turva,.duet-theme-turva2 .duet-slideout-panel-dropdown button:focus,.duet-slideout-panel-dropdown button:focus.duet-theme-turva2{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-slideout-panel-dropdown button .label{position:relative;display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-slideout-panel-dropdown button.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:calc(100% - 18px);height:1px;content:\"\";background:rgb(0, 119, 179);transform:translateY(1px)}.duet-slideout-panel-dropdown .items{display:flex;visibility:visible;flex-direction:column;align-items:center;justify-content:center;width:100%;max-height:1000px;padding:4px 20px 8px 36px;overflow-y:auto;scrollbar-width:none;transition:max-height 0.3s ease-in, padding-bottom 0.3s ease-in;-ms-overflow-style:none}.duet-slideout-panel-dropdown .items::-webkit-scrollbar{display:none}.duet-slideout-panel-dropdown .items.hidden{visibility:hidden;max-height:0;padding:0;overflow:hidden;transition:max-height 0.3s ease-out, padding-bottom 0.3s ease-out}.duet-slideout-panel-dropdown.duet-theme-turva button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after{background:rgb(198, 12, 48)}slot{--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:400;color:rgb(8, 42, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}slot[name=label]{font-size:1rem;font-weight:600}:host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after{background:rgb(230, 23, 64)}:host(.duet-theme-turva2) slot{color:rgb(23, 42, 59)}";
 
 const DuetSlideoutPanelDropdown = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.onClick = () => {
-            this.open = !this.open;
-        };
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Active
+         */
         this.active = false;
+        /**
+         * Open
+         */
         this.open = false;
+        /**
+         * Icon
+         */
         this.icon = undefined;
+        this.onClick = () => {
+            this.open = !this.open;
+        };
     }
     handleFocus(e) {
         const isClickOutside = e.composedPath().every(node => node !== this.element);
@@ -49,19 +58,21 @@ const DuetSlideoutPanelDropdown = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '5b9beeeb80434ebb9fe59287777dd7b3ccf117f2' }, index.h("div", { key: '26d2b1524b8b4ba9cc9a43ce1ba69dad84fe3a6c', class: {
+        return (index.h(index.Host, { key: '74023ff3094ea4e1867ae58690abaa3f338053e7' }, index.h("div", { key: '0a0de8be47b2d48bc9f0c1564d458af29ee2e05f', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, index.h("button", { key: '4ddc07d35d571609edc8ac0f38013dcf1f7abd4e', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, index.h("button", { key: '887b98839351d36434969447057013fd8e7614ed', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 active: this.active,
-            }, onClick: this.onClick }, this.icon && index.h("duet-icon", { key: '90494d824d6eac5621d4a1e06de2a684fbdd8201', name: this.icon, size: "medium", margin: "none", color: "secondary" }), index.h("span", { key: 'a7521f9a57a44fa8e5fb83f7ac08b6929b89b05e', class: "label" }, index.h("slot", { key: '9451cec580353060c2326a6ee3a7aa0b6e03ec69', name: "label" }), index.h("duet-icon", { key: '55d3a0e564dceb3bc2db017048d5a973272ecae5', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), index.h("div", { key: '90c7178107fcbf1765ba0a380e2a9dfc46efbcd5', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: this.onClick }, this.icon && index.h("duet-icon", { key: 'a3d25c295dd87dd7d7427c08776e74f93ff06539', name: this.icon, size: "small", margin: "none", color: "secondary" }), index.h("span", { key: 'f5721ac3bf32dc5d3a02c06c3945169f5191b8bf', class: "label" }, index.h("slot", { key: '408ea11afbdc9705cf7d972f6173ba5215f06bec', name: "label" }), index.h("duet-icon", { key: 'eba692bfd3ada8bbfdbe9eb6e51a01054f6f919a', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), index.h("div", { key: '13c263ac376bd1b412ba8c57aec55504da08557d', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, index.h("slot", { key: 'b6f315463f9acf6617c598a33605e1d80e155d74' })))));
+                "duet-theme-turva": this.theme === "turva",
+            } }, index.h("slot", { key: 'f582b50dca9e8127b6c4f0b6f9507f74f337ce7d' })))));
     }
     get element() { return index.getElement(this); }
 };
-DuetSlideoutPanelDropdown.style = DuetSlideoutPanelDropdownStyle0;
+DuetSlideoutPanelDropdown.style = duetSlideoutPanelDropdownCss;
 
 exports.duet_slideout_panel_dropdown = DuetSlideoutPanelDropdown;

package/lib/cjs/duet-slideout-panel.cjs.entry.js

@@ -3,20 +3,17 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-blgG8IJB.js');
+var themeableComponent = require('./themeable-component-DcR7DztR.js');
+var bodyScroll = require('./body-scroll-FWPe3_T_.js');
+var focusUtils = require('./focus-utils-Cbk0cnOs.js');
+var languageUtils = require('./language-utils-DWW8tvkB.js');
+var slotUtils = require('./slot-utils-Byx247xX.js');
+var tokenUtils = require('./token-utils-BJtlJxnJ.js');
+require('./string-utils-B35hEUBv.js');
+require('./tokens.module-DJt2h4FX.js');
 
-const index = require('./index-7b1d76ef.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const bodyScroll = require('./body-scroll-dba42314.js');
-const focusUtils = require('./focus-utils-47d23c45.js');
-const languageUtils = require('./language-utils-a6a152b8.js');
-const slotUtils = require('./slot-utils-7e6aa48b.js');
-const tokenUtils = require('./token-utils-5000595c.js');
-require('./string-utils-7b13c16e.js');
-require('./tokens.module-7c947029.js');
-
-const duetSlideoutPanelCss = "*,*::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;height:100%}:host slot:not([name=label])::slotted(*){position:relative;top:0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot:not([name=label])::slotted(*){top:0;opacity:1}.duet-slideout-panel{position:relative;height:100%}.duet-slideout-panel .link{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1.5rem;font-weight:800;line-height:1.25;color:rgb(8, 42, 77);text-align:left;text-decoration:none;cursor:pointer}.duet-slideout-panel .link .duet-slideout-icon{position:relative;display:inline-flex;font-size:0;line-height:normal;vertical-align:baseline}.duet-slideout-panel .link .duet-slideout-icon .duet-slideout-badge{position:absolute;top:0;left:16px;display:inline-block;width:6px;height:6px;background:rgb(247, 178, 40);border-radius:50%;box-shadow:0 0 0 1px #c18b1f}.duet-theme-turva .duet-slideout-panel .link .duet-slideout-icon .duet-slideout-badge{background:rgb(247, 178, 40)}@media (min-width: 62em){.duet-slideout-panel .link .duet-slideout-icon{margin-right:8px}}.duet-slideout-panel .link .label{display:flex;gap:0.5rem;align-items:center;justify-content:space-between;width:100%}.duet-slideout-panel .link .label-text.small{font-size:1rem;font-weight:600}.duet-slideout-panel .link .label-text.medium{font-size:1.25rem;font-weight:600}.duet-slideout-panel .link .label-text.large{font-size:1.5rem;font-weight:800}.duet-slideout-panel .link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel .link.active .label-text{position:relative}.duet-slideout-panel .link.active .label-text.small::after{height:1px;transform:translateY(1px)}.duet-slideout-panel .link.active .label-text::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";background:rgb(0, 119, 179);transform:translateY(2px)}.duet-slideout-panel .dialog{position:fixed;top:0;left:0;z-index:600;width:100%;height:100%;overflow-y:auto;visibility:visible}.duet-slideout-panel .dialog.hidden{visibility:hidden}.duet-slideout-panel .dialog.hidden .top .back,.duet-slideout-panel .dialog.hidden .top span{opacity:0}.duet-slideout-panel .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout-panel .top-container.has-sticky-header-slot .top{background:rgb(240, 247, 250)}.duet-slideout-panel .top-container.has-sticky-header-slot .sticky-header{display:block;padding:0 16px}.duet-slideout-panel .top{display:flex;align-items:center;justify-content:space-between;padding:4px}.duet-slideout-panel .top .back{opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .top .back:focus,.duet-slideout-panel .top .close:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel .top duet-icon{padding:16px}.duet-slideout-panel .top span{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);opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .sticky-header{display:none;width:100%;padding:0 1.5rem;margin-bottom:20px;background:rgb(240, 247, 250);border-bottom:1px solid rgb(212, 223, 229)}.duet-slideout-panel .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:1rem 16px;overflow-y:auto;color:rgb(8, 42, 77)}.duet-slideout-panel.duet-theme-turva .link{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-slideout-panel.duet-theme-turva .link:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel.duet-theme-turva .link.active .label-text::after{background:rgb(198, 12, 48)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .top{background:rgb(245, 247, 250)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-slideout-panel.duet-theme-turva .top .back:focus,.duet-slideout-panel.duet-theme-turva .top .close:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel.duet-theme-turva .top span{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)}slot:not([name=label]){--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:600;color:rgb(8, 42, 77)}.duet-theme-turva slot:not([name=label]){color:rgb(23, 28, 58)}";
-const DuetSlideoutPanelStyle0 = duetSlideoutPanelCss;
+const duetSlideoutPanelCss = "*,*::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;height:100%}:host slot:not([name=label])::slotted(*){position:relative;top:0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot:not([name=label])::slotted(*){top:0;opacity:1}.duet-slideout-panel{position:relative;height:100%}.duet-slideout-panel .link{position:relative;display:flex;gap:16px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1.5rem;font-weight:800;line-height:1.25;color:rgb(8, 42, 77);text-align:left;text-decoration:none;cursor:pointer}.duet-slideout-panel .link:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-slideout-panel .link:focus,.duet-slideout-panel .link:focus.duet-theme-turva,.duet-theme-turva2 .duet-slideout-panel .link:focus,.duet-slideout-panel .link:focus.duet-theme-turva2{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-slideout-panel .link .duet-slideout-icon{position:relative;display:inline-flex;font-size:0;line-height:normal;vertical-align:baseline}@media (min-width: 62em){.duet-slideout-panel .link .duet-slideout-icon{margin-right:8px}}.duet-slideout-panel .link .label{display:flex;gap:0.5rem;align-items:center;justify-content:space-between;width:100%}.duet-slideout-panel .link .label-text.small{font-size:1rem;font-weight:600}.duet-slideout-panel .link .label-text.medium{font-size:1rem;font-weight:600}.duet-slideout-panel .link .label-text.large{font-size:1.25rem;font-weight:800}.duet-slideout-panel .link.active .label-text{position:relative}.duet-slideout-panel .link.active .label-text.small::after{height:1px;transform:translateY(1px)}.duet-slideout-panel .link.active .label-text::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";background:rgb(0, 119, 179);transform:translateY(2px)}.duet-slideout-panel .dialog{position:fixed;top:0;right:0;z-index:600;visibility:visible;width:min(450px, 100%);height:100%;overflow-y:auto}.duet-slideout-panel .dialog.hidden{visibility:hidden}.duet-slideout-panel .dialog.hidden .top .back,.duet-slideout-panel .dialog.hidden .top span{opacity:0}.duet-slideout-panel .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout-panel .top-container.has-sticky-header-slot .top{background:rgb(240, 247, 250)}.duet-slideout-panel .top-container.has-sticky-header-slot .sticky-header{display:block;padding:0 16px}.duet-slideout-panel .top{display:flex;align-items:center;justify-content:space-between;padding:4px}.duet-slideout-panel .top .back{opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .top .back:focus,.duet-slideout-panel .top .close:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-slideout-panel .top .back:focus,.duet-slideout-panel .top .back:focus.duet-theme-turva,.duet-theme-turva2 .duet-slideout-panel .top .back:focus,.duet-slideout-panel .top .back:focus.duet-theme-turva2,.duet-theme-turva .duet-slideout-panel .top .close:focus,.duet-slideout-panel .top .close:focus.duet-theme-turva,.duet-theme-turva2 .duet-slideout-panel .top .close:focus,.duet-slideout-panel .top .close:focus.duet-theme-turva2{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-slideout-panel .top duet-icon{padding:16px}.duet-slideout-panel .top span{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:1.1rem;font-weight:700;line-height:1.5;color:rgb(8, 42, 77);opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .sticky-header{display:none;width:100%;padding:0 1.5rem;margin-bottom:20px;background:rgb(240, 247, 250);border-bottom:1px solid rgb(212, 223, 229)}.duet-slideout-panel .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:12px 20px;overflow-y:auto;color:rgb(8, 42, 77)}@media (min-width: 36em){.duet-slideout-panel .items{padding:16px 28px}}.duet-slideout-panel duet-indicator{top:4px}.duet-slideout-panel.duet-theme-turva .link{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-slideout-panel.duet-theme-turva .link.active .label-text::after{background:rgb(198, 12, 48)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .top{background:rgb(245, 247, 250)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-slideout-panel.duet-theme-turva .top span{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)}slot:not([name=label]){--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:600;color:rgb(8, 42, 77)}.duet-theme-turva slot:not([name=label]){color:rgb(23, 28, 58)}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .link{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .link.active .label-text::after{background:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .top{background:rgb(253, 247, 242)}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(253, 247, 242);border-bottom-color:rgb(251, 225, 209)}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .top span{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) slot:not([name=label]){color:rgb(23, 42, 59)}";
 
 const DuetSlideoutPanel = class {
     constructor(hostRef) {
@@ -32,6 +29,36 @@ const DuetSlideoutPanel = class {
             sv: "Tillbaka till huvudmenyn",
         };
         this.hasStickyHeaderSlot = false;
+        this.language = languageUtils.getLanguage();
+        this.bodyScrollLocked = false;
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Active
+         */
+        this.active = false;
+        /**
+         * Open
+         */
+        this.open = false;
+        /**
+         * Icon
+         */
+        this.icon = undefined;
+        /**
+         * Size. Small, medium or large.
+         */
+        this.labelSize = "medium";
+        /**
+         * Background color. Use one of the color tokens.
+         */
+        this.backgroundColor = "gray-lightest";
+        /**
+         * Show a badge that indicates something has changed.
+         */
+        this.badge = false;
         this.updateLabel = () => {
             const labelSlotElement = this.element.querySelector("[slot='label']");
             this.label = labelSlotElement;
@@ -52,16 +79,6 @@ const DuetSlideoutPanel = class {
                 slideout.toggle();
             }
         };
-        this.label = undefined;
-        this.language = languageUtils.getLanguage();
-        this.bodyScrollLocked = false;
-        this.theme = "";
-        this.active = false;
-        this.open = false;
-        this.icon = undefined;
-        this.labelSize = "medium";
-        this.backgroundColor = "primary-lightest";
-        this.badge = false;
     }
     /**
      * Component lifecycle events.
@@ -154,39 +171,36 @@ const DuetSlideoutPanel = class {
      * Always the last one in the class.
      */
     render() {
-        const defaultBackgroundColor = this.backgroundColor === "primary-lightest"
-            ? this.theme === "turva"
-                ? "gray-lighter"
-                : this.backgroundColor
-            : this.backgroundColor;
         const styles = {
-            background: tokenUtils.getColorByName(defaultBackgroundColor, this.theme),
+            background: tokenUtils.getColorByName(this.backgroundColor, this.theme),
         };
         const exitTranslation = languageUtils.getLocaleString(this.exitLangObject);
         const backTranslation = languageUtils.getLocaleString(this.backLangObject);
-        return (index.h(index.Host, { key: '3e5b55f03542b4078ee41b1ff6f0a8d601239791' }, index.h("div", { key: '6220b1c96f0eefd971b0be2d3e64026ac5bfd467', class: {
+        return (index.h(index.Host, { key: '91e1bfb50346e6f0b7d7b93f6d9cb16e84df9297' }, index.h("div", { key: '80891454e08a69f87d42ca5879c85a7e1eab6d5c', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, index.h("button", { key: '3d188176100a87926dabcdf167e7843d3c4c73a7', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, this.badge && index.h("duet-indicator", { key: '2dc9f2f3b5eebbc44158f9c7795ee2e9dadbfeef', variation: "change" }), index.h("button", { key: '86db5918e585201320c57a8770ab850356bda06b', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 link: true,
                 active: this.active,
-            }, onClick: this.onClick, inert: this.open }, this.icon && (index.h("div", { key: '5bda62a593954ce9401ac2e8957fd58913a4ff80', class: "duet-slideout-icon" }, index.h("duet-icon", { key: '1a82e4449db67bedd65f5299f6c7d5e38bf0064f', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && index.h("div", { key: 'ca9518dd19dbffd4d7e12902d9a79fd3b6d0239f', class: "duet-slideout-badge" }))), index.h("span", { key: '4f3f26845dd7337944a31a6126114aaffade111d', class: "label" }, index.h("span", { key: '79f43f5fcb192dca6f278e44a812ccb18fed9930', class: { "label-text": true, [this.labelSize]: true } }, index.h("slot", { key: '0c676ffc9df3fd9f8cdc793aa0775d799f99cf0a', name: "label" })), index.h("duet-icon", { key: '09fd5d953aee5af50d1ad3096fa8ea5300ad38a1', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), index.h("div", { key: 'a2d69000f5e72011f38094306607197da4c1be6d', ref: element => (this.dialog = element), class: {
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: this.onClick, inert: this.open }, this.icon && (index.h("div", { key: '635addd38144863b546edd4d8792a26d4e8dd3c4', class: "duet-slideout-icon" }, index.h("duet-icon", { key: '3610a7e6ebcdf22fe198e4428538d559599c79c0', name: this.icon, size: "small", margin: "none", color: "secondary" }))), index.h("span", { key: '9b4d70cc570113c1e667ced944bccae1e4613398', class: "label" }, index.h("span", { key: '6f16630f451ef9ebd920462cd81df2cf92ab5312', class: { "label-text": true, [this.labelSize]: true } }, index.h("slot", { key: '80688a824da754215dcbfcd668ff8144880147d1', name: "label" })), index.h("duet-icon", { key: '205d74fef784d3db602fcccf61ba49dfb5995317', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), index.h("div", { key: '5be9dab7afdb48916100c5bfb8242eb061ba6c96', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, index.h(focusUtils.FocusGuard, { key: '6a3e44b182bdb7f662e1e1445b5af239ae6d532f', moveFocusTo: this.closeButton }), index.h("div", { key: 'b43e59b1d4307053e6db415a2873b19f7455d4f2', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, index.h("div", { key: 'cd3abce2e94d9170ee92c7fde98528f9d80347a2', class: "top" }, index.h("button", { key: 'c8db3e61bbc4c5e70f83a6ed219d925d7ed66624', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
+            }, style: styles }, index.h(focusUtils.FocusGuard, { key: 'ad7c4a34db3120b40ed51061125f05d69017b342', moveFocusTo: this.closeButton }), index.h("div", { key: 'af56281cf6a0a4c7355f48d17b66c5495e7982f9', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, index.h("div", { key: '676eca91428ce8439e68da74b59a0bc8d393f5a5', class: "top" }, index.h("button", { key: '2d8f3d984de8ca1efccc191115b7657a455c5ef9', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
                 back: true,
-            }, onClick: this.onClick }, index.h("duet-icon", { key: '0d633063603734ae6696a55f78b46d69f9a123ee', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), index.h("span", { key: '9b47722f8b18d8009370dd8dad1e3efd01549c19' }, this.label.innerHTML), index.h("button", { key: '8a03a8ec1baddd5b6c3cec3b82449c25baaf72be', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, index.h("duet-icon", { key: 'c5b46e81e5e280b3d23fee48a9fe88fd3e291291', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), index.h("div", { key: '7f6f22a3a232ced9de34b211fbbab88d5292168d', class: "sticky-header" }, index.h("slot", { key: 'afed92ed2333e55b311eea33f10550ce7a39c776', name: "sticky-header" }))), index.h("div", { key: '95b7ac98ec07f7665815fe24b5bd156a27eaa6f1', tabindex: "-1", role: "menu",
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: this.onClick }, index.h("duet-icon", { key: 'f4d1be2b1157d12fff10e9f84eb7905d93091e79', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), index.h("span", { key: '2e0426bee359ed9f3ccf9f044e9c751924003a5c' }, this.label.innerHTML), index.h("button", { key: 'f4edf9a9df667475a3c00b214e134bce7d9d7ae9', class: { close: true, "duet-theme-turva": this.theme === "turva" }, type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, index.h("duet-icon", { key: '548ed5fadb9216137fcdc0762b35454ceb21c8d4', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), index.h("div", { key: '923603a20dbab28d51a376a9c252c35e33803880', class: "sticky-header" }, index.h("slot", { key: '07e15709effbee9950d36f03dd91e73b7e9ab336', name: "sticky-header" }))), index.h("div", { key: '7e63e1cd014106736bb712c20023f62245e43486', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, index.h("slot", { key: '82b84a76815223e3c3e0478d5300fba75385d269' })), index.h(focusUtils.FocusGuard, { key: 'fbdc0a4eb86430546ecb7dd3e407fe5537b070c6', moveFocusTo: this.closeButton })))));
+            } }, index.h("slot", { key: 'fa18b91a1114433c57ecd566934f505e9fc62cf5' })), index.h(focusUtils.FocusGuard, { key: '7251452b17bbdfd8978f302bfde0e33991b39465', moveFocusTo: this.closeButton })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
         "open": ["handleOpenChange"]
     }; }
 };
-DuetSlideoutPanel.style = DuetSlideoutPanelStyle0;
+DuetSlideoutPanel.style = duetSlideoutPanelCss;
 
 exports.duet_slideout_panel = DuetSlideoutPanel;