@duetds/components 6.0.3 → 6.0.4

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

@@ -0,0 +1,297 @@
+/*!
+ * 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 { c as cleanValue } from './p-56118313.js';
+import { d as defineCustomElement$8 } from './p-e5c8a58f.js';
+import { d as defineCustomElement$7 } from './p-565779f5.js';
+import { d as defineCustomElement$6 } from './p-bd4b92c4.js';
+import { d as defineCustomElement$5 } from './p-7739604d.js';
+import { d as defineCustomElement$4 } from './p-16d518fd.js';
+import { d as defineCustomElement$3 } from './p-88511d7a.js';
+import { d as defineCustomElement$2 } from './p-b08e57cf.js';
+
+const duetTextareaCss = "*.sc-duet-textarea,*.sc-duet-textarea::after,*.sc-duet-textarea::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-textarea-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:block;width:100%;max-width:100%;text-align:left}.sc-duet-textarea-h:last-child,.sc-duet-textarea-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-textarea-h{width:calc(50% - 16px - 3px)}.duet-expand.sc-duet-textarea-h{width:100% !important}}.duet-m-0.sc-duet-textarea-h{margin:0 !important}duet-tooltip.sc-duet-textarea{position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip.sc-duet-textarea{position:relative;top:4px;right:auto}}.duet-textarea-container.sc-duet-textarea{position:relative;width:100%;height:100%}.duet-textarea-container.sc-duet-textarea .duet-input-top-caption.sc-duet-textarea{display:none}.duet-textarea-container.duet-input-top-caption-shown.sc-duet-textarea .duet-input-top-caption.sc-duet-textarea{display:flex !important}.duet-textarea-wrapper.sc-duet-textarea{position:relative}.duet-textarea-placeholder.sc-duet-textarea{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-textarea.sc-duet-textarea{padding:15px !important;position:relative;z-index:100;display:block;width:100%;min-width:8rem;min-height:160px;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.25;color:#00294d;resize:vertical;background:white;border:1px solid #909599;border-radius:4px;transition:150ms ease}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea{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}.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea{border-color:#de2362 !important}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea{border-color:#e02a0d !important}.duet-textarea.sc-duet-textarea::-webkit-input-placeholder{color:#657787;opacity:1 !important;transition:color 300ms ease}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea::-webkit-input-placeholder{color:#747475}.duet-textarea.sc-duet-textarea:focus::-webkit-input-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus::-webkit-input-placeholder{color:#cfcfd1}.duet-textarea.sc-duet-textarea::-moz-placeholder{color:#657787;opacity:1 !important}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea::-moz-placeholder{color:#747475}.duet-textarea.sc-duet-textarea:focus::-moz-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus::-moz-placeholder{color:#cfcfd1}.duet-textarea.sc-duet-textarea:-ms-input-placeholder{color:#657787}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:-ms-input-placeholder{color:#747475}.duet-textarea.sc-duet-textarea:focus:-ms-input-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus:-ms-input-placeholder{color:#cfcfd1}.duet-textarea[disabled].sc-duet-textarea{color:#657787 !important;cursor:default !important;background:#f5f8fa !important;border-color:#f5f8fa !important}.duet-theme-turva.sc-duet-textarea .duet-textarea[disabled].sc-duet-textarea{color:#747475 !important;background:#f5f5f7 !important;border-color:#f5f5f7 !important}.duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #909599}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #747475}.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #e02a0d}.duet-textarea.sc-duet-textarea:focus{border-color:#0077b3;outline:0;box-shadow:0 0 0 1px #0077b3;transition:none}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus{border-color:#171c3a;box-shadow:0 0 0 1px #171c3a}.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus{box-shadow:0 0 0 1px #e02a0d}.duet-textarea.sc-duet-textarea:not(:focus):not(:hover):invalid{box-shadow:none}.duet-textarea-help.sc-duet-textarea{font-size:0.875rem;line-height:1.25}.duet-textarea-help.sc-duet-textarea span.sc-duet-textarea{display:block;margin-top:8px}.has-error.sc-duet-textarea .duet-textarea-help.sc-duet-textarea{color:#de2362}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea-help.sc-duet-textarea{color:#e02a0d}.duet-label-hidden.sc-duet-textarea duet-label.sc-duet-textarea{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.duet-character-count.sc-duet-textarea{display:block;margin:8px 0 0 auto}";
+
+const CharacterCount = ({ value, maxlength, label, theme }) => {
+  if (maxlength == null) {
+    return;
+  }
+  const length = value.length;
+  const remainder = Math.max(maxlength - length, 0); // ensure we never have negative numbers
+  const isApproachingLimit = remainder / maxlength <= 0.1; // <= 10% chars remaining
+  return (h("div", { class: "duet-character-count" }, h("duet-caption", { margin: "none", theme: theme, size: "small" }, h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", class: "duet-textarea-counter-remaining" }, isApproachingLimit && `${remainder} ${label}`), h("span", { "aria-hidden": "true" }, length, "/", maxlength))));
+};
+const DuetTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.duetInput = createEvent(this, "duetInput", 7);
+    this.duetChange = createEvent(this, "duetChange", 7);
+    this.duetBlur = createEvent(this, "duetBlur", 7);
+    this.duetFocus = createEvent(this, "duetFocus", 7);
+    /**
+     * Own Properties
+     */
+    this.textareaId = createID("DuetTextarea");
+    this.topCaptionId = createID("DuetCaptionTop");
+    this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
+    this.labelId = createID("DuetLabel");
+    this.errorId = createID("DuetError");
+    this.disallowPatternRegex = null;
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Aria Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
+    /**
+     * Theme of the textarea.
+     */
+    this.theme = "";
+    /**
+     * Expands the textarea to fill 100% of the container width.
+     */
+    this.expand = false;
+    /**
+     * Makes the textarea component disabled. This prevents users from being able
+     * to interact with the textarea, and conveys its inactive state to assistive
+     * technologies.
+     */
+    this.disabled = false;
+    /**
+     * Set whether the textarea is required or not. Please note that this is required for
+     * accessible inputs when the user is required to fill them. When using this property
+     * you need to also set “novalidate” attribute to your form element to prevent
+     * browser from displaying its own validation errors.
+     */
+    this.required = false;
+    /**
+     * Label for the textarea.
+     */
+    this.label = "label";
+    /**
+     * Visually hide the label, but still show it to screen readers.
+     */
+    this.labelHidden = false;
+    /**
+     * If form input field has a placeholder text, and user types anything (causing the text to dissapear),
+     * 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;
+    /**
+     * Display the textarea in error state along with an error message.
+     */
+    this.error = "";
+    /**
+     * 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";
+    /**
+     * Value of the textarea.
+     */
+    this.value = "";
+    /**
+     * A regular expression that matches any characters which should be *disallowed*.
+     * This differs from `pattern`, as it actively prevents users entering any characters which match the regular expression.
+     * e.g. the following will disallow any non-numeric characters `[^0-9]`
+     */
+    this.disallowPattern = null;
+    /**
+     * Display character counter. Must be used in conjunction with
+     * **maxlength** and **counterLabel** properties.
+     */
+    this.counter = false;
+    /**
+     * Component event handling.
+     */
+    this.handleInput = (ev) => {
+      if (this.disallowPatternRegex) {
+        cleanValue(this.nativeInput, this.disallowPatternRegex);
+      }
+      this.value = this.nativeInput.value;
+      this.isCaptionVisible = !!this.caption;
+      this.duetInput.emit({
+        originalEvent: ev,
+        value: this.value,
+        component: "duet-textarea",
+      });
+    };
+    this.handleChange = (ev) => {
+      this.value = this.nativeInput.value;
+      this.duetChange.emit({
+        originalEvent: ev,
+        value: this.value,
+        component: "duet-textarea",
+      });
+    };
+    this.handleBlur = (ev) => {
+      this.duetBlur.emit({
+        originalEvent: ev,
+        value: this.value,
+        component: "duet-textarea",
+      });
+    };
+    this.handleFocus = (ev) => {
+      this.duetFocus.emit({
+        originalEvent: ev,
+        value: this.value,
+        component: "duet-textarea",
+      });
+    };
+  }
+  disallowedPatternChange() {
+    this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "g") : null;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.disallowedPatternChange();
+    this.isCaptionVisible = !!this.caption;
+    if (this.counter && this.maxlength == null) {
+      console.warn("[DUET WARNING]: counter will only take effect if maxlength is set");
+    }
+    if (!this.counter && this.counterLabel != null) {
+      console.warn("[DUET WARNING]: counter-label is redundant unless used with counter");
+    }
+    if (this.counter && !this.counterLabel) {
+      console.warn("[DUET WARNING]: counter requires counter-label to be set");
+    }
+  }
+  /**
+   * Sets focus on the specified `duet-textarea`. Use this method instead of the global
+   * `textarea.focus()`.
+   */
+  async setFocus(options) {
+    this.nativeInput.focus(options);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const identifier = this.identifier || this.textareaId;
+    return (h(Host, { class: {
+        "duet-m-0": this.margin === "none",
+        "duet-has-counter": this.counter && !this.error,
+        "duet-expand": this.expand,
+      } }, h("div", { class: {
+        "duet-textarea-container": true,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-label-hidden": this.labelHidden,
+        "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 }, margin: this.isCaptionVisible ? "small" : "auto", 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-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy
+        ? `${this.labelId} ${this.errorId} ${this.accessibleLabelledBy}`
+        : `${this.labelId} ${this.errorId} `, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": `${this.isCaptionVisible ? this.topCaptionId : ""} ${this.accessibleDescribedBy}`, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))), h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "disallowPattern": ["disallowedPatternChange"]
+  }; }
+  static get style() { return duetTextareaCss; }
+}, [2, "duet-textarea", {
+    "margin": [1],
+    "accessibleActiveDescendant": [1, "accessible-active-descendant"],
+    "accessibleAutocomplete": [1, "accessible-autocomplete"],
+    "accessibleControls": [1, "accessible-controls"],
+    "accessibleDetails": [1, "accessible-details"],
+    "accessibleLabelledBy": [1, "accessible-labelled-by"],
+    "accessibleDescription": [1, "accessible-description"],
+    "accessibleOwns": [1, "accessible-owns"],
+    "accessibleDescribedBy": [1, "accessible-described-by"],
+    "theme": [1025],
+    "expand": [4],
+    "disabled": [516],
+    "identifier": [1],
+    "required": [4],
+    "label": [1],
+    "labelHidden": [4, "label-hidden"],
+    "name": [1],
+    "placeholder": [1],
+    "caption": [1],
+    "echoPlaceholder": [4, "echo-placeholder"],
+    "maxlength": [2],
+    "minlength": [2],
+    "error": [1],
+    "role": [1],
+    "tooltip": [1],
+    "tooltipDirection": [1, "tooltip-direction"],
+    "value": [1025],
+    "disallowPattern": [1, "disallow-pattern"],
+    "counter": [4],
+    "counterLabel": [1, "counter-label"],
+    "setFocus": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-textarea", "duet-caption", "duet-grid", "duet-grid-item", "duet-icon", "duet-label", "duet-tooltip", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-textarea":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetTextarea$1);
+      }
+      break;
+    case "duet-caption":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "duet-grid":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "duet-grid-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "duet-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "duet-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetTextarea = DuetTextarea$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetTextarea, defineCustomElement };

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

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

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

@@ -0,0 +1,150 @@
+/*!
+ * 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 defineCustomElement$2 } from './p-16d518fd.js';
+
+const duetToggleCss = "*.sc-duet-toggle,*.sc-duet-toggle::after,*.sc-duet-toggle::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-toggle-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:8px !important;margin-bottom:12px !important;-webkit-user-select:none;user-select:none;display:inline-flex;width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}.sc-duet-toggle-h:last-child,.sc-duet-toggle-h:last-of-type{margin-right:0 !important}.duet-m-0.sc-duet-toggle-h{margin:0 !important}duet-label.sc-duet-toggle{display:block !important;width:100% !important}.duet-switch.sc-duet-toggle{position:relative;display:block;width:48px;height:28px}.duet-switch.sc-duet-toggle input.sc-duet-toggle{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}.duet-switch.sc-duet-toggle input.sc-duet-toggle:checked+.duet-slider.sc-duet-toggle{background-color:#0077b3;box-shadow:none}.duet-theme-turva.sc-duet-toggle .duet-switch.sc-duet-toggle input.sc-duet-toggle:checked+.duet-slider.sc-duet-toggle{background-color:#c60c30}.duet-switch.sc-duet-toggle input.sc-duet-toggle:checked+.duet-slider.sc-duet-toggle::before{background-color:white;box-shadow:none;transform:translateX(20px)}.duet-switch.sc-duet-toggle input.sc-duet-toggle:disabled+.duet-slider.sc-duet-toggle{cursor:default}.duet-switch.sc-duet-toggle input.sc-duet-toggle:disabled:not(:checked)+.duet-slider.sc-duet-toggle{box-shadow:inset 0 0 0 1px #cfd2d4}.duet-theme-turva.sc-duet-toggle .duet-switch.sc-duet-toggle input.sc-duet-toggle:disabled:not(:checked)+.duet-slider.sc-duet-toggle{box-shadow:inset 0 0 0 1px #cfcfd1}.duet-switch.sc-duet-toggle input.sc-duet-toggle:disabled:not(:checked)+.duet-slider.sc-duet-toggle::before{background:#cfd2d4}.duet-theme-turva.sc-duet-toggle .duet-switch.sc-duet-toggle input.sc-duet-toggle:disabled:not(:checked)+.duet-slider.sc-duet-toggle::before{background:#cfcfd1}.duet-switch.sc-duet-toggle input.sc-duet-toggle:disabled:checked+.duet-slider.sc-duet-toggle{background:#cfd2d4}.duet-theme-turva.sc-duet-toggle .duet-switch.sc-duet-toggle input.sc-duet-toggle:disabled:checked+.duet-slider.sc-duet-toggle{background:#cfcfd1}.user-is-tabbing.sc-duet-toggle-h .duet-switch.sc-duet-toggle input.sc-duet-toggle:focus+.duet-slider.sc-duet-toggle{box-shadow:0 0 0 1px white, 0 0 0 3px rgba(0, 119, 179, 0.75)}.user-is-tabbing.sc-duet-toggle-h .duet-theme-turva.sc-duet-toggle .duet-switch.sc-duet-toggle input.sc-duet-toggle:focus+.duet-slider.sc-duet-toggle{box-shadow:0 0 0 1px white, 0 0 0 3px #171c3a}.duet-slider.sc-duet-toggle{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;background-color:white;border-radius:20px;box-shadow:inset 0 0 0 1px #00294d;transition:background-color 300ms ease}.duet-theme-turva.sc-duet-toggle .duet-slider.sc-duet-toggle{box-shadow:inset 0 0 0 1px #171c3a}.duet-slider.sc-duet-toggle::before{position:absolute;bottom:4px;left:4px;width:20px;height:20px;content:\"\";background-color:#00294d;border-radius:50%;transition:300ms ease}.duet-theme-turva.sc-duet-toggle .duet-slider.sc-duet-toggle::before{background-color:#171c3a}";
+
+const DuetToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.duetChange = createEvent(this, "duetChange", 3);
+    /**
+     * Own Properties
+     */
+    this.toggleId = createID("DuetToggle");
+    /**
+     * Theme of the card.
+     */
+    this.theme = "";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Aria Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
+    /**
+     * Label for the toggle.
+     */
+    this.label = "label";
+    /**
+     * 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;
+    /**
+     * Makes the input component disabled. This prevents users from being able to
+     * interact with the input, and conveys its inactive state to assistive technologies.
+     */
+    this.disabled = false;
+    /**
+     * Check state of the checkbox.
+     */
+    this.checked = false;
+    /**
+     * Component event handling.
+     */
+    this.onClick = (ev) => {
+      ev.preventDefault();
+      this.setFocus();
+      this.checked = !this.checked;
+    };
+  }
+  checkedChanged(isChecked) {
+    this.duetChange.emit({
+      checked: isChecked,
+      value: this.value,
+      component: "duet-toggle",
+    });
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    if (this.value === undefined) {
+      this.value = this.identifier;
+    }
+  }
+  /**
+   * Sets focus on the specified `duet-toggle`. Use this method instead of the global
+   * `input.focus()`.
+   */
+  async setFocus(options) {
+    this.nativeInput.focus(options);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const identifier = this.identifier || this.toggleId;
+    return (h(Host, { onClick: this.disabled ? undefined : this.onClick, class: { "duet-m-0": this.margin === "none" } }, h("div", { class: {
+        "duet-toggle": true,
+        "duet-theme-turva": this.theme === "turva",
+      } }, h("duet-label", { theme: this.theme, for: identifier }, this.label), h("label", { class: "duet-switch", htmlFor: identifier }, h("input", { type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled, ref: input => (this.nativeInput = input) }), h("div", { class: "duet-slider" })))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "checked": ["checkedChanged"]
+  }; }
+  static get style() { return duetToggleCss; }
+}, [2, "duet-toggle", {
+    "theme": [1025],
+    "margin": [1],
+    "accessibleActiveDescendant": [1, "accessible-active-descendant"],
+    "accessibleControls": [1, "accessible-controls"],
+    "accessibleOwns": [1, "accessible-owns"],
+    "accessibleDescribedBy": [1, "accessible-described-by"],
+    "accessibleDetails": [1, "accessible-details"],
+    "accessibleLabelledBy": [1, "accessible-labelled-by"],
+    "accessibleDescription": [1, "accessible-description"],
+    "label": [1],
+    "required": [4],
+    "disabled": [516],
+    "checked": [1540],
+    "value": [1537],
+    "identifier": [1],
+    "name": [1],
+    "role": [1],
+    "setFocus": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-toggle", "duet-label"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-toggle":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetToggle$1);
+      }
+      break;
+    case "duet-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetToggle = DuetToggle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetToggle, defineCustomElement };

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

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

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

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

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

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