@scania/tegel 1.27.0-toast-aria-live.0 → 1.28.0

package/dist/types/components/header/header-brand-symbol/header-brand-symbol.d.ts

@@ -1,5 +1,5 @@
 /**
- * @slot <default> - <b>Unnamed slot.</b> For a link.
+ * @slot <default> - <b>Unnamed slot.</b> For a link. When using an <a> tag, use the aria-label attribute for accessibility.
  */
 export declare class TdsHeaderBrandSymbol {
     host: HTMLElement;

package/dist/types/components/header/header-dropdown/header-dropdown.d.ts

@@ -12,11 +12,15 @@ export declare class TdsHeaderDropdown {
     noDropdownIcon: boolean;
     /** If the button that opens the dropdown should appear selected. */
     selected: boolean;
+    /** Value to be used by the aria-label attribute */
+    tdsAriaLabel: string;
     open: boolean;
     buttonEl?: HTMLButtonElement;
     private uuid;
     onAnyClick(event: MouseEvent): void;
+    handleKeyDown(event: KeyboardEvent): void;
     toggleDropdown(): void;
     handleSlottedItemClick: (event: MouseEvent | KeyboardEvent) => void;
+    connectedCallback(): void;
     render(): any;
 }

package/dist/types/components/header/header-hamburger/header-hamburger.d.ts

@@ -1,4 +1,7 @@
 export declare class TdsHeaderHamburger {
     host: HTMLElement;
+    /** Value to be used by the aria-label attribute */
+    tdsAriaLabel: string;
+    connectedCallback(): void;
     render(): any;
 }

package/dist/types/components/header/header-launcher/header-launcher.d.ts

@@ -6,10 +6,14 @@ export declare class TdsHeaderLauncher {
     open: boolean;
     buttonEl?: HTMLTdsHeaderLauncherButtonElement;
     hasListTypeMenu: boolean;
+    /** Value to be used by the aria-label attribute of the launcher button */
+    tdsAriaLabel: string;
     private uuid;
     private ariaAttributes;
     onAnyClick(event: MouseEvent): void;
+    handleKeyDown(event: KeyboardEvent): void;
     componentDidLoad(): void;
     toggleLauncher(): void;
+    connectedCallback(): void;
     render(): any;
 }

package/dist/types/components/header/header-launcher-button/header-launcher-button.d.ts

@@ -3,6 +3,8 @@ export declare class TdsHeaderLauncherButton {
     /** If the button should appear active. Can be used when the button is
      * triggering a dropdown, and the dropdown is open, for example. */
     active: boolean;
+    /** Value to be used by the aria-label attribute */
+    tdsAriaLabel: string;
     private ariaAttributes;
     render(): any;
 }

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

@@ -7,6 +7,8 @@ export declare class Icon {
     size: string;
     /** Override the default title for the svg. Also used by aria-labelledby. */
     svgTitle?: string;
+    /** Set aria-hidden attribute on svg */
+    tdsAriaHidden: boolean;
     /** Set description for the svg. Also used by aria-describedby. */
     svgDescription?: string;
     icons_object: string;

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

@@ -26,6 +26,8 @@ export declare class TdsPopoverCanvas {
     offsetDistance: number;
     /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */
     modifiers: Object[];
+    /** Role of the popover canvas component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages. */
+    tdsAlertDialog: 'alertdialog' | 'dialog';
     /** Property for closing popover programmatically */
     close(): Promise<void>;
     childRef?: HTMLTdsPopoverCoreElement;

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

@@ -34,6 +34,7 @@ export declare class TdsPopoverCore {
     isShown: boolean;
     disableLogic: boolean;
     hasShownAtLeastOnce: boolean;
+    openedByKeyboard: boolean;
     /** Property for closing popover programmatically */
     close(): Promise<void>;
     private uuid;
@@ -43,9 +44,12 @@ export declare class TdsPopoverCore {
     internalTdsClose: EventEmitter<{}>;
     onAnyClick(event: MouseEvent): void;
     onTdsShow(event: Event): void;
+    handleKeydown(event: KeyboardEvent): void;
     onShowChange(newValue: boolean): void;
     onReferenceElChanged(newValue: HTMLElement, oldValue: HTMLElement): void;
     onTriggerChanged(newValue: 'click' | 'hover' | 'hover-popover'): void;
+    onIsShownChange(newValue: boolean): void;
+    private focusFirstElement;
     private setIsShown;
     private onClickTarget;
     private handleShow;

package/dist/types/components/radio-button/radio-button.d.ts

@@ -16,6 +16,10 @@ export declare class TdsRadioButton {
     required: boolean;
     /** Decides if the Radio Button is disabled or not. */
     disabled: boolean;
+    /** Provides an accessible name for the component */
+    tdsAriaLabel: string;
+    /** Provides a tabindex used when radio buttons are grouped */
+    tdsTabIndex: number;
     /** Sends unique Radio Button identifier and status when it is checked.
      * If no ID is specified, a random one will be generated.
      * To use this listener, don't use the randomized ID, use a specific one of your choosing. */

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

@@ -7,6 +7,7 @@ export declare class TdsStep {
     index: string;
     /** State of the Step */
     state: 'current' | 'error' | 'success' | 'upcoming';
+    tdsAriaCurrent: string;
     hideLabels: boolean;
     size: 'sm' | 'lg';
     orientation: 'horizontal' | 'vertical';

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

@@ -28,6 +28,8 @@ export declare class TdsStepper {
      * as the default ID is random and will be different every time.
      */
     stepperId: string;
+    /** Label for the stepper component, for screen reader users */
+    ariaLabel: string;
     componentWillLoad(): void;
     /** @internal Broadcasts changes in props to the Stepper children */
     internalTdsPropsChange: EventEmitter<InternalTdsStepperPropChange>;

package/dist/types/components/text-field/text-field.d.ts

@@ -27,6 +27,8 @@ export declare class TdsTextField {
     disabled: boolean;
     /** Set input in readonly state */
     readOnly: boolean;
+    /** Hides the read-only icon in the Text Field. Requires Read Only to be enabled. */
+    hideReadOnlyIcon: boolean;
     /** Size of the input */
     size: 'sm' | 'md' | 'lg';
     /** Mode variant of the Text Field */
@@ -44,17 +46,17 @@ export declare class TdsTextField {
     /** Value to be used for the aria-label attribute. Can be used for announcing that readOnly prop is set to true. */
     tdsAriaLabel: string;
     /** Listen to the focus state of the input */
-    focusInput: any;
+    focusInput: boolean;
     /** Change event for the Text Field */
     tdsChange: EventEmitter;
-    handleChange(event: any): void;
+    handleChange(event: Event): void;
     /** Input event for the Text Field */
     tdsInput: EventEmitter<InputEvent>;
-    handleInput(event: any): void;
+    handleInput(event: InputEvent): void;
     /** Focus event for the Text Field */
     tdsFocus: EventEmitter<FocusEvent>;
     /** Set the input as focus when clicking the whole Text Field with suffix/prefix */
-    handleFocus(event: any): void;
+    handleFocus(event: FocusEvent): void;
     /** Blur event for the Text Field */
     tdsBlur: EventEmitter<FocusEvent>;
     /** Set the input as focus when clicking the whole Text Field with suffix/prefix */

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

@@ -34,6 +34,8 @@ export declare class TdsTextarea {
     autofocus: boolean;
     /** Unset minimum width of 208px. */
     noMinWidth: boolean;
+    /** Value to be used for the aria-label attribute. Can be used for announcing that readOnly prop is set to true. */
+    tdsAriaLabel: string;
     /** Listen to the focus state of the input */
     focusInput: boolean;
     /** Change event for the Textarea */
@@ -49,5 +51,6 @@ export declare class TdsTextarea {
     tdsFocus: EventEmitter<FocusEvent>;
     handleFocus(event: FocusEvent): void;
     setModeVariant(modeVariant: 'primary' | 'secondary'): string | null;
+    connectedCallback(): void;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -535,6 +535,10 @@ export namespace Components {
         "modeVariant": 'primary' | 'secondary';
     }
     interface TdsFooterGroup {
+        /**
+          * Value to be used for the aria-label attribute for the nav element wrapping the list. Should be unique for accessibility.
+         */
+        "tdsListAriaLabel": string;
         /**
           * Title text for the link group, only valid on top part of Footer.
          */
@@ -585,6 +589,10 @@ export namespace Components {
           * If the button that opens the dropdown should appear selected.
          */
         "selected": boolean;
+        /**
+          * Value to be used by the aria-label attribute
+         */
+        "tdsAriaLabel": string;
     }
     interface TdsHeaderDropdownList {
         /**
@@ -621,6 +629,10 @@ export namespace Components {
         "subheader": string;
     }
     interface TdsHeaderHamburger {
+        /**
+          * Value to be used by the aria-label attribute
+         */
+        "tdsAriaLabel": string;
     }
     interface TdsHeaderItem {
         /**
@@ -633,12 +645,20 @@ export namespace Components {
         "selected": boolean;
     }
     interface TdsHeaderLauncher {
+        /**
+          * Value to be used by the aria-label attribute of the launcher button
+         */
+        "tdsAriaLabel": string;
     }
     interface TdsHeaderLauncherButton {
         /**
           * If the button should appear active. Can be used when the button is triggering a dropdown, and the dropdown is open, for example.
          */
         "active": boolean;
+        /**
+          * Value to be used by the aria-label attribute
+         */
+        "tdsAriaLabel": string;
     }
     interface TdsHeaderLauncherGrid {
     }
@@ -671,6 +691,10 @@ export namespace Components {
           * Override the default title for the svg. Also used by aria-labelledby.
          */
         "svgTitle"?: string;
+        /**
+          * Set aria-hidden attribute on svg
+         */
+        "tdsAriaHidden": boolean;
     }
     interface TdsInlineTab {
         /**
@@ -893,6 +917,10 @@ export namespace Components {
           * Controls whether the Popover is shown or not. If this is set hiding and showing will be decided by this prop and will need to be controlled from the outside. This also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop.
          */
         "show": boolean;
+        /**
+          * Role of the popover canvas component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages.
+         */
+        "tdsAlertDialog": 'alertdialog' | 'dialog';
     }
     interface TdsPopoverCore {
         /**
@@ -1013,6 +1041,14 @@ export namespace Components {
           * Decides if the Radio Button is required or not.
          */
         "required": boolean;
+        /**
+          * Provides an accessible name for the component
+         */
+        "tdsAriaLabel": string;
+        /**
+          * Provides a tabindex used when radio buttons are grouped
+         */
+        "tdsTabIndex": number;
         /**
           * Value of input.
          */
@@ -1201,8 +1237,13 @@ export namespace Components {
           * State of the Step
          */
         "state": 'current' | 'error' | 'success' | 'upcoming';
+        "tdsAriaCurrent": string;
     }
     interface TdsStepper {
+        /**
+          * Label for the stepper component, for screen reader users
+         */
+        "ariaLabel": string;
         /**
           * Hides the label for the child components if true.
          */
@@ -1404,6 +1445,10 @@ export namespace Components {
           * Helper text
          */
         "helper": string;
+        /**
+          * Hides the read-only icon in the Text Field. Requires Read Only to be enabled.
+         */
+        "hideReadOnlyIcon": boolean;
         /**
           * Label text
          */
@@ -1526,6 +1571,10 @@ export namespace Components {
           * Error state of input
          */
         "state": 'error' | 'success' | 'default';
+        /**
+          * Value to be used for the aria-label attribute. Can be used for announcing that readOnly prop is set to true.
+         */
+        "tdsAriaLabel": string;
         /**
           * Value of the input text
          */
@@ -3359,6 +3408,10 @@ declare namespace LocalJSX {
         "modeVariant"?: 'primary' | 'secondary';
     }
     interface TdsFooterGroup {
+        /**
+          * Value to be used for the aria-label attribute for the nav element wrapping the list. Should be unique for accessibility.
+         */
+        "tdsListAriaLabel"?: string;
         /**
           * Title text for the link group, only valid on top part of Footer.
          */
@@ -3417,6 +3470,10 @@ declare namespace LocalJSX {
           * If the button that opens the dropdown should appear selected.
          */
         "selected"?: boolean;
+        /**
+          * Value to be used by the aria-label attribute
+         */
+        "tdsAriaLabel"?: string;
     }
     interface TdsHeaderDropdownList {
         /**
@@ -3453,6 +3510,10 @@ declare namespace LocalJSX {
         "subheader"?: string;
     }
     interface TdsHeaderHamburger {
+        /**
+          * Value to be used by the aria-label attribute
+         */
+        "tdsAriaLabel"?: string;
     }
     interface TdsHeaderItem {
         /**
@@ -3465,12 +3526,20 @@ declare namespace LocalJSX {
         "selected"?: boolean;
     }
     interface TdsHeaderLauncher {
+        /**
+          * Value to be used by the aria-label attribute of the launcher button
+         */
+        "tdsAriaLabel"?: string;
     }
     interface TdsHeaderLauncherButton {
         /**
           * If the button should appear active. Can be used when the button is triggering a dropdown, and the dropdown is open, for example.
          */
         "active"?: boolean;
+        /**
+          * Value to be used by the aria-label attribute
+         */
+        "tdsAriaLabel"?: string;
     }
     interface TdsHeaderLauncherGrid {
     }
@@ -3503,6 +3572,10 @@ declare namespace LocalJSX {
           * Override the default title for the svg. Also used by aria-labelledby.
          */
         "svgTitle"?: string;
+        /**
+          * Set aria-hidden attribute on svg
+         */
+        "tdsAriaHidden"?: boolean;
     }
     interface TdsInlineTab {
         /**
@@ -3703,6 +3776,10 @@ declare namespace LocalJSX {
           * Controls whether the Popover is shown or not. If this is set hiding and showing will be decided by this prop and will need to be controlled from the outside. This also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop.
          */
         "show"?: boolean;
+        /**
+          * Role of the popover canvas component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages.
+         */
+        "tdsAlertDialog"?: 'alertdialog' | 'dialog';
     }
     interface TdsPopoverCore {
         /**
@@ -3822,6 +3899,14 @@ declare namespace LocalJSX {
           * Decides if the Radio Button is required or not.
          */
         "required"?: boolean;
+        /**
+          * Provides an accessible name for the component
+         */
+        "tdsAriaLabel"?: string;
+        /**
+          * Provides a tabindex used when radio buttons are grouped
+         */
+        "tdsTabIndex"?: number;
         /**
           * Value of input.
          */
@@ -4026,8 +4111,13 @@ declare namespace LocalJSX {
           * State of the Step
          */
         "state"?: 'current' | 'error' | 'success' | 'upcoming';
+        "tdsAriaCurrent"?: string;
     }
     interface TdsStepper {
+        /**
+          * Label for the stepper component, for screen reader users
+         */
+        "ariaLabel"?: string;
         /**
           * Hides the label for the child components if true.
          */
@@ -4260,6 +4350,10 @@ declare namespace LocalJSX {
           * Helper text
          */
         "helper"?: string;
+        /**
+          * Hides the read-only icon in the Text Field. Requires Read Only to be enabled.
+         */
+        "hideReadOnlyIcon"?: boolean;
         /**
           * Label text
          */
@@ -4414,6 +4508,10 @@ declare namespace LocalJSX {
           * Error state of input
          */
         "state"?: 'error' | 'success' | 'default';
+        /**
+          * Value to be used for the aria-label attribute. Can be used for announcing that readOnly prop is set to true.
+         */
+        "tdsAriaLabel"?: string;
         /**
           * Value of the input text
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel",
-  "version": "1.27.0-toast-aria-live.0",
+  "version": "1.28.0",
   "description": "Tegel Design System",
   "type": "module",
   "keywords": [

package/dist/tegel/p-035e58e6.entry.js

@@ -1 +0,0 @@
-import{r as e,h as t,H as s,g as a}from"./p-2049fab2.js";import{i as o}from"./p-0bd4c19c.js";import"./p-3fe9cbbf.js";const r=class{constructor(t){e(this,t)}render(){const e=Object.assign({},o(this.host));return t(s,{key:"f2f230c8349ca3b5fdcfd7de67555b12888bd9d9"},t("tds-header-item",{key:"7db87ae4ad59bea1040399a33fdf77aa490ae1ca"},t("button",Object.assign({key:"bf5e3103c23c02e42db7e99a423348efb4488ed7"},e),t("tds-icon",{key:"306b78525304ac2f30a4bcb0be37c0ed7998b01f",class:"icon",name:"burger",size:"20px"}))))}get host(){return a(this)}};r.style=":host{color:var(--tds-white)}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:background 0.2s ease-in-out, color 0.2s ease-in-out}@media screen and (min-width: 992px){:host tds-header-item{display:none}:host([persistent]) tds-header-item{display:block}}";export{r as tds_header_hamburger}

package/dist/tegel/p-125a6b06.entry.js

@@ -1 +0,0 @@
-import{r as t,c as d,h as s,H as o,g as a}from"./p-2049fab2.js";import{h as i}from"./p-ae110fc2.js";import{g as e}from"./p-11648030.js";const l=class{constructor(s){t(this,s),this.tdsClose=d(this,"tdsClose",7),this.handleClose=t=>{const d=this.tdsClose.emit(t);this.returnFocusOnClose(),d.defaultPrevented||(this.isShown=!1)},this.handleShow=()=>{this.isShown=!0},this.handleOverlayClick=t=>{const d=t.composedPath()[0];("tds-modal-close"===d.classList[0]||"tds-modal-backdrop"===d.classList[0]&&!1===this.prevent)&&this.handleClose(t)},this.handleReferenceElementClick=t=>{this.isShown?this.handleClose(t):this.handleShow()},this.setShowButton=()=>{var t;if(this.selector||this.referenceEl){const d=null!==(t=this.referenceEl)&&void 0!==t?t:document.querySelector(this.selector);d&&this.initializeReferenceElement(d)}},this.initializeReferenceElement=t=>{t&&t.addEventListener("click",this.handleReferenceElementClick)},this.header=void 0,this.prevent=!1,this.size="md",this.actionsPosition="static",this.selector=void 0,this.referenceEl=void 0,this.show=void 0,this.closable=!0,this.tdsAlertDialog="dialog",this.isShown=!1,this.activeElementIndex=0}async showModal(){this.isShown=!0,requestAnimationFrame((()=>{const t=this.getFocusableElements();t.length>0&&(t[0].focus(),this.activeElementIndex=0)}))}async closeModal(){this.isShown=!1,this.returnFocusOnClose()}connectedCallback(){void 0===this.closable&&(this.closable=!0),void 0!==this.show&&(this.isShown=this.show),this.initializeModal(),this.header&&i("header",this.host)&&console.warn("Tegel Modal component: Using both header prop and header slot might break modal's design. Please use just one of them. ")}componentWillLoad(){this.initializeModal()}disconnectedCallback(){this.cleanupModal()}async initializeModal(){this.setDismissButtons(),this.setShowButton()}async cleanupModal(){var t;if(this.selector||this.referenceEl){const d=null!==(t=this.referenceEl)&&void 0!==t?t:document.querySelector(this.selector);d&&d.removeEventListener("click",this.handleReferenceElementClick)}this.host.querySelectorAll("[data-dismiss-modal]").forEach((t=>{t.removeEventListener("click",this.handleClose)}))}returnFocusOnClose(){var t;let d=null!==(t=this.referenceEl)&&void 0!==t?t:document.querySelector(this.selector);const s=["BUTTON","A","INPUT"];s.indexOf(d.tagName)<0&&(d=d.querySelectorAll(s.join(","))[0]),d.focus()}getFocusableElements(){const t=["a[href]","button:not([disabled])","textarea:not([disabled])","input:not([disabled])","select:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(",");return[...Array.from(this.host.shadowRoot.querySelectorAll(t)),...Array.from(this.host.querySelectorAll(t))]}handleFocusTrap(t){if("Escape"===t.key&&this.isShown&&!this.prevent)return void this.handleClose(t);if(!this.isShown)return;if("Tab"!==t.key)return;const d=this.getFocusableElements();0!==d.length&&(t.preventDefault(),t.shiftKey&&(this.activeElementIndex-=1,-1===this.activeElementIndex&&(this.activeElementIndex=d.length-1)),t.shiftKey||(this.activeElementIndex+=1,this.activeElementIndex===d.length&&(this.activeElementIndex=0)),d[this.activeElementIndex].focus())}setDismissButtons(){this.host.querySelectorAll("[data-dismiss-modal]").forEach((t=>{t.addEventListener("click",this.handleClose)}))}render(){const t=i("header",this.host),d=i("actions",this.host),a=this.header?`tds-modal-header-${e()}`:void 0,l=`tds-modal-body-${e()}`;return s(o,{key:"398809ea45126dd70b95422f2f7a08a481a22d53",role:this.tdsAlertDialog,"aria-modal":"true","aria-describedby":l,"aria-labelledby":a,class:{show:this.isShown,hide:!this.isShown},onClick:t=>this.handleOverlayClick(t)},s("div",{key:"96e964cc4f3c6d9613fb53e340e0aa5dcd8b6d81",class:"tds-modal-backdrop"}),s("div",{key:"af7ddc896ef35b6116ae70524d10c4b7b952e20a",class:`tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}`},s("div",{key:"9dfcf95fcc8925cd5c97f10f29edc6cef183a0ca",id:a,class:"header"},this.header&&s("div",{key:"42533c25b07e696a0c61504556150018f8d3583a",class:"header-text"},this.header),t&&s("slot",{key:"d9855a20e1763ad17d6c8b80df85796d8f6027a8",name:"header"}),this.closable&&s("button",{key:"3e99b76da7bcf39eaecbe2906e0674fd20ebe9a6",class:"tds-modal-close","aria-label":"close",onClick:t=>this.handleClose(t)},s("tds-icon",{key:"f6463437fb98ae280afe358d50a2f960914014ea",name:"cross",size:"20px"}))),s("div",{key:"ba8ca2e65f5eac8103e6f3c431e3ae9aab2b5f72",id:l,class:"body"},s("slot",{key:"9e08cbdd00e1a60826588b15cb6ed23fc4b5b0d7",name:"body"})),d&&s("slot",{key:"aeb50dfcbf6c12e80a8904d149bb15892c691d88",name:"actions"})))}get host(){return a(this)}};l.style=".tds-modal{box-sizing:border-box;background-color:var(--tds-modal-background);margin:auto;position:relative;border-radius:4px;max-height:85vh;overflow-y:auto;pointer-events:auto;}.tds-modal *{box-sizing:border-box}.tds-modal::-webkit-scrollbar{width:5px;background-color:var(--tds-grey-300);border-radius:0 1em 1em 0}.tds-modal::-webkit-scrollbar-track{background-color:var(--tds-grey-300);border-radius:0 1em 1em 0}.tds-modal::-webkit-scrollbar-thumb{background-color:var(--tds-grey-500);border-radius:0 1em 1em 0}.tds-modal__actions-sticky{overflow:hidden;display:flex;flex-direction:column}.tds-modal__actions-sticky .body{font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);max-height:calc(85vh - 36px);overflow-y:auto}.tds-modal__actions-sticky slot[name=actions]{bottom:-1px;left:0;right:0;background-color:var(--tds-modal-background);padding:var(--tds-spacing-element-24) var(--tds-spacing-element-16) var(--tds-spacing-element-16);display:flex;gap:16px}.tds-modal__actions-static slot[name=actions]{background-color:var(--tds-modal-background);display:flex;gap:16px;padding:24px 16px 16px}@media (min-width: 320px){.tds-modal-xs{width:100%}.tds-modal-sm{width:100%}.tds-modal-md{width:100%}.tds-modal-lg{width:100%}}@media (min-width: 672px){.tds-modal-xs{width:50%}.tds-modal-sm{width:62.5%}.tds-modal-md{width:75%}.tds-modal-lg{width:100%}}@media (min-width: 1056px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:43.75%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1312px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1584px){.tds-modal-xs{width:25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:50%}.tds-modal-lg{width:75%}}@media (max-width: 320px){.tds-modal-md,.tds-modal-lg,.tds-modal-sm{height:100%}.tds-modal-md slot[name=actions]::slotted(*),.tds-modal-lg slot[name=actions]::slotted(*),.tds-modal-sm slot[name=actions]::slotted(*){display:flex}}.header{display:flex;padding:var(--tds-spacing-element-16);position:sticky;top:0;background-color:var(--tds-modal-background);z-index:1}.header,slot[name=header]::slotted(*){color:var(--tds-modal-text);font:var(--tds-headline-05) !important;letter-spacing:var(--tds-headline-05-ls) !important;margin:0;flex:1}.body{color:var(--tds-modal-text);font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);overflow-y:visible;padding:0 var(--tds-spacing-element-16) var(--tds-spacing-element-16);}.body::-webkit-scrollbar{width:5px;background-color:var(--tds-grey-300)}.body::-webkit-scrollbar-track{background-color:var(--tds-grey-300)}.body::-webkit-scrollbar-thumb{background-color:var(--tds-grey-500)}.tds-modal-backdrop{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--tds-modal-backdrop);pointer-events:auto}.tds-modal-backdrop *{box-sizing:border-box}button.tds-modal-close{margin:0 0 auto auto;background-color:transparent;border:0;padding:0;appearance:unset}.tds-modal-close{display:inline-block;height:auto;color:var(--tds-modal-icon);cursor:pointer}.tds-modal-close:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}@media (min-width: 320px){.tds-modal-close{margin-left:var(--tds-spacing-element-16)}}@media (min-width: 1056px){.tds-modal-close{margin-left:var(--tds-spacing-element-48)}}.tds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.tds-modal-close-btn{margin-left:var(--tds-spacing-element-16)}}@media (min-width: 1056px){.tds-modal-close-btn{margin-left:var(--tds-spacing-element-48)}}.tds-modal-close-btn svg{fill:var(--tds-modal-icon)}.tds-modal-overflow{overflow:hidden}:host{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;padding:0 16px;z-index:700;pointer-events:none}:host *{box-sizing:border-box}:host .tds-modal-close{border:none;background-color:transparent}:host .tds-modal-close-btn{border:none;background-color:transparent}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host(.show){display:flex}:host(.hide){display:none}";export{l as tds_modal}