@duetds/components 6.0.2 → 6.0.4

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

@@ -0,0 +1,275 @@
+/*!
+ * 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';
+import { p as parsePossibleJSON } from './p-5a9d75e1.js';
+import { d as defineCustomElement$5 } from './p-e5c8a58f.js';
+import { d as defineCustomElement$4 } from './p-7739604d.js';
+import { d as defineCustomElement$3 } from './p-16d518fd.js';
+import { d as defineCustomElement$2 } from './p-88511d7a.js';
+import { d as defineCustomElement$1 } from './p-b08e57cf.js';
+
+const duetSelectCss = "@charset \"UTF-8\";*.sc-duet-select,*.sc-duet-select::after,*.sc-duet-select::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-select-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;display:inline-flex;width:100%;max-width:100%;vertical-align:bottom}.sc-duet-select-h:last-child,.sc-duet-select-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-select-h{width:calc(50% - 16px - 3px)}.duet-expand.sc-duet-select-h{width:100% !important}}.duet-select-variation-tiny.sc-duet-select-h{position:relative;top:-2px;width:72px;margin:0 !important;vertical-align:baseline}.duet-m-0.sc-duet-select-h{margin:0 !important}duet-tooltip.sc-duet-select{position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip.sc-duet-select{position:relative;top:4px;right:auto}}.duet-select-placeholder.sc-duet-select{position:absolute;top:-9px;left:9px;z-index:200;display:block;width:auto;max-width:60%;padding:0 0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:white}.duet-select-container.sc-duet-select{position:relative;width:100%}.duet-select-container.duet-select-variation-tiny.sc-duet-select{width:72px}.duet-select-wrapper.sc-duet-select{position:relative;width:100%;padding:15px 14px !important;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}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-select-variation-tiny.sc-duet-select .duet-select-wrapper.sc-duet-select{width:81px;padding:0 !important}.duet-select-wrapper.sc-duet-select::after{content:\"  \"}.duet-select-wrapper.sc-duet-select select.sc-duet-select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:200;width:100%;height:100%;padding:0;margin:0;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;cursor:pointer;border:0;outline:none;opacity:0}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{border-color:#909599;box-shadow:0 0 0 1px #909599}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{border-color:#747475;box-shadow:0 0 0 1px #747475}.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #e02a0d}.duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{border-color:#0077b3;outline:0;box-shadow:0 0 0 1px #0077b3;transition:none}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{border-color:#171c3a;box-shadow:0 0 0 1px #171c3a}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#171c3a}.duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#0077b3}.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #e02a0d}.duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select{cursor:default !important}.duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select+.duet-select.sc-duet-select{color:#00294d !important;cursor:default !important;background:#f5f8fa !important;border-color:#f5f8fa !important;box-shadow:none !important;opacity:1 !important;-webkit-text-fill-color:#00294d !important}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select+.duet-select.sc-duet-select{color:#171c3a !important;background:#f5f5f7 !important;border-color:#f5f5f7 !important;-webkit-text-fill-color:#171c3a !important}.duet-select.sc-duet-select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;display:block;width:100%;min-width:8rem;padding:12px 14px !important;padding-right:48px !important;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:1rem;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.5;color:#00294d;text-align:left;text-overflow:ellipsis;white-space:nowrap;background:white;border:1px solid #909599;border-radius:4px;transition:150ms ease}.has-error.sc-duet-select .duet-select.sc-duet-select{border-color:#de2362 !important}.has-error.sc-duet-select .duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#de2362 !important}.duet-theme-turva.has-error.sc-duet-select .duet-select.sc-duet-select{border-color:#e02a0d !important}.duet-theme-turva.has-error.sc-duet-select .duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#e02a0d !important}.duet-theme-turva.sc-duet-select .duet-select.sc-duet-select{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:#747475}.duet-select.sc-duet-select svg.sc-duet-select{position:absolute;top:50%;right:16px;z-index:200;width:20px;height:20px;color:#00294d;pointer-events:none;transform:translateY(-50%)}.duet-theme-turva.sc-duet-select .duet-select.sc-duet-select svg.sc-duet-select{color:#171c3a}.duet-select-variation-tiny.sc-duet-select .duet-select.sc-duet-select{width:72px;min-width:inherit;padding:0 !important;margin-bottom:-4px;overflow:visible;font-weight:600;text-align:center}.duet-select-variation-tiny.sc-duet-select .duet-select.sc-duet-select duet-icon.sc-duet-select{padding-left:10px}.duet-select-help.sc-duet-select{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:0.875rem;font-weight:400;line-height:1.25;color:#657787;border-radius:4px}.duet-select-help.sc-duet-select span.sc-duet-select{display:block;margin-top:8px}.duet-theme-turva.sc-duet-select .duet-select-help.sc-duet-select{color:#747475}.has-error.sc-duet-select .duet-select-help.sc-duet-select{color:#de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-help.sc-duet-select{color:#e02a0d}.duet-label-hidden.sc-duet-select duet-label.sc-duet-select{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+
+function isOptionGroup(item) {
+  return "options" in item;
+}
+function findOptionByValue(items, value) {
+  for (var i = 0; i < items.length; i++) {
+    let item = items[i];
+    if (isOptionGroup(item)) {
+      item = findOptionByValue(item.options, value);
+    }
+    if (item && item.value === value) {
+      return item;
+    }
+  }
+}
+const DuetSelect = /*@__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.selectId = createID("DuetSelect");
+    this.errorId = createID("DuetError");
+    this.labelId = createID("DuetLabel");
+    this.topCaptionId = createID("DuetCaptionTop");
+    this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
+    /**
+     * State() variables
+     * Inlined decorator, alphabetical order.
+     */
+    this.processedItems = null;
+    /**
+     * Variation of dropdown. -tiny is used for small numbers / tiny option ranges.
+     */
+    this.variation = "default";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Display the select in error state along with an error message.
+     */
+    this.error = "";
+    /**
+     * Expands the input to fill 100% of the container width.
+     */
+    this.expand = false;
+    /**
+     * Theme of the select.
+     */
+    this.theme = "";
+    /**
+     * Visually hide the label, but still show it to screen readers.
+     */
+    this.labelHidden = false;
+    /**
+     * Hint text to display.
+     */
+    this.placeholder = "";
+    /**
+     * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),
+     * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
+     */
+    this.echoPlaceholder = false;
+    /**
+     * Makes the select component disabled. This prevents users from being able
+     * to interact with the select, and conveys its inactive state to assistive
+     * technologies.
+     */
+    this.disabled = false;
+    /**
+     * Set whether the input is required or not. Please note that this is necessary 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;
+    /**
+     * Label for the select.
+     */
+    this.label = "label";
+    /**
+     * Tooltip to display next to the label of the input.
+     */
+    this.tooltip = "";
+    /**
+     * With direction setting you can force the tooltip to always open towards left
+     * or right instead of automatically determining the direction.
+     */
+    this.tooltipDirection = "auto";
+    /**
+     * Component event handling.
+     */
+    this.onClick = (ev) => {
+      ev.stopPropagation();
+    };
+    this.onChange = () => {
+      this.value = this.nativeSelect.value;
+      this.duetChange.emit({
+        value: this.value,
+        component: "duet-select",
+      });
+    };
+    this.onBlur = (ev) => {
+      this.duetBlur.emit({
+        originalEvent: ev,
+        value: this.value,
+        component: "duet-select",
+      });
+    };
+    this.onFocus = (ev) => {
+      this.duetFocus.emit({
+        originalEvent: ev,
+        value: this.value,
+        component: "duet-select",
+      });
+    };
+  }
+  valueChanged() {
+    if (this.nativeSelect) {
+      this.nativeSelect.value = this.value;
+    }
+    this.isCaptionVisible = !!this.caption;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.isCaptionVisible = !!this.caption;
+    this.refresh();
+  }
+  /**
+   * Sets focus on the specified `duet-select`. Use this method instead of the global
+   * `select.focus()`.
+   */
+  async setFocus(options) {
+    if (this.nativeSelect) {
+      this.nativeSelect.focus(options);
+    }
+  }
+  /**
+   * Local methods.
+   */
+  async refresh() {
+    this.processedItems = parsePossibleJSON(this.items);
+  }
+  getSelectedItemLabel() {
+    let item;
+    if (this.processedItems) {
+      item = findOptionByValue(this.processedItems, this.value);
+    }
+    return item ? item.label : this.placeholder || "";
+  }
+  renderOption(option) {
+    return (h("option", { value: option.value, key: option.value, selected: this.value === option.value, disabled: option.disabled }, option.label));
+  }
+  renderOptionGroup(group) {
+    return (h("optgroup", { key: group.label, label: group.label, disabled: group.disabled }, group.options.map(option => this.renderOption(option))));
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const identifier = this.identifier || this.selectId;
+    return (h(Host, { onClick: this.onClick, class: {
+        "duet-m-0": this.margin === "none",
+        "duet-expand": this.expand,
+        "duet-select-variation-tiny": this.variation === "tiny",
+      } }, h("div", { class: {
+        "duet-select-container": true,
+        "duet-label-hidden": this.labelHidden,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-select-variation-tiny": this.variation === "tiny",
+        "duet-input-top-caption-shown": this.isCaptionVisible,
+        "has-error": !!this.error,
+      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required, "aria-describedby": this.accessibleDescribedBy }, this.placeholder && (h("option", { disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
+      return isOptionGroup(item) ? this.renderOptionGroup(item) : this.renderOption(item);
+    }))), h("div", { class: {
+        "duet-select": true,
+        "duet-select-variation-tiny": this.variation === "tiny",
+      }, "aria-hidden": "true" }, h("span", { key: this.value }, this.getSelectedItemLabel()), this.variation !== "tiny" && (h("svg", { role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), this.variation === "tiny" && (h("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xx-small" })))), h("span", { class: "duet-select-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "value": ["valueChanged"],
+    "items": ["refresh"]
+  }; }
+  static get style() { return duetSelectCss; }
+}, [2, "duet-select", {
+    "variation": [1],
+    "accessibleActiveDescendant": [1, "accessible-active-descendant"],
+    "accessibleDescribedBy": [1, "accessible-described-by"],
+    "margin": [1],
+    "accessibleControls": [1, "accessible-controls"],
+    "accessibleOwns": [1, "accessible-owns"],
+    "error": [1],
+    "expand": [4],
+    "value": [1537],
+    "theme": [1025],
+    "labelHidden": [4, "label-hidden"],
+    "identifier": [1],
+    "name": [1],
+    "placeholder": [1],
+    "caption": [1],
+    "echoPlaceholder": [4, "echo-placeholder"],
+    "items": [1],
+    "disabled": [516],
+    "required": [4],
+    "label": [1],
+    "role": [1],
+    "tooltip": [1],
+    "tooltipDirection": [1, "tooltip-direction"],
+    "processedItems": [32],
+    "setFocus": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-select", "duet-caption", "duet-icon", "duet-label", "duet-tooltip", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-select":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetSelect);
+      }
+      break;
+    case "duet-caption":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "duet-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DuetSelect 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-7739604d.js

@@ -0,0 +1,214 @@
+/*!
+ * Built with Duet Design System
+ */
+import { E as Env, p as proxyCustomElement, H, h, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { g as getColorByName } from './p-86faf728.js';
+
+const cleanupSvg = (svgContent) => {
+  if (typeof document === "undefined" || !svgContent) {
+    return;
+  }
+  const div = document.createElement("div");
+  div.innerHTML = svgContent;
+  // setup this way to ensure it works on our buddy IE
+  for (let i = div.childNodes.length - 1; i >= 0; i--) {
+    const child = div.childNodes[i];
+    if (child.nodeName.toLowerCase() !== "svg") {
+      div.removeChild(div.childNodes[i]);
+    }
+  }
+  return div.firstElementChild;
+};
+const isValid = (elm) => {
+  if (elm.nodeName.toLowerCase() === "script") {
+    return false;
+  }
+  for (let i = 0; i < elm.attributes.length; i++) {
+    const attribute = elm.attributes[i];
+    if (attribute.name.toLowerCase().indexOf("on") === 0) {
+      return false;
+    }
+  }
+  if (elm.children) {
+    for (let i = 0; i < elm.children.length; i++) {
+      if (!isValid(elm.children[i])) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
+const buildIconUrl = (iconName) => {
+  // under normal operations the Icons should always be loaded from the CDN
+  {
+    return `${Env.cdnURIProd}/icons/${Env.duetIconVersion}/lib/assets/${iconName}.svg`;
+  }
+};
+const iconCache = {};
+function fetchIconByUrl(url) {
+  if (iconCache[url]) {
+    return iconCache[url];
+  }
+  // we create a function that covers all the fetching, cleanup, validation etc,
+  // this way we can perform that work just once, and then return the same promise in future.
+  async function doFetch() {
+    const res = await fetch(url);
+    if (!res.ok) {
+      throw new Error(`SVG request failed: ${res.status} ${res.statusText}`);
+    }
+    const responseText = await res.text();
+    const svgElement = cleanupSvg(responseText);
+    if (!isValid(svgElement)) {
+      throw new Error("SVG validation failed");
+    }
+    // OuterHTML does not unfortunately work here with IE11
+    // was previously: resolve(svgElement.outerHTML)
+    const div = document.createElement("div");
+    div.appendChild(svgElement);
+    return div.innerHTML;
+  }
+  // we do not `await` the fetch, as we only care about initiating the work,
+  // it's the responsibility of the calling code to wait for the response.
+  const req = doFetch();
+  // cache for the repeat requests
+  return (iconCache[url] = req);
+}
+
+const duetIconCss = "*,*::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:16px !important;display:inline-block;width:auto;max-width:100%;color:inherit;-webkit-tap-highlight-color:transparent}@media (max-width: 35.9375em){:host(.duet-icon-has-outline){margin-bottom:0 !important}}@media (max-width: 35.9375em){:host(.duet-icon-has-background){margin-bottom:0 !important}}:host(.duet-m-0){margin:0 !important}@media (max-width: 35.9375em){:host(.duet-m-0){margin:0 !important}}.duet-icon{-webkit-user-select:none;user-select:none;width:100%;height:100%;transform-origin:top center}.duet-icon.duet-icon-has-outline{padding:12px;border-style:solid;border-width:1px;border-radius:50%}@media (max-width: 35.9375em){.duet-icon.duet-icon-has-outline{outline:1px solid transparent;transform:scale(0.8)}}.duet-icon.duet-icon-has-background{padding:16px;color:white;border-radius:50%}@media (max-width: 35.9375em){.duet-icon.duet-icon-has-background{outline:1px solid transparent;transform:scale(0.8)}}.duet-icon.duet-icon-has-background.duet-theme-turva,.duet-icon.duet-icon-has-background.duet-theme-default{color:white}.duet-icon.duet-icon-has-background.xxx-small .duet-icon-svg,.duet-icon.duet-icon-has-outline.xxx-small .duet-icon-svg{width:10px;height:10px}.duet-icon.duet-icon-has-background.xx-small .duet-icon-svg,.duet-icon.duet-icon-has-outline.xx-small .duet-icon-svg{width:16px;height:16px}@media (max-width: 35.9375em){.duet-icon.duet-icon-not-responsive{transform:scale(1) !important}}.duet-icon.duet-theme-default{color:#0077b3}.duet-icon.duet-theme-turva{color:#c60c30}.duet-icon.auto .duet-icon-svg{width:100%;height:100%}.duet-icon.xxx-small .duet-icon-svg{width:7px;height:7px}.duet-icon.duet-icon-has-background.xxx-small{padding:6px}.duet-icon.duet-icon-has-outline.xxx-small{padding:4px}.duet-icon.xx-small .duet-icon-svg{width:10px;height:10px}.duet-icon.duet-icon-has-background.xx-small{padding:8px}.duet-icon.duet-icon-has-outline.xx-small{padding:7px}.duet-icon.x-small .duet-icon-svg{width:16px;height:16px}.duet-icon.duet-icon-has-outline.x-small{padding:10px}.duet-icon.duet-icon-has-background.x-small{padding:12px}.duet-icon.small .duet-icon-svg{width:20px;height:20px}.duet-icon.duet-icon-has-background.small{padding:14px}.duet-icon.large .duet-icon-svg{width:30px;height:30px}.duet-icon.x-large .duet-icon-svg{width:36px;height:36px}.duet-icon.xx-large .duet-icon-svg{width:48px;height:48px}.duet-icon.xxx-large .duet-icon-svg{width:48px;height:48px}@media (min-width: 48em){.duet-icon.xxx-large .duet-icon-svg{width:72px;height:72px}}.duet-icon .duet-icon-svg{display:block;width:24px;min-width:100%;height:24px;font-size:0}.duet-icon svg{width:100%;min-width:100%;fill:currentColor}";
+
+const DuetIcon = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Theme of the icon. This setting will be overridden when you set the color
+     * property
+     */
+    this.theme = "";
+    /**
+     * Icon name from Duet to display.
+     */
+    this.name = "action-add";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Whether the icon changes its size responsively or not.
+     */
+    this.responsive = true;
+    /**
+     * Custom color to be used for the icon, 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 = "";
+    /**
+     * Custom color to be used for a circular background, as a design token entered
+     * in camelCase or kebab-case. Using this option the icon will always be resized
+     * to $size-icon-medium on mobile viewports. Example: "color-primary".
+     */
+    this.background = "";
+    /**
+     * Icon size. Entered as one of the icon size design tokens.
+     */
+    this.size = "medium";
+    /**
+     * Custom color to be used for a circular border and icon outline, as a design
+     * token entered in camelCase or kebab-case. Using this option the icon will
+     * always be resized to $size-icon-medium on mobile viewports.
+     * Example: "color-primary".
+     */
+    this.outline = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    if (this.src && this.icon) {
+      console.warn("[DUET COMPONENTS]: <duet-icon> should have either have src or icon attributes, but not both. icon attribute will take precedence", "icon:", this.icon, "src:", this.src);
+    }
+    this.loadIcon();
+  }
+  async loadIcon() {
+    // static icon known at build-time, so we can set it synchronously
+    if (this.icon) {
+      this.svgContent = this.icon;
+      return;
+    }
+    // dynamically load icon from url
+    const src = this.src ? this.src : buildIconUrl(this.name);
+    try {
+      this.svgContent = await fetchIconByUrl(src);
+    }
+    catch (e) {
+      console.warn(`[DUET COMPONENTS]: <duet-icon> could not load SVG from URL: ${src}.`, e);
+    }
+  }
+  /**
+   * render() function.
+   * Always the last one in the class.
+   */
+  render() {
+    const color = this.color === "currentColor"
+      ? "currentColor"
+      : getColorByName(this.color, this.theme) || getColorByName(this.outline, this.theme);
+    const styles = {
+      color,
+      background: getColorByName(this.background, this.theme),
+      "border-color": getColorByName(this.outline, this.theme),
+    };
+    return (h(Host, { class: {
+        "duet-m-0": this.margin === "none",
+        "duet-icon-has-outline": !!this.outline,
+        "duet-icon-has-background": !!this.background,
+      } }, h("div", { "aria-hidden": "true", style: styles, class: {
+        "duet-icon": true,
+        [this.size]: true,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-theme-default": this.theme === "default",
+        "duet-icon-has-outline": !!this.outline,
+        "duet-icon-has-background": !!this.background,
+        "duet-icon-not-responsive": !this.responsive,
+      } }, h("span", { "aria-hidden": "true", class: "duet-icon-svg", innerHTML: this.svgContent }))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "src": ["loadIcon"],
+    "icon": ["loadIcon"],
+    "name": ["loadIcon"]
+  }; }
+  static get style() { return duetIconCss; }
+}, [1, "duet-icon", {
+    "theme": [1025],
+    "icon": [1],
+    "src": [1],
+    "name": [1],
+    "margin": [1],
+    "responsive": [4],
+    "color": [513],
+    "background": [1],
+    "size": [1],
+    "outline": [1],
+    "svgContent": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetIcon);
+      }
+      break;
+  } });
+}
+
+export { DuetIcon as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-81c9b244.js

@@ -0,0 +1,65 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-3fc2d124.js';
+
+const duetSpacerCss = ":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:12px;min-width:12px;height:12px}@media (min-width: 36em){:host{width:16px;min-width:16px;height:16px}}:host(.duet-spacer-horizontal){display:inline-block;height:100% !important}:host(.duet-spacer-horizontal.xx-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xx-small){width:4px;min-width:4px}}:host(.duet-spacer-horizontal.x-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.x-small){width:8px;min-width:8px}}:host(.duet-spacer-horizontal.small){width:8px;min-width:8px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.small){width:12px;min-width:12px}}:host(.duet-spacer-horizontal.medium){height:100%}:host(.duet-spacer-horizontal.large){width:16px;min-width:16px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.large){width:20px;min-width:20px}}:host(.duet-spacer-horizontal.x-large){width:20px;min-width:20px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.x-large){width:28px;min-width:28px}}:host(.duet-spacer-horizontal.xx-large){width:28px;min-width:28px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xx-large){width:36px;min-width:36px}}:host(.duet-spacer-horizontal.xxx-large){width:36px;min-width:36px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xxx-large){width:48px;min-width:48px}}:host(.duet-spacer-horizontal.xxxx-large){width:48px;min-width:48px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xxxx-large){width:72px;min-width:72px}}:host(.duet-spacer-vertical.xx-small){width:100%;height:4px;min-height:4px}:host(.duet-spacer-vertical.x-small){width:100%;height:4px;min-height:4px}@media (min-width: 36em){:host(.duet-spacer-vertical.x-small){height:8px;min-height:8px}}:host(.duet-spacer-vertical.small){width:100%;height:8px;min-height:8px}@media (min-width: 36em){:host(.duet-spacer-vertical.small){height:12px;min-height:12px}}:host(.duet-spacer-vertical.medium){width:100%}:host(.duet-spacer-vertical.large){width:100%;height:16px;min-height:16px}@media (min-width: 36em){:host(.duet-spacer-vertical.large){height:20px;min-height:20px}}:host(.duet-spacer-vertical.x-large){width:100%;height:20px;min-height:20px}@media (min-width: 36em){:host(.duet-spacer-vertical.x-large){height:28px;min-height:28px}}:host(.duet-spacer-vertical.xx-large){width:100%;height:28px;min-height:28px}@media (min-width: 36em){:host(.duet-spacer-vertical.xx-large){height:36px;min-height:36px}}:host(.duet-spacer-vertical.xxx-large){width:100%;height:36px;min-height:36px}@media (min-width: 36em){:host(.duet-spacer-vertical.xxx-large){height:48px;min-height:48px}}:host(.duet-spacer-vertical.xxxx-large){width:100%;height:48px;min-height:48px}@media (min-width: 36em){:host(.duet-spacer-vertical.xxxx-large){height:72px;min-height:72px}}:host(.duet-spacer-xx-small){display:none}@media (max-width: 22.5em){:host(.duet-spacer-xx-small){display:block}}:host(.duet-spacer-x-small){display:none}@media (max-width: 35.9375em){:host(.duet-spacer-x-small){display:block}}:host(.duet-spacer-small){display:none}@media (min-width: 36em){:host(.duet-spacer-small){display:block}}:host(.duet-spacer-medium){display:none}@media (min-width: 48em){:host(.duet-spacer-medium){display:block}}:host(.duet-spacer-large){display:none}@media (min-width: 62em){:host(.duet-spacer-large){display:block}}:host(.duet-spacer-x-large){display:none}@media (min-width: 64.0625em){:host(.duet-spacer-x-large){display:block}}:host(.duet-spacer-xx-large){display:none}@media (min-width: 76.25em){:host(.duet-spacer-xx-large){display:block}}";
+
+const DuetSpacer = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Size variation of the spacer. Can be any of the spacing tokens.
+     */
+    this.size = "medium";
+    /**
+     * Direction of the space added.
+     */
+    this.direction = "vertical";
+    /**
+     * Adjusts the breakpoint where the spacer is shown in. The functionality
+     * follows 1:1 the media queries defined in design tokens.
+     */
+    this.breakpoint = "";
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { class: {
+        "duet-spacer": true,
+        "duet-spacer-xx-small": this.breakpoint === "xx-small",
+        "duet-spacer-x-small": this.breakpoint === "x-small",
+        "duet-spacer-small": this.breakpoint === "small",
+        "duet-spacer-medium": this.breakpoint === "medium",
+        "duet-spacer-large": this.breakpoint === "large",
+        "duet-spacer-x-large": this.breakpoint === "x-large",
+        "duet-spacer-xx-large": this.breakpoint === "xx-large",
+        [this.size]: true,
+        [`duet-spacer-${this.direction}`]: true,
+      } }));
+  }
+  static get style() { return duetSpacerCss; }
+}, [1, "duet-spacer", {
+    "size": [1],
+    "direction": [1],
+    "breakpoint": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-spacer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-spacer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetSpacer);
+      }
+      break;
+  } });
+}
+
+export { DuetSpacer 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) {