@scania/tegel 1.0.1 → 1.1.0

package/dist/types/components/icon/icon.d.ts

@@ -3,6 +3,8 @@ export declare class Icon {
   name: string;
   /** Pass a size of icon as a string, for example: 32px, 1rem, 4em... */
   size: string;
+  /** Override the default title for the svg. */
+  svgTitle: string;
   icons_object: string;
   arrayOfIcons: any[];
   componentWillLoad(): void;

package/dist/types/components/modal/modal.d.ts

@@ -32,9 +32,9 @@ export declare class TdsModal {
   handleClose: (event: any) => void;
   handleShow: () => void;
   /** Checks if click on Modal is on overlay, if so it closes the Modal if prevent is not true. */
-  handleOverlayClick(event: any): void;
+  handleOverlayClick: (event: PointerEvent) => void;
   /** Adds an event listener to the reference element that shows/closes the Modal. */
-  initializeReferenceElement: (referenceEl: any) => void;
+  initializeReferenceElement: (referenceEl: HTMLElement) => void;
   /** Check if there is a referenceElement or selector and adds event listener to them if so. */
   setShowButton: () => void;
   /** Adds an event listener to the dismiss buttons that closes the Modal. */

package/dist/types/components/modal/modal.stories.d.ts

@@ -57,6 +57,13 @@ declare const _default: {
         type: string;
       };
     };
+    prevent: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
   };
   args: {
     actionsPosition: string;
@@ -64,6 +71,7 @@ declare const _default: {
     headerText: string;
     bodyContent: string;
     showModal: boolean;
+    prevent: boolean;
   };
 };
 export default _default;

package/dist/types/components/popover-canvas/popover-canvas.d.ts

@@ -1,5 +1,5 @@
 import type { Placement } from '@popperjs/core';
-import { Attributes } from '../../utils/utils';
+import { Attributes } from '../../types/Attributes';
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the contents of the popover.
  */

package/dist/types/components/popover-menu/popover-menu.d.ts

@@ -1,5 +1,5 @@
 import type { Placement } from '@popperjs/core';
-import { Attributes } from '../../utils/utils';
+import { Attributes } from '../../types/Attributes';
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the list of menu items.
  */

package/dist/types/components/side-menu/side-menu.stories.d.ts

@@ -43,10 +43,22 @@ declare const _default: {
         truthy: boolean;
       };
     };
+    collapsed: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      if: {
+        arg: string;
+        truthy: boolean;
+      };
+    };
   };
   args: {
     persistent: boolean;
     collapsible: boolean;
+    collapsed: boolean;
   };
 };
 export default _default;

package/dist/types/components/slider/slider.d.ts

@@ -43,7 +43,6 @@ export declare class TdsSlider {
   private thumbGrabbed;
   private thumbLeft;
   private tickValues;
-  private readonlyState;
   private useControls;
   private useInput;
   private useSmall;
@@ -62,6 +61,7 @@ export declare class TdsSlider {
   handleTouchEnd(): void;
   handleMouseMove(event: any): void;
   handleTouchMove(event: any): void;
+  handleValueUpdate(newVal: any): void;
   updateSupposedValueSlot(localLeft: any): number;
   thumbCore(event: any): void;
   updateTrack(): void;

package/dist/types/components/stepper/stepper.d.ts

@@ -29,6 +29,7 @@ export declare class TdsStepper {
    */
   stepperId: string;
   componentWillLoad(): void;
+  /** @internal Broadcasts changes in props to the Stepper children */
   internalTdsPropsChange: EventEmitter<InternalTdsStepperPropChange>;
   handleDirectionChange(): void;
   handleLabelPositionChange(): void;

package/dist/types/components/table/table-component-filtering.stories.d.ts

@@ -51,13 +51,6 @@ declare const _default: {
         };
       };
     };
-    useDataProp: {
-      name: string;
-      description: string;
-      control: {
-        type: string;
-      };
-    };
     verticalDivider: {
       name: string;
       description: string;
@@ -126,7 +119,6 @@ declare const _default: {
     modeVariant: string;
     compactDesign: boolean;
     responsiveDesign: boolean;
-    useDataProp: boolean;
     verticalDivider: boolean;
     noMinWidth: boolean;
     column1Width: string;

package/dist/types/components/table/table-component-multiselect.stories.d.ts

@@ -119,7 +119,6 @@ declare const _default: {
     modeVariant: string;
     compactDesign: boolean;
     responsiveDesign: boolean;
-    multiselect: boolean;
     verticalDivider: boolean;
     noMinWidth: boolean;
     column1Width: string;

package/dist/types/components/tooltip/tooltip.d.ts

@@ -1,5 +1,5 @@
 import type { Placement } from '@popperjs/core';
-import { Attributes } from '../../utils/utils';
+import { Attributes } from '../../types/Attributes';
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the tooltip contents.
  */

package/dist/types/components.d.ts

@@ -315,6 +315,7 @@ export namespace Components {
         "orientation": 'horizontal' | 'vertical';
     }
     interface TdsDropdown {
+        "appendValue": (value: string) => Promise<void>;
         /**
           * Method for closing the Dropdown.
          */
@@ -380,9 +381,9 @@ export namespace Components {
          */
         "reset": () => Promise<void>;
         /**
-          * Method for setting the value of the Dropdown.
+          * Method for setting the value of the Dropdown.  Single selection example:  <code> dropdown.setValue('option-1', 'Option 1'); </code>  Multiselect example:  <code> dropdown.setValue(['option-1', 'option-2']); </code>
          */
-        "setValue": (newValue: string, newValueLabel: string) => Promise<{ value: string; label: string; }[]>;
+        "setValue": (value: string | string[], label?: string) => Promise<{ value: string; label: string; }[]>;
         /**
           * The size of the Dropdown.
          */
@@ -559,6 +560,10 @@ export namespace Components {
           * Pass a size of icon as a string, for example: 32px, 1rem, 4em...
          */
         "size": string;
+        /**
+          * Override the default title for the svg.
+         */
+        "svgTitle": string;
     }
     interface TdsInlineTab {
         /**
@@ -2607,6 +2612,10 @@ declare namespace LocalJSX {
           * Pass a size of icon as a string, for example: 32px, 1rem, 4em...
          */
         "size"?: string;
+        /**
+          * Override the default title for the svg.
+         */
+        "svgTitle"?: string;
     }
     interface TdsInlineTab {
         /**
@@ -3062,7 +3071,6 @@ declare namespace LocalJSX {
           * Text position, only available on a direction: horizontal
          */
         "labelPosition"?: 'aside' | 'below';
-        "onInternalTdsPropsChange"?: (event: TdsStepperCustomEvent<InternalTdsStepperPropChange>) => void;
         /**
           * The orientation the Steps
          */

package/dist/types/stencil-public-runtime.d.ts

@@ -62,7 +62,7 @@ export interface PropOptions {
     /**
      * The name of the associated DOM attribute.
      * Stencil uses different heuristics to determine the default name of the attribute,
-     * but using this property, you can override the default behaviour.
+     * but using this property, you can override the default behavior.
      */
     attribute?: string | null;
     /**
@@ -128,7 +128,7 @@ export interface ListenOptions {
      * By default, Stencil uses several heuristics to determine if
      * it must attach a `passive` event listener or not.
      *
-     * Using the `passive` option can be used to change the default behaviour.
+     * Using the `passive` option can be used to change the default behavior.
      * Please see https://developers.google.com/web/updates/2016/06/passive-event-listeners for further information.
      */
     passive?: boolean;
@@ -471,7 +471,7 @@ export interface FunctionalUtilities {
     /**
      * Utility for reading the children of a functional component at runtime.
      * Since the Stencil runtime uses a different interface for children it is
-     * not recommendeded to read the children directly, and is preferable to use
+     * not recommended to read the children directly, and is preferable to use
      * this utility to, for instance, perform a side effect for each child.
      */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;

package/dist/types/stories/formatHtmlPreview.d.ts

@@ -0,0 +1,2 @@
+declare const formatHtmlPreview: (htmlStr: any) => string;
+export default formatHtmlPreview;

package/dist/types/stories/foundations/color/color-semantic.stories.d.ts

@@ -10,4 +10,4 @@ declare const _default: {
   };
 };
 export default _default;
-export declare const Sematic: any;
+export declare const Semantic: any;

package/dist/types/types/Attributes.d.ts

@@ -0,0 +1,3 @@
+export type Attributes = {
+  [key: string]: any;
+};

package/dist/types/utils/appendHiddenInput.d.ts

@@ -0,0 +1,15 @@
+/** reference: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts#L346
+ *
+ * Appends a hidden input element to allow the component
+ * work within and get picked up by a <form>.
+ * @param element The element on which the input with be appended.
+ * @param name Name of the input.
+ * @param value The value of the input.
+ * @param disabled Disables the input if true.
+ * @param additionalAttributes Additional attributes that should be passed to the input.
+ */
+declare const appendHiddenInput: (element: HTMLElement, name: string, value: string | undefined | null, disabled: boolean, additionalAttributes?: {
+  key: string;
+  value: string;
+}[]) => void;
+export default appendHiddenInput;

package/dist/types/utils/dfs.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Recursively finds the first matching element or child based on a provided condition.
+ *
+ * @param {ParentNode} parentNode - The starting element or shadow root to search from.
+ * @param {(el: HTMLElement) => boolean} searchPredicate - The condition to match the element, receives an HTMLElement and returns a boolean.
+ * @param {boolean} [pierceShadow=false] - Whether to pierce through shadow DOM boundaries.
+ * @returns {HTMLElement | null} - The first matching element or child, or null if none is found.
+ */
+declare function dfs(parentNode: ParentNode, searchPredicate: (el: HTMLElement) => boolean, pierceShadow?: boolean): HTMLElement | null;
+export default dfs;

package/dist/types/utils/findNextFocusableElement.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Find the next focusable element index in a list of focusable elements.
+ * @param items List of focusable elements, element with a attribute of disabled that is true will be skipped over.
+ * @param nextItemIndex The index in the list to start the search on.
+ */
+declare const findNextFocusableElement: (items: any[], nextItemIndex: number) => number;
+export default findNextFocusableElement;

package/dist/types/utils/findPreviousFocusableElement.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Find the previous focusable element index in a list of focusable elements.
+ *
+ * @param items List of focusable elements, element with a attribute of disabled that is true will be skipped over.
+ * @param nextItemIndex The index in the list to start the search on.
+ */
+declare const findPreviousFocusableElement: (items: any[], previousItemIndex: number) => number;
+export default findPreviousFocusableElement;

package/dist/types/utils/generateUniqueId.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Generates a reasonably unique string ID based on current time (minutes, seconds, milliseconds) and random numbers.
+ *
+ * This function combines the current time and random numbers to generate
+ * a unique string ID. The function assumes that it won't be called frequently
+ * enough to generate two identical IDs within a millisecond, or that the random
+ * number generator will produce the same value twice in quick succession.
+ *
+ * Note: The IDs generated by this function are not globally unique and their length may vary.
+ * For truly unique and fixed-length IDs, consider using a more robust method such as UUID.
+ *
+ * @returns {string} A unique string ID.
+ */
+declare function generateUniqueId(): string;
+export default generateUniqueId;

package/dist/types/utils/getNestedChildOfSiblingsMatching.d.ts

@@ -0,0 +1,2 @@
+declare function getNestedChildOfSiblingsMatching(element: HTMLElement, searchPredicate: (el: HTMLElement) => boolean, siblingTraversalFn: (el: HTMLElement) => HTMLElement | null): HTMLElement | null;
+export default getNestedChildOfSiblingsMatching;

package/dist/types/utils/getNextNestedChildOfSiblingsMatching.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Searches for a next sibling element that has a nested child element matching the provided search predicate.
+ * The search starts from the given element and proceeds to its next siblings, diving deep into each sibling's descendants.
+ *
+ * @param {HTMLElement} element - The starting element to begin the search from.
+ * @param {(el: HTMLElement) => boolean} searchPredicate - A predicate function that checks if an element matches the desired condition.
+ * @returns {HTMLElement | null} - The matching nested child element, or null if no matching element is found.
+ *
+ * @example
+ * // HTML structure:
+ * // <div>
+ * //   <h1>Heading 1</h1>
+ * //   <ul role="list">
+ * //     <li>Item 1</li>
+ * //   </ul>
+ * // </div>
+ * // <div>
+ * //   <h2>Heading 2</h2>
+ * //   <ul role="list">
+ * //     <li>Item 2</li>
+ * //   </ul>
+ * // </div>
+ *
+ * const searchPredicate = (el) => el.tagName.toLowerCase() === 'h2';
+ * const startingElement = document.querySelector('[role="list"]');
+ * const headingEl = getNextNestedChildOfSiblingsMatching(startingElement, searchPredicate);
+ * console.log(headingEl); // Logs the <h2>Heading 2</h2> element
+ */
+declare const getNextNestedChildOfSiblingsMatching: (element: HTMLElement, searchPredicate: (el: HTMLElement) => boolean) => HTMLElement;
+export default getNextNestedChildOfSiblingsMatching;

package/dist/types/utils/getNextSibling.d.ts

@@ -0,0 +1,2 @@
+declare const getNextSibling: (element: HTMLElement) => HTMLElement;
+export default getNextSibling;

package/dist/types/utils/getPreviousNestedChildOfSiblingsMatching.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Searches for a previous sibling element that has a nested child element matching the provided search predicate.
+ * The search starts from the given element and proceeds to its previous siblings, diving deep into each sibling's descendants.
+ *
+ * @param {HTMLElement} element - The starting element to begin the search from.
+ * @param {(el: HTMLElement) => boolean} searchPredicate - A predicate function that checks if an element matches the desired condition.
+ * @returns {HTMLElement | null} - The matching nested child element, or null if no matching element is found.
+ *
+ * @example
+ * // HTML structure:
+ * // <div>
+ * //   <h1>Heading 1</h1>
+ * //   <ul role="list">
+ * //     <li>Item 1</li>
+ * //   </ul>
+ * // </div>
+ * // <div>
+ * //   <h2>Heading 2</h2>
+ * //   <ul role="list">
+ * //     <li>Item 2</li>
+ * //   </ul>
+ * // </div>
+ *
+ * const searchPredicate = (el) => el.tagName.toLowerCase() === 'h2';
+ * const startingElement = document.querySelector('[role="list"]');
+ * const headingEl = getPreviousNestedChildOfSiblingsMatching(startingElement, searchPredicate);
+ * console.log(headingEl); // Logs the <h2>Heading 2</h2> element
+ */
+declare const getPreviousNestedChildOfSiblingsMatching: (element: HTMLElement, searchPredicate: (el: HTMLElement) => boolean) => HTMLElement;
+export default getPreviousNestedChildOfSiblingsMatching;

package/dist/types/utils/getPreviousSibling.d.ts

@@ -0,0 +1,2 @@
+declare const getPreviousSibling: (element: HTMLElement) => HTMLElement;
+export default getPreviousSibling;

package/dist/types/utils/hasSlot.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Checks if the provided element has a slotted element
+ * in the slot with the corresponding slotName
+ * @param slotName the name of the slot.
+ * @param element the element to look for the slot within.
+ */
+declare const hasSlot: (slotName: string, element: HTMLElement) => boolean;
+export default hasSlot;

package/dist/types/utils/inheritAriaAttributes.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns an array of aria attributes that should be copied from
+ * the shadow host element to a target within the light DOM.
+ * @param el The element that the attributes should be copied from.
+ * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.
+ * Use this in instances where we manually specify aria attributes on the `<Host>` element.
+ */
+declare const inheritAriaAttributes: (el: HTMLElement, ignoreList?: string[]) => import("../types/Attributes").Attributes;
+export default inheritAriaAttributes;

package/dist/types/utils/inheritAttributes.d.ts

@@ -0,0 +1,13 @@
+import { Attributes } from '../types/Attributes';
+/**
+ * Elements inside of web components sometimes need to inherit global attributes
+ * set on the host. For example, the inner input in `ion-input` should inherit
+ * the `title` attribute that developers set directly on `ion-input`. This
+ * helper function should be called in componentWillLoad and assigned to a variable
+ * that is later used in the render function.
+ *
+ * This does not need to be reactive as changing attributes on the host element
+ * does not trigger a re-render.
+ */
+declare const inheritAttributes: (el: HTMLElement, attributes?: string[]) => Attributes;
+export default inheritAttributes;

package/dist/types/utils/isHeadingElement.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Checks if the given element is a heading element (h1-h6) or has a role of "heading".
+ *
+ * @param {HTMLElement} el - The element to check.
+ * @returns {boolean} - True if the element is a heading element, false otherwise.
+ */
+declare const isHeadingElement: (el: HTMLElement) => boolean;
+export default isHeadingElement;

package/dist/types/utils/updateListChildrenRoles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Loop through the children and add the 'listitem' role if needed.
+ * @param {Node} targetNode The node being updated.
+ * */
+declare const updateListChildrenRoles: (targetNode: Node) => void;
+export default updateListChildrenRoles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Tegel Design System",
   "keywords": [
     "tegel",
@@ -26,8 +26,7 @@
   },
   "files": [
     "dist/",
-    "loader/",
-    "components/"
+    "loader/"
   ],
   "publishConfig": {
     "access": "public"
@@ -48,12 +47,14 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@stencil/core": "^4.1.0",
+    "@stencil/core": "^4.4.0",
     "dotenv": "^16.0.3",
     "prettier": "^2.7.1"
   },
   "devDependencies": {
     "@babel/core": "^7.19.1",
+    "@stencil/angular-output-target": "^0.8.2",
+    "@stencil/react-output-target": "^0.5.3",
     "@stencil/sass": "^3.0.4",
     "@storybook/addon-a11y": "^6.5.16",
     "@storybook/addon-actions": "^6.5.16",

package/components/tds-button.js

@@ -1,70 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { h as hasSlot } from './utils.js';
-
-const buttonCss = ".sc-tds-button:root,.tds-mode-light.sc-tds-button{--tds-btn-primary-background:var(--tds-blue-600);--tds-btn-primary-color:var(--tds-white);--tds-btn-primary-border-color:transparent;--tds-btn-primary-background-hover:var(--tds-blue-500);--tds-btn-primary-color-hover:var(--tds-white);--tds-btn-primary-border-color-hover:transparent;--tds-btn-primary-background-active:var(--tds-blue-700);--tds-btn-primary-color-active:var(--tds-white);--tds-btn-primary-border-color-active:var(--tds-blue-700);--tds-btn-primary-background-focus:var(--tds-blue-400);--tds-btn-primary-color-focus:var(--tds-white);--tds-btn-primary-border-color-focus:var(--tds-blue-600);--tds-btn-primary-outline-color-focus:var(--tds-blue-600);--tds-btn-primary-background-disabled-primary:var(--tds-grey-50);--tds-btn-primary-background-disabled-secondary:var(--tds-white);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary);--tds-btn-primary-color-disabled:var(--tds-grey-400);--tds-btn-primary-border-color-disabled:transparent;--tds-btn-icon-primary-fill:var(--tds-grey-50);--tds-btn-icon-primary-color:var(--tds-grey-50);--tds-btn-secondary-background:transparent;--tds-btn-secondary-color:var(--tds-black);--tds-btn-secondary-border-color:rgb(0 0 0 / 48%);--tds-btn-secondary-background-hover:var(--tds-blue-500);--tds-btn-secondary-color-hover:var(--tds-white);--tds-btn-secondary-border-color-hover:var(--tds-blue-500);--tds-btn-secondary-background-active:transparent;--tds-btn-secondary-color-active:var(--tds-black);--tds-btn-secondary-border-color-active:rgb(0 0 0 / 87%);--tds-btn-secondary-background-focus:transparent;--tds-btn-secondary-color-focus:var(--tds-black);--tds-btn-secondary-border-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color:rgb(0 0 0 / 38%);--tds-btn-secondary-outline-color-focus:var(--tds-blue-400);--tds-btn-secondary-background-disabled:transparent;--tds-btn-secondary-color-disabled:rgb(0 0 0 / 38%);--tds-btn-secondary-border-color-disabled:rgb(0 0 0 / 38%);--tds-btn-icon-secondary-color-focus:var(--tds-black);--tds-btn-icon-secondary-fill-focus:var(--tds-black);--tds-btn-icon-secondary-fill-active:var(--tds-black);--tds-btn-icon-secondary-fill-active:var(--tds-black);--tds-btn-icon-secondary-fill:var(--tds-black);--tds-btn-icon-secondary-color:var(--tds-black);--tds-btn-icon-secondary-fill-hover:var(--tds-grey-50);--tds-btn-icon-secondary-color-hover:var(--tds-grey-50);--tds-btn-icon-secondary-fill-active:var(--tds-black);--tds-btn-icon-secondary-color-active:var(--tds-black);--tds-btn-ghost-background:transparent;--tds-btn-ghost-color:var(--tds-black);--tds-btn-ghost-border-color:transparent;--tds-btn-ghost-background-hover:transparent;--tds-btn-ghost-color-hover:var(--tds-black);--tds-btn-ghost-border-color-hover:rgb(0 0 0 / 60%);--tds-btn-ghost-outline-color-hover:rgb(0 0 0 / 60%);--tds-btn-ghost-background-active:transparent;--tds-btn-ghost-color-active:var(--tds-black);--tds-btn-ghost-border-color-active:rgb(0 0 0 / 87%);--tds-btn-ghost-background-focus:transparent;--tds-btn-ghost-color-focus:var(--tds-black);--tds-btn-ghost-border-color-focus:var(--tds-blue-300);--tds-btn-ghost-outline-color-focus:var(--tds-blue-300);--tds-btn-ghost-background-disabled:transparent;--tds-btn-ghost-color-disabled:rgb(0 0 0 / 38%);--tds-btn-ghost-border-color-disabled:transparent;--tds-btn-icon-ghost-fill:var(--tds-black);--tds-btn-icon-ghost-color:var(--tds-black);--tds-btn-danger-background:var(--tds-negative);--tds-btn-danger-color:var(--tds-white);--tds-btn-danger-border-color:transparent;--tds-btn-danger-background-hover:var(--tds-red-600);--tds-btn-danger-color-hover:var(--tds-white);--tds-btn-danger-border-color-hover:transparent;--tds-btn-danger-background-active:var(--tds-red-700);--tds-btn-danger-color-active:var(--tds-white);--tds-btn-danger-border-color-active:var(--tds-red-700);--tds-btn-danger-background-focus:var(--tds-red-400);--tds-btn-danger-color-focus:var(--tds-white);--tds-btn-danger-border-color-focus:var(--tds-red-400);--tds-btn-danger-outline-color-focus:var(--tds-red-700);--tds-btn-danger-background-disabled-primary:var(--tds-grey-50);--tds-btn-danger-background-disabled-secondary:var(--tds-white);--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-danger-color-disabled:rgb(0 0 0 / 38%);--tds-btn-danger-border-color-disabled:transparent;--tds-btn-icon-danger-fill:var(--tds-white);--tds-btn-icon-danger-color:var(--tds-white)}.sc-tds-button:root .tds-mode-variant-primary.sc-tds-button,.tds-mode-light.sc-tds-button .tds-mode-variant-primary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary)}.sc-tds-button:root .tds-mode-variant-secondary.sc-tds-button,.tds-mode-light.sc-tds-button .tds-mode-variant-secondary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-secondary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-secondary)}.tds-mode-dark.sc-tds-button{--tds-btn-primary-background:var(--tds-blue-400);--tds-btn-primary-background-hover:var(--tds-blue-500);--tds-btn-primary-background-active:var(--tds-blue-300);--tds-btn-primary-background-focus:var(--tds-blue-600);--tds-btn-primary-border-color-focus:var(--tds-blue-400);--tds-btn-primary-outline-color-focus:var(--tds-blue-400);--tds-btn-primary-background-disabled-primary:var(--tds-grey-900);--tds-btn-primary-background-disabled-secondary:var(--tds-grey-868);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary);--tds-btn-primary-color-disabled:var(--tds-grey-600);--tds-btn-icon-primary-fill:var(--tds-grey-50);--tds-btn-icon-primary-color:var(--tds-grey-50);--tds-btn-secondary-background:transparent;--tds-btn-secondary-color:var(--tds-white);--tds-btn-secondary-border-color:var(--tds-white);--tds-btn-secondary-background-hover:var(--tds-blue-500);--tds-btn-secondary-color-hover:var(--tds-white);--tds-btn-secondary-border-color-hover:var(--tds-blue-500);--tds-btn-secondary-background-active:transparent;--tds-btn-secondary-color-active:var(--tds-white);--tds-btn-secondary-border-color-active:var(--tds-white);--tds-btn-secondary-background-focus:transparent;--tds-btn-secondary-color-focus:var(--tds-white);--tds-btn-secondary-border-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color:var(--tds-white);--tds-btn-secondary-background-disabled:transparent;--tds-btn-secondary-color-disabled:rgb(255 255 255 / 38%);--tds-btn-secondary-border-color-disabled:rgb(255 255 255 / 38%);--tds-btn-icon-secondary-color-focus:var(--tds-white);--tds-btn-icon-secondary-fill-focus:var(--tds-white);--tds-btn-icon-secondary-fill:var(--tds-grey-50);--tds-btn-icon-secondary-color:var(--tds-grey-50);--tds-btn-ghost-background:transparent;--tds-btn-ghost-color:var(--tds-white);--tds-btn-ghost-border-color:transparent;--tds-btn-ghost-background-hover:transparent;--tds-btn-ghost-color-hover:var(--tds-white);--tds-btn-ghost-border-color-hover:rgb(255 255 255 / 41%);--tds-btn-ghost-outline-color-hover:rgb(255 255 255 / 41%);--tds-btn-ghost-background-active:transparent;--tds-btn-ghost-color-active:var(--tds-white);--tds-btn-ghost-border-color-active:rgb(255 255 255 / 87%);--tds-btn-ghost-background-focus:transparent;--tds-btn-ghost-color-focus:var(--tds-white);--tds-btn-ghost-border-color-focus:var(--tds-blue-300);--tds-btn-ghost-outline-color-focus:var(--tds-blue-300);--tds-btn-ghost-background-disabled:transparent;--tds-btn-ghost-color-disabled:rgb(255 255 255/ 38%);--tds-btn-ghost-border-color-disabled:transparent;--tds-btn-icon-ghost-fill:var(--tds-grey-50);--tds-btn-icon-ghost-color:var(--tds-grey-50);--tds-btn-danger-background:var(--tds-negative);--tds-btn-danger-color:var(--tds-white);--tds-btn-danger-border-color:transparent;--tds-btn-danger-background-hover:var(--tds-red-600);--tds-btn-danger-color-hover:var(--tds-white);--tds-btn-danger-border-color-hover:transparent;--tds-btn-danger-background-active:var(--tds-red-700);--tds-btn-danger-color-active:var(--tds-white);--tds-btn-danger-border-color-active:transparent;--tds-btn-danger-background-focus:var(--tds-red-400);--tds-btn-danger-color-focus:var(--tds-white);--tds-btn-danger-border-color-focus:var(--tds-red-400);--tds-btn-danger-outline-color-focus:var(--tds-red-700);--tds-btn-danger-background-disabled-primary:var(--tds-grey-900);--tds-btn-danger-background-disabled-secondary:var(--tds-grey-868);--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-danger-color-disabled:rgb(255 255 255 / 38%);--tds-btn-danger-border-color-disabled:transparent;--tds-btn-icon-danger-fill:var(--tds-white);--tds-btn-icon-danger-color:var(--tds-white)}.tds-mode-dark.sc-tds-button .tds-mode-variant-primary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary)}.tds-mode-dark.sc-tds-button .tds-mode-variant-secondary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-secondary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-secondary)}button.sc-tds-button{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:inline-flex;align-items:center;border-radius:4px;border:none;box-shadow:none;position:relative;text-decoration:none;cursor:pointer;height:56px;padding:var(--tds-spacing-element-20);border:1px solid}button.sc-tds-button *.sc-tds-button{box-sizing:border-box}button.sc-tds-button:disabled,button.disabled.sc-tds-button{cursor:unset}button.sc-tds-button:focus{outline:none}button.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.xs.sc-tds-button{padding:var(--tds-spacing-element-4) var(--tds-spacing-element-8);height:24px;font-size:12px;border-radius:2px}button.xs.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.sm.sc-tds-button{padding:var(--tds-spacing-element-12);height:40px}button.sm.icon.sc-tds-button{padding:10px var(--tds-spacing-element-12)}button.sm.only-icon.sc-tds-button{padding:11px}button.sm.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.md.sc-tds-button{padding:var(--tds-spacing-element-16);height:48px}button.md.icon.sc-tds-button{padding:14px var(--tds-spacing-element-16)}button.md.only-icon.sc-tds-button{padding:13px}button.md.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.lg.sc-tds-button{padding:var(--tds-spacing-element-20);height:56px}button.lg.icon.sc-tds-button{padding:18px var(--tds-spacing-element-20)}button.lg.only-icon.sc-tds-button{padding:17px}button.lg.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.fullbleed.sc-tds-button{width:inherit;display:flex;justify-content:center}button.primary.sc-tds-button{background:var(--tds-btn-primary-background);border-color:var(--tds-btn-primary-border-color);color:var(--tds-btn-primary-color);outline-color:var(--tds-btn-primary-outline-color)}button.primary.sc-tds-button .icon.sc-tds-button{fill:var(--tds-btn-icon-primary-fill);color:var(--tds-btn-icon-primary-fill);fill:var(--tds-btn-icon-primary-color);color:var(--tds-btn-icon-primary-color);font-size:16px}button.primary.sc-tds-button:hover{background:var(--tds-btn-primary-background-hover);border-color:var(--tds-btn-primary-border-color-hover);color:var(--tds-btn-primary-color-hover);outline-color:var(--tds-btn-primary-outline-color-hover)}button.primary:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.primary:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-hover);color:var(--tds-btn-icon-primary-fill-hover);fill:var(--tds-btn-icon-primary-color-hover);color:var(--tds-btn-icon-primary-color-hover)}button.primary.sc-tds-button:focus-visible{background:var(--tds-btn-primary-background-focus);border-color:var(--tds-btn-primary-border-color-focus);color:var(--tds-btn-primary-color-focus);outline-color:var(--tds-btn-primary-outline-color-focus)}button.primary:focus-visible.sc-tds-button-s>[slot=icon],button.primary:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-focus);color:var(--tds-btn-icon-primary-fill-focus);fill:var(--tds-btn-icon-primary-color-focus);color:var(--tds-btn-icon-primary-color-focus)}button.primary.sc-tds-button:active,button.primary.active.sc-tds-button{background:var(--tds-btn-primary-background-active);border-color:var(--tds-btn-primary-border-color-active);color:var(--tds-btn-primary-color-active);outline-color:var(--tds-btn-primary-outline-color-active)}button.primary:active:not(.disabled).sc-tds-button-s>[slot=icon],button.primary:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.primary.active:not(.disabled).sc-tds-button-s>[slot=icon],button.primary.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-active);color:var(--tds-btn-icon-primary-fill-active);fill:var(--tds-btn-icon-primary-color-active);color:var(--tds-btn-icon-primary-color-active)}button.primary.disabled.sc-tds-button,button.primary.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-primary-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-primary-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-primary-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-primary-outline-color-disabled)}button.secondary.sc-tds-button{background:var(--tds-btn-secondary-background);border-color:var(--tds-btn-secondary-border-color);color:var(--tds-btn-secondary-color);outline-color:var(--tds-btn-secondary-outline-color)}button.secondary.sc-tds-button .icon.sc-tds-button{fill:var(--tds-btn-icon-secondary-fill);color:var(--tds-btn-icon-secondary-fill);fill:var(--tds-btn-icon-secondary-color);color:var(--tds-btn-icon-secondary-color);font-size:16px}button.secondary.sc-tds-button:hover{background:var(--tds-btn-secondary-background-hover);border-color:var(--tds-btn-secondary-border-color-hover);color:var(--tds-btn-secondary-color-hover);outline-color:var(--tds-btn-secondary-outline-color-hover)}button.secondary:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-hover);color:var(--tds-btn-icon-secondary-fill-hover);fill:var(--tds-btn-icon-secondary-color-hover);color:var(--tds-btn-icon-secondary-color-hover)}button.secondary.sc-tds-button:focus-visible{background:var(--tds-btn-secondary-background-focus);border-color:var(--tds-btn-secondary-border-color-focus);color:var(--tds-btn-secondary-color-focus);outline-color:var(--tds-btn-secondary-outline-color-focus)}button.secondary:focus-visible.sc-tds-button-s>[slot=icon],button.secondary:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-focus);color:var(--tds-btn-icon-secondary-fill-focus);fill:var(--tds-btn-icon-secondary-color-focus);color:var(--tds-btn-icon-secondary-color-focus)}button.secondary.sc-tds-button:active,button.secondary.active.sc-tds-button{background:var(--tds-btn-secondary-background-active);border-color:var(--tds-btn-secondary-border-color-active);color:var(--tds-btn-secondary-color-active);outline-color:var(--tds-btn-secondary-outline-color-active)}button.secondary:active:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.secondary.active:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-active);color:var(--tds-btn-icon-secondary-fill-active);fill:var(--tds-btn-icon-secondary-color-active);color:var(--tds-btn-icon-secondary-color-active)}button.secondary.disabled.sc-tds-button,button.secondary.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-secondary-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-secondary-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-secondary-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-secondary-outline-color-disabled)}button.ghost.sc-tds-button{background:var(--tds-btn-ghost-background);border-color:var(--tds-btn-ghost-border-color);color:var(--tds-btn-ghost-color);outline-color:var(--tds-btn-ghost-outline-color)}button.ghost.sc-tds-button .icon.sc-tds-button{fill:var(--tds-btn-icon-ghost-fill);color:var(--tds-btn-icon-ghost-fill);fill:var(--tds-btn-icon-ghost-color);color:var(--tds-btn-icon-ghost-color);font-size:16px}button.ghost.sc-tds-button:hover{background:var(--tds-btn-ghost-background-hover);border-color:var(--tds-btn-ghost-border-color-hover);color:var(--tds-btn-ghost-color-hover);outline-color:var(--tds-btn-ghost-outline-color-hover)}button.ghost:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-hover);color:var(--tds-btn-icon-ghost-fill-hover);fill:var(--tds-btn-icon-ghost-color-hover);color:var(--tds-btn-icon-ghost-color-hover)}button.ghost.sc-tds-button:focus-visible{background:var(--tds-btn-ghost-background-focus);border-color:var(--tds-btn-ghost-border-color-focus);color:var(--tds-btn-ghost-color-focus);outline-color:var(--tds-btn-ghost-outline-color-focus)}button.ghost:focus-visible.sc-tds-button-s>[slot=icon],button.ghost:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-focus);color:var(--tds-btn-icon-ghost-fill-focus);fill:var(--tds-btn-icon-ghost-color-focus);color:var(--tds-btn-icon-ghost-color-focus)}button.ghost.sc-tds-button:active,button.ghost.active.sc-tds-button{background:var(--tds-btn-ghost-background-active);border-color:var(--tds-btn-ghost-border-color-active);color:var(--tds-btn-ghost-color-active);outline-color:var(--tds-btn-ghost-outline-color-active)}button.ghost:active:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.ghost.active:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-active);color:var(--tds-btn-icon-ghost-fill-active);fill:var(--tds-btn-icon-ghost-color-active);color:var(--tds-btn-icon-ghost-color-active)}button.ghost.disabled.sc-tds-button,button.ghost.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-ghost-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-ghost-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-ghost-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-ghost-outline-color-disabled)}button.danger.sc-tds-button{background:var(--tds-btn-danger-background);border-color:var(--tds-btn-danger-border-color);color:var(--tds-btn-danger-color);outline-color:var(--tds-btn-danger-outline-color)}button.danger.sc-tds-button .icon.sc-tds-button{fill:var(--tds-btn-icon-danger-fill);color:var(--tds-btn-icon-danger-fill);fill:var(--tds-btn-icon-danger-color);color:var(--tds-btn-icon-danger-color);font-size:16px}button.danger.sc-tds-button:hover{background:var(--tds-btn-danger-background-hover);border-color:var(--tds-btn-danger-border-color-hover);color:var(--tds-btn-danger-color-hover);outline-color:var(--tds-btn-danger-outline-color-hover)}button.danger:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.danger:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-hover);color:var(--tds-btn-icon-danger-fill-hover);fill:var(--tds-btn-icon-danger-color-hover);color:var(--tds-btn-icon-danger-color-hover)}button.danger.sc-tds-button:focus-visible{background:var(--tds-btn-danger-background-focus);border-color:var(--tds-btn-danger-border-color-focus);color:var(--tds-btn-danger-color-focus);outline-color:var(--tds-btn-danger-outline-color-focus)}button.danger:focus-visible.sc-tds-button-s>[slot=icon],button.danger:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-focus);color:var(--tds-btn-icon-danger-fill-focus);fill:var(--tds-btn-icon-danger-color-focus);color:var(--tds-btn-icon-danger-color-focus)}button.danger.sc-tds-button:active,button.danger.active.sc-tds-button{background:var(--tds-btn-danger-background-active);border-color:var(--tds-btn-danger-border-color-active);color:var(--tds-btn-danger-color-active);outline-color:var(--tds-btn-danger-outline-color-active)}button.danger:active:not(.disabled).sc-tds-button-s>[slot=icon],button.danger:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.danger.active:not(.disabled).sc-tds-button-s>[slot=icon],button.danger.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-active);color:var(--tds-btn-icon-danger-fill-active);fill:var(--tds-btn-icon-danger-color-active);color:var(--tds-btn-icon-danger-color-active)}button.danger.disabled.sc-tds-button,button.danger.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-danger-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-danger-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-danger-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-danger-outline-color-disabled)}tds-button.sc-tds-button-h{display:inline-flex;align-items:center}.sc-tds-button-htds-button .sc-tds-button-s>[slot=icon]{width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}.sc-tds-button-htds-button .sm .sc-tds-button-s>[slot=icon]{width:var(--tds-spacing-element-16);height:var(--tds-spacing-element-16)}tds-button[disabled=true].sc-tds-button-h{pointer-events:none}.sc-tds-button-htds-button[disabled=true] .sc-tds-button-s>[slot=icon]{pointer-events:none}tds-button[fullbleed].sc-tds-button-h{width:100%;justify-content:center}tds-button.sc-tds-button .sc-tds-button:not(.only-icon){display:inline-flex;align-items:center}tds-button :not(.only-icon).sm.sc-tds-button-s>[slot=icon],tds-button :not(.only-icon).sm .sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-12);width:var(--tds-spacing-element-16);height:var(--tds-spacing-element-16)}tds-button :not(.only-icon).md.sc-tds-button-s>[slot=icon],tds-button :not(.only-icon).md .sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-16);width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}tds-button :not(.only-icon).lg.sc-tds-button-s>[slot=icon],tds-button :not(.only-icon).lg .sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}";
-
-const TdsButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsButton extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.text = undefined;
-    this.type = 'button';
-    this.variant = 'primary';
-    this.size = 'lg';
-    this.disabled = false;
-    this.fullbleed = false;
-    this.modeVariant = null;
-    this.onlyIcon = false;
-  }
-  render() {
-    const hasLabelSlot = hasSlot('label', this.host);
-    const hasIconSlot = hasSlot('icon', this.host);
-    if (!this.text && !hasLabelSlot) {
-      this.onlyIcon = true;
-    }
-    return (h(Host, { class: `${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("button", { type: this.type, disabled: this.disabled, class: {
-        'primary': this.variant === 'primary',
-        'secondary': this.variant === 'secondary',
-        'ghost': this.variant === 'ghost',
-        'danger': this.variant === 'danger',
-        'lg': this.size === 'lg',
-        'md': this.size === 'md',
-        'sm': this.size === 'sm',
-        'xs': this.size === 'xs',
-        'disabled': this.disabled,
-        'fullbleed': this.fullbleed,
-        'icon': hasIconSlot,
-        'only-icon': this.onlyIcon,
-      } }, this.text, hasLabelSlot && !this.onlyIcon && h("slot", { name: "label" }), hasIconSlot && h("slot", { name: "icon" }))));
-  }
-  get host() { return this; }
-  static get style() { return buttonCss; }
-}, [6, "tds-button", {
-    "text": [1],
-    "type": [1],
-    "variant": [1],
-    "size": [1],
-    "disabled": [4],
-    "fullbleed": [4],
-    "modeVariant": [1, "mode-variant"],
-    "onlyIcon": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tds-button"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tds-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TdsButton$1);
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
-
-const TdsButton = TdsButton$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { TdsButton, defineCustomElement };