@duetds/components 6.0.2 → 6.0.4

package/lib/dist-custom-elements/p-0a928609.js

@@ -0,0 +1,241 @@
+/*!
+ * 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 { d as debounce } from './p-0b3f675e.js';
+import { i as isKeyboardClick } from './p-d8549efe.js';
+import { g as getLocaleString } from './p-ede854e1.js';
+import { c as capitalizeFirstLetter, g as getColorByName, s as shadeRGBColor } from './p-86faf728.js';
+import { d as defineCustomElement$2 } from './p-7739604d.js';
+import { d as defineCustomElement$1 } from './p-b08e57cf.js';
+
+const duetActionButtonCss = "*,*::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:inline-block;margin:0 auto}button.duet-action-button{white-space:nowrap}button.duet-action-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:auto !important;padding:0 !important;margin:0 0 0 8px !important;color:#00294d;cursor:pointer;background:#f5f8fa;border-radius:50%;transition:background-color 300ms ease !important}.duet-theme-turva button.duet-action-button{color:#171c3a;background:#f5f5f7}button.duet-action-button duet-icon{display:block}@media (max-width: 35.9375em){button.duet-action-button{width:32px;height:32px}}button.duet-action-button:not(:disabled):hover{background:#e9ecee}.duet-theme-turva button.duet-action-button:not(:disabled):hover{background:#e9e9eb}button.duet-action-button:focus{outline:0;box-shadow:0 0 0 2px #0077b3 !important}.duet-theme-turva button.duet-action-button:focus{box-shadow:0 0 0 2px #171c3a !important}button.duet-action-button:active:focus{background:#dddfe1 !important;box-shadow:none}.duet-theme-turva button.duet-action-button:active:focus{background:#ddddde !important}button.duet-action-button:disabled{color:#909599;cursor:default;background:#f5f8fa;opacity:0.75}.duet-theme-turva button.duet-action-button:disabled{color:#747475;background:#f5f5f7}";
+
+const DuetActionButton = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.duetActionEvent = createEvent(this, "duetActionEvent", 6);
+    this.listId = createID("duet-action-button");
+    this.numbersStore = "";
+    /**
+     * Theme of the pagination.
+     */
+    this.theme = "";
+    /**
+     * Name of the icon to display
+     */
+    this.iconName = "action-arrow-left-small";
+    /**
+     * Color of the icon to display
+     */
+    this.iconColor = "currentColor";
+    /**
+     * Size of the icon
+     */
+    this.iconSize = "xx-small";
+    /**
+     * Name of action being called
+     */
+    this.actionName = "default-action";
+    /**
+     * Name of id of action that was called being called
+     */
+    this.actionId = undefined;
+    /**
+     * Name of id of action that was called being called
+     */
+    this.actionMeta = undefined;
+    /**
+     * Disables the button
+     */
+    this.disabled = false;
+    /**
+     * 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 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 = "";
+    /**
+     * Title of the action button (shows as DOM tooltip when hovering)
+     * if set to true, this will try to add a best-guess title based on action-name
+     * if set to a string the string is used
+     * if set to false nothing is set
+     */
+    this.accessibleTitle = true;
+    /**
+     * Described By id
+     */
+    this.accessibleDescribedBy = undefined;
+    /**
+     * 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;
+    /**
+     * Default accessible labels
+     */
+    this.accessibleLabelsDefaults = {
+      en: {
+        label: "Click to activate action",
+      },
+      fi: {
+        label: "Klikkaa toiminnon aktivointiin",
+      },
+      sv: {
+        label: "Klicka för att aktivera åtgärd",
+      },
+    };
+    /**
+     * Default accessible labels
+     */
+    this.accessibleLabels = getLocaleString(this.accessibleLabelsDefaults);
+    /**
+     * Used to indicate which dom element with ID this element controls
+     */
+    this.accessibleControls = "";
+    /**
+     * Private methods.
+     */
+    //helper to emit relevant page events
+    this.emitPageEvent = debounce(e => {
+      this.duetActionEvent.emit({
+        component: "duet-action-button",
+        originalEvent: e,
+        action: this.actionId,
+        name: this.actionName,
+        meta: this.actionMeta,
+        id: this.listId,
+      });
+    });
+  }
+  //handle a11y keyboard navigation events
+  async onKeyboardDown(e) {
+    if (isKeyboardClick(e)) {
+      this.emitPageEvent(e);
+    }
+  }
+  //return readable title for the action-button
+  getTitle() {
+    let titleString = "";
+    if (typeof this.accessibleTitle === "string") {
+      titleString = this.accessibleTitle;
+    }
+    if (this.accessibleTitle === true) {
+      titleString = capitalizeFirstLetter(`${this.actionName}`);
+    }
+    return titleString;
+  }
+  //set update current when mouse click on page number
+  async onMouseHandler(e) {
+    e.preventDefault();
+    this.duetActionEvent.emit({
+      component: "duet-action-button",
+      originalEvent: e,
+      action: this.actionName,
+      id: this.actionId,
+      meta: this.actionMeta,
+    });
+  }
+  /**
+   * 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, this.theme);
+    const backgroundColor = getColorByName(this.background, this.theme);
+    const backgroundHoverColor = backgroundColor ? shadeRGBColor(backgroundColor, -0.1) : backgroundColor;
+    const backgroundStyles = backgroundColor
+      ? `
+          button.duet-action-button {
+            background: ${backgroundColor} !important;
+          }
+          button.duet-action-button:not(:disabled):hover {
+            background: ${backgroundHoverColor} !important;
+          }
+        `
+      : "";
+    const styles = {
+      color,
+      "border-color": getColorByName(this.iconColor, this.theme),
+      "border-width": "1px",
+      "border-style": "solid",
+    };
+    return (h(Host, { onKeyDown: e => this.onKeyboardDown(e) }, h("style", { innerHTML: backgroundStyles }), h("button", { part: "button", style: styles, disabled: this.disabled, id: this.listId, class: {
+        "duet-action-button": true,
+        "duet-action-button--disabled": this.disabled,
+        [`duet-action-button--${this.theme}`]: this.theme !== "",
+      }, type: "button", onClick: e => this.onMouseHandler(e), "aria-label": this.accessibleLabels.label, "aria-labelledby": this.accessibleLabelledBy, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, "aria-details": this.accessibleDetails, "aria-controls": this.accessibleControls, title: this.getTitle() }, h("duet-icon", { part: "icon", name: this.iconName, color: this.iconColor, margin: "none", size: this.iconSize }), h("duet-visually-hidden", null, h("slot", null)))));
+  }
+  get element() { return this; }
+  static get style() { return duetActionButtonCss; }
+}, [1, "duet-action-button", {
+    "theme": [1025],
+    "iconName": [1, "icon-name"],
+    "iconColor": [1, "icon-color"],
+    "iconSize": [1, "icon-size"],
+    "actionName": [1, "action-name"],
+    "actionId": [1, "action-id"],
+    "actionMeta": [1, "action-meta"],
+    "disabled": [4],
+    "color": [513],
+    "background": [1],
+    "accessibleTitle": [8, "title"],
+    "accessibleDescribedBy": [1, "accessible-described-by"],
+    "accessibleDetails": [1, "accessible-details"],
+    "accessibleLabelledBy": [1, "accessible-labelled-by"],
+    "accessibleDescription": [1, "accessible-description"],
+    "accessibleLabelsDefaults": [16],
+    "accessibleLabels": [16],
+    "accessibleControls": [1, "accessible-controls"],
+    "numbersStore": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-action-button", "duet-icon", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-action-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetActionButton);
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DuetActionButton as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-0b3f675e.js

@@ -0,0 +1,47 @@
+/*!
+ * Built with Duet Design System
+ */
+const debounce = (func, timeout = 250) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(undefined, args);
+    }, timeout);
+  };
+};
+/**
+ * The fieldSorter function is a helper function that takes an array of objects and returns
+ * a function that can be used to sort those objects. The returned sorting function takes two
+ * parameters, which are compared using the field values in the object. If one object's field value is greater than another's, then 1 is returned; if they're equal, 0 is returned; and if one object's field value is less than another's, - 1 will be returned. This allows for easy sorting by multiple fields in any order desired (e.g., first by name ascending and then by age descending).
+ *
+ *
+ * @param fields Sort the table
+ *
+ * @return A function that takes two objects and returns an integer
+ *
+ */
+function fieldSorter(fields) {
+  return function (a, b) {
+    return fields
+      .map(function (o) {
+      let dir = 1;
+      if (o[0] === "-") {
+        dir = -1;
+        o = o.substring(1);
+      }
+      if (a[o] > b[o]) {
+        return dir;
+      }
+      if (a[o] < b[o]) {
+        return -dir;
+      }
+      return 0;
+    })
+      .reduce(function firstNonZeroValue(p, n) {
+      return p ? p : n;
+    }, 0);
+  };
+}
+
+export { debounce as d, fieldSorter as f };

package/lib/{esm/focus-utils-9e76623d.js → dist-custom-elements/p-0b8f16f1.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { h } from './index-0d0e51b6.js';
+import { h } from './p-b9058029.js';
 
 const focusElement = (element) => {
   if ("setFocus" in element) {

package/lib/dist-custom-elements/p-115c79b6.js

@@ -0,0 +1,6 @@
+/*!
+ * Built with Duet Design System
+ */
+var actionArrowDownSmall={"title":"action-arrow-down-small","tags":"action arrow down small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M12 19.5a2.3 2.3 0 0 1-1.729-.78L.46 7.568a1.847 1.847 0 0 1 2.773-2.439l8.579 9.752a.25.25 0 0 0 .376 0l8.579-9.752a1.847 1.847 0 1 1 2.773 2.439l-9.808 11.148A2.31 2.31 0 0 1 12 19.5z\"/></svg>"};
+
+export { actionArrowDownSmall as a };

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

@@ -0,0 +1,57 @@
+/*!
+ * Built with Duet Design System
+ */
+const watchFor = (containerEl, tagName, onChange, changeHandler, options = {
+  childList: true,
+  subtree: true,
+}) => {
+  let mutation;
+  if (typeof MutationObserver !== "undefined") {
+    mutation = new MutationObserver(mutationList => {
+      onChange(changeHandler(mutationList, tagName));
+    });
+    mutation.observe(containerEl, options);
+  }
+  return mutation;
+};
+const watchForOptions = (containerEl, tagName, onChange) => {
+  return watchFor(containerEl, tagName, onChange, getSelectedOption);
+};
+const watchForElement = (containerEl, tagName, onChange) => {
+  return watchFor(containerEl, tagName, onChange, getElementItem, {
+    childList: true,
+    subtree: true,
+  });
+};
+const getElementItem = (mutationList) => {
+  let addedNode = false;
+  let removedNode = false;
+  mutationList.forEach(mut => {
+    if (mut.addedNodes.length) {
+      addedNode = true;
+    }
+    if (mut.removedNodes.length) {
+      removedNode = true;
+    }
+  });
+  return { addedNode, removedNode, mutationList };
+};
+const getSelectedOption = (mutationList, tagName) => {
+  let newOption;
+  mutationList.forEach(mut => {
+    // tslint:disable-next-line: prefer-for-of
+    for (let i = 0; i < mut.addedNodes.length; i++) {
+      newOption = findCheckedOption(mut.addedNodes[i], tagName) || newOption;
+    }
+  });
+  return newOption;
+};
+const findCheckedOption = (el, tagName) => {
+  if (el.nodeType !== 1) {
+    return undefined;
+  }
+  const options = el.tagName === tagName.toUpperCase() ? [el] : Array.from(el.querySelectorAll(tagName));
+  return options.find((o) => o.checked === true);
+};
+
+export { watchForElement as a, findCheckedOption as f, watchForOptions as w };

package/lib/dist-custom-elements/p-14dcd82b.js

@@ -0,0 +1,133 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { w as watchForOptions } from './p-12721178.js';
+
+const duetListCss = "*,*::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-list-component{margin-bottom:16px !important;width:100%}.duet-list-component.duet-p-0{padding:0 !important}.duet-list-component.duet-m-0{margin:0 !important}";
+
+const DuetList = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Theme of the list.
+     */
+    this.theme = "";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Controls the padding of the component.
+     */
+    this.padding = "auto";
+    /**
+     * Adjusts the alignment of the list items on mobile breakpoint.
+     */
+    this.mobile = "left";
+    /**
+     * Switch the breakpoint used to trigger the content stacking. These match to
+     * similar media query tokens: $media-query-small and $media-query-large.
+     */
+    this.breakpoint = "small";
+    /**
+     * Style variation of the list.
+     */
+    this.variation = "default";
+    /**
+     * Set the column width of the first column in percentages.
+     */
+    this.labelWidth = "30";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  async connectedCallback() {
+    const el = this.element;
+    this.mutationO = watchForOptions(el, "duet-list-item", () => {
+      this.updateListItems();
+    });
+    this.updateListItems();
+  }
+  disconnectedCallback() {
+    if (this.mutationO) {
+      this.mutationO.disconnect();
+      this.mutationO = undefined;
+    }
+  }
+  /**
+   * Local methods
+   */
+  toggleClass(elem, className, force) {
+    if (force) {
+      elem.classList.add(className);
+    }
+    else {
+      elem.classList.remove(className);
+    }
+  }
+  async updateListItems() {
+    const items = Array.from(this.element.querySelectorAll("duet-list-item"));
+    items.forEach(item => {
+      // Use classes to apply styles for SSR compatibility
+      item.classList.add(`duet-list-width-${this.labelWidth}`);
+      item.classList.add(`duet-list-variation-${this.variation}`);
+      // If padding is set to 0
+      this.toggleClass(item, "duet-p-0", this.padding === "none");
+      // If text is centered for mobile
+      this.toggleClass(item, "duet-list-mobile-center", this.mobile === "center");
+      // If breakpoint is adjusted
+      this.toggleClass(item, "duet-list-breakpoint-large", this.breakpoint === "large");
+      // Create zebra striping if striped variation is used
+      this.toggleClass(item, "duet-list-striped", this.variation === "striped");
+      // Finally apply turva theme if necessary
+      this.toggleClass(item, "duet-theme-turva", this.theme === "turva");
+    });
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h("dl", { class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", null)));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "theme": ["updateListItems"],
+    "padding": ["updateListItems"],
+    "mobile": ["updateListItems"],
+    "breakpoint": ["updateListItems"],
+    "variation": ["updateListItems"],
+    "labelWidth": ["updateListItems"]
+  }; }
+  static get style() { return duetListCss; }
+}, [1, "duet-list", {
+    "theme": [1025],
+    "margin": [1],
+    "padding": [1],
+    "mobile": [1],
+    "breakpoint": [1],
+    "variation": [1],
+    "labelWidth": [1, "label-width"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetList);
+      }
+      break;
+  } });
+}
+
+export { DuetList as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-16d518fd.js

@@ -0,0 +1,66 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+
+const duetLabelCss = "*.sc-duet-label,*.sc-duet-label::after,*.sc-duet-label::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-label-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;position:relative;z-index:100;display:inline-flex;width:auto;margin-top:8px !important;line-height:1.25;cursor:default}.duet-p-0.sc-duet-label-h{padding:0 !important}.duet-m-0.sc-duet-label-h{margin:0 !important}.duet-m-0.sc-duet-label-h{margin-bottom:0 !important}.duet-small-margin.sc-duet-label-h{margin-top:8px !important;margin-bottom:4px !important}.duet-has-tooltip.sc-duet-label-h{padding-right:48px}@media (min-width: 48em){.duet-has-tooltip.sc-duet-label-h{padding-right:0}}label.sc-duet-label{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;font-weight:600 !important;line-height:1.25;color:#00294d;text-align:left;word-break:break-word}label.sc-duet-label span.sc-duet-label{font-size:1rem;font-weight:600 !important;word-break:break-word}.duet-label-small.sc-duet-label-h label.sc-duet-label{font-size:0.875rem}.duet-label-small.sc-duet-label-h label.sc-duet-label span.sc-duet-label{font-size:0.875rem}.duet-theme-turva.sc-duet-label-h label.sc-duet-label{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}";
+
+const DuetLabel = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Theme of the label.
+     */
+    this.theme = "";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Controls the size of the label.
+     */
+    this.size = "medium";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { class: {
+        "duet-label": true,
+        "duet-label-small": this.size === "small",
+        "duet-theme-turva": this.theme === "turva",
+        "duet-small-margin": this.margin === "small",
+        "duet-m-0": this.margin === "none",
+      } }, h("label", { htmlFor: this.for }, h("span", null, h("slot", null)))));
+  }
+  static get style() { return duetLabelCss; }
+}, [6, "duet-label", {
+    "theme": [1025],
+    "for": [1],
+    "margin": [1],
+    "size": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-label"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-label":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetLabel);
+      }
+      break;
+  } });
+}
+
+export { DuetLabel as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-213ef84c.js

@@ -0,0 +1,87 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { g as getColorByName } from './p-86faf728.js';
+
+const duetParagraphCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}.duet-paragraph{margin-bottom:16px !important;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;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.5;color:#00294d}.duet-paragraph.duet-p-0{padding:0 !important}.duet-paragraph.duet-m-0{margin:0 !important}.duet-paragraph.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}.duet-paragraph.duet-paragraph-small{font-size:0.875rem}.duet-paragraph.duet-paragraph-semi-bold{font-weight:600}.duet-paragraph.duet-paragraph-bold{font-weight:700}.duet-paragraph.duet-m-0{margin:0 !important}.duet-paragraph.intro{font-size:2.7vw;margin-bottom:28px !important;-webkit-hyphens:inherit;hyphens:inherit}@media (max-width: 37.037037037rem){.duet-paragraph.intro{font-size:1rem}}@media (min-width: 46.2962962963rem){.duet-paragraph.intro{font-size:1.25rem}}.duet-paragraph.intro.duet-m-0{margin:0 !important}::slotted(a){font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;font-weight:400;color:#0077b3;text-decoration:underline;transition:300ms ease}::slotted(a).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:#c60c30}::slotted(a):hover{color:#004d80;text-decoration:none}::slotted(a):hover.duet-theme-turva{color:#940925}::slotted(a):active{opacity:0.75;transition:none}";
+
+const DuetParagraph = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Theme of the paragraph.
+     */
+    this.theme = "";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Controls the size of the paragraph.
+     */
+    this.size = "medium";
+    /**
+     * Controls the Font-Weight of the paragraph.
+     */
+    this.weight = undefined;
+    /**
+     * Style variation of the paragraph.
+     */
+    this.variation = "default";
+    /**
+     * Custom color to be used for text, as a design token entered in camelCase or kebab-case.
+     * Example: "color-primary".
+     */
+    this.color = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const color = getColorByName(this.color);
+    return (h("p", { class: {
+        "duet-paragraph": true,
+        "duet-paragraph-small": this.size === "small",
+        "duet-paragraph-semi-bold": this.weight === "semi-bold",
+        "duet-paragraph-bold": this.weight === "bold",
+        "duet-m-0": this.margin === "none",
+        [this.variation]: true,
+        "duet-theme-turva": this.theme === "turva",
+      }, style: { color }, part: "duet-paragraph" }, h("slot", null)));
+  }
+  get element() { return this; }
+  static get style() { return duetParagraphCss; }
+}, [1, "duet-paragraph", {
+    "theme": [1025],
+    "margin": [1],
+    "size": [1],
+    "weight": [1],
+    "variation": [1],
+    "color": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-paragraph"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-paragraph":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetParagraph);
+      }
+      break;
+  } });
+}
+
+export { DuetParagraph as D, defineCustomElement as d };