@duetds/components 6.0.3 → 6.0.5

package/lib/dist-custom-elements/p-544d933d.js

@@ -0,0 +1,61 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h } from './p-1ad6b04e.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+
+const duetDividerCss = "*,*::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%}.duet-divider{-webkit-user-select:none;user-select:none;display:block;width:100%;height:1px;margin-top:36px !important;margin-bottom:28px;background:#e1e3e6}.duet-divider.duet-p-0{padding:0 !important}.duet-divider.duet-m-0{margin:0 !important}.duet-divider.duet-m-s{margin-bottom:16px !important;margin-top:0 !important}.duet-divider.duet-theme-turva{background:#e4e4e6}";
+
+const DuetDivider = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Theme of the divider.
+     */
+    this.theme = "";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h("div", { class: {
+        "duet-m-0": this.margin === "none",
+        "duet-m-s": this.margin === "small",
+        "duet-divider": true,
+        "duet-theme-turva": this.theme === "turva",
+      } }));
+  }
+  get element() { return this; }
+  static get style() { return duetDividerCss; }
+}, [1, "duet-divider", {
+    "theme": [1025],
+    "margin": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-divider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-divider":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetDivider);
+      }
+      break;
+  } });
+}
+
+export { DuetDivider as D, defineCustomElement as d };

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

@@ -0,0 +1,53 @@
+/*!
+ * Built with Duet Design System
+ */
+/**
+ * This function restores cursor position after changing input
+ *
+ * @example
+ * const resetCursor = storeAndResetCursor(this.input.selectionStart,this.input.selectionEnd)
+ * this.input.changeValueAndForceUpdateOfCursoPosition()
+ * resetCursor()
+ */
+function resetCursor(domElement) {
+  if (domElement && domElement.selectionStart) {
+    const start = domElement.selectionStart;
+    const end = domElement.selectionEnd;
+    return function () {
+      if (start === end) {
+        domElement.selectionStart = start;
+        domElement.selectionEnd = end;
+      }
+      else {
+        domElement.setSelectionRange(start, end);
+      }
+    };
+  }
+  return () => true;
+}
+/**
+ * Given an input and a regex, remove any characters from the input's value
+ * which match the regex, *whilst* maintaining cursor position.
+ *
+ * In effect, this prevent users from entering specific characters.
+ *
+ * @example
+ * input.value = "foo123"
+ * cleanValue(input, /[^0-9]/g)
+ * input.value === "123"
+ */
+function cleanValue(input, regex) {
+  const value = input.value;
+  const cursor = input.selectionStart;
+  const beforeCursor = value.slice(0, cursor);
+  const afterCursor = value.slice(cursor, value.length);
+  const filteredBeforeCursor = beforeCursor.replace(regex, "");
+  const filterAfterCursor = afterCursor.replace(regex, "");
+  const newValue = filteredBeforeCursor + filterAfterCursor;
+  const newCursor = filteredBeforeCursor.length;
+  input.value = newValue;
+  input.selectionStart = input.selectionEnd = newCursor;
+  return newValue;
+}
+
+export { cleanValue as c, resetCursor as r };

package/lib/dist-custom-elements/p-56b5945f.js

@@ -0,0 +1,160 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-1ad6b04e.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { c as createID } from './p-c1325e35.js';
+import { g as getLocaleString } from './p-ede854e1.js';
+import { d as defineCustomElement$4 } from './p-4c52333e.js';
+import { d as defineCustomElement$3 } from './p-4f516732.js';
+import { d as defineCustomElement$2 } from './p-6cae0682.js';
+import { d as defineCustomElement$1 } from './p-53a0c93d.js';
+
+const duetAlertCss = "*,*::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%;max-height:999px;border-radius:4px;transition:opacity 300ms ease, visibility 300ms ease, transform 300ms ease, max-height 300ms ease}:host(:focus){outline:0}:host(.user-is-tabbing: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:focus){box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}:host(.duet-alert-is-dismissed){max-height:0;visibility:hidden;opacity:0;transform:scale(0.98)}:host(.duet-alert-is-dismissed) .duet-alert{margin:0 !important}.duet-alert{margin-bottom:16px !important;position:relative;width:100%;padding:16px;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.25;color:#00294d;background:#f2f8fb;border:1px solid #0077b3;border-radius:4px;transition:margin 100ms 300ms ease}.duet-alert.duet-p-0{padding:0 !important}.duet-alert.duet-m-0{margin:0 !important}.duet-alert.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;background:#f3f4f5;border-color:#171c3a}.duet-alert.warning{background:#fffbf4;border-color:#f7b228}.duet-alert.warning.duet-theme-turva{background:#fffaf3;border-color:#faa40f}.duet-alert.danger{background:#fdf4f7;border-color:#de2362}.duet-alert.danger.duet-theme-turva{background:#fdf4f3;border-color:#e02a0d}.duet-alert.success{background:#f2f9f7;border-color:#00875a}.duet-alert.success.duet-theme-turva{background:#f3f9f6;border-color:#08874e}.duet-alert-dismiss{position:absolute;top:2px;right:2px}.duet-alert-container{display:inline-flex;align-items:center;justify-content:center;width:100%;margin:0 auto !important}.duet-alert-container span{width:100%}.duet-alert-has-icon .duet-alert-container{margin-top:2px !important}.duet-alert-icon{display:inline-block;align-self:center;width:20px;min-width:20px;height:20px;margin:0 16px 0 0 !important}.duet-alert-icon duet-icon{width:20px;height:20px}.duet-alert-is-dismissible{padding:16px 48px 16px 16px;text-align:left}.duet-alert-is-dismissible .duet-alert-container{text-align:left}";
+
+const DuetAlert = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.duetDismiss = createEvent(this, "duetDismiss", 7);
+    this.descriptiveId = createID("DuetAlert");
+    /**
+     * Theme of the card.
+     */
+    this.theme = "";
+    /**
+     * State() variables
+     * Inlined decorator, alphabetical order.
+     */
+    this.isDismissed = false;
+    /**
+     * Property to change languageDefaults on the component.
+     * normally you would handle these strings on an application level and override @accessibleLabel when needed
+     * @default {fi: "Sulje viesti", sv: "Stäng meddelandet", en: "Close the message"}
+     */
+    this.accessibleLabelDefaults = {
+      fi: "Sulje viesti",
+      sv: "Stäng meddelandet",
+      en: "Close the message",
+    };
+    /**
+     * Adds accessible label for the dismissible alert close button.
+     * @default {fi: "Sulje viesti", sv: "Stäng meddelandet", en: "Close the message"}
+     */
+    this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
+    /**
+     * Enable or disabled announcements by assistive technologies.
+     */
+    this.announcements = true;
+    /**
+     * Icon to display to the left of the content.
+     */
+    this.icon = "";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Controls the padding of the component.
+     */
+    this.padding = "auto";
+    /**
+     * Style variation of the alert.
+     */
+    this.variation = "default";
+    /**
+     * Should a button be rendered to dismiss the alert?
+     */
+    this.dismissible = false;
+    this.handleDismiss = (ev) => {
+      this.isDismissed = true;
+      this.duetDismiss.emit({
+        component: "duet-alert",
+        originalEvent: ev,
+      });
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  componentDidLoad() {
+    if (this.autoDismiss) {
+      this.timeoutID = setTimeout(() => this.handleDismiss(), this.autoDismiss);
+    }
+  }
+  disconnectedCallback() {
+    if (this.timeoutID) {
+      clearTimeout(this.timeoutID);
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const closeColor = this.theme === "turva" ? "secondary-turva" : "secondary";
+    const role = this.variation === "danger" || this.variation === "warning" ? "alert" : "status";
+    return (h(Host, { class: { "duet-theme-turva": this.theme === "turva", "duet-alert-is-dismissed": this.isDismissed }, role: this.announcements ? role : undefined }, h("div", { class: {
+        "duet-alert": true,
+        "duet-alert-has-icon": !!this.icon,
+        "duet-alert-is-dismissible": this.dismissible,
+        "duet-p-0": this.padding === "none",
+        "duet-m-0": this.margin === "none",
+        [this.variation]: true,
+        "duet-theme-turva": this.theme === "turva",
+      } }, h("div", { class: "duet-alert-container" }, this.icon && (h("div", { class: "duet-alert-icon" }, h("duet-icon", { size: "auto", name: this.icon, color: "currentColor" }))), h("span", { id: this.descriptiveId }, h("slot", null))), this.dismissible && (h("div", { class: "duet-alert-dismiss" }, h("duet-button", { variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true }))))));
+  }
+  static get style() { return duetAlertCss; }
+}, [1, "duet-alert", {
+    "theme": [1025],
+    "accessibleLabelDefaults": [1, "accessible-label-default"],
+    "accessibleLabel": [1, "accessible-label"],
+    "announcements": [4],
+    "icon": [1],
+    "autoDismiss": [2, "auto-dismiss"],
+    "margin": [1],
+    "padding": [1],
+    "variation": [1],
+    "dismissible": [4],
+    "isDismissed": [32],
+    "timeoutID": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-alert", "duet-button", "duet-icon", "duet-spinner", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-alert":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetAlert);
+      }
+      break;
+    case "duet-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DuetAlert as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-5a9d75e1.js

@@ -0,0 +1,55 @@
+/*!
+ * Built with Duet Design System
+ */
+function isObject(maybeObj) {
+  return Object.prototype.toString.call(maybeObj) === "[object Object]";
+}
+const parsePossibleJSON = (maybeJSON) => {
+  if (Array.isArray(maybeJSON) || isObject(maybeJSON)) {
+    return maybeJSON;
+  }
+  if (typeof maybeJSON === "string") {
+    try {
+      return JSON.parse(maybeJSON);
+    }
+    catch (e) {
+      console.warn(e);
+      try {
+        return JSON.parse(convertHtmlQuotes(maybeJSON));
+      }
+      catch (e) {
+        console.warn(e);
+      }
+    }
+  }
+  // undefined is not a type in JSON,
+  // so we use it here to signal invalid input
+  return undefined;
+};
+/**
+ * Format string, via simplistic sprintf equivalent
+ * @example String.format('{0} is super, but {1} is best! {{0}}', 'Duet', 'Coffee'); -> "Duet is super, but Coffee ist best! {0}"
+ *
+ */
+// @ts-ignore
+if (!String.format) {
+  // @ts-ignore
+  String.format = function (format) {
+    var args = Array.prototype.slice.call(arguments, 1);
+    return format.replace(/\{\{|\}\}|\{(\d+)\}/g, function (curlyBrack, index) {
+      return curlyBrack == "{{" ? "{" : curlyBrack == "}}" ? "}" : args[index];
+    });
+  };
+}
+const MATCH_DISALLOWED_CHARS = /[^a-z0-9áéíóúñüöäå \.,_-]/gim;
+function sanitizeString(string) {
+  return string.replace(MATCH_DISALLOWED_CHARS, "").trim();
+}
+const convertHtmlQuotes = string => {
+  if (typeof string === "string") {
+    return string.replace(/"/g, '"').replace(/'/g, '"');
+  }
+  return string;
+};
+
+export { convertHtmlQuotes as c, parsePossibleJSON as p, sanitizeString as s };

package/lib/dist-custom-elements/p-692cc270.js

@@ -0,0 +1,125 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-1ad6b04e.js';
+import { d as defineCustomElement$1 } from './p-53a0c93d.js';
+
+const DuetUploadAriaStatus = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * State() variables
+     */
+    this.statusMessage = null;
+    /**
+     * Status labels used in the component
+     */
+    this.statusMessageLabel = null;
+    /**
+     * Adds accessible label that is read aloud
+     */
+    this.accessibleAriaLive = "polite";
+    /**
+     * valid file amount
+     */
+    this.valid = undefined;
+    /**
+     * total files
+     */
+    this.total = undefined;
+    /**
+     * invalid file amount
+     */
+    this.invalid = undefined;
+    /**
+     * valid file amount
+     */
+    this.inprogress = undefined;
+    /**
+     * Private functions
+     */
+    this.replacePlaceHolders = (statusString) => {
+      const addFiles = (amount) => {
+        return amount > 1 ? `${amount} ${this.statusMessageLabel.files}` : `${amount} ${this.statusMessageLabel.file}`;
+      };
+      return statusString
+        .replace("{filesUploaded}", addFiles(this.valid))
+        .replace("{filesInProgress}", addFiles(this.inprogress))
+        .replace("{filesTotal}", addFiles(this.total))
+        .replace("{filesWithErrors}", addFiles(this.invalid));
+    };
+    this.getStatusMessage = () => {
+      const { done, inProgress, doneWithErrors, inProgressWithErrors } = this.statusMessageLabel;
+      const hasErrors = this.invalid > 0;
+      const isInProgress = this.inprogress > 0;
+      const isInProgressWithErrors = this.inprogress > 0 && hasErrors;
+      const isDone = this.valid === this.total && !isInProgress && !hasErrors;
+      const isDoneWithErrors = this.valid + this.invalid === this.total && !isInProgress;
+      if (isDone) {
+        this.statusMessage = this.replacePlaceHolders(done);
+        return;
+      }
+      else if (isInProgressWithErrors) {
+        this.statusMessage = this.replacePlaceHolders(inProgressWithErrors);
+        return;
+      }
+      else if (isInProgress) {
+        this.statusMessage = this.replacePlaceHolders(inProgress);
+        return;
+      }
+      else if (isDoneWithErrors) {
+        this.statusMessage = this.replacePlaceHolders(doneWithErrors);
+        return;
+      }
+      return;
+    };
+  }
+  watchHandler(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this.getStatusMessage();
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", null, this.statusMessage)));
+  }
+  static get watchers() { return {
+    "valid": ["watchHandler"],
+    "invalid": ["watchHandler"],
+    "inprogress": ["watchHandler"],
+    "total": ["watchHandler"]
+  }; }
+}, [1, "duet-upload-aria-status", {
+    "statusMessageLabel": [16],
+    "accessibleAriaLive": [1, "accessible-aria-live"],
+    "valid": [2],
+    "total": [2],
+    "invalid": [2],
+    "inprogress": [2],
+    "statusMessage": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-upload-aria-status", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-upload-aria-status":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetUploadAriaStatus);
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DuetUploadAriaStatus as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-6cae0682.js

@@ -0,0 +1,75 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-1ad6b04e.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { g as getColorByName } from './p-86faf728.js';
+
+const duetSpinnerCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute;top:50%;left:50%;z-index:800;max-width:100%}:host(.duet-theme-default) .duet-spinner{color:#0077b3 !important}:host(.duet-theme-turva) .duet-spinner{color:#c60c30 !important}:host(.duet-custom-color){color:inherit}*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-spinner{-webkit-user-select:none;user-select:none;position:absolute;top:50%;left:50%;z-index:800;width:24px;height:24px;color:#0077b3;border:2px solid transparent;border-left:2px solid currentColor;border-radius:50%;transform:translateZ(0) translateX(-50%) translateY(-50%);transform-origin:0% 0%;animation:duetRotate 0.6s linear infinite}.duet-spinner::after{position:absolute;top:50%;left:50%;z-index:200;box-sizing:content-box;width:100%;height:100%;overflow:hidden;content:\"\";border:2px solid currentColor;border-radius:50%;opacity:0.3;transform:translateZ(0) translateX(-50%) translateY(-50%);transform-origin:0% 0%}.duet-spinner.medium{width:36px;height:36px;border-width:4px}.duet-spinner.medium::after{border-width:4px}.duet-spinner.large{width:72px;height:72px;border-width:8px}.duet-spinner.large::after{border-width:8px}@keyframes duetRotate{0%{transform:translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%)}100%{transform:translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%)}}";
+
+const DuetSpinner = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Color of the spinner, as a design token entered in camelCase or kebab-case.
+     * Example: "color-primary". This property can also be set to "currentColor"
+     * which forces the icon to use the CSS text color of parent element instead.
+     * Useful when you want to control the color in stylesheet instead.
+     */
+    this.color = "gray-lightest";
+    /**
+     * Size variation of the spinner.
+     */
+    this.size = "small";
+    /**
+     * Theme of the spinner. When used this will override the color setting and
+     * use "primary" or "primary-turva" as the color depending on which theme
+     * is chosen.
+     */
+    this.theme = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color);
+    return (h(Host, { class: {
+        "duet-custom-color": this.color !== "currentColor" && this.theme !== "turva" && this.theme !== "default",
+        "duet-theme-turva": this.theme === "turva" && this.color !== "currentColor",
+        "duet-theme-default": this.theme === "default" && this.color !== "currentColor",
+      } }, h("div", { class: {
+        "duet-spinner": true,
+        [this.size]: true,
+      }, style: { color }, "aria-label": this.accessibleLabel })));
+  }
+  static get style() { return duetSpinnerCss; }
+}, [1, "duet-spinner", {
+    "accessibleLabel": [1, "accessible-label"],
+    "color": [1],
+    "size": [1],
+    "theme": [1025]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-spinner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetSpinner);
+      }
+      break;
+  } });
+}
+
+export { DuetSpinner as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-704245ef.js

@@ -0,0 +1,9 @@
+/*!
+ * Built with Duet Design System
+ */
+function isInternetExplorer() {
+  const ua = navigator.userAgent || navigator.vendor;
+  return "documentMode" in document || /Edge/.test(ua);
+}
+
+export { isInternetExplorer as i };

package/lib/dist-custom-elements/p-76f00bd5.js

@@ -0,0 +1,10 @@
+/*!
+ * Built with Duet Design System
+ */
+const DuetStringsExternalDefaults = {
+  fi: "Avautuu uuteen ikkunaan",
+  sv: "Öppnas i nytt fönster",
+  en: "Opens in a new window",
+};
+
+export { DuetStringsExternalDefaults as D };

package/lib/dist-custom-elements/p-7a003d73.js

@@ -0,0 +1,37 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-1ad6b04e.js';
+
+const duetListItemCss = "*,*::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:flex;flex-flow:row;width:100%;overflow:visible;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;font-variant-numeric:tabular-nums;line-height:1.25;color:#00294d}@media (max-width: 35.9375em){:host{flex-wrap:wrap}}:host dt,:host dd{margin-inline-start:0;-webkit-hyphens:auto;hyphens:auto;text-align:left;word-break:break-all;word-break:break-word}@media (max-width: 35.9375em){:host dt,:host dd{flex:inherit;flex-basis:100% !important;width:100%;padding-bottom:4px !important}}:host dt{padding:16px !important;font-weight:600}@media (max-width: 35.9375em){:host dt{padding-bottom:4px !important}}.duet-theme-turva :host dt{font-weight:700}:host dd{padding:16px !important;margin-left:auto;text-align:left}@media (max-width: 35.9375em){:host dd{padding-top:0 !important}}:host(:not(.duet-list-striped)) dt{padding:8px !important;padding-left:0 !important}@media (max-width: 35.9375em){:host(:not(.duet-list-striped)) dt{padding-bottom:4px !important}}:host(:not(.duet-list-striped)) dd{padding:8px !important;padding-left:0 !important}@media (max-width: 35.9375em){:host(:not(.duet-list-striped)) dd{padding-top:0 !important}}: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:#171c3a}:host(.duet-list-striped:nth-child(odd)) dt,:host(.duet-list-striped:nth-child(odd)) dd{background:#f5f8fa}:host(.duet-list-striped.duet-theme-turva:nth-child(odd)) dt,:host(.duet-list-striped.duet-theme-turva:nth-child(odd)) dd{background:#f5f5f7}:host(.duet-list-width-30) dt{flex-basis:33%}:host(.duet-list-width-30) dd{flex-basis:67%}:host(.duet-list-width-50) dt{flex-basis:47%}:host(.duet-list-width-50) dd{flex-basis:53%}:host(.duet-list-width-70) dt{flex-basis:65%}:host(.duet-list-width-70) dd{flex-basis:35%}:host(.duet-p-0) dt,:host(.duet-p-0) dd{padding-top:0 !important;padding-bottom:4px !important}@media (max-width: 35.9375em){:host(.duet-list-mobile-center) dt,:host(.duet-list-mobile-center) dd{text-align:center}}@media (max-width: 61.9375em){:host(.duet-list-breakpoint-large){flex-wrap:wrap}:host(.duet-list-breakpoint-large) dt,:host(.duet-list-breakpoint-large) dd{flex:inherit;flex-basis:100% !important;width:100%;padding-bottom:4px !important}:host(.duet-list-breakpoint-large) dd{padding-top:0 !important}}:host(.duet-list-breakpoint-large.duet-list-striped) dd{padding-bottom:16px !important}@media (max-width: 61.9375em){:host(.duet-list-breakpoint-large.duet-list-mobile-center) dt,:host(.duet-list-breakpoint-large.duet-list-mobile-center) dd{text-align:center !important}}";
+
+const DuetListItem = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null, h("dt", null, h("slot", { name: "label" })), h("dd", null, h("slot", { name: "value" }))));
+  }
+  static get style() { return duetListItemCss; }
+}, [1, "duet-list-item"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-list-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetListItem);
+      }
+      break;
+  } });
+}
+
+export { DuetListItem as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-7f5ad01d.js

@@ -0,0 +1,64 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-1ad6b04e.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+
+const duetBadgeCss = "*,*::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-right:4px !important;margin-bottom:2px !important;display:inline-block;width:auto;vertical-align:middle}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-badge{width:100%;padding:4.4444444444px 12px 5.4444444444px;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:0.75rem;font-style:normal;font-weight:600;line-height:1.25;color:#00294d;text-align:center;word-break:break-word;vertical-align:middle;background:#e6f1f7;border-radius:20rem}.duet-badge.duet-p-0{padding:0 !important}.duet-badge.duet-m-0{margin:0 !important}.duet-badge.duet-theme-turva{padding:5.4444444444px 12px 4.4444444444px;font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:700;color:#171c3a;background:#e8e8eb}.duet-badge.warning{background:#fef3df}.duet-badge.warning.duet-theme-turva{background:#fef1db}.duet-badge.danger{background:#fce9ef}.duet-badge.danger.duet-theme-turva{background:#fceae7}.duet-badge.success{background:#e6f3ef}.duet-badge.success.duet-theme-turva{background:#e6f3ed}";
+
+const DuetBadge = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Theme of the badge.
+     */
+    this.theme = "";
+    /**
+     * Style variation of the alert.
+     */
+    this.variation = "default";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one of the class.
+   */
+  render() {
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("div", { class: {
+        "duet-badge": true,
+        [this.variation]: true,
+        "duet-theme-turva": this.theme === "turva",
+      } }, h("slot", null))));
+  }
+  static get style() { return duetBadgeCss; }
+}, [1, "duet-badge", {
+    "theme": [1025],
+    "variation": [1],
+    "margin": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-badge"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-badge":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetBadge);
+      }
+      break;
+  } });
+}
+
+export { DuetBadge as D, defineCustomElement as d };

package/lib/{esm/token-utils-df78f4d8.js → dist-custom-elements/p-86faf728.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { t as tokens } from './tokens.module-f4572ed7.js';
+import { t as tokens } from './p-266411cf.js';
 
 const allowedThemes = ["turva"];
 function isDashCase(str) {