@duetds/components 6.2.3 → 6.2.5

package/lib/esm/duet-action-button.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8469ee1a.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4df60498.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { c as createID } from './create-id-981107da.js';
 import { d as debounce } from './js-utils-fa98b8cd.js';
@@ -18,79 +18,36 @@ const DuetActionButton = class {
     registerInstance(this, hostRef);
     this.duetActionEvent = createEvent(this, "duetActionEvent", 6);
     this.listId = createID("duet-action-button");
-    this.numbersStore = "";
     /**
-     * Theme of the pagination.
+     * 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,
+      });
+    });
+    this.numbersStore = "";
     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",
@@ -102,28 +59,8 @@ const DuetActionButton = class {
         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) {

package/lib/esm/duet-alert.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-8469ee1a.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-4df60498.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { c as createID } from './create-id-981107da.js';
 import { g as getLocaleString } from './language-utils-bf701d37.js';
@@ -14,61 +14,29 @@ const DuetAlert = class {
     registerInstance(this, hostRef);
     this.duetDismiss = createEvent(this, "duetDismiss", 7);
     this.descriptiveId = createID("DuetAlert");
-    /**
-     * Theme of the card.
-     */
+    this.handleDismiss = (ev) => {
+      this.isDismissed = true;
+      this.duetDismiss.emit({
+        component: "duet-alert",
+        originalEvent: ev,
+      });
+    };
     this.theme = "";
-    /**
-     * State() variables
-     * Inlined decorator, alphabetical order.
-     */
     this.isDismissed = false;
-    /**
-     * Property to change languageDefaults on the component.
-     * normally you would handle these strings on an application level and override @accessibleLabel when needed
-     * @default {fi: "Sulje viesti", sv: "Stäng meddelandet", en: "Close the message"}
-     */
+    this.timeoutID = undefined;
     this.accessibleLabelDefaults = {
       fi: "Sulje viesti",
       sv: "Stäng meddelandet",
       en: "Close the message",
     };
-    /**
-     * Adds accessible label for the dismissible alert close button.
-     * @default {fi: "Sulje viesti", sv: "Stäng meddelandet", en: "Close the message"}
-     */
     this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
-    /**
-     * Enable or disabled announcements by assistive technologies.
-     */
     this.announcements = true;
-    /**
-     * Icon to display to the left of the content.
-     */
     this.icon = "";
-    /**
-     * Controls the margin of the component.
-     */
+    this.autoDismiss = undefined;
     this.margin = "auto";
-    /**
-     * Controls the padding of the component.
-     */
     this.padding = "auto";
-    /**
-     * Style variation of the alert.
-     */
     this.variation = "default";
-    /**
-     * Should a button be rendered to dismiss the alert?
-     */
     this.dismissible = false;
-    this.handleDismiss = (ev) => {
-      this.isDismissed = true;
-      this.duetDismiss.emit({
-        component: "duet-alert",
-        originalEvent: ev,
-      });
-    };
   }
   /**
    * Component lifecycle events.

package/lib/esm/duet-badge.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host } from './index-8469ee1a.js';
+import { r as registerInstance, h, H as Host } from './index-4df60498.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 
 const duetBadgeCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:4px !important;margin-bottom:2px !important;display:inline-block;width:auto;vertical-align:middle}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-badge{width:100%;padding:4.4444444444px 12px 5.4444444444px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.75rem;font-style:normal;font-weight:600;line-height:1.25;color:#00294d;text-align:center;word-break:break-word;vertical-align:middle;background:#e6f1f7;border-radius:20rem}.duet-badge.duet-p-0{padding:0 !important}.duet-badge.duet-m-0{margin:0 !important}.duet-badge.duet-theme-turva{padding:5.4444444444px 12px 4.4444444444px;font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:700;color:#171c3a;background:#e8e8eb}.duet-badge.warning{background:#fef3df}.duet-badge.warning.duet-theme-turva{background:#fef1db}.duet-badge.danger{background:#fce9ef}.duet-badge.danger.duet-theme-turva{background:#fceae7}.duet-badge.success{background:#e6f3ef}.duet-badge.success.duet-theme-turva{background:#e6f3ed}";
@@ -9,17 +9,8 @@ const duetBadgeCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margi
 const DuetBadge = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * Theme of the badge.
-     */
     this.theme = "";
-    /**
-     * Style variation of the alert.
-     */
     this.variation = "default";
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
   }
   /**

package/lib/esm/duet-breadcrumb.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host } from './index-8469ee1a.js';
+import { r as registerInstance, h, H as Host } from './index-4df60498.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 
 const duetBreadcrumbCss = "*,*::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-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;color:#00294d;text-decoration:none}.duet-breadcrumb:hover{color:#004d80}.duet-breadcrumb.duet-theme-turva{color:#171c3a}.duet-breadcrumb.duet-theme-turva:hover{color:#940925}.duet-breadcrumb:focus{outline:0}.duet-breadcrumb:active{opacity:0.75}:host(.user-is-tabbing) .duet-breadcrumb:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-breadcrumb.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
@@ -9,18 +9,10 @@ const duetBreadcrumbCss = "*,*::after,*::before{box-sizing:border-box;padding:0;
 const DuetBreadcrumb = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * Theme
-     */
     this.theme = "";
-    /**
-     * Href
-     */
     this.href = "";
-    /**
-     * Icon
-     */
     this.icon = "";
+    this.accessibleLabel = undefined;
   }
   /**
    * Component lifecycle events.

package/lib/esm/duet-breadcrumbs.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from './index-8469ee1a.js';
+import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from './index-4df60498.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { g as getLocaleString } from './language-utils-bf701d37.js';
 import './string-utils-5954f458.js';
@@ -19,9 +19,7 @@ const DuetBreadcrumbs = class {
       sv: "Ströbröd",
       en: "Breadcrumbs",
     });
-    /**
-     * Theme
-     */
+    this.children = undefined;
     this.theme = "";
   }
   /**

package/lib/esm/duet-button_2.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8469ee1a.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4df60498.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { D as DuetStringsExternalDefaults } from './common-strings-97e04e4b.js';
 import { a as getLanguage, g as getLocaleString } from './language-utils-bf701d37.js';
@@ -17,137 +17,61 @@ const DuetButton = class {
     this.duetFocus = createEvent(this, "duetFocus", 7);
     this.duetBlur = createEvent(this, "duetBlur", 7);
     /**
-     * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button.
+     * Component event handling.
      */
+    this.handleClick = (ev) => {
+      // If this button wants to specifically submit a form
+      // climb up the dom to see if we're in a <form>
+      // and if so, then use JS to submit it.
+      // To understand better, see: https://www.hjorthhansen.dev/shadow-dom-form-participation/
+      if (!this.url && this.element.closest("form")) {
+        ev.preventDefault();
+        this.proxyButton.click();
+      }
+    };
+    this.onFocus = () => {
+      this.duetFocus.emit();
+    };
+    this.onBlur = () => {
+      this.duetBlur.emit();
+    };
+    this.accessibleLabel = undefined;
+    this.accessibleControls = undefined;
     this.accessiblePopup = "false";
-    /**
-     * Details of the component
-     */
+    this.accessibleActiveDescendant = undefined;
+    this.accessibleOwns = undefined;
+    this.accessibleDescribedBy = undefined;
     this.accessibleDetails = undefined;
-    /**
-     * String of id's that indicate alternative labels elements
-     */
     this.accessibleLabelledBy = undefined;
-    /**
-     * Aria description the button
-     */
     this.accessibleDescription = undefined;
-    /**
-     * Loading state of the button
-     */
+    this.accessibleExpanded = undefined;
+    this.accessiblePressed = undefined;
     this.loading = false;
-    /**
-     * Style variation of the button.
-     * @negative - value is deprecated and should be used in combination with negative prop in the future
-     * @destructive - value is deprecated and should be replace with destructive-secondary
-     */
     this.variation = "default";
-    /**
-     * Negative variation, can be combined with Variation to produce negative versions
-     */
     this.negative = false;
-    /**
-     * Theme of the button.
-     */
     this.theme = "";
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
-    /**
-     * Controls the padding of the component.
-     */
     this.padding = "auto";
-    /**
-     * Centers the text of a button
-     */
     this.centerText = false;
-    /**
-     * Controls the text wrapping.
-     */
     this.wrapping = "auto";
-    /**
-     * Expands the button to fill 100% of the container width.
-     */
     this.expand = false;
-    /**
-     * Keep the button fixed width even on mobile viewports.
-     */
     this.fixed = false;
-    /**
-     * Makes the button component disabled. This prevents users from being able to
-     * interact with the button, and conveys its inactive state to assistive technologies.
-     */
     this.disabled = false;
-    /**
-     * Allows the button to submit a form.
-     */
+    this.name = undefined;
+    this.value = undefined;
+    this.identifier = undefined;
     this.submit = false;
-    /**
-     * Forces URL to open in a new browser tab. Used together with URL prop.
-     */
     this.external = false;
-    /**
-     * @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();
-    /**
-     * Property to change accessibleLabelExternal defaults on the component.
-     * normally you would handle these strings on an application level and override @accessibleLabelExternal when needed
-     * @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);
-    /**
-     * Icon to display to the left of the button content.
-     * This is ignored/overridden when button is used as an external link.
-     */
     this.icon = "";
-    /**
-     * Custom color to be used for text, as a design token entered in camelCase or
-     * kebab-case. Example: "color-primary".
-     */
     this.color = "";
-    /**
-     * Show icon on the right side of the button content.
-     */
     this.iconRight = false;
-    /**
-     * Icon size.
-     */
     this.iconSize = "medium";
-    /**
-     * Button’s size.
-     */
     this.size = "medium";
-    /**
-     * Whether this button should use styles meant for displaying just an icon.
-     */
     this.iconOnly = false;
-    /**
-     * Component event handling.
-     */
-    this.handleClick = (ev) => {
-      // If this button wants to specifically submit a form
-      // climb up the dom to see if we're in a <form>
-      // and if so, then use JS to submit it.
-      // To understand better, see: https://www.hjorthhansen.dev/shadow-dom-form-participation/
-      if (!this.url && this.element.closest("form")) {
-        ev.preventDefault();
-        this.proxyButton.click();
-      }
-    };
-    this.onFocus = () => {
-      this.duetFocus.emit();
-    };
-    this.onBlur = () => {
-      this.duetBlur.emit();
-    };
+    this.url = undefined;
   }
   /**
    * Component lifecycle events.
@@ -273,22 +197,9 @@ const duetSpinnerCss = ":host{box-sizing:border-box;padding:0;margin:0;backgroun
 const DuetSpinner = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * Color of the spinner, as a design token entered in camelCase or kebab-case.
-     * Example: "color-primary". This property can also be set to "currentColor"
-     * which forces the icon to use the CSS text color of parent element instead.
-     * Useful when you want to control the color in stylesheet instead.
-     */
+    this.accessibleLabel = undefined;
     this.color = "gray-lightest";
-    /**
-     * Size variation of the spinner.
-     */
     this.size = "small";
-    /**
-     * Theme of the spinner. When used this will override the color setting and
-     * use "primary" or "primary-turva" as the color depending on which theme
-     * is chosen.
-     */
     this.theme = "";
   }
   /**

package/lib/esm/duet-caption_4.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement, F as Fragment } from './index-8469ee1a.js';
+import { r as registerInstance, h, H as Host, g as getElement, F as Fragment } from './index-4df60498.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { s as sanitizeString } from './string-utils-5954f458.js';
 import { g as getColorByName } from './token-utils-b531747a.js';
@@ -15,21 +15,9 @@ const duetCaptionCss = ":host{box-sizing:border-box;padding:0;margin:0;backgroun
 const DuetCaption = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * Theme of the caption.
-     */
     this.theme = "";
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
-    /**
-     * Selected state of the caption. Used inside Choice component.
-     */
     this.selected = false;
-    /**
-     * Controls the size of the caption.
-     */
     this.size = "medium";
   }
   /**
@@ -59,35 +47,13 @@ const duetHeadingCss = "*,*::after,*::before{box-sizing:border-box;padding:0;mar
 const DuetHeading = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * The actual heading level used in the HTML markup.
-     */
     this.level = "h2";
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
-    /**
-     * Enable or disable the border underneath the heading, solid will darken the border
-     */
+    this.visualLevel = undefined;
     this.border = false;
-    /**
-     * This property allows you to set normal or semibold font weight for all sizes
-     * when needed.
-     */
     this.weight = "auto";
-    /**
-     * Custom color for the heading as a design token entered in camelCase or
-     * kebab-case. Example: "color-primary".
-     */
     this.color = "";
-    /**
-     * Theme of the heading.
-     */
     this.theme = "";
-    /**
-     * Enable hyphenation for long titles. Useful when there is no control over content e.g. user-generated content.
-     */
     this.hyphenate = false;
   }
   /**
@@ -124,34 +90,13 @@ const duetLinkCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin
 const DuetLink = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * The currently active language. This setting changes the external link
-     * accessible label 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.accessibleLabel = undefined;
     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);
-    /**
-     * Theme of the button.
-     */
+    this.identifier = undefined;
     this.theme = "";
-    /**
-     * A destination to link to, rendered in the href attribute of a link.
-     */
     this.url = "#";
-    /**
-     * Forces URL to open in a new browser tab. Used together with URL prop.
-     */
     this.external = false;
   }
   /**
@@ -187,30 +132,11 @@ const duetParagraphCss = "*,*::after,*::before{box-sizing:border-box;padding:0;m
 const DuetParagraph = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * 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 = "";
   }
   /**