@duetds/components 6.0.3 → 6.0.4

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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,90 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, F as Fragment, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { g as getLocaleString } from './p-ede854e1.js';
+import { d as defineCustomElement$2 } from './p-7739604d.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 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}.duet-breadcrumbs{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 ol{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start;padding:10px 16px;color:#00294d;list-style:none;background:#f3f9fc;border-bottom:1px solid #e1e3e6}@media (min-width: 62em){.duet-breadcrumbs ol{padding:10px 36px}}.duet-breadcrumbs.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-breadcrumbs.duet-theme-turva ol{color:#171c3a;background:#f5f5f7}.duet-breadcrumbs .duet-breadrumbs-arrow{display:inherit;align-items:center;justify-content:center;width:0.375rem;height:0.375rem}.duet-breadcrumbs .hide{display:none}";
+
+const DuetBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.observers = [];
+    this.breadcrumbsAriaLabel = getLocaleString({
+      fi: "Murupolku",
+      sv: "Ströbröd",
+      en: "Breadcrumbs",
+    });
+    /**
+     * Theme
+     */
+    this.theme = "";
+  }
+  /**
+   * 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() {
+    return (h(Host, null, h("nav", { "aria-label": this.breadcrumbsAriaLabel, class: {
+        "duet-breadcrumbs": true,
+        "duet-theme-turva": this.theme === "turva",
+      } }, h("ol", null, this.children.map((child, index) => (h(Fragment, null, index > 0 && (h("li", { "aria-hidden": "true" }, h("duet-icon", { class: "duet-breadrumbs-arrow", size: "auto", icon: actionArrowRightSmall.svg, margin: "none", color: "currentColor" }))), h("li", { innerHTML: child.outerHTML }), h("div", { class: "hide" }, h("slot", null)))))))));
+  }
+  get element() { return this; }
+  static get style() { return duetBreadcrumbsCss; }
+}, [1, "duet-breadcrumbs", {
+    "theme": [1025],
+    "children": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-breadcrumbs", "duet-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-breadcrumbs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetBreadcrumbs$1);
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetBreadcrumbs = DuetBreadcrumbs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetBreadcrumbs, defineCustomElement };

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

@@ -0,0 +1,11 @@
+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

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

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

@@ -0,0 +1,11 @@
+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

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

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

@@ -0,0 +1,11 @@
+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;

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

@@ -0,0 +1,190 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { c as createID } from './p-c1325e35.js';
+import { i as isKeyboardClick } from './p-d8549efe.js';
+import { s as sanitizeString } from './p-5a9d75e1.js';
+import { g as getColorByName } from './p-86faf728.js';
+import { d as defineCustomElement$3 } from './p-7739604d.js';
+import { d as defineCustomElement$2 } from './p-81c9b244.js';
+
+var actionArrowUp={"title":"action-arrow-up","tags":"action arrow up caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.75 17.939a.752.752 0 0 1-.53-1.281L10.94 5.94c.283-.284.659-.44 1.059-.44.401 0 .777.156 1.06.438l10.721 10.72a.752.752 0 0 1-.53 1.281.743.743 0 0 1-.53-.22L12 7 1.28 17.719a.743.743 0 0 1-.53.22z\"/></svg>"};
+
+const duetCardCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:20px !important;display:flex;width:100%;vertical-align:top}:host(.duet-card-info){margin-bottom:16px !important}:host(.duet-m-0){margin:0 !important}.duet-card{padding:20px !important;position:relative;display:block;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;color:#00294d;text-decoration:none;border-radius:4px;box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}.duet-card.duet-p-0{padding:0 !important}.duet-card.duet-m-0{margin:0 !important}.duet-card:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-card:focus,.duet-card:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}@media (min-width: 36em){.duet-card{padding:28px !important}}.duet-card.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a;box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}@media (min-width: 36em){.duet-card.x-small{padding:20px !important}}@media (min-width: 36em){.duet-card.medium{padding:28px !important}}@media (min-width: 48em){.duet-card.medium{padding:36px !important}}@media (min-width: 36em){.duet-card.large{padding:36px !important}}@media (min-width: 48em){.duet-card.large{padding:48px !important}}@media (min-width: 36em){.duet-card.x-large{padding:48px !important}}@media (min-width: 48em){.duet-card.x-large{padding:72px !important}}.duet-card.duet-card-collapsed{padding-bottom:0 !important}@media (min-width: 36em){.duet-card.duet-card-collapsed{padding-bottom:0 !important}}.duet-card.info{background:rgba(0, 80, 128, 0.04) !important;box-shadow:none}.duet-card.info.duet-theme-turva{background:rgba(23, 28, 58, 0.035) !important}.duet-card.plain{box-shadow:none}.duet-card.plain:not(.duet-card-has-bg){background:transparent !important}.duet-card-heading-grid{display:flex;flex-direction:row}.duet-card-icon{align-self:center}.duet-card-heading-text{flex:1;word-break:break-word}.duet-card-secondary-heading{font-size:1rem;font-weight:600;word-break:break-word}.duet-card-secondary-heading--inline{display:block;flex:1;align-self:flex-start;line-height:1.875;text-align:right}@media (max-width: 22.5em){.duet-card-secondary-heading--inline{display:none}}.duet-card-secondary-heading--new-line{display:none}@media (max-width: 22.5em){.duet-card-secondary-heading--new-line{display:block}}.duet-card-heading{position:relative;display:block;padding:16px 20px;margin:-20px -20px 20px;overflow:hidden;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;color:#00294d;border-bottom:1px solid #e1e3e6}@media (min-width: 36em){.duet-card-heading{padding:15px 28px 16px !important;margin:-28px -28px 20px}}.duet-card-heading[role=button]{-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:4px;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;appearance:none}.duet-card-heading[role=button]:focus{outline:0}:host(.user-is-tabbing) .duet-card-heading[role=button]: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-theme-turva .duet-card-heading[role=button]:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-card-collapsed .duet-card-heading{margin-bottom:0 !important;border-bottom:0 !important}.duet-theme-turva .duet-card-heading{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a;border-color:#e4e4e6}@media (min-width: 36em){.x-small .duet-card-heading{padding:10px 20px 11px !important;margin:-20px -20px 20px}}@media (min-width: 48em){.x-small .duet-card-heading{padding:10px 20px 11px !important;margin:-20px -20px 20px}}.medium .duet-card-heading{margin:-20px -20px 20px}@media (min-width: 36em){.medium .duet-card-heading{padding:15px 28px 16px !important;margin:-28px -28px 20px}}@media (min-width: 48em){.medium .duet-card-heading{padding:19px 36px 20px !important;margin:-36px -36px 28px}}.large .duet-card-heading{margin:-20px -20px 20px}@media (min-width: 36em){.large .duet-card-heading{padding:19px 36px 20px !important;margin:-36px -36px 28px}}@media (min-width: 48em){.large .duet-card-heading{padding:26px 48px 27px !important;margin:-48px -48px 36px}}.x-large .duet-card-heading{margin:-20px -20px 20px}@media (min-width: 36em){.x-large .duet-card-heading{padding:26px 48px 27px !important;margin:-48px -48px 36px}}@media (min-width: 48em){.x-large .duet-card-heading{padding:39px 72px 40px !important;margin:-72px -72px 48px}}.none .duet-card-heading{padding:0 0 20px !important;margin:0 0 20px}.duet-card-footer{padding:20px;margin:20px -20px -20px;font-size:0.875rem;line-height:1.25;background:#f5f8fa;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.duet-theme-turva .duet-card-footer{background:#f5f5f7}@media (min-width: 36em){.duet-card-footer{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 48em){.duet-card-footer{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 36em){.x-small .duet-card-footer{padding:15px 28px 16px !important;padding-left:20px !important;margin:20px -20px -20px}}@media (min-width: 36em){.medium .duet-card-footer{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 48em){.medium .duet-card-footer{padding:19px 36px 20px !important;margin:28px -36px -36px}}@media (min-width: 36em){.large .duet-card-footer{padding:19px 36px 20px !important;margin:28px -36px -36px}}@media (min-width: 48em){.large .duet-card-footer{padding:26px 48px 27px !important;margin:36px -48px -48px}}@media (min-width: 36em){.x-large .duet-card-footer{padding:26px 48px 27px !important;margin:36px -48px -48px}}@media (min-width: 48em){.x-large .duet-card-footer{padding:39px 72px 40px !important;margin:48px -72px -72px}}.none .duet-card-footer{padding:12px 0 !important;margin:20px 0 0}.duet-card-content{width:100%}.duet-card-collapsed .duet-card-content{display:none}.duet-card-caret{position:relative;top:6px;align-self:flex-start;transition:300ms ease}[aria-expanded=false] .duet-card-caret{transform:rotate(-180deg)}.duet-card-image-mask{position:relative;width:calc(100% + 40px);margin:-20px 0 20px -20px;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px}@media (min-width: 36em){.small .duet-card-image-mask{width:calc(100% + 56px);margin:-28px 0 28px -28px}}@media (min-width: 36em){.medium .duet-card-image-mask{width:calc(100% + 56px);margin:-28px 0 28px -28px}}@media (min-width: 48em){.medium .duet-card-image-mask{width:calc(100% + 72px);margin:-36px 0 28px -36px}}@media (min-width: 36em){.large .duet-card-image-mask{width:calc(100% + 72px);margin:-36px 0 36px -36px}}@media (min-width: 48em){.large .duet-card-image-mask{width:calc(100% + 96px);margin:-48px 0 36px -48px}}@media (min-width: 36em){.x-large .duet-card-image-mask{width:calc(100% + 96px);margin:-48px 0 36px -48px}}@media (min-width: 48em){.x-large .duet-card-image-mask{width:calc(100% + 144px);margin:-72px 0 36px -72px}}.none .duet-card-image-mask{width:100%;margin:0 0 20px}.duet-card-image{display:block;width:102%;min-width:1px;max-width:102%;height:auto;min-height:1px;margin-left:-1%;transition:transform 300ms ease;transform:scale(1.0001)}a.duet-card{transition:box-shadow 300ms ease, background-position 300ms ease}a.duet-card:hover{box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(0, 41, 77, 0.1)}a.duet-card:hover .duet-card-image{transform:scale(1.024)}.duet-theme-turva a.duet-card:hover{box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(117, 117, 117, 0.15)}a.duet-card:active{transition:none;transform:translateY(1px)}";
+
+const DuetCard$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.duetToggle = createEvent(this, "duetToggle", 7);
+    this.cardId = createID("DuetCard");
+    /**
+     * The content for the card heading. If empty, both heading and collapse
+     * functionality will be hidden.
+     */
+    this.heading = "";
+    /**
+     * Additional content for the card heading. If empty, both heading and collapse
+     * functionality will be hidden.
+     */
+    this.secondaryHeading = "";
+    /**
+     * Style variation of the card.
+     */
+    this.variation = "default";
+    /**
+     * Makes the card expand and collapse when the collapse/expand arrow in the
+     * heading is clicked or tapped. This option only works together with the
+     * heading option, meaning that you also need to set the heading for this
+     * functionality to show up.
+     */
+    this.collapsible = false;
+    /**
+     * If the card is collapsible, this property controls whether the card is open or closed.
+     */
+    this.open = true;
+    /**
+     * The actual heading level used for the heading in html markup. This setting
+     * exists for accessibility reasons. It doesn’t change the style visually.
+     */
+    this.headingLevel = "h2";
+    /**
+     * Custom color to be used for the card background, as a design token entered in
+     * camelCase or kebab-case. Example: "primary".
+     */
+    this.background = "gray-lightest";
+    /**
+     * The padding for the card. Please note that the card padding values don’t directly
+     * translate to similar space token names, but instead the card uses it’s own
+     * derived defaults.
+     */
+    this.padding = "small";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Theme of the card.
+     */
+    this.theme = "";
+    /**
+     * Local methods.
+     */
+    this.togglePanel = (e) => {
+      e.preventDefault();
+      this.open = !this.open;
+      this.duetToggle.emit({
+        component: "duet-card",
+        originalEvent: e,
+      });
+    };
+    this.handleKeyDown = (e) => {
+      if (isKeyboardClick(e)) {
+        this.togglePanel(e);
+      }
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.hasHeadingSlot = !!this.element.querySelector(":scope > [slot='heading']");
+    this.hasFooter = !!this.element.querySelector("[slot='footer']");
+  }
+  renderHeading() {
+    const HeadingTag = sanitizeString(this.headingLevel);
+    const headingProps = this.collapsible
+      ? {
+        role: "button",
+        tabindex: "0",
+        "aria-controls": this.cardId,
+        "aria-expanded": this.open ? "true" : "false",
+        onClick: this.togglePanel,
+        onKeyDown: this.handleKeyDown,
+      }
+      : {};
+    return (h(HeadingTag, Object.assign({ class: "duet-card-heading" }, headingProps), h("div", { class: "duet-card-heading-grid" }, this.icon && (h(Fragment, null, h("duet-icon", { class: "duet-card-icon", name: this.icon, size: "medium", margin: "none", color: "currentColor" }), h("duet-spacer", { direction: "horizontal", size: "small" }))), h("div", { class: "duet-card-heading-text" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.secondaryHeading && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--inline" }, this.secondaryHeading))), this.collapsible && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("duet-icon", { class: "duet-card-caret", icon: actionArrowUp.svg, size: "small", margin: "none", color: "currentColor" })))), this.secondaryHeading && (h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--new-line" }, this.secondaryHeading)), h("slot", { name: "below-heading" })));
+  }
+  /**
+   * Sets focus on the specified `duet-card`. Use this method instead of the global
+   * `card.focus()`.
+   */
+  async setFocus(options) {
+    if (this.nativeCard) {
+      this.nativeCard.focus(options);
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const TagName = this.url ? "a" : "div";
+    const styles = {
+      backgroundColor: getColorByName(this.background),
+    };
+    return (h(Host, { class: {
+        "duet-m-0": this.margin === "none",
+        "duet-card-info": this.variation === "info",
+      } }, h(TagName, { href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
+        "duet-card": true,
+        [this.padding]: true,
+        [this.variation]: true,
+        "duet-p-0": this.padding === "none",
+        "duet-theme-turva": this.theme === "turva",
+        "duet-card-has-bg": this.background !== "gray-lightest",
+        "duet-card-has-icon": !!this.icon,
+        "duet-card-collapsed": this.collapsible && !this.open,
+      } }, this.image && (h("div", { class: "duet-card-image-mask" }, h("img", { src: this.image, class: "duet-card-image", loading: "lazy", alt: "", "aria-hidden": "true" }))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { class: "duet-card-content", id: this.cardId }, h("slot", null), this.hasFooter && (h("div", { class: "duet-card-footer" }, h("slot", { name: "footer" })))))));
+  }
+  get element() { return this; }
+  static get style() { return duetCardCss; }
+}, [1, "duet-card", {
+    "accessibleLabel": [1, "accessible-label"],
+    "heading": [1],
+    "secondaryHeading": [1, "secondary-heading"],
+    "variation": [1],
+    "collapsible": [4],
+    "open": [1540],
+    "headingLevel": [1, "heading-level"],
+    "icon": [1],
+    "image": [1],
+    "background": [1],
+    "padding": [1],
+    "margin": [1],
+    "theme": [1025],
+    "url": [1],
+    "setFocus": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-card", "duet-icon", "duet-spacer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetCard$1);
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-spacer":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetCard = DuetCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetCard, defineCustomElement };

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

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

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

@@ -0,0 +1,163 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { c as createID } from './p-c1325e35.js';
+
+const duetCheckboxCss = "*.sc-duet-checkbox,*.sc-duet-checkbox::after,*.sc-duet-checkbox::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-checkbox-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:8px !important;margin-bottom:12px !important;display:inline-flex;width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}.sc-duet-checkbox-h:last-child,.sc-duet-checkbox-h:last-of-type{margin-right:0 !important}.sc-duet-checkbox-h:last-child:not(:only-child){margin-bottom:0 !important}.duet-m-0.sc-duet-checkbox-h{margin:0 !important}.duet-label.sc-duet-checkbox{position:relative;z-index:100;display:inline;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;line-height:1.5;color:#00294d;vertical-align:top;cursor:pointer;background:transparent;transition:300ms ease}.duet-theme-turva.sc-duet-checkbox .duet-label.sc-duet-checkbox{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}.duet-label.sc-duet-checkbox span.sc-duet-checkbox{display:inline-block;width:calc(100% - 32px);font-size:1rem;font-weight:400;vertical-align:top}.duet-checkbox-container.sc-duet-checkbox{position:relative;width:100%;height:100%}.duet-checkbox.sc-duet-checkbox{padding:14px !important;position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;cursor:pointer;opacity:0}.duet-checkbox.sc-duet-checkbox+label.sc-duet-checkbox::before{z-index:100;display:inline-block;width:20px;height:20px;margin:2px 10px 1px 1px;vertical-align:top;content:\"\";background:white;border:1px solid #00294d;border-radius:4px}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:#171c3a}.duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#00294d;border:1px solid #00294d}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#171c3a;border-color:#171c3a}.duet-checkbox.sc-duet-checkbox:focus+label.sc-duet-checkbox::before{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox:focus+label.sc-duet-checkbox::before{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-checkbox.sc-duet-checkbox+label.sc-duet-checkbox{position:static}.duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::after{position:absolute;top:6px;left:5px;z-index:200;width:12px;height:12px;pointer-events:none;content:\"\";background:transparent url(\"data:image/svg+xml,%3Csvg%20fill%3D%27white%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M23.374.287a1.5%2C1.5%2C0%2C0%2C0-2.093.345L7.246%2C20.2%2C2.561%2C15.511A1.5%2C1.5%2C0%2C1%2C0%2C.439%2C17.632l5.935%2C5.934a1.525%2C1.525%2C0%2C0%2C0%2C2.279-.186l15.066-21A1.5%2C1.5%2C0%2C0%2C0%2C23.374.287Z%27%20%2F%3E%3C%2Fsvg%3E\") no-repeat 0 0;background-size:100% auto}.duet-checkbox[disabled].sc-duet-checkbox{cursor:default}.duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox{color:#657787}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox{color:#747475}.duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:#cfd2d4}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:#cfcfd1}.duet-checkbox[disabled].sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#657787;border:1px solid #657787}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#747475;border-color:#747475}.duet-label-hidden.sc-duet-checkbox .duet-label.sc-duet-checkbox span.sc-duet-checkbox{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+
+const DuetCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.duetChange = createEvent(this, "duetChange", 3);
+    this.duetFocus = createEvent(this, "duetFocus", 7);
+    this.duetBlur = createEvent(this, "duetBlur", 7);
+    /**
+     * Own Properties.
+     */
+    this.checkboxId = createID("DuetCheckbox");
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Aria Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
+    /**
+     * Set whether the input is required or not. Please note that this is required for
+     * accessible inputs when the user is required to fill them. When using this property
+     * you need to also set “novalidate” attribute to your form element to prevent
+     * browser from displaying its own validation errors.
+     */
+    this.required = false;
+    /**
+     * Theme of the checkbox.
+     */
+    this.theme = "";
+    /**
+     * Makes the checkbox component disabled. This prevents users from being able to
+     * interact with the checkbox, and conveys its inactive state to assistive technologies.
+     */
+    this.disabled = false;
+    /**
+     * Label for the checkbox
+     */
+    this.label = "label";
+    /**
+     * Visually hide the label, but still show it to screen readers.
+     */
+    this.labelHidden = false;
+    /**
+     * Check state of the checkbox.
+     */
+    this.checked = false;
+    /**
+     * Component event handling.
+     */
+    this.onChange = (ev) => {
+      this.checked = !this.checked;
+      this.duetChange.emit({
+        originalEvent: ev,
+        checked: this.checked,
+        value: this.value,
+        component: "duet-checkbox",
+      });
+    };
+    this.onBlur = (ev) => {
+      this.duetBlur.emit({
+        originalEvent: ev,
+        checked: this.checked,
+        value: this.value,
+        component: "duet-checkbox",
+      });
+    };
+    this.onFocus = (ev) => {
+      this.duetFocus.emit({
+        originalEvent: ev,
+        checked: this.checked,
+        value: this.value,
+        component: "duet-checkbox",
+      });
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    if (this.value === undefined) {
+      this.value = this.identifier;
+    }
+  }
+  /**
+   * Sets focus on the specified `duet-checkbox`. Use this method instead of the global
+   * `input.focus()`.
+   */
+  async setFocus(options) {
+    this.nativeInput.focus(options);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const identifier = this.identifier || this.checkboxId;
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("div", { class: {
+        "duet-checkbox-container": true,
+        "duet-label-hidden": this.labelHidden,
+        "duet-theme-turva": this.theme === "turva",
+      } }, h("input", { ref: input => (this.nativeInput = input), type: "checkbox", onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, value: this.value, class: { "duet-checkbox": true, disabled: this.disabled }, checked: this.checked, disabled: this.disabled, tabindex: this.accessibleIndex, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, required: this.required, role: this.role, name: this.name, id: identifier }), h("label", { class: "duet-label", htmlFor: identifier }, h("span", null, this.label)))));
+  }
+  get element() { return this; }
+  static get style() { return duetCheckboxCss; }
+}, [2, "duet-checkbox", {
+    "accessibleActiveDescendant": [1, "accessible-active-descendant"],
+    "margin": [1],
+    "accessibleControls": [1, "accessible-controls"],
+    "accessibleIndex": [1, "accessible-index"],
+    "accessibleOwns": [1, "accessible-owns"],
+    "accessibleDescribedBy": [1, "accessible-described-by"],
+    "accessibleDetails": [1, "accessible-details"],
+    "accessibleLabelledBy": [1, "accessible-labelled-by"],
+    "accessibleDescription": [1, "accessible-description"],
+    "required": [4],
+    "theme": [1025],
+    "disabled": [516],
+    "identifier": [1],
+    "label": [1],
+    "labelHidden": [4, "label-hidden"],
+    "name": [1],
+    "role": [1],
+    "checked": [1540],
+    "value": [1537],
+    "setFocus": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetCheckbox$1);
+      }
+      break;
+  } });
+}
+
+const DuetCheckbox = DuetCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetCheckbox, defineCustomElement };

package/lib/dist-custom-elements/duet-choice-group.d.ts

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