@scania/tegel 1.52.0-var-develop-beta.1 → 1.53.0-focus-ring-beta.0

package/dist/cjs/tds-toggle.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DGBnICb9.js');
+var index = require('./index-DjLg7RYe.js');
 var generateUniqueId = require('./generateUniqueId-ComXTAM_.js');
 
 const toggleCss = () => `.tds-toggle.sc-tds-toggle .disabled.sc-tds-toggle{cursor:not-allowed}.tds-toggle.sc-tds-toggle .toggle-headline.sc-tds-toggle{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-toggle-headline);margin-bottom:12px}.tds-toggle.sc-tds-toggle .toggle-headline.disabled.sc-tds-toggle{color:var(--tds-toggle-headline-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle{appearance:initial;margin:0;width:44px;height:24px;position:relative;display:inline-block;vertical-align:middle;cursor:pointer}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::after,.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::before{content:"";position:absolute;box-sizing:border-box;transition:all var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-scania)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::before{width:44px;height:24px;border-radius:16px;background-color:var(--tds-toggle-off-slider);left:0;border:1px solid transparent}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::after{width:16px;height:16px;background-color:var(--tds-toggle-switch);border-radius:50%;left:4px;top:4px}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:focus-visible{outline:none;outline:2px solid var(--tds-toggle-border-outline);border-radius:16px;outline-offset:-2px}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:focus-visible::before{width:40px;height:20px;left:2px;top:2px;background-color:var(--tds-toggle-off-slider-focus);border:1px solid var(--tds-toggle-off-border-focus)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:hover::before{background-color:var(--tds-toggle-off-slider-hover)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:active::before{background-color:var(--tds-toggle-off-slider-pressed)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked::before{background-color:var(--tds-toggle-on-slider)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked:focus-visible::before{background-color:var(--tds-toggle-on-slider-focus);border:1px solid var(--tds-toggle-on-border-focus)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked:hover::before{background-color:var(--tds-toggle-on-slider-hover)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked:active::before{background-color:var(--tds-toggle-on-slider-pressed)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked::after{left:24px}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled{cursor:not-allowed}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled::before{background-color:var(--tds-toggle-slider-disabled);border:1px solid var(--tds-toggle-slider-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled::after{background-color:var(--tds-toggle-switch-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled:checked::before{background-color:var(--tds-toggle-on-slider-disabled);border:1px solid var(--tds-toggle-on-slider-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled:checked::after{background-color:var(--tds-toggle-switch-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle{width:28px;height:16px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle::before{width:28px;height:16px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle::after{width:8px;height:8px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:focus-visible::before{width:24px;height:12px;left:2px;top:2px;background-color:var(--tds-toggle-off-slider-focus);border:1px solid var(--tds-toggle-off-border-focus)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:focus-visible:active::before{background-color:var(--tds-toggle-off-slider-pressed)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:active::before{background-color:var(--tds-toggle-off-slider-pressed)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:checked::before{background-color:var(--tds-toggle-on-slider)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:checked:focus-visible::before{background-color:var(--tds-toggle-on-slider-focus);border:1px solid var(--tds-toggle-on-border-focus)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:checked:hover::before{background-color:var(--tds-toggle-on-slider-hover)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:checked:active::before{background-color:var(--tds-toggle-on-slider-pressed)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:checked::after{left:16px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:disabled::before{background-color:var(--tds-toggle-slider-disabled);border:1px solid var(--tds-toggle-slider-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:disabled::after{background-color:var(--tds-toggle-switch-disabled)}.tds-toggle.sc-tds-toggle label.sc-tds-toggle{display:inline-block;vertical-align:middle;font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);color:var(--tds-toggle-label-color);padding-left:8px;cursor:pointer}.tds-toggle.sc-tds-toggle label.disabled.sc-tds-toggle{color:var(--tds-toggle-label-color-disabled)}`;

package/dist/cjs/tds-tooltip.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DGBnICb9.js');
+var index = require('./index-DjLg7RYe.js');
 var inheritAttributes = require('./inheritAttributes-CGw91JfB.js');
 
 const tooltipCss = () => `.sc-tds-tooltip-h{position:absolute}.tds-tooltip.sc-tds-tooltip{box-sizing:border-box;font-family:var(--detail-05-font-family);font-size:var(--detail-05-font-size);line-height:var(--detail-05-line-height);font-weight:var(--detail-05-font-weight);letter-spacing:var(--detail-05-letter-spacing);text-transform:var(--detail-05-text-transform);color:var(--tds-tooltip-color);background-color:var(--tds-tooltip-background);border-radius:var(--tds-tooltip-border-radius);padding:8px;overflow-wrap:break-word;white-space:normal;max-width:192px;z-index:900;opacity:0;visibility:hidden;transition:opacity 200ms ease-in, visibility 200ms ease-in}.tds-tooltip.sc-tds-tooltip *.sc-tds-tooltip{box-sizing:border-box}.tds-tooltip.tds-tooltip-top-left.sc-tds-tooltip{border-radius:var(--tds-tooltip-border-radius-none) var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius)}.tds-tooltip.tds-tooltip-top-right.sc-tds-tooltip{border-radius:var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius-none) var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius)}.tds-tooltip.tds-tooltip-bottom-right.sc-tds-tooltip{border-radius:var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius-none)}.tds-tooltip.tds-tooltip-bottom-left.sc-tds-tooltip{border-radius:var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius-none)}.tds-tooltip-show.sc-tds-tooltip{opacity:1;visibility:visible}`;

package/dist/cjs/tegel.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DGBnICb9.js');
+var index = require('./index-DjLg7RYe.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*

package/dist/collection/components/accordion/accordion-item/accordion-item.css

@@ -129,8 +129,8 @@
   margin-right: var(--tds-spacing-element-16);
 }
 .tds-accordion-item:has(:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
   z-index: 2;

package/dist/collection/components/banner/banner.css

@@ -77,8 +77,8 @@
   outline: none;
 }
 :host .banner-close button:focus-visible tds-icon {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }

package/dist/collection/components/breadcrumbs/breadcrumb/breadcrumb.css

@@ -8,8 +8,8 @@
   text-decoration: underline;
 }
 :host([role=listitem]) div ::slotted(*:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }

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

@@ -13,7 +13,7 @@ tds-button {
   --tds-btn-primary-border-color-hover: var(--component-button-border-standard-primary-hover);
   --tds-btn-primary-border-color-active: var(--component-button-border-standard-primary-active);
   --tds-btn-primary-border-color-focus: var(--component-button-border-standard-primary-hover);
-  --tds-btn-primary-outline-color-focus: var(--tds-focus-outline-color);
+  --tds-btn-primary-outline-color-focus: var(--component--focus-ring-color-strong);
   --tds-btn-icon-primary-fill: var(--component-button-icon-standard-primary-default);
   --tds-btn-icon-primary-color: var(--component-button-icon-standard-primary-default);
   --tds-btn-icon-primary-fill-hover: var(--component-button-icon-standard-primary-hover);
@@ -38,7 +38,7 @@ tds-button {
   --tds-btn-secondary-border-color-hover: var(--component-button-border-standard-secondary-hover);
   --tds-btn-secondary-border-color-active: var(--component-button-border-standard-secondary-active);
   --tds-btn-secondary-border-color-focus: var(--component-button-border-standard-secondary-hover);
-  --tds-btn-secondary-outline-color-focus: var(--tds-focus-outline-color);
+  --tds-btn-secondary-outline-color-focus: var(--component--focus-ring-color-strong);
   --tds-btn-icon-secondary-fill: var(--component-button-icon-standard-secondary-default);
   --tds-btn-icon-secondary-color: var(--component-button-icon-standard-secondary-default);
   --tds-btn-icon-secondary-fill-hover: var(--component-button-icon-standard-secondary-hover);
@@ -59,7 +59,7 @@ tds-button {
   --tds-btn-ghost-border-color-hover: var(--component-button-border-standard-tertiary-hover);
   --tds-btn-ghost-border-color-active: var(--component-button-border-standard-tertiary-active);
   --tds-btn-ghost-border-color-focus: var(--component-button-border-standard-tertiary-hover);
-  --tds-btn-ghost-outline-color-focus: var(--tds-focus-outline-color);
+  --tds-btn-ghost-outline-color-focus: var(--component--focus-ring-color-strong);
   --tds-btn-icon-ghost-fill: var(--component-button-icon-standard-tertiary-default);
   --tds-btn-icon-ghost-color: var(--component-button-icon-standard-tertiary-default);
   --tds-btn-icon-ghost-fill-hover: var(--component-button-icon-standard-tertiary-hover);
@@ -80,7 +80,7 @@ tds-button {
   --tds-btn-danger-border-color-hover: var(--component-button-border-danger-primary-hover);
   --tds-btn-danger-border-color-active: var(--component-button-border-danger-primary-active);
   --tds-btn-danger-border-color-focus: var(--component-button-border-danger-primary-hover);
-  --tds-btn-danger-outline-color-focus: var(--tds-focus-outline-color);
+  --tds-btn-danger-outline-color-focus: var(--component--focus-ring-color-strong);
   --tds-btn-icon-danger-fill: var(--component-button-icon-danger-primary-default);
   --tds-btn-icon-danger-color: var(--component-button-icon-danger-primary-default);
   --tds-btn-icon-danger-fill-hover: var(--component-button-icon-danger-primary-hover);
@@ -116,11 +116,11 @@ button * {
   box-sizing: border-box;
 }
 button:focus {
-  outline: 1px solid var(--tds-focus-outline-color);
+  outline: 1px solid var(--component--focus-ring-color-strong);
 }
 button:focus-visible {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }

package/dist/collection/components/chip/chip.css

@@ -77,8 +77,8 @@
   z-index: -1;
 }
 .tds-chip-component input:focus-visible + label {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
   background-color: var(--tds-chips-background-focus);

package/dist/collection/components/datetime/datetime.css

@@ -198,8 +198,8 @@
 .tds-datetime-focus .tds-datetime-input-md,
 .tds-datetime-focus .tds-datetime-input-sm {
   border-radius: 0;
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
   z-index: 1;
 }

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.css

@@ -21,8 +21,8 @@
   color: var(--tds-dropdown-option-color-disabled);
 }
 :host .dropdown-option button:focus {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
 }
 :host .dropdown-option button {

package/dist/collection/components/dropdown/dropdown.css

@@ -63,8 +63,8 @@
 }
 
 :host .dropdown-select:focus-within {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }
@@ -202,8 +202,8 @@ body {
   position: relative;
 }
 :host .dropdown-select button:focus {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
   border-radius: 0;

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

@@ -37,8 +37,8 @@
   background-color: var(--tds-footer-top-button-active);
 }
 :host button.footer-top-title-button:focus-visible {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }

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

@@ -12,8 +12,8 @@
 }
 :host([role=listitem]) div ::slotted(a:focus-visible),
 :host([role=listitem]) div ::slotted(button:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }
@@ -33,8 +33,8 @@
 }
 :host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),
 :host([role=listitem]) div.top-part-child ::slotted(button:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }
@@ -56,8 +56,8 @@
   }
   :host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),
   :host([role=listitem]) div.top-part-child ::slotted(button:focus-visible) {
-    outline: 2px solid var(--tds-focus-outline-color);
-    box-shadow: 0 0 0 1px var(--tds-white);
+    outline: 2px solid var(--component--focus-ring-color-strong);
+    box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
     outline-offset: 1px;
     z-index: 1;
   }

package/dist/collection/components/header/header-dropdown-list-item/header-dropdown-list-item.css

@@ -27,8 +27,8 @@
   cursor: pointer;
 }
 :host .component ::slotted(a:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
 }
 :host .component-selected {

package/dist/collection/components/header/header-item/header-item.css

@@ -30,8 +30,8 @@
 :host ::slotted(a:focus-visible) {
   border: none;
   margin-right: 1px;
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
 }
 :host .component-active ::slotted(button),

package/dist/collection/components/header/header-launcher-grid-item/header-launcher-grid-item.css

@@ -32,8 +32,8 @@
 }
 :host ::slotted(a:focus-visible),
 :host ::slotted(button:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }

package/dist/collection/components/modal/modal.css

@@ -252,8 +252,8 @@ button.tds-modal-close {
   cursor: pointer;
 }
 .tds-modal-close:focus {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }

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

@@ -89,8 +89,8 @@
   background-color: var(--tds-side-menu-item-pressed-indicator);
 }
 :host .component ::slotted(a:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
   z-index: 1;
 }

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

@@ -42,8 +42,8 @@
 }
 :host .component ::slotted(a:focus-visible),
 :host .component ::slotted(button:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
   z-index: 1;
 }

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

@@ -58,8 +58,8 @@
   cursor: pointer;
 }
 :host .tds-table__expand-control-container .tds-table__expand-input:focus {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }

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

@@ -22,8 +22,8 @@
   border: none;
 }
 :host ::slotted(*:focus-within)::before {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
   content: "";

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

@@ -55,8 +55,8 @@
 }
 :host .scroll-right-button:focus-within::before,
 :host .scroll-left-button:focus-within::before {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
   content: "";

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

@@ -30,8 +30,8 @@
   top: 3px;
   bottom: 3px;
   outline: 2px solid var(--tds-blue-400);
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }

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

@@ -72,8 +72,8 @@
   content: "";
   position: absolute;
   inset: 3px;
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }

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

@@ -28,8 +28,8 @@
   right: 0;
   top: 3px;
   bottom: 3px;
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }

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

@@ -72,8 +72,8 @@
   content: "";
   position: absolute;
   inset: 3px;
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }

package/dist/collection/components/text-field/text-field.css

@@ -112,7 +112,7 @@
   height: 40px;
 }
 .text-field-container:focus-within {
-  border: 2px solid var(--tds-focus-outline-color);
+  border: 2px solid var(--component--focus-ring-color-strong);
   margin: 0 -2px;
 }
 

package/dist/collection/components/textarea/textarea.css

@@ -64,8 +64,8 @@
   color: var(--tds-textarea-placeholder-hover);
 }
 .textarea-input:focus {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
   border-radius: 0;

package/dist/collection/components/toast/toast.css

@@ -50,8 +50,8 @@
   cursor: pointer;
 }
 :host .wrapper button.close:focus {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }