@scania/tegel 1.31.1-textarea-reactive-value-beta.1 → 1.32.0-accessibility-beta.0

package/dist/collection/components/radio-button/radio-button.css

@@ -34,10 +34,10 @@
   box-sizing: border-box;
 }
 .tds-radio-button .tds-form-input[type=radio]::before {
-  width: 24px;
-  height: 24px;
-  left: 0;
-  top: 0;
+  width: 22px;
+  height: 22px;
+  left: 1px;
+  top: 1px;
 }
 .tds-radio-button .tds-form-input[type=radio]::after {
   border: 1px solid var(--tds-radio-button-interaction-01);
@@ -49,11 +49,9 @@
 }
 .tds-radio-button .tds-form-input[type=radio]:hover::before {
   background-color: var(--tds-radio-button-background-hover);
-  opacity: 0.12;
 }
 .tds-radio-button .tds-form-input[type=radio]:focus::before {
   background-color: var(--tds-radio-button-background-focus);
-  opacity: 0.24;
   animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;
 }
 .tds-radio-button .tds-form-input[type=radio]:disabled, .tds-radio-button .tds-form-input[type=radio].disabled {
@@ -96,6 +94,5 @@
   }
   100% {
     transform: scale(1);
-    opacity: 0.24;
   }
 }

package/dist/collection/components/radio-button/radio-button.js

@@ -20,8 +20,14 @@ export class TdsRadioButton {
         this.tdsAriaLabel = undefined;
         this.tdsTabIndex = undefined;
     }
+    /** Method to programmatically focus the radio button element */
+    async focusElement() {
+        if (this.inputElement) {
+            this.inputElement.focus();
+        }
+    }
     render() {
-        return (h("div", { key: 'ca977bcef62ce81be1c0387bc1db7a5bb669f164', class: "tds-radio-button" }, h("input", { key: '939027d597b396cfdab2b47a11465b6e46040036', "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: 'f40293c0fcce1dac843087b71b5e34bdd8e911fa', htmlFor: this.radioId }, h("slot", { key: '4190d41d4e90cd4125c4f997f46cefa44682dae7', name: "label" }))));
+        return (h("div", { key: '6f44a40cb5ccf890bdee47d36f47a79d5f8b603c', class: "tds-radio-button" }, h("input", { key: '1da8f9df168c631a634172385c3471a5c6bb03aa', ref: (inputEl) => (this.inputElement = inputEl), "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: '0acf59236ffd3ee0136f2bdef9db8a36afe666ff', htmlFor: this.radioId }, h("slot", { key: 'add4ebdebbb4d5e15126a876c0c0940734b7b068', name: "label" }))));
     }
     static get is() { return "tds-radio-button"; }
     static get encapsulation() { return "scoped"; }
@@ -197,5 +203,26 @@ export class TdsRadioButton {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "focusElement": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to programmatically focus the radio button element",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "host"; }
 }

package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.css

@@ -36,7 +36,8 @@
 }
 :host .component ::slotted(a:focus-visible) {
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :host .component.component-selected ::slotted(a),
 :host .component.component-selected ::slotted(button) {

package/dist/collection/components/side-menu/side-menu-item/side-menu-item.css

@@ -27,7 +27,8 @@
 :host .component ::slotted(a:focus-visible),
 :host .component ::slotted(button:focus-visible) {
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :host .component:hover ::slotted(a),
 :host .component:hover ::slotted(button) {

package/dist/collection/components/slider/slider-stories-setup.js

@@ -0,0 +1,233 @@
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
+import readme from "./readme.md";
+export const SliderArgTypes = ({ storyName }) => ({
+    min: {
+        name: 'Min. value',
+        description: 'Sets the minimum value for the slider.',
+        control: {
+            type: 'number',
+        },
+        table: {
+            defaultValue: { summary: 0 },
+        },
+    },
+    max: {
+        name: 'Max. value',
+        description: 'Sets the maximum value for the slider.',
+        control: {
+            type: 'number',
+        },
+        table: {
+            defaultValue: { summary: 100 },
+        },
+    },
+    initialValue: {
+        name: 'Initial value',
+        description: 'Sets the initial value for the slider.',
+        control: {
+            type: 'number',
+        },
+        table: {
+            defaultValue: { summary: 0 },
+        },
+    },
+    showLabel: {
+        name: 'Show label',
+        description: 'Toggles if the lable should be shown or hidden.',
+        control: {
+            type: 'boolean',
+        },
+    },
+    labelText: {
+        name: 'Label text',
+        description: 'Sets the text for the label.',
+        control: {
+            type: 'text',
+        },
+        if: { arg: 'showLabel', eq: true },
+    },
+    showTicks: {
+        name: 'Show ticks',
+        description: 'Toggles if ticks should be shown or hidden.',
+        control: {
+            type: 'boolean',
+        },
+    },
+    numTicks: {
+        name: 'Number of ticks',
+        description: 'Sets the number of ticks to be displayed.',
+        control: {
+            type: 'number',
+        },
+        if: { arg: 'showTicks', eq: true },
+        table: {
+            defaultValue: { summary: 0 },
+        },
+    },
+    showTickNumbers: {
+        name: 'Show tick numbers',
+        description: 'Toggles if tick numbers should be shown or hidden.',
+        control: {
+            type: 'boolean',
+        },
+        if: { arg: 'showTicks', eq: true },
+        table: {
+            defaultValue: { summary: false },
+        },
+    },
+    snapToTicks: {
+        name: 'Snap to ticks',
+        description: 'Snaps the thumb to the closest tick when dragging.',
+        control: {
+            type: 'boolean',
+        },
+        if: { arg: 'showTicks', eq: true },
+        table: {
+            defaultValue: { summary: false },
+        },
+    },
+    showTooltip: {
+        name: 'Show tooltip',
+        description: 'Toggles if the tooltip should be shown or hidden.',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            defaultValue: { summary: false },
+        },
+    },
+    showControls: {
+        name: 'Show controls (not compatible with input field)',
+        description: 'Toggles if controls should be shown or hidden.',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            defaultValue: { summary: false },
+        },
+    },
+    step: {
+        name: 'Step value',
+        description: 'Sets the value to increment/decrement with.',
+        control: {
+            type: 'number',
+            min: 0,
+            step: storyName === 'Decimal' ? 0.01 : undefined,
+        },
+        table: {
+            defaultValue: { summary: 1 },
+        },
+    },
+    showInput: {
+        name: 'Show value input field (not compatible with controls)',
+        description: 'Toggles if the values input field should be shown or hidden.',
+        control: {
+            type: 'boolean',
+        },
+        if: { arg: 'showControls', eq: false },
+        table: {
+            defaultValue: { summary: false },
+        },
+    },
+    thumbSize: {
+        name: 'Thumb size',
+        description: 'Switches between the large and small version of the thumb.',
+        control: {
+            type: 'radio',
+        },
+        options: ['Large', 'Small'],
+        table: {
+            defaultValue: { summary: 'lg' },
+        },
+    },
+    readonly: {
+        name: 'Read Only',
+        description: 'Puts the control in a read-only state.',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            defaultValue: { summary: false },
+        },
+    },
+    disabled: {
+        name: 'Disabled',
+        description: 'Disables the slider.',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            defaultValue: { summary: false },
+        },
+    },
+});
+export const SliderParameters = {
+    parameters: {
+        notes: readme,
+        design: [
+            {
+                name: 'Figma',
+                type: 'figma',
+                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9649%3A20759&t=Ne6myqwca5m00de7-1',
+            },
+            {
+                name: 'Link',
+                type: 'link',
+                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9649%3A20759&t=Ne6myqwca5m00de7-1',
+            },
+        ],
+    },
+};
+const sizeLookUp = {
+    Large: 'lg',
+    Small: 'sm',
+};
+export const SliderTemplate = ({ min, max, initialValue, showLabel, labelText, showTicks, numTicks, showTickNumbers, snapToTicks, showTooltip, showControls, step, showInput, thumbSize, readonly, disabled, }) => formatHtmlPreview(`
+   <!-- Style code below is just for demo purposes -->
+      <style>
+        .demo-wrapper {
+            max-width: 500px;
+            margin-left: 25px;
+        }
+      </style>
+  
+     <div class="demo-wrapper">
+       <tds-slider 
+          min="${min}"
+          max="${max}"
+          ${step ? `step="${step}"` : ''}
+          value="${initialValue}"
+          ${showTicks ? `ticks="${numTicks}"` : ''}
+          ${showTickNumbers ? 'show-tick-numbers' : ''}
+          ${snapToTicks ? 'snap' : ''}
+          ${showLabel ? `label="${labelText}"` : ''}
+          ${showTooltip ? 'tooltip' : ''}
+          ${showControls ? 'controls' : ''}
+          ${showInput ? 'input' : ''}
+          ${disabled ? 'disabled' : ''}
+          thumb-size="${sizeLookUp[thumbSize]}"
+          ${readonly ? 'read-only' : ''}
+          tds-read-only-aria-label="Read only"
+          >
+        </tds-slider>
+      </div>
+      
+       <!-- Script tag for demo purposes -->
+      <script>
+        slider = document.querySelector('tds-slider');
+        
+        function handleTdsChange(event) {
+          console.log('tdsChange event:', event);
+        }
+        
+        slider.removeEventListener('tdsChange', handleTdsChange);
+        slider.addEventListener('tdsChange', handleTdsChange);
+  
+        function handleTdsInput(event) {
+          console.log('tdsInput event:', event);
+        }
+  
+        slider.removeEventListener('tdsInput', handleTdsInput);
+        slider.addEventListener('tdsInput', handleTdsInput);
+      </script>
+    `);

package/dist/collection/components/spinner/spinner.css

@@ -1,16 +1,16 @@
 /* Component variables aka overrides */
 :root {
-  --spinner-background-inverted: rgba(255, 255, 255, 1);
+  --spinner-background-inverted: var(--tds-white);
 }
 
 :root,
 .scania,
 .scania .tds-mode-light {
-  --spinner-background: rgba(43, 112, 211, 1);
+  --spinner-background: var(--tds-blue-400);
 }
 
 .scania .tds-mode-dark {
-  --spinner-background: rgba(74, 137, 243, 1);
+  --spinner-background: var(--tds-blue-400);
 }
 
 .traton,

package/dist/collection/components/stepper/step/step.css

@@ -30,8 +30,7 @@
 :host [role=listitem].lg.vertical::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 36px;
   width: 1px;
   top: 40px;
@@ -40,8 +39,7 @@
 :host [role=listitem].lg.horizontal::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   left: calc(50% + 24px);
   right: 0;
@@ -50,8 +48,7 @@
 :host [role=listitem].lg.horizontal::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   right: calc(50% + 24px);
   left: 0;
@@ -60,8 +57,7 @@
 :host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 16px;
   width: 10px;
@@ -71,8 +67,7 @@
 :host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 16px;
   width: 10px;
@@ -100,8 +95,7 @@
 :host [role=listitem].sm.vertical::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 20px;
   width: 1px;
   top: 34px;
@@ -110,8 +104,7 @@
 :host [role=listitem].sm.vertical::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 20px;
   width: 1px;
   top: 34px;
@@ -120,8 +113,7 @@
 :host [role=listitem].sm.horizontal::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   left: calc(50% + 16px + 8px);
   right: 0;
@@ -130,8 +122,7 @@
 :host [role=listitem].sm.horizontal::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   left: 0;
   right: calc(50% + 24px);
@@ -140,8 +131,7 @@
 :host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 13px;
   width: 10px;
@@ -151,8 +141,7 @@
 :host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 13px;
   width: 10px;
@@ -166,19 +155,22 @@
   position: relative;
 }
 :host [role=listitem] .content-container.error {
-  border-color: var(--tds-negative);
-  color: var(--tds-negative);
+  border-color: var(--tds-stepper-icon-step-border-color-warning);
+  color: var(--tds-stepper-icon-step-border-color-warning);
 }
 :host [role=listitem] .content-container.success {
-  background-color: var(--tds-positive);
-  border-color: var(--tds-positive);
+  background-color: var(--tds-stepper-icon-step-border-color-success);
+  border-color: var(--tds-stepper-icon-step-border-color-success);
   color: var(--tds-white);
 }
+:host [role=listitem] .content-container.current {
+  background-color: var(--tds-stepper-background);
+  color: var(--tds-stepper-color);
+}
 :host [role=listitem] .content-container.upcoming {
   background-color: transparent;
   border-color: var(--tds-stepper-label-border-color-upcoming);
   color: var(--tds-stepper-label-text-color-upcoming);
-  opacity: var(--tds-stepper-label-text-opacity-upcoming);
 }
 :host [role=listitem] .label {
   text-align: center;

package/dist/collection/components/stepper/step/step.js

@@ -40,7 +40,7 @@ export class TdsStep {
         }
     }
     render() {
-        return (h(Host, { key: 'f049d976121a1179979026cd3087ad459183de06' }, h("div", { key: '52caba69725b8716dc229659e0082e5388b513d3', role: "listitem", "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: '0dcc74fe5edf2c9333bcfe195be72b07d5f67b92', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: '3313463d27273a53000c327a2578a8c67446c17e', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: 'ce4985e94df5453bd62733677977137c279e6f35', name: "label" }))))));
+        return (h(Host, { key: 'f049d976121a1179979026cd3087ad459183de06' }, h("div", { key: '1f961578e8e54ffc9e0d0c2966c86e3e32f8ddd8', role: "listitem", "aria-disabled": this.state === 'upcoming' ? 'true' : 'false', "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: 'f83033e0a0761227d911ac77cac9c64c31fe4c11', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: '83c92f388cfebe37e0fb94c81d14adc391fbbbfa', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '1c6381a25f8af42afe54c0c8eaff4090bf14ee80', name: "label" }))))));
     }
     static get is() { return "tds-step"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.css

@@ -40,7 +40,8 @@
 }
 :host .tds-table__expand-control-container .tds-table__expand-input:focus {
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :host .tds-table__expand-control-container .tds-expendable-row-icon {
   height: 16px;

package/dist/collection/components/table/table-footer/table-footer.css

@@ -138,5 +138,6 @@ tds-dropdown:focus-within::after {
   border-radius: var(--tds-spacing-element-4);
   pointer-events: none;
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }

package/dist/collection/components/table/table-header-cell/table-header-cell.css

@@ -61,7 +61,7 @@
   opacity: 0;
   transform-origin: center;
   transition: opacity 200ms ease-in, transform 200ms ease;
-  fill: var(--tds-table-color);
+  color: var(--tds-table-color);
 }
 :host(.tds-table__header-cell--sortable) .tds-table__header-button:hover .tds-table__header-button-icon {
   opacity: 1;

package/dist/collection/components/table/table-toolbar/table-toolbar.css

@@ -18,14 +18,19 @@
   display: flex;
   justify-content: space-between;
 }
+:host .tds-table__actionbar-left {
+  display: flex;
+}
 :host .tds-table__title {
   font: var(--tds-headline-07);
   letter-spacing: var(--tds-headline-07-ls);
   padding-top: var(--tds-spacing-element-16);
   text-align: left;
+  margin-right: var(--tds-spacing-element-8);
 }
 :host .tds-table__actionbar,
-:host slot[name=end]::slotted(*) {
+:host slot[name=end]::slotted(*),
+:host slot[name=start]::slotted(*) {
   display: flex;
   align-self: center;
 }

package/dist/collection/components/table/table-toolbar/table-toolbar.js

@@ -6,6 +6,7 @@ const relevantTableProps = [
     'horizontalScrollWidth',
 ];
 /**
+ * @slot start - Slot for the start (left side) of the Table Toolbar.
  * @slot end - Slot for the end (right side) of the Table Toolbar.
  */
 export class TdsTableToolbar {
@@ -67,10 +68,10 @@ export class TdsTableToolbar {
         return styles;
     }
     render() {
-        return (h(Host, { key: '7ff5d6032f2ada9a95d5fa33286ad31940163dfc', class: {
+        return (h(Host, { key: '76acde1b3c55f421cedae9bf932f923813272fe3', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: '9975a508256b56731dd51f7687a16dff7994cf2a', class: "tds-table__upper-bar-flex" }, h("caption", { key: '997271d59b13fe9f88086e8bc5334d6412887fe8', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle), h("div", { key: '6da0901c59e6e053cadfb540ded0e738e492f8ed', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'dfb2a778e959c5b26d42be07378b52c09c9f95d3', class: "tds-table__searchbar" }, h("input", { key: '13918cd96afb703cf71a0aeeb1dd3014a4cba665', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: 'a95553216a9a0c94fbd08c43ef44c95389a82f7e', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '6a9396e3f6f8508acb802e92b320b5c8f2cda517', name: "search", size: "20px" })))), h("slot", { key: '7cf66ff8283724f421e6bdc018cee62f4cd480b1', name: "end" })))));
+            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: 'e6fe2f411ebde77befeb99992b5157bba3651fbf', class: "tds-table__upper-bar-flex" }, h("div", { key: 'f61dc1de54a73c28a2ef10dcae2a5a629ae76c57', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: 'ca50269d08eab742cb759d371937739fd0a87eff', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: '275b233ff233a9f90d936553fa31015f72f21899', name: "start" })), h("div", { key: 'd2ed2b7918e8f8d8e23c34bd8114ee1e69cdb681', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'cd0bd112e3ab6b31c96e10bc4b2eb32715766d58', class: "tds-table__searchbar" }, h("input", { key: '3dbcdf5394477fb55d41c2ee0ddcea1e50ffcd64', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '0a34bfd7cd50c88604af01dfc9bef1adae7d8999', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '98a376c6db7d249e060dafffef18c9345730e25c', name: "search", size: "20px" })))), h("slot", { key: 'e4400d9ddb0f6435315569e1f64f34bc04d8054f', name: "end" })))));
     }
     static get is() { return "tds-table-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.css

@@ -25,7 +25,8 @@
 }
 :host ::slotted(*:focus-visible) {
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :host div:not(.selected) {
   background-color: var(--tds-folder-tab-background);

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.js

@@ -35,10 +35,10 @@ export class TdsFolderTab {
         }
     }
     render() {
-        return (h(Host, { key: '3e036096f61107d381945ce7b9a4478668666d20', "aria-selected": this.selected }, h("div", { key: 'a99712b0487ea9102b4cd0afd3c079a0f52b7ce9', class: {
+        return (h(Host, { key: '19a42f7143a8f32130642bd50dd6817f871fdf20', "aria-selected": this.selected }, h("div", { key: '51bef3bebff5e13d7c949529919865780d8b33de', class: {
                 selected: this.selected,
                 disabled: this.disabled,
-            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: 'eddb270a4d93a3fe824531bd86b769246545262e' }))));
+            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '2b661d3518f047f7bd0e50a121987eb62c5d42e8' }))));
     }
     static get is() { return "tds-folder-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/folder-tabs/folder-tabs.css

@@ -56,7 +56,8 @@
 :host .scroll-right-button:focus,
 :host .scroll-left-button:focus {
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :host .scroll-right-button svg,
 :host .scroll-left-button svg {

package/dist/collection/components/tabs/folder-tabs/folder-tabs.js

@@ -162,9 +162,9 @@ export class TdsFolderTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '382b6b5286588f36ff98f20c1a6a76cc5f59aac0', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'd3118c3bb9e31de96eaabc91c78d125856c665d5', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: 'c56bf987e23ade8b30cd2470ab1ed0f4273bd191', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'afab8a86427918d5ac4bbc17dd2a436a986df577', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: '26f0d1733a766f96de00328e041e06ecab13c1dc', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '1e62e87833204ccfe40ffc52f29567dc75f3f9e0', name: "chevron_left", size: "20px" })), h("slot", { key: '7c33f235eed736380307d496d62da55223d7f90b', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'b2d3faaa0bc01f1385cf44e80e29f5445e928381', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'c04434dd18f0ae0c2b2e43b5dfd4ab4a5c317a25', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: '0b82a953932e888d05478d82944c90768f97bb36', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '50cd22c5be43ae452e0896b449570774c3ab0151', name: "chevron_left", size: "20px" })), h("slot", { key: '3cb17dddc8592241c467167b3a0028355f2b7d5e', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '23c289b70d723b2d0705692835a510b8a650fcfa', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'fff2bfcbcf916d1b391aa25ee5f6fda3c8e63d23', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-folder-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.js

@@ -30,11 +30,11 @@ export class TdsInlineTab {
         }
     }
     render() {
-        return (h(Host, { key: 'fb0af4b885f31d9afa67f76bf3cf122f59876079', "aria-selected": this.selected }, h("div", { key: '624b7370a054f490575a9a2491eaa9277f4a77ba', class: {
+        return (h(Host, { key: '496b56fa31a50e26ceea5275e29873d030ea2937', "aria-selected": this.selected }, h("div", { key: 'c67bfb892ea721b1ad329e00453fe62dcf4681c0', class: {
                 'inline-tab-item': true,
                 'selected': this.selected,
                 'disabled': this.disabled,
-            } }, h("slot", { key: '0eadedfe560fe93faebf07a8f1a546ae022676d9' }))));
+            } }, h("slot", { key: 'bae7788e0625279f4eb82129da1256fbb7f1c95b' }))));
     }
     static get is() { return "tds-inline-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/inline-tabs/inline-tabs.css

@@ -68,7 +68,8 @@
 :host .scroll-right-button:focus,
 :host .scroll-left-button:focus {
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :host .scroll-right-button svg,
 :host .scroll-left-button svg {