@duetds/components 10.0.0-alpha.8 → 10.0.0

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

@@ -1,176 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1080a6c7.js';
-import { a as actionArrowDownSmall } from './p-115c79b6.js';
-import { f as font_size_medium, t as tokens } from './p-f6000a03.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { c as createID } from './p-5e59e970.js';
-import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-8db11326.js';
-import { h as hasSlot } from './p-ad615991.js';
-import { s as sanitizeString } from './p-9c3c64b9.js';
-import { d as defineCustomElement$3 } from './p-d74ee462.js';
-import { d as defineCustomElement$2 } from './p-d07ce35f.js';
-
-const duetCollapsibleCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=after-heading]){display:inline-block}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;display:block;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(8, 42, 77)}:host(.duet-theme-turva){font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}:host(.duet-m-0){margin:0 !important}.duet-collapsible-content{display:none;padding-left:18px;margin-top:8px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.5;color:rgb(8, 42, 77)}@media (max-width: 35.9375em){.duet-collapsible-content{font-size:0.875rem}}.duet-collapsible-content.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}:host([open])>.duet-collapsible-content{display:block}.duet-collapsible-heading{-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(8, 42, 77);text-align:left;cursor:pointer;border-radius:4px}.duet-collapsible-heading.full-width{width:100%}.duet-collapsible-heading.duet-collapsible-heading-centered{margin:auto}.duet-collapsible-heading.duet-collapsible-heading-centered .duet-collapsible-heading-caption{margin-inline:auto}.duet-collapsible-heading.duet-collapsible-normal-weight{font-weight:400}.duet-collapsible-heading.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-collapsible-heading .duet-collapsible-heading-content{min-width:0}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div{margin-left:16px}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div.float-right{margin-left:auto}.duet-collapsible-heading.has-caption{gap:4px}.duet-collapsible-heading.has-caption .duet-collapsible-heading-caption{margin-left:18px;font-weight:inherit}.duet-collapsible-heading .duet-collapsible-heading-wrapper{display:flex;align-items:center;width:inherit;margin:inherit}.duet-collapsible-heading:focus{outline:0}:host(.user-is-tabbing) .duet-collapsible-heading:focus{border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-collapsible-heading.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-collapsible-heading-icon{margin-right:8px !important;display:flex;align-items:center;justify-content:center;color:rgb(8, 42, 77);transition:transform 300ms ease}.duet-collapsible-heading-icon:last-child,.duet-collapsible-heading-icon:last-of-type{margin-right:0 !important}[aria-expanded=true] .duet-collapsible-heading-icon{transform:rotate(180deg)}:host(.negative) .duet-collapsible-heading,:host(.negative) .duet-collapsible-content,:host(.negative) .duet-collapsible-heading-icon{color:rgb(255, 255, 255)}";
-const DuetCollapsibleStyle0 = duetCollapsibleCss;
-
-const DuetCollapsible$1 = /*@__PURE__*/ proxyCustomElement(class DuetCollapsible extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.duetToggle = createEvent(this, "duetToggle", 7);
-        this.id = createID("DuetCollapsible");
-        this.handleKeyDown = (e) => {
-            if (isKeyboardClick(e)) {
-                this.handleClick(e);
-            }
-        };
-        this.getFontSizeFromTokens = (fontSize = this.headingSize) => {
-            if (!fontSize) {
-                return font_size_medium;
-            }
-            else {
-                const searchRegExp = /-/g;
-                const fontSizeReplaced = fontSize.replace(searchRegExp, "_");
-                return tokens[`font_size_${fontSizeReplaced}`];
-            }
-        };
-        this.getEquivalentIconSize = (fontSize = this.headingSize) => {
-            switch (fontSize) {
-                case "x-small":
-                    return "xx-small";
-                case "small":
-                    return "xx-small";
-                case "medium":
-                    return "xx-small";
-                case "large":
-                    return "x-small";
-                case "x-large":
-                    return "small";
-                case "xx-large":
-                    return "medium";
-                case "xxx-large":
-                    return "x-large";
-                case "xxxx-large":
-                    return "xxx-large";
-                default:
-                    // default size
-                    return "xx-small";
-            }
-        };
-        this.getAccessibleLabel = () => {
-            if (this.accessibleLabel) {
-                return this.accessibleLabel;
-            }
-            if (this.heading && this.caption) {
-                return `${this.heading}. ${this.caption}`;
-            }
-            return this.heading || null;
-        };
-        this.handleClick = (e) => {
-            e.preventDefault();
-            this.open = !this.open;
-            this.duetToggle.emit({
-                component: "duet-collapsible",
-                originalEvent: e,
-            });
-        };
-        this.theme = "";
-        this.negative = false;
-        this.accessibleLabel = undefined;
-        this.heading = "";
-        this.caption = "";
-        this.headingFullWidth = false;
-        this.centerHeading = false;
-        this.headingWeight = "semibold";
-        this.headingSize = undefined;
-        this.headingLevel = undefined;
-        this.margin = "auto";
-        this.open = false;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        this.hasAfterHeading = hasSlot(this.element, "after-heading");
-    }
-    connectedCallback() {
-        subscribeTabbingChange(this);
-    }
-    disconnectedCallback() {
-        unsubscribeTabbingChange(this);
-    }
-    /**
-     * Sets focus on the specified `duet-collapsible`. Use this method instead of the global
-     * `collapsible.focus()`.
-     */
-    async setFocus(options) {
-        if (this.nativeButton) {
-            this.element.classList.add("user-is-tabbing");
-            this.nativeButton.focus(options);
-        }
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
-        return (h(Host, { key: 'b3b56b0ff3a474d0b9a1b9b5b2b95565b928f9b6', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '2ed3aceffd3951a1fbc9753090d21571ebc4a9f7' }, h("button", { key: '93e4e421bca79965a4c26138dde6de0874b40cdc', class: {
-                "duet-collapsible-heading": true,
-                "duet-collapsible-heading-centered": this.centerHeading,
-                "duet-theme-turva": this.theme === "turva",
-                "duet-collapsible-normal-weight": this.headingWeight === "normal",
-                "has-after-heading": this.hasAfterHeading,
-                "full-width": this.headingFullWidth,
-                "has-caption": !!this.caption,
-            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '0706dfe66685e90322fc67858eb923623ab2e23e', class: "duet-collapsible-heading-wrapper" }, h("div", { key: 'fab600633aea517fcef9f0577ea7688a8e160331', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '1ac6f6f7cce01d02b9d09659299ed3c602a4a29e', margin: "none", size: this.getEquivalentIconSize(), icon: actionArrowDownSmall.svg })), h("div", { key: '8820659046737c7f7b503b097a0ee7b99614d7b8', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: '707fdeb97c4713df2d972bcf7f7612401d31aac0', part: "duet-collapsible-after-heading" }, h("slot", { key: 'fb1efb065f31e769c8e26c5bd608beeca76529d2', name: "after-heading" })))), this.caption && (h("div", { key: 'f70e43921a71817cda88c4fafae2f2310f37ada8', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: 'd8bfc9ac8d919b39d5fe8293f926ad386102136b', size: "small", margin: "none" }, this.caption))))), h("div", { key: '0500269581f8723e24e7190b3b257b3e05d682fc', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '32d7579f9d0eda1a84be85c553c3d555977d9b9c' }))));
-    }
-    get element() { return this; }
-    static get style() { return DuetCollapsibleStyle0; }
-}, [1, "duet-collapsible", {
-        "theme": [1025],
-        "negative": [4],
-        "accessibleLabel": [1, "accessible-label"],
-        "heading": [1],
-        "caption": [1],
-        "headingFullWidth": [4, "heading-full-width"],
-        "centerHeading": [4, "center-heading"],
-        "headingWeight": [1, "heading-weight"],
-        "headingSize": [1, "heading-size"],
-        "headingLevel": [1, "heading-level"],
-        "margin": [1],
-        "open": [1540],
-        "setFocus": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-collapsible", "duet-caption", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-collapsible":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetCollapsible$1);
-            }
-            break;
-        case "duet-caption":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetCollapsible = DuetCollapsible$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetCollapsible, defineCustomElement };

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

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