@duetds/components 6.0.2 → 6.0.4

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

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

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

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

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

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

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

@@ -0,0 +1,314 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-3fc2d124.js';
+import { a as actionNewWindowSmall } from './p-f11208c3.js';
+import { D as DuetStringsExternalDefaults } from './p-76f00bd5.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { a as getLanguage, g as getLocaleString } from './p-ede854e1.js';
+import { p as parsePossibleJSON } from './p-5a9d75e1.js';
+import { d as defineCustomElement$9 } from './p-e294c0fb.js';
+import { d as defineCustomElement$8 } from './p-f7db7c40.js';
+import { d as defineCustomElement$7 } from './p-7739604d.js';
+import { d as defineCustomElement$6 } from './p-14dcd82b.js';
+import { d as defineCustomElement$5 } from './p-01de0640.js';
+import { d as defineCustomElement$4 } from './p-213ef84c.js';
+import { d as defineCustomElement$3 } from './p-3d987b87.js';
+import { d as defineCustomElement$2 } from './p-b08e57cf.js';
+
+const duetHeroCss = "*,*::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-hero{position:relative;display:block;width:100%;padding:48px 28px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;text-decoration:none;text-shadow:none;text-transform:none;background:#00294d}.duet-hero.duet-p-0{padding:0 !important}.duet-hero.duet-m-0{margin:0 !important}.duet-hero.duet-hero-text-center{text-align:center !important}.duet-hero.duet-hero-light{padding-bottom:0 !important}@media (min-width: 62em){.duet-hero.duet-hero-light{padding-bottom:28px !important}}.duet-hero.duet-hero-with-image{padding-bottom:20px !important;margin-bottom:-36px}@media (min-width: 48em){.duet-hero.duet-hero-with-image{padding-bottom:28px !important}}@media (min-width: 62em){.duet-hero.duet-hero-with-image{padding-bottom:36px !important;margin-bottom:-20px}}.duet-hero.duet-hero-light,.duet-hero.duet-hero-with-image{color:#00294d;background-color:white;background-image:linear-gradient(#f3f9fc, #f9fcfe)}.duet-hero.duet-hero-light::before,.duet-hero.duet-hero-with-image::before{position:absolute;top:100%;left:0;z-index:-1;width:100%;height:400px;content:\"\";background-image:linear-gradient(#f9fcfe, white)}.duet-hero.duet-hero-light.duet-theme-turva,.duet-hero.duet-hero-with-image.duet-theme-turva{color:#171c3a;background-image:linear-gradient(#f5f5f7, #fafafb)}.duet-hero.duet-hero-light.duet-theme-turva::before,.duet-hero.duet-hero-with-image.duet-theme-turva::before{background-image:linear-gradient(#fafafb, white)}.duet-hero.duet-hero-gray{color:#00294d;background:#f5f8fa}.duet-hero.duet-hero-gray.duet-theme-turva{background:#f5f5f7}@media (min-width: 62em){.duet-hero.duet-hero-gray .duet-hero-text{display:inline-block;vertical-align:top}.duet-hero.duet-hero-gray .duet-hero-icon+.duet-hero-text{margin-left:28px}}@media (min-width: 62em){.duet-hero.duet-hero-gray-with-actions{padding-bottom:65.4545454545px}}@media (min-width: 62em){.duet-hero.duet-hero-gray-with-back{padding-top:72px}}.duet-hero.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\";background:#c60c30}@media (min-width: 62em){.duet-hero{min-height:290px;padding:111.6px 56px;overflow:visible}}.duet-hero-icon{display:inline-block;vertical-align:top}@media (min-width: 62em){.duet-hero-icon{margin-top:-8px}}@media (min-width: 62em){.duet-hero-heading{margin-top:12px}}@media (min-width: 62em){.duet-hero-heading-has-pre{margin-top:0}}.duet-hero-wrapper{position:relative;width:100%;max-width:1110px;margin:0 auto;text-align:center}.duet-hero-left-align .duet-hero-wrapper{text-align:left}.duet-hero-with-image .duet-hero-wrapper{position:static}@media (min-width: 62em){.duet-hero-wrapper{text-align:left}}.duet-hero-text{max-width:50rem;margin:0 auto}.duet-hero-text-center .duet-hero-text{text-align:center !important}@media (min-width: 48em){.duet-hero-text{width:80%}.duet-hero-left-align .duet-hero-text{margin:0}}@media (min-width: 62em){.duet-hero-text{width:52%;max-width:none;margin-top:-10px;margin-left:0}.duet-hero-text-center .duet-hero-text{margin-left:auto}}.duet-hero:not(.duet-hero-with-image) .duet-hero-image{width:100%;max-width:400px;height:0;padding-bottom:50%;margin:28px auto 0;background-repeat:no-repeat;background-position:50% 50%;background-size:contain}@media (min-width: 36em){.duet-hero:not(.duet-hero-with-image) .duet-hero-image{padding-bottom:40%}}@media (min-width: 48em){.duet-hero:not(.duet-hero-with-image) .duet-hero-image{max-width:420px;padding-bottom:34%}.duet-hero-light .duet-hero:not(.duet-hero-with-image) .duet-hero-image{max-width:540px}}@media (min-width: 62em){.duet-hero:not(.duet-hero-with-image) .duet-hero-image{position:absolute;top:50%;right:0;padding-bottom:30%;margin:0;transform:translateY(-50%)}.duet-hero-light .duet-hero:not(.duet-hero-with-image) .duet-hero-image{right:-60px;padding-bottom:26%}.duet-hero-gray .duet-hero:not(.duet-hero-with-image) .duet-hero-image{right:-34px;padding-bottom:20%}}@media (min-width: 62em){.duet-hero-gray:not(.duet-hero-with-image) .duet-hero-image{right:-34px;padding-bottom:20%}}.duet-hero-image-wrapper{position:relative;width:80%;height:0;padding-bottom:80%;margin:-30px auto 36px;overflow:hidden;border-radius:28%;box-shadow:0 0 20px rgba(255, 255, 255, 0.5);transform:rotate(10deg)}.duet-theme-turva .duet-hero-image-wrapper{padding-bottom:68%;border-radius:44% 47% 38% 54%;transform:none}@media screen and (min-width: 440px){.duet-hero-image-wrapper{width:300px;padding-bottom:300px}.duet-theme-turva .duet-hero-image-wrapper{width:80%;padding-bottom:68%}}@media (min-width: 62em){.duet-hero-image-wrapper{position:absolute;top:-60px;right:-50px;width:470px;padding-bottom:470px;margin:0}.duet-theme-turva .duet-hero-image-wrapper{top:-40px;right:-80px;width:536px;padding-bottom:470px}}@media (min-width: 76.25em){.duet-hero-image-wrapper{top:-70px;right:-60px;width:600px;padding-bottom:600px}.duet-theme-turva .duet-hero-image-wrapper{top:-70px;right:-60px;width:650px;padding-bottom:600px}}@media screen and (min-width: 1450px){.duet-hero-image-wrapper{top:-70px;right:25px}.duet-theme-turva .duet-hero-image-wrapper{right:0}}.duet-hero-image-wrapper .duet-hero-image{position:absolute;top:-5%;left:-5%;width:110%;height:110%;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;transform:rotate(-10deg)}.duet-theme-turva .duet-hero-image-wrapper .duet-hero-image{top:0;left:0;width:100%;height:100%;transform:none}.duet-hero-image-mask{position:relative;margin:-48px auto 0;overflow:hidden}@media (min-width: 62em){.duet-hero-image-mask{position:absolute;top:0;right:0;width:470px;height:460px;margin:0}}@media (min-width: 76.25em){.duet-hero-image-mask{width:650px;height:580px}}@media screen and (min-width: 1450px){.duet-hero-image-mask{right:50%;transform:translateX(110%)}.duet-theme-turva .duet-hero-image-mask{transform:translateX(108%)}}duet-heading+duet-button{margin-top:12px !important}.duet-hero-links{width:calc(100% + 56px);margin-top:48px;margin-left:-28px}.duet-hero-minimal .duet-hero-links{margin-top:28px}@media (min-width: 36em){.duet-hero-links{margin-top:72px}.duet-hero-minimal .duet-hero-links{margin-top:28px}}@media (min-width: 62em){.duet-hero-links{width:auto;margin:36px 0 0}.duet-hero-minimal .duet-hero-links{margin-top:28px}}.duet-hero-link{display:flex;align-items:center;width:100%;padding:16px 16px 8px;font-weight:600;-webkit-hyphens:auto;hyphens:auto;line-height:1.25;color:#0077b3;text-align:left;text-decoration:none;border-bottom:1px solid #e1e3e6;transition:background-color 300ms ease}.duet-hero-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-hero-link:focus,.duet-hero-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-hero-link:hover,.duet-hero-link:hover .duet-hero-action-arrow{color:#004d80 !important;background:transparent !important}.duet-theme-turva .duet-hero-link:hover,.duet-theme-turva .duet-hero-link:hover .duet-hero-action-arrow{color:#940925 !important}.duet-theme-turva .duet-hero-link{color:#c60c30}@media (min-width: 36em){.duet-hero-link{padding:16px 16px 16px 28px}}@media (min-width: 62em){.duet-hero-link{display:inline-flex;width:auto;max-width:350px;padding:0;margin:0 28px 16px 0;border:0;border-radius:4px}}.duet-hero-link:hover{background:rgba(0, 0, 0, 0.02)}@media (min-width: 62em){.duet-hero-link:hover{background:transparent}}.duet-hero-link:first-of-type{border-top:1px solid #e1e3e6}@media (min-width: 62em){.duet-hero-link:first-of-type{margin-top:0;border:0}}.duet-hero-link:last-of-type{margin-bottom:-48px}@media (min-width: 62em){.duet-hero-link:last-of-type{margin-right:0;margin-bottom:0}}.duet-hero-link span{margin-top:-8px}@media (min-width: 36em){.duet-hero-link span{margin:0}}.duet-hero-action-icon{margin-right:8px}@media (min-width: 36em){.duet-hero-action-icon{margin-right:12px}}.duet-hero-action-arrow{margin:0 0 0 8px;color:#0077b3}@media (max-width: 35.9375em){.duet-hero-action-arrow{margin-top:-9px}}.duet-theme-turva .duet-hero-action-arrow{color:#c60c30}.duet-hero-back{margin-bottom:28px !important;display:flex;align-items:center;justify-content:center}.duet-hero-left-align .duet-hero-back{align-items:self-start;justify-content:flex-start}@media (min-width: 36em){.duet-hero-back{margin-bottom:36px !important}.duet-hero-minimal .duet-hero-back{margin-bottom:28px !important}}@media (min-width: 62em){.duet-hero-back{display:block}}.duet-hero-pre{display:inline-block;width:auto;margin-right:8px}.duet-hero-pre+duet-heading{margin-top:0 !important}";
+
+const DuetHero$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.duetClick = createEvent(this, "duetClick", 7);
+    this.duetAnalytics = createEvent(this, "duetAnalytics", 7);
+    /**
+     * State() variables
+     * Inlined decorator, alphabetical order.
+     */
+    this.processedListItems = null;
+    this.processedActions = null;
+    this.processedBack = null;
+    /**
+     * Theme of the hero area.
+     */
+    this.theme = "";
+    /**
+     * @deprecated please use heading slot instead.
+     * The heading of the hero area, rendered in an H1 tag. P.S. you can control
+     * the level of the HTML heading by using “level” prop. If empty, heading
+     * will be hidden.
+     */
+    this.heading = "";
+    /**
+     * The headline shown before heading.
+     */
+    this.preHeading = "";
+    /**
+     * The level of the heading.
+     */
+    this.level = "h1";
+    /**
+     * The description of the hero area, rendered in a P tag. If empty, description
+     * will be hidden.
+     */
+    this.description = "";
+    /**
+     * Icon to display to the left of the button content. If empty, icon will be hidden.
+     */
+    this.icon = "";
+    /**
+     * Icon size for the button.
+     */
+    this.iconSize = "medium";
+    /**
+     * Show icon on the right side of the button content.
+     */
+    this.iconRight = false;
+    /**
+     * Icon to display to the left of the heading in gray hero area variation. If empty, icon will be hidden.
+     */
+    this.categoryIcon = "";
+    /**
+     * Icon color to use for the category icon that can be used in gray hero area variation.
+     */
+    this.categoryIconColor = "category-pet";
+    /**
+     * Text label shown inside the button. If empty, button will be hidden.
+     */
+    this.buttonLabel = "";
+    /**
+     * The currently active language. This setting changes the accessible labels to match the
+     * chosen language.
+     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+     * @default "fi"
+     */
+    this.language = getLanguage();
+    /**
+     * Defaults for accessibleLabelExternal
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+    /**
+     * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+    /**
+     * URL that the button links to.
+     */
+    this.buttonUrl = "#";
+    /**
+     * ID for the button.
+     */
+    this.buttonId = "";
+    /**
+     * Centers the text in hero area.
+     */
+    this.textCenter = false;
+    /**
+     * Forces all items in the header to be leftAligned
+     * This can be used on mobiles to create leftAligned hero areas that either are only leftaligned on smaller devices
+     * or allways leftAligned (you must manually switch this parameter if you need special breakpoints)
+     * this nullifies textCenter prop
+     */
+    this.leftAlign = false;
+    /**
+     * URL of the image shown inside the hero area. The width of the displayed image
+     * should be 800px. Optimal aspect ratio is 3:2. When using “image” variation of
+     * Hero Area the required image size is 1200x1200px (1:1 ratio). If this
+     * property is left empty, image will be hidden.
+     */
+    this.image = "";
+    /**
+     * Style variation of the hero area.
+     */
+    this.variation = "default";
+    /**
+     * Component event handling.
+     */
+    this.handleClick = (ev, data) => {
+      if (data && data.analytics) {
+        this.duetAnalytics.emit({
+          component: "duet-hero",
+          analyticsId: data.analytics,
+        });
+      }
+      this.emitChange(ev, data);
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.hasHeadingSlot = !!this.element.querySelector('[slot="heading"]');
+    this.refresh();
+  }
+  /**
+   * Local methods.
+   */
+  async refresh() {
+    this.processedListItems = parsePossibleJSON(this.listItems);
+    this.processedActions = parsePossibleJSON(this.actions);
+    this.processedBack = parsePossibleJSON(this.back);
+  }
+  emitChange(ev, data) {
+    if (!data) {
+      data = {};
+    }
+    if (this.buttonLabel) {
+      data.label = this.buttonLabel;
+      data.href = this.buttonUrl;
+      data.id = this.buttonId || "No ID defined via buttonId prop";
+    }
+    this.duetClick.emit({
+      originalEvent: ev,
+      data: data,
+      component: "duet-hero",
+    });
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const styles = {
+      backgroundImage: `url(${this.image})`,
+    };
+    const buttonStyles = {
+      transform: "translateX(-8px)",
+    };
+    let buttonVariation = this.theme === "turva" ? "negative" : "primary";
+    let outlineColor = "primary-blue";
+    let textColor = "gray-lightest";
+    let buttonColor = "primary";
+    if (this.variation === "light" ||
+      this.variation === "image" ||
+      this.variation === "gray" ||
+      this.variation === "minimal") {
+      textColor = "secondary";
+      if (this.theme === "turva") {
+        textColor = "secondary-turva";
+        buttonVariation = "primary";
+        buttonColor = "color-primary-turva";
+        outlineColor = "color-primary-turva";
+      }
+    }
+    return (h("div", { role: "region", class: {
+        "duet-hero": true,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-has-category-icon": !!this.categoryIcon,
+        "duet-hero-light": this.variation === "light",
+        "duet-hero-gray": this.variation === "gray" || this.variation === "minimal",
+        "duet-hero-minimal": this.variation === "minimal",
+        "duet-hero-with-image": this.variation === "image",
+        "duet-hero-gray-with-actions": !!this.processedActions,
+        "duet-hero-gray-with-back": !!this.processedBack,
+        "duet-hero-text-center": this.textCenter && !this.leftAlign,
+        "duet-hero-left-align": this.leftAlign,
+      }, part: "duet-hero" }, h("div", { class: "duet-hero-wrapper" }, this.image && this.variation === "image" && (h("div", { class: "duet-hero-image-mask" }, h("div", { class: "duet-hero-image-wrapper" }, h("div", { class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+      this.processedBack && (h("div", { class: "duet-hero-back" }, h("duet-button", { style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
+        label: this.processedBack.label,
+        href: this.processedBack.href,
+        id: this.processedBack.id,
+        analyticsId: this.processedBack.analyticsId,
+      }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { class: "duet-hero-text", part: "duet-hero-text" }, this.preHeading && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre" }, this.preHeading)), h("slot", { name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: this.variation === "default" ? "gray-lightest" : "", visualLevel: this.variation === "gray" || this.variation === "minimal" ? "h2" : "h1" }, this.heading ? this.heading : h("slot", { name: "heading" }))), this.description && (h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("span", { class: "duet-hero-slot-unnamed" }, h("slot", null))), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: actionNewWindowSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image && this.variation !== "image" && h("div", { class: "duet-hero-image", style: styles }), h("slot", { name: "bottom" }))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "back": ["refresh"],
+    "listItems": ["refresh"],
+    "actions": ["refresh"]
+  }; }
+  static get style() { return duetHeroCss; }
+}, [1, "duet-hero", {
+    "theme": [1025],
+    "heading": [1],
+    "preHeading": [1, "pre-heading"],
+    "level": [1],
+    "description": [1],
+    "icon": [1],
+    "iconSize": [1, "icon-size"],
+    "iconRight": [4, "icon-right"],
+    "categoryIcon": [1, "category-icon"],
+    "categoryIconColor": [1, "category-icon-color"],
+    "buttonLabel": [1, "button-label"],
+    "language": [1025],
+    "accessibleLabelExternalDefaults": [1, "accessible-label-external-default"],
+    "accessibleLabelExternal": [1, "accessible-label-external"],
+    "buttonUrl": [1, "button-url"],
+    "buttonId": [1, "button-id"],
+    "buttonData": [16],
+    "textCenter": [4, "text-center"],
+    "leftAlign": [4, "left-align"],
+    "image": [1],
+    "variation": [1],
+    "back": [8],
+    "listItems": [8, "list-items"],
+    "actions": [8],
+    "processedListItems": [32],
+    "processedActions": [32],
+    "processedBack": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-hero", "duet-button", "duet-heading", "duet-icon", "duet-list", "duet-list-item", "duet-paragraph", "duet-spinner", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-hero":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetHero$1);
+      }
+      break;
+    case "duet-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "duet-heading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "duet-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "duet-list-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "duet-paragraph":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "duet-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetHero = DuetHero$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetHero, defineCustomElement };

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,107 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-3fc2d124.js';
+import { i as isInternetExplorer } from './p-704245ef.js';
+
+const duetLayoutCss = "*,*::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;flex:1 0 auto;width:100%}:host(.duet-middle){display:flex}:host(.duet-middle) .duet-layout{padding:36px 28px !important}@media (min-width: 36em){:host(.duet-middle) .duet-layout{padding:48px 36px !important}}@media (min-width: 62em){:host(.duet-middle) .duet-layout{padding:56px !important}}:host(.duet-ie){height:100%}:host(.duet-middle.duet-ie){height:auto}.duet-layout{position:relative;padding:0 16px;margin:48px auto 36px}@media (min-width: 36em){.duet-layout{margin-top:72px}}.duet-layout.duet-layout-has-top{margin-top:0}.duet-layout.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout.duet-center{display:flex;align-items:center;justify-content:center;width:100%;max-width:888px}@media (min-width: 36em){.duet-layout.duet-center{padding:0 48px}}@media (min-width: 48em){.duet-layout.duet-center{padding:0 72px}}@media (min-width: 62em){.duet-layout.duet-center{width:100%}}@media (min-width: 36em){.duet-layout{padding:0 28px}}@media (min-width: 62em){.duet-layout{display:flex;flex-direction:row;padding:0 56px;margin-bottom:48px}}@media (min-width: 76.25em){.duet-layout{max-width:1110px;padding:0}}.duet-main,.duet-sidebar,.duet-layout-top,.duet-layout-bottom{display:block;width:100%}.duet-layout-top{position:relative;display:block;width:100%;margin:72px auto 0}.duet-layout-top.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout-top .duet-layout-top-wrapper{padding:0 20px;margin:0 auto}@media (min-width: 36em){.duet-layout-top .duet-layout-top-wrapper{padding:0 28px}}@media (min-width: 62em){.duet-layout-top .duet-layout-top-wrapper{padding:0 56px}}@media (min-width: 76.25em){.duet-layout-top .duet-layout-top-wrapper{max-width:1110px;padding:0}}.duet-center .duet-layout-top-wrapper{max-width:888px}@media (min-width: 36em){.duet-center .duet-layout-top-wrapper{padding:0 48px}}@media (min-width: 48em){.duet-center .duet-layout-top-wrapper{padding:0 72px}}@media (min-width: 62em){.duet-main{min-width:600px;margin:0 auto}.has-sidebar .duet-main{max-width:734px;margin-right:20px}}@media (min-width: 62em){.duet-sidebar{min-width:256px;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container{width:auto;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container.has-tabs{margin-top:89px}}@media (min-width: 62em){.duet-sidebar-container.sticky{position:sticky}.duet-sidebar-container.sticky.with-links{top:calc(3rem + 20px)}.duet-sidebar-container.sticky.without-links{top:calc(4rem + 20px)}}";
+
+const DuetLayout$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Own Properties.
+     */
+    this.hasSidebar = false;
+    this.hasTop = false;
+    /**
+     * Makes the sidebar stick to the top of the window when scrolling down.
+     */
+    this.sticky = false;
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Adjust sticky sidebar’s distance to duet navigation component using this property.
+     */
+    this.stickyDistance = "with-links";
+    /**
+     * Center align all direct children of this component.
+     */
+    this.center = false;
+    /**
+     * If set to true, the sidebar position will be adjusted to take tabs inside main content
+     * area into account.
+     */
+    this.tabs = false;
+    /**
+     * Align container vertically in the middle when the space allows it.
+     */
+    this.middle = false;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    this.hasSidebar = !!this.element.querySelector("[slot='sidebar']");
+    this.hasTop = !!this.element.querySelector("[slot='top']");
+    if (!this.element.querySelector("[slot='main']")) {
+      console.warn("[DUET WARNING]: Nothing passed to <duet-layout> named slots. Please use one of 'main', 'sidebar' or 'top' to display contents.");
+    }
+  }
+  /**
+   * render() function.
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { class: {
+        "duet-middle": this.middle,
+        "duet-ie": isInternetExplorer(),
+      } }, this.hasTop && (h("div", { class: {
+        "duet-layout-top": true,
+        "duet-m-0": this.margin === "none",
+        "duet-center": this.center,
+      } }, h("div", { class: "duet-layout-top-wrapper" }, h("slot", { name: "top" })))), h("div", { class: {
+        "duet-layout": true,
+        "duet-layout-has-top": this.hasTop,
+        "has-sidebar": this.hasSidebar,
+        "duet-m-0": this.margin === "none",
+        "duet-center": this.center,
+      } }, h("main", { class: "duet-main" }, h("slot", { name: "main" })), this.hasSidebar && (h("aside", { class: "duet-sidebar" }, h("div", { class: {
+        "duet-sidebar-container": true,
+        "has-tabs": this.tabs,
+        sticky: this.sticky,
+        [this.stickyDistance]: this.sticky,
+      } }, h("slot", { name: "sidebar" })))))));
+  }
+  get element() { return this; }
+  static get style() { return duetLayoutCss; }
+}, [1, "duet-layout", {
+    "sticky": [4],
+    "margin": [1],
+    "stickyDistance": [1, "sticky-distance"],
+    "center": [4],
+    "tabs": [4],
+    "middle": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-layout"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-layout":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetLayout$1);
+      }
+      break;
+  } });
+}
+
+const DuetLayout = DuetLayout$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetLayout, defineCustomElement };

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

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

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

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

package/lib/dist-custom-elements/duet-list-item.d.ts

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

package/lib/dist-custom-elements/duet-list-item.js

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

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

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

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

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

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

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

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

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