@duetds/components 6.7.1 → 6.8.0

package/lib/types/common-types.d.ts

@@ -5,13 +5,14 @@ export type DuetTheme = "" | "default" | "turva" // empty string means inherit g
 export type DuetTooltipDirection = "left" | "auto" | "right"
 export type DuetIconName = string
 export type DuetColor = string
+export type DuetBlock = "div"
 export type DuetHeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
 export type DuetVisualHeadingLevel = "h0" | DuetHeadingLevel
 export type DuetLanguage = "fi" | "en" | "sv"
 export type DuetLanguageWithUs = "fi" | "en" | "sv" | "us"
 export type DuetStatus = "default" | "success" | "danger" | "warning"
 export type DuetAnalyticsEvent<T extends string> = { analyticsId: string; component: T }
-export type DuetGridBreakpoint = "small" | "medium" | "x-large"
+export type DuetGridBreakpoint = "x-small" | "small" | "medium" | "large" | "x-large"
 export type DuetLocale = "fi-FI" | "sv-SE" | "en-GB" | "en-US"
 export type DuetChoiceType = "radio" | "checkbox"
 export type DuetTableBreakpoint =
@@ -33,3 +34,6 @@ export type StatusMessage = {
   file: string
   files: string
 }
+export type DuetCardHeadingLevel = DuetHeadingLevel | DuetBlock
+export type DuetLinkVariation = "default" | "block"
+export type DuetChoiceGroupBreakpoint = "x-small" | "small" | "medium" | "large" | "x-large"

package/lib/types/components/duet-card/duet-card.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { ThemeableComponent } from "../../common";
-import { DuetColor, DuetHeadingLevel, DuetIconName, DuetMargin, DuetTheme } from "../../common-types";
+import { DuetCardHeadingLevel, DuetColor, DuetIconName, DuetMargin, DuetTheme } from "../../common-types";
 import { DuetBreakpoints } from "../../utils/token-utils";
 export type DuetCardVariation = "default" | "info" | "plain";
 export type DuetCardPadding = "x-large" | "large" | "medium" | "small" | "x-small" | "xx-small" | "none";
@@ -60,8 +60,16 @@ export declare class DuetCard implements ThemeableComponent {
   /**
    * The actual heading level used for the heading in html markup. This setting
    * exists for accessibility reasons. It doesn’t change the style visually.
+   * This setting is only used if the heading property is set.
+   * If you provide your own heading(s) in the slot, you should set this to neutral "div"
+   * in order to avoid nested headings.
    */
-  headingLevel: DuetHeadingLevel;
+  headingLevel: DuetCardHeadingLevel;
+  /**
+   * Custom color to be used for the card's heading background, as a design token entered in
+   * camelCase or kebab-case. Example: "primary".
+   */
+  headingBackground: DuetColor | undefined;
   /**
    * Icon to display on the left side of heading. Example: "form-location"
    */

package/lib/types/components/duet-choice-group/duet-choice-group.d.ts

@@ -1,4 +1,4 @@
-import { DuetDirection, DuetMargin, DuetTheme, DuetTooltipDirection } from "../../common-types";
+import { DuetChoiceGroupBreakpoint, DuetDirection, DuetMargin, DuetTheme, DuetTooltipDirection } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 export declare class DuetChoiceGroup implements ThemeableComponent {
   /**
@@ -57,6 +57,11 @@ export declare class DuetChoiceGroup implements ThemeableComponent {
    * makes sure that contents are stacked vertically on mobile.
    */
   responsive: boolean;
+  /**
+   * Switch the breakpoint used to trigger the content stacking. These match to
+   * similar media query tokens eg.: $media-query-small, $media-query-medium.
+   */
+  breakpoint: DuetChoiceGroupBreakpoint;
   /**
    * The value of the selected choice button.
    */

package/lib/types/components/duet-combobox/duet-combobox.d.ts

@@ -69,6 +69,10 @@ export declare class DuetCombobox implements ThemeableComponent {
    * Defines minimum number of characters that must be given to show search results
    */
   minCharacters: number;
+  /**
+   * Defines if items list should always open after clicking on input
+   */
+  openListOnClick: boolean;
   /**
    * Emitted when a keyboard input occurred.
    */

package/lib/types/components/duet-icon/duet-icon.d.ts

@@ -60,7 +60,7 @@ export declare class DuetIcon implements ThemeableComponent {
   /**
    * Shape of the background. Brand follows new designs and currently doesn't support xxx-small size.
    */
-  shape: "circle" | "brand";
+  shape: "circle" | "brand" | "brand-rotated";
   /**
    * Component lifecycle events.
    */

package/lib/types/components/duet-link/duet-link.d.ts

@@ -1,4 +1,4 @@
-import { DuetLanguage, DuetTheme } from "../../common-types";
+import { DuetIconName, DuetLanguage, DuetLinkVariation, DuetPadding, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetLangObject } from "../../utils/language-utils";
 /**
@@ -6,6 +6,10 @@ import { DuetLangObject } from "../../utils/language-utils";
  */
 export declare class DuetLink implements ThemeableComponent {
   private nativeLink;
+  /**
+   * Style variation of the link.
+   */
+  variation: DuetLinkVariation;
   /**
    * Adds accessible label for the link that is only shown for screen readers.
    * Typically, this label text replaces the visible text on the link for users
@@ -51,6 +55,14 @@ export declare class DuetLink implements ThemeableComponent {
    * Initially visually hidden link, which is shown on focus.
    */
   tabToLink: boolean;
+  /**
+   * Icon to display on the left side of the ink text. (only with variations other than "default")
+   */
+  icon: DuetIconName;
+  /**
+   * Controls the padding of the component (only with variations other than "default")
+   */
+  padding: DuetPadding;
   /**
    * Component lifecycle events.
    */
@@ -60,6 +72,8 @@ export declare class DuetLink implements ThemeableComponent {
    * `link.focus()`.
    */
   setFocus(options?: FocusOptions): Promise<void>;
+  private renderContent;
+  private renderGrid;
   /**
    * render() function
    * Always the last one in the class.

package/lib/types/components/duet-list/duet-list.d.ts

@@ -1,6 +1,6 @@
 import { DuetMargin, DuetPadding, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
-export type DuetListVariation = "default" | "striped";
+export type DuetListVariation = "default" | "striped" | "bordered" | "inner-bordered";
 export type DuetListMobileAlignment = "left" | "center";
 export type DuetListLabelWidth = "30" | "50" | "70";
 export type DuetListBreakpoint = "small" | "large";

package/lib/types/components/duet-modal/duet-modal.d.ts

@@ -17,6 +17,7 @@ export declare class DuetModal implements ThemeableComponent, A11yComponent {
   private modalId;
   private slotDefaultId;
   private modalEl?;
+  private modalInnerEl?;
   private buttonEl?;
   private focusedElBeforeOpen;
   private isAndroidDevice;

package/lib/types/components/duet-table/duet-table.d.ts

@@ -55,6 +55,10 @@ export declare class DuetTable implements ThemeableComponent {
    * this is useful for comparison tables where it's important to maintain column and row layout.
    */
   breakpoint: DuetTableBreakpoint;
+  /**
+   * Hide a thead section visually. The content is still available to screen readers.
+   */
+  hideHeadVisually: boolean;
   handleMediaQueryChange: (mq: MediaQueryListEvent | MediaQueryList) => void;
   connectedCallback(): void;
   componentWillLoad(): void;

package/lib/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetLocale, DuetMargin, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel, StatusMessage } from "./common-types";
+import { DuetCardHeadingLevel, DuetChoiceGroupBreakpoint, DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetLinkVariation, DuetLocale, DuetMargin, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel, StatusMessage } from "./common-types";
 import { DuetActionButtonEvent, DuetActionButtonIconSize } from "./components/duet-action-button/duet-action-button";
 import { DuetLangObject } from "./utils/language-utils";
 import { DuetAlertEvent } from "./components/duet-alert/duet-alert";
@@ -56,7 +56,7 @@ import { DuetTooltipBreakpoint } from "./components/duet-tooltip/duet-tooltip";
 import { DuetUploadEvent, DuetUploadTableGroupName, StringMap, XHRInternalMiddleWare } from "./components/duet-upload/duet-upload";
 import { DuetEditableTableActions as DuetEditableTableActions1 } from "./components/duet-editable-table/duet-editable-table";
 import { DuetUploadErrorCode } from "./components/duet-upload/errorcodes.utils";
-export { DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetLocale, DuetMargin, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel, StatusMessage } from "./common-types";
+export { DuetCardHeadingLevel, DuetChoiceGroupBreakpoint, DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetLinkVariation, DuetLocale, DuetMargin, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel, StatusMessage } from "./common-types";
 export { DuetActionButtonEvent, DuetActionButtonIconSize } from "./components/duet-action-button/duet-action-button";
 export { DuetLangObject } from "./utils/language-utils";
 export { DuetAlertEvent } from "./components/duet-alert/duet-alert";
@@ -467,9 +467,13 @@ export namespace Components {
          */
         "heading": string;
         /**
-          * The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually.
+          * Custom color to be used for the card's heading background, as a design token entered in camelCase or kebab-case. Example: "primary".
          */
-        "headingLevel": DuetHeadingLevel;
+        "headingBackground": DuetColor | undefined;
+        /**
+          * The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually. This setting is only used if the heading property is set. If you provide your own heading(s) in the slot, you should set this to neutral "div" in order to avoid nested headings.
+         */
+        "headingLevel": DuetCardHeadingLevel;
         /**
           * Icon to display on the left side of heading. Example: "form-location"
          */
@@ -744,6 +748,10 @@ export namespace Components {
         "value": string;
     }
     interface DuetChoiceGroup {
+        /**
+          * Switch the breakpoint used to trigger the content stacking. These match to similar media query tokens eg.: $media-query-small, $media-query-medium.
+         */
+        "breakpoint": DuetChoiceGroupBreakpoint;
         /**
           * Additional caption to show inside the label of the choice group.
          */
@@ -865,6 +873,10 @@ export namespace Components {
           * Defines minimum number of characters that must be given to show search results
          */
         "minCharacters": number;
+        /**
+          * Defines if items list should always open after clicking on input
+         */
+        "openListOnClick": boolean;
         /**
           * Theme of the combobox.
          */
@@ -1529,7 +1541,7 @@ export namespace Components {
         /**
           * Shape of the background. Brand follows new designs and currently doesn't support xxx-small size.
          */
-        "shape": "circle" | "brand";
+        "shape": "circle" | "brand" | "brand-rotated";
         /**
           * Icon size. Entered as one of the icon size design tokens.
          */
@@ -1780,6 +1792,10 @@ export namespace Components {
           * Forces URL to open in a new browser tab. Used together with URL prop.
          */
         "external": boolean;
+        /**
+          * Icon to display on the left side of the ink text. (only with variations other than "default")
+         */
+        "icon": DuetIconName;
         /**
           * Adds a unique identifier for the link. Please note that with this particular component this id is added inside Shadow DOM. If you need an id on the html element, use regular id attribute instead.
          */
@@ -1790,6 +1806,10 @@ export namespace Components {
           * @default "fi"
          */
         "language": DuetLanguage;
+        /**
+          * Controls the padding of the component (only with variations other than "default")
+         */
+        "padding": DuetPadding;
         /**
           * Sets focus on the specified `duet-link`. Use this method instead of the global `link.focus()`.
          */
@@ -1806,6 +1826,10 @@ export namespace Components {
           * A destination to link to, rendered in the href attribute of a link.
          */
         "url": string;
+        /**
+          * Style variation of the link.
+         */
+        "variation": DuetLinkVariation;
     }
     interface DuetList {
         /**
@@ -3252,6 +3276,10 @@ export namespace Components {
           * By default the table is responsive - it will be flattened at narrow viewport widths. This prop controls the breakpoint at which the table should be rendered as a _regular_ table. Set to "none" to disable the responsive functionality. Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling - this is useful for comparison tables where it's important to maintain column and row layout.
          */
         "breakpoint": DuetTableBreakpoint;
+        /**
+          * Hide a thead section visually. The content is still available to screen readers.
+         */
+        "hideHeadVisually": boolean;
         /**
           * Controls the margin of the component.
          */
@@ -4970,9 +4998,13 @@ declare namespace LocalJSX {
          */
         "heading"?: string;
         /**
-          * The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually.
+          * Custom color to be used for the card's heading background, as a design token entered in camelCase or kebab-case. Example: "primary".
          */
-        "headingLevel"?: DuetHeadingLevel;
+        "headingBackground"?: DuetColor | undefined;
+        /**
+          * The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually. This setting is only used if the heading property is set. If you provide your own heading(s) in the slot, you should set this to neutral "div" in order to avoid nested headings.
+         */
+        "headingLevel"?: DuetCardHeadingLevel;
         /**
           * Icon to display on the left side of heading. Example: "form-location"
          */
@@ -5256,6 +5288,10 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface DuetChoiceGroup {
+        /**
+          * Switch the breakpoint used to trigger the content stacking. These match to similar media query tokens eg.: $media-query-small, $media-query-medium.
+         */
+        "breakpoint"?: DuetChoiceGroupBreakpoint;
         /**
           * Additional caption to show inside the label of the choice group.
          */
@@ -5376,6 +5412,10 @@ declare namespace LocalJSX {
           * Emitted when a keyboard input occurred.
          */
         "onDuetChange"?: (event: DuetComboboxCustomEvent<DuetComboboxEvent>) => void;
+        /**
+          * Defines if items list should always open after clicking on input
+         */
+        "openListOnClick"?: boolean;
         /**
           * Theme of the combobox.
          */
@@ -6126,7 +6166,7 @@ declare namespace LocalJSX {
         /**
           * Shape of the background. Brand follows new designs and currently doesn't support xxx-small size.
          */
-        "shape"?: "circle" | "brand";
+        "shape"?: "circle" | "brand" | "brand-rotated";
         /**
           * Icon size. Entered as one of the icon size design tokens.
          */
@@ -6385,6 +6425,10 @@ declare namespace LocalJSX {
           * Forces URL to open in a new browser tab. Used together with URL prop.
          */
         "external"?: boolean;
+        /**
+          * Icon to display on the left side of the ink text. (only with variations other than "default")
+         */
+        "icon"?: DuetIconName;
         /**
           * Adds a unique identifier for the link. Please note that with this particular component this id is added inside Shadow DOM. If you need an id on the html element, use regular id attribute instead.
          */
@@ -6395,6 +6439,10 @@ declare namespace LocalJSX {
           * @default "fi"
          */
         "language"?: DuetLanguage;
+        /**
+          * Controls the padding of the component (only with variations other than "default")
+         */
+        "padding"?: DuetPadding;
         /**
           * Initially visually hidden link, which is shown on focus.
          */
@@ -6407,6 +6455,10 @@ declare namespace LocalJSX {
           * A destination to link to, rendered in the href attribute of a link.
          */
         "url"?: string;
+        /**
+          * Style variation of the link.
+         */
+        "variation"?: DuetLinkVariation;
     }
     interface DuetList {
         /**
@@ -7877,6 +7929,10 @@ declare namespace LocalJSX {
           * By default the table is responsive - it will be flattened at narrow viewport widths. This prop controls the breakpoint at which the table should be rendered as a _regular_ table. Set to "none" to disable the responsive functionality. Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling - this is useful for comparison tables where it's important to maintain column and row layout.
          */
         "breakpoint"?: DuetTableBreakpoint;
+        /**
+          * Hide a thead section visually. The content is still available to screen readers.
+         */
+        "hideHeadVisually"?: boolean;
         /**
           * Controls the margin of the component.
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "6.7.1",
+  "version": "6.8.0",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -50,9 +50,9 @@
     "body-scroll-lock": "3.1.5"
   },
   "devDependencies": {
-    "@duetds/fonts": "2.0.36",
-    "@duetds/icons": "3.0.36",
-    "@duetds/tokens": "3.0.36",
+    "@duetds/fonts": "2.0.37",
+    "@duetds/icons": "3.0.37",
+    "@duetds/tokens": "3.0.37",
     "@rollup/plugin-replace": "5.0.2",
     "@stencil/core": "3.1.0",
     "@stencil/sass": "3.0.0",
@@ -78,5 +78,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "473da676ecdde00ca544c4317a4afb043d40b915"
+  "gitHead": "466317db8bc0ba9d1869b66a20ac177f10b9a81d"
 }

package/lib/dist-custom-elements/p-562ae9bf.js

@@ -1,176 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-67e14cd3.js';
-import { m as media_query_large, a as media_query_medium, b as media_query_small } from './p-c4d8cad0.js';
-import { w as watchForOptions, a as watchForElement } from './p-12721178.js';
-
-const duetGridCss = ".sc-duet-grid-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;width:100%;max-width:100%;height:auto}@media (min-width: 36em){.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:row !important}}@media (min-width: 48em){.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:row !important}}@media (min-width: 64.0625em){.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:row !important}}.duet-grid-wrap.sc-duet-grid-h{flex-wrap:wrap !important}.duet-no-stacking.sc-duet-grid-h{flex-direction:row !important}.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 36em){.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 48em){.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 64.0625em){.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-align-top.duet-no-stacking.sc-duet-grid-h{align-items:flex-start !important}.duet-grid-align-bottom.duet-no-stacking.sc-duet-grid-h{align-items:flex-end !important}.duet-grid-align-center.duet-no-stacking.sc-duet-grid-h{align-items:center !important}.duet-grid-align-stretch.duet-no-stacking.sc-duet-grid-h{align-items:stretch !important}.duet-grid-align-baseline.duet-no-stacking.sc-duet-grid-h{align-items:baseline !important}@media (min-width: 36em){.duet-grid-align-top.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 36em){.duet-grid-align-bottom.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 36em){.duet-grid-align-center.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:center !important}}@media (min-width: 36em){.duet-grid-align-stretch.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 36em){.duet-grid-align-baseline.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 48em){.duet-grid-align-top.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 48em){.duet-grid-align-bottom.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 48em){.duet-grid-align-center.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:center !important}}@media (min-width: 48em){.duet-grid-align-stretch.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 48em){.duet-grid-align-baseline.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 64.0625em){.duet-grid-align-top.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 64.0625em){.duet-grid-align-bottom.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 64.0625em){.duet-grid-align-center.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:center !important}}@media (min-width: 64.0625em){.duet-grid-align-stretch.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 64.0625em){.duet-grid-align-baseline.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:baseline !important}}.duet-grid-distribution-left.sc-duet-grid-h{justify-content:flex-start !important}.duet-grid-distribution-right.sc-duet-grid-h{justify-content:flex-end !important}.duet-grid-distribution-center.sc-duet-grid-h{justify-content:center !important}.duet-grid-distribution-between.sc-duet-grid-h{justify-content:space-between !important}.duet-grid-distribution-around.sc-duet-grid-h{justify-content:space-around !important}.duet-grid-distribution-evenly.sc-duet-grid-h{justify-content:space-evenly !important}@media (max-width: 35.9375em){.duet-grid-mobile-left.sc-duet-grid-h{align-items:flex-start !important;justify-content:flex-start !important;text-align:left !important}}@media (max-width: 35.9375em){.duet-grid-mobile-center.sc-duet-grid-h{align-items:center !important;justify-content:center !important;text-align:center !important}.duet-grid-mobile-center.sc-duet-grid-h *.sc-duet-grid{text-align:center !important}}@media (max-width: 35.9375em){.duet-grid-mobile-right.sc-duet-grid-h{align-items:flex-end !important;justify-content:flex-end !important;text-align:right !important}.duet-grid-mobile-right.sc-duet-grid-h *.sc-duet-grid{text-align:right !important}}";
-
-function isGridItem(element) {
-  return element.tagName.toLowerCase() === "duet-grid-item";
-}
-const DuetGrid = /*@__PURE__*/ proxyCustomElement(class extends H {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.mql = [
-      window.matchMedia(media_query_large.replace(/'/g, "")),
-      window.matchMedia(media_query_medium.replace(/'/g, "")),
-      window.matchMedia(media_query_small.replace(/'/g, "")),
-    ];
-    this.distributeFormElement = false;
-    this.responsive = false;
-    this.breakpoint = "small";
-    this.direction = "horizontal";
-    this.alignment = "top";
-    this.distribution = "default";
-    this.mobile = "";
-  }
-  /**
-   * Private functions
-   */
-  /**
-   * Returns the element height including margins
-   * @param element - element
-   * @returns {number}
-   */
-  outerHeight(element) {
-    const height = element.offsetHeight, style = window.getComputedStyle(element);
-    return ["top", "bottom"]
-      .map(side => parseInt(style[`margin-${side}`]))
-      .reduce((total, side) => total + side, height);
-  }
-  /**
-   * Component lifecycle events.
-   */
-  async connectedCallback() {
-    const el = this.element;
-    this.distributeFormElement = this.alignment === "form_distribute";
-    this.mutationO = watchForOptions(el, "duet-grid-item", () => {
-      this.updateGridItems();
-    });
-    // the next two functions are used to watch for changes in the grid items, and are process intensive - so only run when needed
-    if (this.distributeFormElement) {
-      this.mutation1 = watchForElement(el, "duet-input", () => {
-        this.updateGridItemsWithInputFields();
-      });
-      // listen for potential mediaquery changes and reset layout
-      for (let i = 0; i < this.mql.length; i++) {
-        // addEventListener is not available in Stencil hydrate
-        if (this.mql[i].addEventListener) {
-          this.mql[i].addEventListener("change", this.updateGridItemsWithInputFields.bind(this));
-        }
-      }
-    }
-    this.updateGridItems();
-  }
-  disconnectedCallback() {
-    if (this.mutationO) {
-      this.mutationO.disconnect();
-      this.mutationO = undefined;
-    }
-    if (this.mutation1) {
-      this.mutation1.disconnect();
-      this.mutation1 = undefined;
-    }
-    // listen for potential mediaquery changes and reset layout
-    for (let i = 0; i < this.mql.length; i++) {
-      // addEventListener is not available in Stencil hydrate
-      if (this.mql[i].removeEventListener) {
-        this.mql[i].removeEventListener("change", this.updateGridItemsWithInputFields.bind(this));
-      }
-    }
-  }
-  /**
-   * Local methods
-   */
-  async updateGridItems() {
-    const items = Array.from(this.element.children).filter(isGridItem);
-    items.forEach(item => {
-      item.responsive = this.responsive;
-      item.breakpoint = this.breakpoint;
-    });
-  }
-  async updateGridItemsWithInputFields() {
-    const items = Array.from(this.element.children).filter(isGridItem);
-    // if layout changes to columns instead of row, remove all padding
-    const hasColumnLayout = window ? window.getComputedStyle(this.element).flexDirection === "column" : false;
-    let maxHeight = 0;
-    const sizes = [];
-    items.forEach(item => {
-      const inputErrorDom = item.querySelector("span.duet-input-error");
-      const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
-      sizes.push(height);
-    });
-    maxHeight = Math.max(...sizes);
-    items.forEach(item => {
-      const inputErrorDom = item.querySelector("span.duet-input-error");
-      const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
-      if (height < maxHeight && !hasColumnLayout) {
-        item.setAttribute("style", `padding-bottom: ${maxHeight - height}px;`);
-      }
-      else if (height === maxHeight || hasColumnLayout) {
-        item.setAttribute("style", `padding-bottom: 0px;`);
-      }
-    });
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    return (h(Host, { class: {
-        "duet-grid": true,
-        "duet-no-stacking": !this.responsive,
-        "duet-grid-align-top": this.alignment === "top",
-        "duet-grid-align-bottom": this.alignment === "bottom" || this.alignment === "form_distribute",
-        "duet-grid-align-center": this.alignment === "center",
-        "duet-grid-align-stretch": this.alignment === "stretch",
-        "duet-grid-align-baseline": this.alignment === "baseline",
-        "duet-grid-distribution-left": this.distribution === "left",
-        "duet-grid-distribution-right": this.distribution === "right",
-        "duet-grid-distribution-center": this.distribution === "center",
-        "duet-grid-distribution-between": this.distribution === "space-between",
-        "duet-grid-distribution-around": this.distribution === "space-around",
-        "duet-grid-distribution-evenly": this.distribution === "space-evenly",
-        "duet-grid-mobile-left": this.mobile === "left",
-        "duet-grid-mobile-center": this.mobile === "center",
-        "duet-grid-mobile-right": this.mobile === "right",
-        "duet-grid-direction-horizontal": this.direction === "horizontal",
-        "duet-grid-direction-vertical": this.direction === "vertical",
-        "duet-grid-breakpoint-small": this.breakpoint === "small",
-        "duet-grid-breakpoint-medium": this.breakpoint === "medium",
-        "duet-grid-breakpoint-x-large": this.breakpoint === "x-large",
-      } }));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "responsive": ["updateGridItems"],
-    "breakpoint": ["updateGridItems"]
-  }; }
-  static get style() { return duetGridCss; }
-}, [2, "duet-grid", {
-    "responsive": [4],
-    "breakpoint": [1],
-    "direction": [1],
-    "alignment": [1],
-    "distribution": [1],
-    "mobile": [1],
-    "distributeFormElement": [32]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["duet-grid"];
-  components.forEach(tagName => { switch (tagName) {
-    case "duet-grid":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, DuetGrid);
-      }
-      break;
-  } });
-}
-
-export { DuetGrid as D, defineCustomElement as d };