@duetds/components 8.0.6 → 8.1.1

package/lib/dist-custom-elements/{p-c0af301d.js → p-adef0aaa.js}

@@ -1,76 +1,76 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h } from './p-7247d0b2.js';
-import { i as inheritGlobalTheme } from './p-d48735b6.js';
-import { s as sanitizeString } from './p-1a395a8d.js';
-import { g as getColorByName } from './p-e19d1e27.js';
+import { p as proxyCustomElement, H, h } from './p-04a295c6.js';
+import { i as inheritGlobalTheme } from './p-a58bd561.js';
+import { s as sanitizeString } from './p-0e052642.js';
+import { g as getColorByName } from './p-57a1cba9.js';
 
 const duetHeadingCss = "*,*::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:relative;display:block;width:100%}.duet-heading{margin-bottom:16px !important;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.25;color:rgb(0, 41, 77);text-decoration:none;letter-spacing:-0.01rem;word-break:break-word}@media (min-width: 36em){.duet-heading{margin-bottom:20px !important}}.duet-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\";font-style:italic;font-weight:700;color:rgb(23, 28, 58)}.duet-heading.duet-heading-border{padding-bottom:20px;border-bottom:1px solid rgb(225, 227, 230)}.duet-heading.duet-heading-border.duet-heading-border-solid{border-bottom-color:rgb(101, 119, 135)}.duet-heading.duet-heading-hyphenate{-webkit-hyphens:auto;hyphens:auto}.duet-heading.h0{font-size:9.4vw;line-height:1.1}.duet-heading.h0.duet-p-0{padding:0 !important}.duet-heading.h0.duet-m-0{margin:0 !important}@media (max-width: 31.914893617rem){.duet-heading.h0{font-size:3rem}}@media (min-width: 47.8723404255rem){.duet-heading.h0{font-size:4.5rem}}@media (max-width: 22.5em){.duet-heading.h0{font-size:2.25rem}}.duet-heading.h1{font-size:7vw;line-height:1.1}.duet-heading.h1.duet-p-0{padding:0 !important}.duet-heading.h1.duet-m-0{margin:0 !important}@media (max-width: 32.1428571429rem){.duet-heading.h1{font-size:2.25rem}}@media (min-width: 42.8571428571rem){.duet-heading.h1{font-size:3rem}}@media (max-width: 22.5em){.duet-heading.h1{font-size:1.5rem}}.duet-heading.h2{font-size:5.8vw;line-height:1.1}.duet-heading.h2.duet-p-0{padding:0 !important}.duet-heading.h2.duet-m-0{margin:0 !important}@media (max-width: 25.8620689655rem){.duet-heading.h2{font-size:1.5rem}}@media (min-width: 38.7931034483rem){.duet-heading.h2{font-size:2.25rem}}.duet-heading.h2.duet-theme-turva{font-style:normal}@media (max-width: 22.5em){.duet-heading.h2{font-size:1.375rem}}.duet-heading.h3{margin-bottom:12px !important;font-size:4.2vw}.duet-heading.h3.duet-p-0{padding:0 !important}.duet-heading.h3.duet-m-0{margin:0 !important}@media (max-width: 29.7619047619rem){.duet-heading.h3{font-size:1.25rem}}@media (min-width: 35.7142857143rem){.duet-heading.h3{font-size:1.5rem}}.duet-heading.h3.duet-theme-turva{font-style:normal}.duet-heading.h3.duet-heading-border{padding-bottom:20px}.duet-heading.h4{margin-bottom:8px !important;font-size:4vw;letter-spacing:0}.duet-heading.h4.duet-p-0{padding:0 !important}.duet-heading.h4.duet-m-0{margin:0 !important}@media (max-width: 27.5rem){.duet-heading.h4{font-size:1.1rem}}@media (min-width: 31.25rem){.duet-heading.h4{font-size:1.25rem}}.duet-heading.h4.duet-theme-turva{font-style:normal;font-weight:700}.duet-heading.h4.duet-heading-border{padding-bottom:20px}.duet-heading.h5{margin-bottom:8px !important;font-size:4vw;font-weight:600;letter-spacing:0}.duet-heading.h5.duet-p-0{padding:0 !important}.duet-heading.h5.duet-m-0{margin:0 !important}@media (max-width: 27.5rem){.duet-heading.h5{font-size:1.1rem}}@media (min-width: 28.4090909091rem){.duet-heading.h5{font-size:1.1363636364rem}}.duet-heading.h5.duet-theme-turva{font-style:normal;font-weight:700}.duet-heading.h5.duet-heading-border{padding-bottom:16px}.duet-heading.h6{margin-bottom:8px !important;font-size:1rem;font-weight:600;letter-spacing:0}.duet-heading.h6.duet-p-0{padding:0 !important}.duet-heading.h6.duet-m-0{margin:0 !important}.duet-heading.h6.duet-theme-turva{font-style:normal;font-weight:700}.duet-heading.h6.duet-heading-border{padding-bottom:16px}.duet-heading.duet-normal,.duet-heading.duet-theme-turva.duet-normal{font-style:normal !important;font-weight:400 !important}.duet-heading.duet-semibold,.duet-heading.duet-theme-turva.duet-semibold{font-style:normal !important;font-weight:600 !important}";
 
 const DuetHeading = /*@__PURE__*/ proxyCustomElement(class DuetHeading extends H {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.level = "h2";
-    this.margin = "auto";
-    this.visualLevel = undefined;
-    this.border = false;
-    this.weight = "auto";
-    this.color = "";
-    this.theme = "";
-    this.hyphenate = false;
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const TagName = sanitizeString(this.level);
-    const color = getColorByName(this.color);
-    return (h(TagName, { class: {
-        "duet-heading": true,
-        "duet-heading-border": this.border !== false,
-        "duet-heading-border-solid": this.border === "solid",
-        "duet-normal": this.weight === "normal",
-        "duet-semibold": this.weight === "semibold",
-        "duet-heading-hyphenate": this.hyphenate,
-        "duet-m-0": this.margin === "none",
-        [this.visualLevel ? this.visualLevel : this.level]: true,
-        "duet-theme-turva": this.theme === "turva",
-      }, style: { color }, part: "duet-heading" }, h("slot", null)));
-  }
-  get element() { return this; }
-  static get style() { return duetHeadingCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.level = "h2";
+        this.margin = "auto";
+        this.visualLevel = undefined;
+        this.border = false;
+        this.weight = "auto";
+        this.color = "";
+        this.theme = "";
+        this.hyphenate = false;
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        const TagName = sanitizeString(this.level);
+        const color = getColorByName(this.color);
+        return (h(TagName, { class: {
+                "duet-heading": true,
+                "duet-heading-border": this.border !== false,
+                "duet-heading-border-solid": this.border === "solid",
+                "duet-normal": this.weight === "normal",
+                "duet-semibold": this.weight === "semibold",
+                "duet-heading-hyphenate": this.hyphenate,
+                "duet-m-0": this.margin === "none",
+                [this.visualLevel ? this.visualLevel : this.level]: true,
+                "duet-theme-turva": this.theme === "turva",
+            }, style: { color }, part: "duet-heading" }, h("slot", null)));
+    }
+    get element() { return this; }
+    static get style() { return duetHeadingCss; }
 }, [1, "duet-heading", {
-    "level": [513],
-    "margin": [1],
-    "visualLevel": [1, "visual-level"],
-    "border": [8],
-    "weight": [1],
-    "color": [1],
-    "theme": [1025],
-    "hyphenate": [4]
-  }]);
+        "level": [513],
+        "margin": [1],
+        "visualLevel": [1, "visual-level"],
+        "border": [8],
+        "weight": [1],
+        "color": [1],
+        "theme": [1025],
+        "hyphenate": [4]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["duet-heading"];
-  components.forEach(tagName => { switch (tagName) {
-    case "duet-heading":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, DuetHeading);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["duet-heading"];
+    components.forEach(tagName => { switch (tagName) {
+        case "duet-heading":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DuetHeading);
+            }
+            break;
+    } });
 }
 
 export { DuetHeading as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-b2e550a3.js

@@ -0,0 +1,97 @@
+/*!
+ * Built with Duet Design System
+ */
+/**
+ * Teleport helps resolving z-index issues of overlapping popup elements.
+ * Initiate it in your component's willLoad or didLoad lifecycle hook.
+ * When you open the popup, call teleport.go() and move focus to the popup.
+ * When you close the popup, call teleport.resume() and move focus to the element that opened the popup.
+ * If your popup has closing animation, use the timeout parameter.
+ */
+class Teleport {
+    constructor(element, target) {
+        this.isActive = false;
+        this.element = element;
+        this.target = target || document.body;
+        this.teleportId = `${Math.random()}-${Date.now()}`.substring(2);
+    }
+    /**
+     * @param makeSiblingsInert - make all siblings of the element inert, use only with modals
+     */
+    go(makeSiblingsInert = false) {
+        // React handles teleporting itself with portals
+        if (!this.element.dataset.reactPortal) {
+            this.stub = document.createElement("template");
+            this.element.insertAdjacentElement("afterend", this.stub);
+            this.target.appendChild(this.element);
+        }
+        if (makeSiblingsInert) {
+            this._makeSiblingsInert();
+        }
+        this.deletionObserver = new MutationObserver(this._deletionObserverCallback.bind(this));
+        this.deletionObserver.observe(document.documentElement, { childList: true, subtree: true });
+        this.isActive = true;
+    }
+    resume(delay = 0) {
+        if (!this.isActive) {
+            return;
+        }
+        this.isActive = false;
+        if (delay) {
+            setTimeout(this._resume.bind(this), delay);
+        }
+        else {
+            this._resume();
+        }
+    }
+    _resume() {
+        if (!this.element.dataset.reactPortal) {
+            this.stub.insertAdjacentElement("beforebegin", this.element);
+            this.stub.remove();
+        }
+        this._removeInertFromSiblings();
+        this.deletionObserver.disconnect();
+    }
+    _remove() {
+        var _a, _b;
+        (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
+        (_b = this.stub) === null || _b === void 0 ? void 0 : _b.remove();
+        this._removeInertFromSiblings();
+        this.deletionObserver.disconnect();
+    }
+    _makeSiblingsInert() {
+        const siblings = Array.from(this.target.children);
+        siblings.forEach(sibling => {
+            if (sibling !== this.element) {
+                sibling.dataset.duetTeleportId = (sibling.dataset.duetTeleportId || "") + this.teleportId;
+                sibling.inert = true;
+            }
+        });
+    }
+    _removeInertFromSiblings() {
+        const siblings = Array.from(this.target.children);
+        siblings.forEach(sibling => {
+            var _a;
+            if ((_a = sibling.dataset.duetTeleportId) === null || _a === void 0 ? void 0 : _a.includes(this.teleportId)) {
+                sibling.dataset.duetTeleportId = sibling.dataset.duetTeleportId.replace(this.teleportId, "");
+                if (sibling.dataset.duetTeleportId === "") {
+                    delete sibling.dataset.duetTeleportId;
+                    sibling.inert = false;
+                }
+            }
+        });
+    }
+    /**
+     * If the teleported element or its component (observed via stub) is removed from DOM, clean up the teleport.
+     */
+    _deletionObserverCallback(mutationList) {
+        mutationList.forEach(mutation => {
+            if (Array.from(mutation.removedNodes).includes(this.element) ||
+                Array.from(mutation.removedNodes).some(n => n.contains(this.stub))) {
+                this._remove();
+            }
+        });
+    }
+}
+
+export { Teleport as T };

package/lib/dist-custom-elements/p-ba28f5ce.js

@@ -0,0 +1,205 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h } from './p-04a295c6.js';
+import { i as inheritGlobalTheme } from './p-a58bd561.js';
+import { g as getLocaleString } from './p-2e36d5bf.js';
+import { p as parsePossibleJSON } from './p-0e052642.js';
+import { d as defineCustomElement$9 } from './p-fc1fa737.js';
+import { d as defineCustomElement$8 } from './p-10a15ea1.js';
+import { d as defineCustomElement$7 } from './p-adef0aaa.js';
+import { d as defineCustomElement$6 } from './p-65d472d7.js';
+import { d as defineCustomElement$5 } from './p-994556c0.js';
+import { d as defineCustomElement$4 } from './p-6222a43f.js';
+import { d as defineCustomElement$3 } from './p-76e8ab22.js';
+import { d as defineCustomElement$2 } from './p-e034dfea.js';
+import { d as defineCustomElement$1 } from './p-68bd36c7.js';
+
+const getError = (code, errorCodes) => {
+    let error = {
+        type: undefined,
+        system_message: undefined,
+        message: undefined,
+    };
+    errorCodes = parsePossibleJSON(errorCodes);
+    error = errorCodes.filter(errorItem => {
+        // the == is intentional we may be comparing numbers to strings - and that is ok here
+        return errorItem.type == code;
+    })[0];
+    if (!error) {
+        error = errorCodes.filter(errorItem => {
+            return errorItem.type === "default";
+        })[0];
+    }
+    return error;
+};
+const getI18nError = (errorCode, errorCodes) => {
+    const errorFromJson = getError(errorCode, errorCodes);
+    const i18String = getLocaleString(errorFromJson.message);
+    if (i18String === "" || !i18String) {
+        return errorFromJson.system_message;
+    }
+    else {
+        return i18String;
+    }
+};
+
+const formatBytes = (bytes, decimals = 2) => {
+    if (bytes === 0) {
+        return "0 Bytes";
+    }
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+};
+
+const duetUploadItemCss = ".file-link::part(duet-link){text-decoration:none}";
+
+const DuetUploadItem = /*@__PURE__*/ proxyCustomElement(class DuetUploadItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.fileUploadingInfo = {
+            fi: "Tiedosto latautuu",
+            sv: "Filen laddas upp",
+            en: "File is uploading",
+        };
+        this.onLinkClick = (event) => {
+            const { url, meta } = this.data;
+            if (!!this.linkClickEvent) {
+                event.preventDefault();
+                this.linkClickEvent.emit({
+                    component: "duet-upload",
+                    data: { name: this.data.item.name, url, meta },
+                });
+            }
+        };
+        this.theme = "";
+        this.data = undefined;
+        this.type = undefined;
+        this.showLinks = undefined;
+        this.actions = undefined;
+        this.label = undefined;
+        this.categoryLabel = undefined;
+        this.errorCodes = undefined;
+        this.showCategory = undefined;
+        this.linkClickEvent = undefined;
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    /**
+     * focusActionButton.
+     */
+    async focusActionButton() {
+        if (this.actionButton) {
+            await this.actionButton.setFocus({ preventScroll: true });
+            this.actionButton.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
+        }
+    }
+    getFileNameLine() {
+        const { item, size, uploaded, url, progress, error } = this.data;
+        const { name } = item;
+        const ContentName = (h("span", { class: "duet-upload-item-name" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name));
+        const SizeText = (h("span", { class: "duet-upload-item-size", style: { fontSize: "14px", fontWeight: "400" } }, "(", formatBytes(size), ")"));
+        switch (this.type) {
+            case "inprogress":
+                return (h("span", { class: "duet-upload-item-name", role: "status" }, h("duet-paragraph", { class: "duet-upload-item-name", color: "gray-darker", margin: "none", weight: "semi-bold" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name), h("duet-visually-hidden", null, h("duet-paragraph", null, getLocaleString(this.fileUploadingInfo))), h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));
+            case "pending":
+                return (h("span", { class: "duet-upload-item-name" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name));
+            case "failure":
+                return (h("span", { class: "duet-upload-item-error", role: "status" }, h("duet-paragraph", { class: "duet-upload-item-name", color: "danger", margin: "none", weight: "semi-bold" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name), h("duet-paragraph", { class: "duet-upload-item-error-label", size: "small", margin: "none", color: "danger" }, getI18nError(error.type, this.errorCodes))));
+            default:
+                return uploaded && url && this.showLinks ? (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" }, h("duet-link", { class: "file-link", onClick: this.onLinkClick, url: url }, ContentName), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), SizeText)) : (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" }, ContentName, h("duet-spacer", { size: "xx-small", direction: "horizontal" }), SizeText));
+        }
+    }
+    render() {
+        const { uid, meta, item } = this.data;
+        const Badges = meta && meta.badges ? (h("span", null, meta.badges.map(badgeText => (h("duet-badge", { color: "primary" }, badgeText))))) : undefined;
+        const actionDescription = `${meta && meta.badges ? meta.badges.join(",") : ""} ${item.name}`;
+        return (h("div", { class: {
+                "upload-item-row": true,
+            } }, this.showCategory && (h("div", { class: "item-categories" }, h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { class: "item-actions" }, this.actions.map(actionItem => {
+            return (h("duet-action-button", { actionMeta: Object.assign({}, meta || {}), actionId: uid || null, actionName: actionItem.name, theme: this.theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${actionDescription} ${getLocaleString(actionItem.label)} `, accessibleTitle: false, ref: button => (this.actionButton = button) }));
+        }))));
+    }
+    get element() { return this; }
+    static get style() { return duetUploadItemCss; }
+}, [0, "duet-upload-item", {
+        "theme": [1025],
+        "data": [16],
+        "type": [1],
+        "showLinks": [4, "show-links"],
+        "actions": [8],
+        "label": [16],
+        "categoryLabel": [16],
+        "errorCodes": [16],
+        "showCategory": [4, "show-category"],
+        "linkClickEvent": [16],
+        "focusActionButton": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["duet-upload-item", "duet-action-button", "duet-badge", "duet-heading", "duet-icon", "duet-link", "duet-paragraph", "duet-progress", "duet-spacer", "duet-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "duet-upload-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DuetUploadItem);
+            }
+            break;
+        case "duet-action-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "duet-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "duet-heading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "duet-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "duet-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "duet-paragraph":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "duet-progress":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "duet-spacer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "duet-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { DuetUploadItem as D, getI18nError as a, defineCustomElement as d, getError as g };

package/lib/dist-custom-elements/{p-21b815ae.js → p-beb5db77.js}

@@ -1,54 +1,54 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-7247d0b2.js';
-import { i as inheritGlobalTheme } from './p-d48735b6.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-04a295c6.js';
+import { i as inheritGlobalTheme } from './p-a58bd561.js';
 
 const duetCheckmarkCss = ".duet-checkmark-container{position:relative;width:20px;height:20px;margin-left:auto;border:1px solid rgb(144, 149, 153);border-radius:4px;transition:border 300ms ease}.duet-checkmark-container.center{margin-right:auto}.duet-theme-turva .duet-checkmark-container{border-color:rgb(116, 116, 117)}.checked .duet-checkmark-container{background:rgb(0, 119, 179);border-color:rgb(0, 119, 179);transition:none}.duet-theme-turva .checked .duet-checkmark-container{background:rgb(23, 28, 58);border-color:rgb(23, 28, 58) !important}.duet-checkmark-container.duet-checkmark-radio{border-radius:50%}[disabled]+label .duet-checkmark-container{border-color:rgb(207, 210, 212) !important}.duet-theme-turva [disabled]+label .duet-checkmark-container{border-color:rgb(207, 207, 209) !important}.checked [disabled]+label .duet-checkmark-container{background:rgb(207, 210, 212) !important}.duet-theme-turva .checked [disabled]+label .duet-checkmark-container{background:rgb(207, 207, 209) !important}.duet-checkmark{position:absolute;top:10px;left:3px;width:5.3333333333px;height:11.8518518519px;border-top:2px solid rgb(255, 255, 255);border-right:2px solid rgb(255, 255, 255);opacity:1;transform:scaleX(-1) rotate(135deg) translateZ(0);transform-origin:left top;animation-name:duet-checkmark;animation-duration:600ms;animation-timing-function:ease-out;animation-fill-mode:forwards}@keyframes duet-checkmark{0%{width:0;height:0;opacity:1}20%{width:5.3333333333px;height:0;opacity:1}40%,100%{width:5.3333333333px;height:11.8518518519px;opacity:1}}";
 
 const DuetCheckmark = /*@__PURE__*/ proxyCustomElement(class DuetCheckmark extends H {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.theme = "";
-    this.checked = false;
-    this.presentationOnly = false;
-    this.center = false;
-    this.type = "checkbox";
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-  }
-  render() {
-    return (h(Host, { class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { class: {
-        "duet-checkmark-container": true,
-        center: this.center,
-        "duet-checkmark-radio": this.type === "radio",
-      } }, this.checked && h("div", { class: "duet-checkmark" })))));
-  }
-  static get style() { return duetCheckmarkCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.theme = "";
+        this.checked = false;
+        this.presentationOnly = false;
+        this.center = false;
+        this.type = "checkbox";
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    render() {
+        return (h(Host, { class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { class: {
+                "duet-checkmark-container": true,
+                center: this.center,
+                "duet-checkmark-radio": this.type === "radio",
+            } }, this.checked && h("div", { class: "duet-checkmark" })))));
+    }
+    static get style() { return duetCheckmarkCss; }
 }, [0, "duet-checkmark", {
-    "theme": [1025],
-    "checked": [1028],
-    "presentationOnly": [4, "presentation-only"],
-    "center": [4],
-    "type": [513]
-  }]);
+        "theme": [1025],
+        "checked": [1028],
+        "presentationOnly": [4, "presentation-only"],
+        "center": [4],
+        "type": [513]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["duet-checkmark"];
-  components.forEach(tagName => { switch (tagName) {
-    case "duet-checkmark":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, DuetCheckmark);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["duet-checkmark"];
+    components.forEach(tagName => { switch (tagName) {
+        case "duet-checkmark":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DuetCheckmark);
+            }
+            break;
+    } });
 }
 
 export { DuetCheckmark as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-d0e52a83.js

@@ -0,0 +1,76 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, d as Host } from './p-04a295c6.js';
+import { i as inheritGlobalTheme } from './p-a58bd561.js';
+
+const duetGridItemCss = ".sc-duet-grid-item-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;min-width:0;max-width:100%;flex:0 0 auto;padding-right:8px;padding-left: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-style:normal;font-weight:400;line-height:1.5;color:rgb(0, 41, 77)}.duet-grid-direction-horizontal.sc-duet-grid-item-h:first-child,.duet-grid-direction-horizontal.sc-duet-grid-item-h:first-of-type{padding-left:0}.duet-grid-direction-horizontal.sc-duet-grid-item-h:last-child,.duet-grid-direction-horizontal.sc-duet-grid-item-h:last-of-type{padding-right:0}@media (max-width: 35.9375em){.duet-grid-item-responsive.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important;padding-right:0;padding-left:0}}@media screen and (max-width: 47.9375em){.duet-grid-item-br-medium.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important}}@media screen and (max-width: 47.9375em){.duet-grid-item-responsive.duet-grid-item-br-medium.sc-duet-grid-item-h{padding-right:0;padding-left:0}}@media screen and (max-width: 64em){.duet-grid-item-br-x-large.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important}}@media screen and (max-width: 64em){.duet-grid-item-responsive.duet-grid-item-br-x-large.sc-duet-grid-item-h{padding-right:0;padding-left:0}}.duet-grid-item-fill.sc-duet-grid-item-h{flex:1 1 auto;width:100%}.duet-theme-turva.sc-duet-grid-item-h{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-m-0.sc-duet-grid-item-h{padding:0 !important;margin:0 !important}";
+
+const DuetGridItem = /*@__PURE__*/ proxyCustomElement(class DuetGridItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.fill = false;
+        this.maxWidth = undefined;
+        this.minWidth = undefined;
+        this.theme = "";
+        this.margin = "auto";
+        this.responsive = false;
+        this.direction = "horizontal";
+        this.breakpoint = "small";
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        return (h(Host, { style: {
+                "min-width": this.minWidth,
+                "max-width": this.maxWidth,
+            }, class: {
+                "duet-m-0": this.margin === "none",
+                "duet-theme-turva": this.theme === "turva",
+                "duet-grid-item": true,
+                "duet-grid-item-fill": this.fill,
+                "duet-grid-item-responsive": this.responsive,
+                "duet-grid-direction-horizontal": this.direction === "horizontal",
+                "duet-grid-direction-vertical": this.direction === "vertical",
+                "duet-grid-item-br-x-small": this.breakpoint === "x-small",
+                "duet-grid-item-br-small": this.breakpoint === "small",
+                "duet-grid-item-br-medium": this.breakpoint === "medium",
+                "duet-grid-item-br-large": this.breakpoint === "large",
+                "duet-grid-item-br-x-large": this.breakpoint === "x-large",
+            } }));
+    }
+    static get style() { return duetGridItemCss; }
+}, [2, "duet-grid-item", {
+        "fill": [4],
+        "maxWidth": [1, "max-width"],
+        "minWidth": [1, "min-width"],
+        "theme": [1025],
+        "margin": [1],
+        "responsive": [4],
+        "direction": [1],
+        "breakpoint": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["duet-grid-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "duet-grid-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DuetGridItem);
+            }
+            break;
+    } });
+}
+
+export { DuetGridItem as D, defineCustomElement as d };