@duetds/components 10.0.0-alpha.9 → 10.0.0

package/lib/cjs/form-search-d61b2843.js

@@ -1,8 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-'use strict';
-
-var formSearch={"title":"form-search","tags":"form search magnifying glass","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M23.245 23.996a.743.743 0 0 1-.53-.22L16.2 17.26a9.824 9.824 0 0 1-2.553 1.579 9.766 9.766 0 0 1-7.51.069 9.745 9.745 0 0 1-5.359-5.262c-1.025-2.412-1.05-5.08-.069-7.51S3.558 1.802 5.97.777a9.744 9.744 0 0 1 7.51-.069c2.431.981 4.334 2.849 5.359 5.262s1.05 5.08.069 7.51a9.807 9.807 0 0 1-1.649 2.718l6.517 6.518a.75.75 0 0 1-.531 1.28zM9.807 1.49a8.259 8.259 0 0 0-3.25.667c-2.044.869-3.627 2.481-4.458 4.54s-.81 4.318.058 6.362a8.26 8.26 0 0 0 4.54 4.458 8.259 8.259 0 0 0 6.362-.059 8.285 8.285 0 0 0 2.594-1.736.365.365 0 0 1 .077-.076 8.245 8.245 0 0 0 1.786-2.728 8.255 8.255 0 0 0-.059-6.362 8.257 8.257 0 0 0-4.54-4.458 8.28 8.28 0 0 0-3.11-.608z\"/></svg>"};
-
-exports.formSearch = formSearch;

package/lib/cjs/themeable-component-996b489c.js

@@ -1,15 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-'use strict';
-
-const inheritGlobalTheme = (component) => {
-    // this minor change enables duet-theme-XXXXX instead of just duet-theme-turva
-    const classList = Array.from(document.documentElement.classList).join(" ") || "";
-    const theme = /(duet-theme-)([a-z]*)/gi.exec(classList);
-    if (theme && theme[1] === "duet-theme-") {
-        component.theme = theme[2] === "default" ? "" : theme[2];
-    }
-};
-
-exports.inheritGlobalTheme = inheritGlobalTheme;

package/lib/dist-custom-elements/duet-action-button.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetActionButton extends Components.DuetActionButton, HTMLElement {}
-export const DuetActionButton: {
-    prototype: DuetActionButton;
-    new (): DuetActionButton;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,9 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-b322feac.js';
-
-const DuetActionButton = DuetActionButton$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetActionButton, defineCustomElement };

package/lib/dist-custom-elements/duet-alert.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetAlert extends Components.DuetAlert, HTMLElement {}
-export const DuetAlert: {
-    prototype: DuetAlert;
-    new (): DuetAlert;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-alert.js

@@ -1,9 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-4150399b.js';
-
-const DuetAlert = DuetAlert$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetAlert, defineCustomElement };

package/lib/dist-custom-elements/duet-badge.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetBadge extends Components.DuetBadge, HTMLElement {}
-export const DuetBadge: {
-    prototype: DuetBadge;
-    new (): DuetBadge;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-badge.js

@@ -1,9 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-59782228.js';
-
-const DuetBadge = DuetBadge$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetBadge, defineCustomElement };

package/lib/dist-custom-elements/duet-banner.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetBanner extends Components.DuetBanner, HTMLElement {}
-export const DuetBanner: {
-    prototype: DuetBanner;
-    new (): DuetBanner;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-banner.js

@@ -1,157 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-548610a6.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { h } from './p-993aea39.js';
-import { h as hasSlot, c as checkNamedSlotElement } from './p-ad615991.js';
-import { p as parsePossibleJSON } from './p-9c3c64b9.js';
-import { g as getColorByName } from './p-0562173d.js';
-import { d as defineCustomElement$3 } from './p-081025d8.js';
-import { d as defineCustomElement$2 } from './p-77667998.js';
-
-const DuetPicture = ({ img, sources }) => {
-    return (h("picture", null,
-        sources &&
-            sources.map(source => (h("source", { srcSet: source.srcset, media: source.media, type: source.type, sizes: source.sizes }))),
-        h("img", Object.assign({}, img))));
-};
-
-const duetBannerCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  border: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n:host {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  border: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  margin-right: 36px !important;\n  margin-bottom: 36px !important;\n  display: flex;\n  justify-content: center;\n  width: auto;\n  container: duet-banner-container;\n  container-type: inline-size;\n}\n:host:last-child, :host:last-of-type {\n  margin-right: 0 !important;\n}\n\n:host(.duet-m-0) {\n  margin: 0 !important;\n}\n\n.duet-banner {\n  display: grid;\n  grid-template-rows: min-content 1fr;\n  width: 100%;\n  height: 100%;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-style: normal;\n  text-align: left;\n  border-radius: 16px;\n}\n.duet-banner.duet-p-0 {\n  padding: 0 !important;\n}\n.duet-banner.duet-m-0 {\n  margin: 0 !important;\n}\n.duet-banner .visual {\n  position: relative;\n  display: none;\n  overflow: hidden;\n  /* stylelint-disable */\n}\n@container duet-banner-container (min-width: 0px) {\n  .duet-banner .visual {\n    /* stylelint-enable */\n    display: block;\n  }\n}\n.duet-banner .visual .image-container {\n  position: relative;\n  aspect-ratio: 2/1;\n  overflow: hidden;\n}\n.duet-banner .visual .image {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n.duet-banner .visual .icon {\n  position: absolute;\n}\n.duet-banner .visual .brand-shape {\n  position: absolute;\n  top: 0;\n  left: 72%;\n  display: none;\n  width: 100%;\n  height: 100%;\n  mask-image: url(\"data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20344%22%20fill%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M2.72641e-07%2091.1902C0.000476976%2097.9034%200.626077%20104.726%201.92282%20111.592L42.7493%20327.771C43.8045%20333.358%2045.2667%20338.776%2047.0996%20344H160V0H51.1439C19.7799%2019.1253%200.00268143%2053.4178%202.72641e-07%2091.1749C-9.08807e-08%2091.18%20-9.08875e-08%2091.1851%202.72641e-07%2091.1902Z%22%20fill%3D%22%23E6F2F8%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E\");\n}\n.duet-banner .content {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px 20px 28px;\n}\n.duet-banner .content .description {\n  hyphens: auto;\n}\n.duet-banner .action {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  align-items: flex-start;\n  justify-content: flex-end;\n  padding-top: 16px;\n}\n.duet-banner .visual {\n  border-top-left-radius: 16px;\n  border-top-right-radius: 16px;\n}\n.duet-banner .visual .image-container {\n  width: 100%;\n  height: auto;\n  border-radius: 0;\n}\n.duet-banner .visual .icon {\n  bottom: 30px;\n  left: 15px;\n}\n.duet-banner.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-banner.duet-theme-turva .visual .brand-shape {\n  mask-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 160 344' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7920_3801)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.58983 142.533C0.751086 155.147 0.0746585 167.857 0.00796847 179.225C0.00263853 179.814 0 180.409 0 181.007C0 194.845 1.41172 210.806 3.58065 223.171C5.6528 234.934 8.58716 246.495 12.5981 257.779C21.2249 282.059 34.0151 304.109 50.8401 323.977C56.7824 330.993 63.0921 337.68 69.8162 344H160V0H65.0733C52.1771 10.7866 41.4339 23.4177 32.7528 37.7978C21.1154 57.0822 14.0367 77.9583 9.75424 99.7913C9.09214 103.157 8.55049 106.545 8.00901 109.933C7.75185 111.542 7.49474 113.15 7.22478 114.756C6.74308 117.618 6.24543 120.479 5.74776 123.34C4.6361 129.729 3.52432 136.12 2.58983 142.533Z' fill='%23F5F5F7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7920_3801'%3E%3Crect width='160' height='344' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A\");\n}\n.duet-banner.size-medium, .duet-banner.size-large {\n  /* stylelint-disable */\n  /* stylelint-disable */\n}\n@container duet-banner-container (min-width: 486px) {\n  .duet-banner.size-medium, .duet-banner.size-large {\n    /* stylelint-enable */\n    grid-template-rows: none;\n    grid-template-columns: 50% 50%;\n  }\n  .duet-banner.size-medium .visual, .duet-banner.size-large .visual {\n    border-top-left-radius: 16px;\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 16px;\n  }\n  .duet-banner.size-medium .visual .image-container, .duet-banner.size-large .visual .image-container {\n    height: 100%;\n  }\n  .duet-banner.size-medium .visual .image, .duet-banner.size-large .visual .image {\n    width: 100%;\n    height: 100%;\n  }\n  .duet-banner.size-medium .visual .icon, .duet-banner.size-large .visual .icon {\n    top: 36px;\n    left: 168px;\n  }\n  .duet-banner.size-medium .visual .brand-shape, .duet-banner.size-large .visual .brand-shape {\n    display: block;\n  }\n  .duet-banner.size-medium .content, .duet-banner.size-large .content {\n    align-items: flex-start;\n    justify-content: center;\n    padding: 28px 28px 28px 0;\n  }\n  .duet-banner.size-medium .action, .duet-banner.size-large .action {\n    flex-grow: 0;\n  }\n}\n@container duet-banner-container (min-width: 586px) {\n  .duet-banner.size-medium, .duet-banner.size-large {\n    /* stylelint-enable */\n  }\n  .duet-banner.size-medium .visual .brand-shape, .duet-banner.size-large .visual .brand-shape {\n    left: 80%;\n  }\n}\n.duet-banner.size-large {\n  /* stylelint-disable */\n}\n@container duet-banner-container (min-width: 900px) {\n  .duet-banner.size-large {\n    /* stylelint-enable */\n    grid-template-rows: none;\n    grid-template-columns: 50% 50%;\n  }\n  .duet-banner.size-large .visual {\n    border-top-left-radius: 16px;\n    border-bottom-left-radius: 16px;\n  }\n  .duet-banner.size-large .visual .image-container {\n    height: 100%;\n  }\n  .duet-banner.size-large .visual .image {\n    width: 100%;\n    height: 100%;\n  }\n  .duet-banner.size-large .visual .icon {\n    top: 40px;\n    bottom: auto;\n    left: 335px;\n  }\n  .duet-banner.size-large .visual .brand-shape {\n    display: block;\n  }\n  .duet-banner.size-large .content {\n    align-items: flex-start;\n    justify-content: center;\n    padding: 48px 48px 48px 0;\n  }\n  .duet-banner.size-large .action {\n    flex-grow: 0;\n  }\n}\n.duet-banner.no-image {\n  display: flex;\n  justify-content: center;\n  padding: 36px 20px;\n}\n.duet-banner.no-image .visual {\n  display: none;\n}\n.duet-banner.no-image .content {\n  width: 100%;\n  max-width: 720px;\n  padding: 0;\n}\n.duet-banner.no-image.size-medium, .duet-banner.no-image.size-large {\n  /* stylelint-disable */\n}\n@container duet-banner-container (min-width: 486px) {\n  .duet-banner.no-image.size-medium, .duet-banner.no-image.size-large {\n    /* stylelint-enable */\n    padding: 48px;\n  }\n}";
-const DuetBannerStyle0 = duetBannerCss;
-
-const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.checkCurrentSize = () => {
-            const elementSize = this.element.clientWidth;
-            if (elementSize < 500 || this.size === "small") {
-                this.currentSize = "small";
-            }
-            else if (elementSize < 900 || this.size === "medium") {
-                this.currentSize = "medium";
-            }
-            else {
-                this.currentSize = "large";
-            }
-            this.setButtonSize();
-        };
-        /**
-         * Default to smaller button size for small and medium banners.
-         */
-        this.setButtonSize = () => {
-            if (this.hasActionSlot && this.currentSize) {
-                const buttons = this.element.querySelectorAll("[slot='action'] duet-button, duet-button[slot='action']");
-                for (const button of buttons) {
-                    if (button && button.getAttribute("size") === null && this.currentSize !== "large") {
-                        button.size = "small";
-                    }
-                    else if (button && button.getAttribute("size") === null && this.currentSize === "large") {
-                        button.size = "medium";
-                    }
-                }
-            }
-        };
-        this.currentSize = undefined;
-        this.theme = "";
-        this.margin = "auto";
-        this.backgroundColor = "primary-lighter";
-        this.iconColor = "gray-lightest";
-        this.iconBackgroundColor = "primary";
-        this.textColor = "secondary";
-        this.size = "large";
-        this.image = "";
-        this.sources = undefined;
-        this.icon = "";
-        this.headingLevel = "h2";
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        this.hasHeadingSlot = hasSlot(this.element, "heading");
-        this.hasDescriptionSlot = hasSlot(this.element, "description");
-        this.hasActionSlot = hasSlot(this.element, "action");
-        checkNamedSlotElement(this.element, "heading", "span");
-        this.setButtonSize();
-    }
-    connectedCallback() {
-        window.addEventListener("resize", this.checkCurrentSize);
-    }
-    disconnectedCallback() {
-        window.removeEventListener("resize", this.checkCurrentSize);
-    }
-    componentDidRender() {
-        this.checkCurrentSize();
-    }
-    /**
-     * render() function
-     * Always the last one of the class.
-     */
-    render() {
-        const backgroundColorTemp = this.theme === "turva" && this.backgroundColor === "primary-lighter" ? "gray-lighter" : this.backgroundColor;
-        const backgroundColor = getColorByName(backgroundColorTemp, this.theme);
-        const color = getColorByName(this.textColor, this.theme);
-        const bannerStyles = {
-            backgroundColor,
-        };
-        const pictureSource = {
-            img: { src: this.image, alt: "", loading: "lazy", class: "image", role: "presentation" },
-            sources: parsePossibleJSON(this.sources),
-        };
-        return (h$1(Host, { key: 'b8716b8067524ae7e4c29e56cdc37d6219c7743a', class: { "duet-m-0": this.margin === "none" } }, h$1("aside", { key: '7c4b420d5a203fa5066f4a71a801c9fc288e179c', class: {
-                "duet-banner": true,
-                "duet-theme-turva": this.theme === "turva",
-                [this.currentSize]: true,
-                "size-medium": this.size === "medium" || this.size === "large",
-                "size-large": this.size === "large",
-                "no-image": !this.image,
-            }, style: bannerStyles }, h$1("div", { key: 'dd84b698336d0c159b692bde709c6f10bfe414bf', class: "visual" }, h$1("div", { key: 'c92d3fdabc120fa760c30ae44e90a29439817940', class: "image-container" }, this.image && h$1(DuetPicture, Object.assign({ key: 'bab1712aa5f1ab77a6c96babc607a9a9d4359dd2' }, pictureSource))), 1 > 2  , h$1("div", { key: '411fc99b5c017a4b89f4aa375d6725e9e85314e6', style: bannerStyles, class: "brand-shape" })), h$1("div", { key: '6ba154b92216b98f00b33d740175760049157d14', class: "content" }, this.hasHeadingSlot && (h$1("div", { key: 'ba3ab430999ab6f0823ab957b06bcc4077799c5a', class: "heading" }, h$1("duet-heading", { key: '256ed05f27e6c6c3ec987d4039d6a7caf713458b', theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: this.textColor }, h$1("span", { key: '197dbc447ca8910b13c8317cd00507e034e84e6f' }, h$1("slot", { key: 'cba3fcc030b0412d981e7cc94626e90aa628cb25', name: "heading" }))))), this.hasDescriptionSlot && (h$1("div", { key: 'dbcc6142fe33db74bccac1d54a1fe2a8e8ccc064', class: "description", style: { color } }, h$1("slot", { key: '1806ab5f5be1ee076c3978f1fcb676cef6b62893', name: "description" }))), this.hasActionSlot && (h$1("div", { key: 'bf9fd56968048a53d15cc1849c2a3b4619851c49', class: "action" }, h$1("slot", { key: '367d2a86cb83fe2d2bdb91ae1e133453e35ce895', name: "action" })))))));
-    }
-    get element() { return this; }
-    static get style() { return DuetBannerStyle0; }
-}, [1, "duet-banner", {
-        "theme": [1025],
-        "margin": [1],
-        "backgroundColor": [1, "background-color"],
-        "iconColor": [1, "icon-color"],
-        "iconBackgroundColor": [1, "icon-background-color"],
-        "textColor": [1, "text-color"],
-        "size": [1025],
-        "image": [1],
-        "sources": [1],
-        "icon": [1],
-        "headingLevel": [1, "heading-level"],
-        "currentSize": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-banner", "duet-heading", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-banner":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetBanner$1);
-            }
-            break;
-        case "duet-heading":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetBanner = DuetBanner$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetBanner, defineCustomElement };

package/lib/dist-custom-elements/duet-breadcrumb.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetBreadcrumb extends Components.DuetBreadcrumb, HTMLElement {}
-export const DuetBreadcrumb: {
-    prototype: DuetBreadcrumb;
-    new (): DuetBreadcrumb;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-breadcrumb.js

@@ -1,101 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-548610a6.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-8db11326.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-35375593.js';
-import { d as defineCustomElement$3 } from './p-77667998.js';
-import { d as defineCustomElement$2 } from './p-0871ccd4.js';
-
-var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
-
-const duetBreadcrumbCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:list-item;width:auto}.container{display:flex;gap:8px;align-items:center}.hide{display:none}.duet-breadrumbs-arrow{display:block;align-items:center;justify-content:center;width:0.375rem;min-width:0.375rem;height:0.375rem;min-height:0.375rem}.duet-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;font-weight:inherit;line-height:1.25;color:inherit;text-decoration:none}.duet-breadcrumb:focus{outline:0}:host(.user-is-tabbing) .duet-breadcrumb:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-breadcrumb.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
-const DuetBreadcrumbStyle0 = duetBreadcrumbCss;
-
-const DuetBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class DuetBreadcrumb extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.currentCrumb = {
-            fi: "disabled. Nykyinen sivu",
-            sv: "disabled. Visa mer",
-            en: "disabled. Nuvarande sida",
-        };
-        this.hasSlottedContent = false;
-        this.theme = "";
-        this.language = getLanguage();
-        this.href = "";
-        this.icon = "arrow-right-small-icon";
-        this.iconSize = "x-small";
-        this.accessibleLabel = undefined;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    connectedCallback() {
-        connectLanguageChangeObserver(this);
-        subscribeTabbingChange(this);
-        this.hasSlottedContent = Array.from(this.element.childNodes).length > 0;
-    }
-    disconnectedCallback() {
-        disconnectLanguageChangeObserver(this);
-        unsubscribeTabbingChange(this);
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        var _a;
-        return (h(Host, { key: '0e1297a62e328428c8f4c499846a70dbd020b3f6', role: "listitem" }, h("div", { key: 'f643fa524435dae01589d0763da39b4ad6a1fc00', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: 'f78e03bceb9247e063306cd720c3e930931a0af3', class: "duet-breadrumbs-arrow", size: "auto", icon: actionArrowRightSmall.svg, margin: "none", color: "currentColor" })), h("a", { key: '25544b3ce62ed9faa24fd785b792a4a1126ae88a', class: {
-                "duet-breadcrumb": true,
-                "duet-theme-turva": this.theme === "turva",
-            }, href: this.href ? this.href : undefined, "aria-label": `${!this.href ? `${getLocaleString(this.currentCrumb)} ` : ""}${(_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.element.innerHTML}`, role: "link" }, this.icon !== "arrow-right-small-icon" &&
-            this.icon && [
-            h("duet-icon", { key: '4dcbabcd08a77ec90e06ad7e7702bf59e5529bf5', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
-            this.hasSlottedContent && h("duet-spacer", { key: '622bc645de5061c411a11f54ec14461af07f3a12', size: "x-small", direction: "horizontal" }),
-        ], h("slot", { key: '83eee004dde5a3da67516903c1019eb1b1dec620' })))));
-    }
-    get element() { return this; }
-    static get style() { return DuetBreadcrumbStyle0; }
-}, [1, "duet-breadcrumb", {
-        "theme": [1025],
-        "href": [1025],
-        "icon": [1025],
-        "iconSize": [1, "icon-size"],
-        "accessibleLabel": [1, "accessible-label"],
-        "language": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-breadcrumb", "duet-icon", "duet-spacer"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-breadcrumb":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetBreadcrumb$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "duet-spacer":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetBreadcrumb = DuetBreadcrumb$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetBreadcrumb, defineCustomElement };

package/lib/dist-custom-elements/duet-breadcrumbs.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetBreadcrumbs extends Components.DuetBreadcrumbs, HTMLElement {}
-export const DuetBreadcrumbs: {
-    prototype: DuetBreadcrumbs;
-    new (): DuetBreadcrumbs;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-breadcrumbs.js

@@ -1,88 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-548610a6.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { g as getLocaleString } from './p-35375593.js';
-import { g as getColorByName } from './p-0562173d.js';
-
-const duetBreadcrumbsCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}::slotted(*){font-weight:400}::slotted(:last-child){font-weight:600}:host([variation=plain]) ::slotted(:last-child){font-weight:400}.duet-breadcrumbs{position:relative;display:flex;align-items:center;justify-content:center;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-breadcrumbs .container{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1384px;min-height:36px;margin:0 28px}.duet-breadcrumbs .list{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start;padding:10px 0;color:inherit;list-style:none}.duet-breadcrumbs .bottom-border{position:absolute;bottom:0;display:none;width:100%;height:1px}.duet-breadcrumbs.header{color:rgb(8, 42, 77);background:rgb(240, 247, 250)}.duet-breadcrumbs.header .list duet-breadcrumb[href]:hover{color:rgb(0, 75, 129)}.duet-breadcrumbs.header .bottom-border--nav{display:block;background:rgb(212, 223, 229)}.duet-breadcrumbs.header.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 247, 250)}.duet-breadcrumbs.header.duet-theme-turva ol duet-breadcrumb[href]:hover{color:rgb(126, 2, 35)}.duet-breadcrumbs.footer{color:rgb(255, 255, 255);background:rgb(8, 42, 77)}@media (min-width: 64.0625em){.duet-breadcrumbs.footer{justify-content:flex-start}}@media (min-width: 76.25em){.duet-breadcrumbs.footer{justify-content:center}}.duet-breadcrumbs.footer .container{max-width:1110px}@media (min-width: 62em){.duet-breadcrumbs.footer .container{margin:0 72px 0 48px}}.duet-breadcrumbs.footer .list{padding:20px 0}@media (min-width: 62em){.duet-breadcrumbs.footer .list{padding:20px 8px}}.duet-breadcrumbs.footer .list duet-breadcrumb[href]:hover{text-decoration:underline}.duet-breadcrumbs.footer .bottom-border--container{display:block;background:rgba(255, 255, 255, 0.2)}.duet-breadcrumbs.footer.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(198, 12, 48)}.duet-breadcrumbs.plain .container{max-width:none;min-height:auto;margin:0}.duet-breadcrumbs.plain .list{padding:0}.duet-breadcrumbs.plain .bottom-border{display:none}";
-const DuetBreadcrumbsStyle0 = duetBreadcrumbsCss;
-
-const DuetBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class DuetBreadcrumbs extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.observers = [];
-        this.breadcrumbsAriaLabel = getLocaleString({
-            fi: "Murupolku",
-            sv: "Ströbröd",
-            en: "Breadcrumbs",
-        });
-        this.children = undefined;
-        this.theme = "";
-        this.variation = "header";
-        this.color = "";
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        this.children = Array.from(this.element.children);
-    }
-    connectedCallback() {
-        Array.from(this.element.children).forEach(child => {
-            const observer = new MutationObserver(() => (this.children = Array.from(this.element.children)));
-            observer.observe(child, {
-                childList: true,
-                subtree: true,
-                attributes: true,
-                characterData: true,
-            });
-            this.observers = [...this.observers, observer];
-        });
-    }
-    disconnectedCallback() {
-        this.observers.forEach(observer => observer.disconnect());
-        this.observers = [];
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        const color = getColorByName(this.color);
-        return (h(Host, { key: 'c0b1e8c78d0744f5c809583855dc93aa24996f2a' }, h("nav", { key: '43f9aaea1114c5dd3ccf669fd6b0e757345b27eb', "aria-label": this.breadcrumbsAriaLabel, class: {
-                "duet-breadcrumbs": true,
-                "duet-theme-turva": this.theme === "turva",
-                [this.variation]: true,
-            } }, h("div", { key: '96e61856bbf06a8ed5c3c693bf53c15dc3aa340d', class: "container" }, h("div", { key: '414388159558cdb6b2f47ae096590165d65e01df', role: "list", class: "list", style: { color } }, h("slot", { key: 'cecb69a54afc0a093bf4f7ca38724d8d15d2751d' })), h("div", { key: '6a924f55a0c2d36033df4a532bb5429d6385d35a', class: "bottom-border bottom-border--container" })), h("div", { key: '00bb27276633fa524c2d74812968048ff98770b0', class: "bottom-border bottom-border--nav" }))));
-    }
-    get element() { return this; }
-    static get style() { return DuetBreadcrumbsStyle0; }
-}, [1, "duet-breadcrumbs", {
-        "theme": [1025],
-        "variation": [1],
-        "color": [1],
-        "children": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-breadcrumbs"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-breadcrumbs":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetBreadcrumbs$1);
-            }
-            break;
-    } });
-}
-
-const DuetBreadcrumbs = DuetBreadcrumbs$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetBreadcrumbs, defineCustomElement };

package/lib/dist-custom-elements/duet-button.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetButton extends Components.DuetButton, HTMLElement {}
-export const DuetButton: {
-    prototype: DuetButton;
-    new (): DuetButton;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-button.js

@@ -1,9 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { D as DuetButton$1, d as defineCustomElement$1 } from './p-9ee4d52e.js';
-
-const DuetButton = DuetButton$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetButton, defineCustomElement };

package/lib/dist-custom-elements/duet-callout.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetCallout extends Components.DuetCallout, HTMLElement {}
-export const DuetCallout: {
-    prototype: DuetCallout;
-    new (): DuetCallout;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-callout.js

@@ -1,72 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-548610a6.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { h as hasSlot, c as checkNamedSlotElement } from './p-ad615991.js';
-import { d as defineCustomElement$2 } from './p-77667998.js';
-
-const duetCalloutCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}blockquote,figure{margin:0}.duet-callout{margin-bottom:28px !important;display:flex;align-items:center;justify-content:center;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\"}.duet-callout .container{display:flex;flex-direction:column;gap:8px;align-items:center;max-width:688px;text-align:center}.duet-callout .callout-icon{width:50px;padding-bottom:8px}.duet-callout blockquote{font-size:2.7vw;font-weight:600;line-height:1.5;color:rgb(8, 42, 77)}@media (max-width: 37.037037037rem){.duet-callout blockquote{font-size:1rem}}@media (min-width: 46.2962962963rem){.duet-callout blockquote{font-size:1.25rem}}.duet-callout .author{color:rgb(8, 42, 77)}.duet-callout.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-callout.duet-theme-turva .author,.duet-callout.duet-theme-turva blockquote{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}";
-const DuetCalloutStyle0 = duetCalloutCss;
-
-const DuetCallout$1 = /*@__PURE__*/ proxyCustomElement(class DuetCallout extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.hasAuthorSlot = false;
-        this.theme = "";
-        this.margin = "auto";
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        this.hasAuthorSlot = hasSlot(this.element, "author");
-        checkNamedSlotElement(this.element, "author", "span");
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        const icon = `<svg viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M6.6591 0.557547L9.2031 2.33355C7.0911 5.21355 6.1311 7.18155 5.8431 8.90955C7.4751 9.34155 8.7231 10.5415 8.7231 12.6535C8.7231 15.2935 6.9471 16.9255 4.6431 16.9255C2.0511 16.9255 0.227096 15.1975 0.227096 12.2695C0.227096 8.28555 2.3871 4.34955 6.6591 0.557547ZM17.9871 8.95755C19.6191 9.34155 20.8671 10.5415 20.8671 12.6535C20.8671 15.2935 19.1391 16.9255 16.8351 16.9255C14.2431 16.9255 12.4191 15.1975 12.4191 12.2695C12.4191 8.28555 14.5791 4.34955 18.8511 0.557547L21.3951 2.33355C19.2351 5.21355 18.3231 7.18155 17.9871 8.95755Z"/>
-    </svg>
-    `;
-        return (h(Host, { key: 'd27408d6d82bfd84af629cacf5a77e3154e13f41' }, h("div", { key: '119cd7ea31b3c38d1fdc0bdf27f433f11720e4a3', class: {
-                "duet-callout": true,
-                "duet-theme-turva": this.theme === "turva",
-                "duet-m-0": this.margin === "none",
-            } }, h("figure", { key: 'c526b373643ce5a75a247ebb6909db4aafb15445', class: "container" }, h("duet-icon", { key: '4df319ceefc547b3535d77a481cce1adf726f1b0', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: '85a7a548daabdee9d5f39654200f87e63081f86a' }, h("slot", { key: '078d680a4d891743078cd90807fac357882ac66c' })), this.hasAuthorSlot && (h("figcaption", { key: 'd732b9a3a8d02c3d4a36192a915e5a9bb3a6994f', class: "author" }, h("span", { key: '296d2981b18de589d9a0e0128c6599d35015f795' }, "\u2014 "), h("slot", { key: '0a6b579e2d743716bd41b3ab566de0511c1642dd', name: "author" })))))));
-    }
-    get element() { return this; }
-    static get style() { return DuetCalloutStyle0; }
-}, [1, "duet-callout", {
-        "theme": [1025],
-        "margin": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-callout", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-callout":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetCallout$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetCallout = DuetCallout$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetCallout, defineCustomElement };

package/lib/dist-custom-elements/duet-caption.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetCaption extends Components.DuetCaption, HTMLElement {}
-export const DuetCaption: {
-    prototype: DuetCaption;
-    new (): DuetCaption;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-caption.js

@@ -1,9 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-ed6a907e.js';
-
-const DuetCaption = DuetCaption$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetCaption, defineCustomElement };

package/lib/dist-custom-elements/duet-card.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetCard extends Components.DuetCard, HTMLElement {}
-export const DuetCard: {
-    prototype: DuetCard;
-    new (): DuetCard;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;