@scania/tegel-lite 0.1.0-dev-test-beta.0 → 0.1.0-focus-ring-beta.1

package/dist/tl-card.css

@@ -7,20 +7,26 @@
 .scania.tds-mode-light,
 .scania .tl-mode-light,
 .scania.tl-mode-light {
-  --component-card-background-primary: #fff;
-  --component-card-background-secondary: #fff;
+  --component-card-background-primary-default: var(--scania-color-base-white);
+  --component-card-background-secondary-default: var(--scania-color-base-white);
   --component-card-border-radius-default: var(--scania-unit-4);
   --component-card-space-padding-default: var(--scania-unit-16);
+  --component-card-text-title-default: var(--color-text-strong);
+  --component-card-text-subtitle-default: var(--color-text-soft);
+  --component-card-text-body-default: var(--color-text-defined);
 }
 
 .traton .tds-mode-light,
 .traton.tds-mode-light,
 .traton .tl-mode-light,
 .traton.tl-mode-light {
-  --component-card-background-primary: var(--traton-color-transparent-invisible-light);
-  --component-card-background-secondary: var(--traton-color-transparent-invisible-light);
+  --component-card-background-primary-default: var(--traton-color-transparent-invisible-light);
+  --component-card-background-secondary-default: var(--traton-color-transparent-invisible-light);
   --component-card-border-radius-default: var(--traton-unit-0);
   --component-card-space-padding-default: var(--traton-unit-0);
+  --component-card-text-title-default: var(--color-text-strong);
+  --component-card-text-subtitle-default: var(--color-text-soft);
+  --component-card-text-body-default: var(--color-text-defined);
 }
 
 .tds-mode-dark,
@@ -28,20 +34,26 @@
 .scania.tds-mode-dark,
 .scania .tl-mode-dark,
 .scania.tl-mode-dark {
-  --component-card-background-primary: var(--color-background-layer-01);
-  --component-card-background-secondary: var(--color-background-layer-02);
+  --component-card-background-primary-default: var(--color-background-layer-01);
+  --component-card-background-secondary-default: var(--color-background-layer-02);
   --component-card-border-radius-default: var(--scania-unit-4);
   --component-card-space-padding-default: var(--scania-unit-16);
+  --component-card-text-title-default: var(--color-text-strong);
+  --component-card-text-subtitle-default: var(--color-text-soft);
+  --component-card-text-body-default: var(--color-text-defined);
 }
 
 .traton .tds-mode-dark,
 .traton.tds-mode-dark,
 .traton .tl-mode-dark,
 .traton.tl-mode-dark {
-  --component-card-background-primary: var(--traton-color-transparent-invisible-dark);
-  --component-card-background-secondary: var(--traton-color-transparent-invisible-dark);
+  --component-card-background-primary-default: var(--traton-color-transparent-invisible-dark);
+  --component-card-background-secondary-default: var(--traton-color-transparent-invisible-dark);
   --component-card-border-radius-default: var(--traton-unit-0);
   --component-card-space-padding-default: var(--traton-unit-0);
+  --component-card-text-title-default: var(--color-text-strong);
+  --component-card-text-subtitle-default: var(--color-text-soft);
+  --component-card-text-body-default: var(--color-text-defined);
 }
 
 .tl-card {
@@ -153,9 +165,10 @@
   padding: 0;
 }
 .tl-card--clickable:focus-visible {
-  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-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;
 }
 .tl-card--clickable:active {
   box-shadow: var(--card-box-pressed);
@@ -221,7 +234,7 @@
 
 .tl-card__body {
   display: block;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .tl-card--stretch .tl-card__body {
   display: flex;

package/dist/tl-chip.css

@@ -1,20 +1,20 @@
 /* Typography Usage mixins */
 .tl-chip {
-  --chip-text: var(--component-chip-text-default);
+  --chip-text: var(--component-chip-text-standard-default);
   --chip-text-active: var(--component-chip-text-selected-default);
-  --chip-background: var(--component-chip-background-default);
-  --chip-background-hover: var(--component-chip-background-hover);
-  --chip-background-focus: var(--component-chip-background-hover);
+  --chip-background: var(--component-chip-background-standard-default);
+  --chip-background-hover: var(--component-chip-background-standard-hover);
+  --chip-background-focus: var(--component-chip-background-standard-hover);
   --chip-background-active: var(--component-chip-background-selected-default);
   --chip-background-active-hover: var(--component-chip-background-selected-hover);
   --chip-focused-on-selected: var(--component-chip-background-selected-default);
-  --chip-border: var(--component-chip-border-default);
-  --chip-border-hover: var(--component-chip-border-hover);
+  --chip-border: var(--component-chip-border-standard-default);
+  --chip-border-hover: var(--component-chip-border-standard-hover);
   --chip-border-selected: var(--component-chip-border-selected-default);
   --chip-border-selected-hover: var(--component-chip-border-selected-hover);
   --chip-border-radius: calc(var(--component-chip-border-radius-default) * 1px);
-  --chip-opacity-disabled: var(--component-chip-opacity-disabled);
-  --chip-icon-fill: var(--component-chip-text-default);
+  --chip-opacity-disabled: calc(var(--component-chip-opacity-disabled) / 100);
+  --chip-icon-fill: var(--component-chip-text-standard-default);
   --chip-icon-fill-active: var(--component-chip-text-selected-default);
 }
 
@@ -44,9 +44,10 @@
   border-color: var(--chip-border-hover);
 }
 .tl-chip:focus-visible {
-  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-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(--chip-background-focus);
 }
 .tl-chip--sm {
@@ -69,9 +70,10 @@
   border-color: var(--chip-border-selected-hover);
 }
 .tl-chip--selected:focus-visible {
-  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-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(--chip-focused-on-selected);
 }
 .tl-chip:disabled {

package/dist/tl-divider.css

@@ -1,7 +1,65 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-divider-border-discrete-default: var(--scania-color-grey-200);
+  --component-divider-border-subtle-default: var(--scania-color-grey-350);
+  --component-divider-border-soft-default: var(--scania-color-grey-500);
+  --component-divider-border-defined-default: var(--scania-color-grey-650);
+  --component-divider-border-strong-default: var(--color-border-strong);
+  --component-divider-border-expressive-default: var(--scania-color-blue-700);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-divider-border-discrete-default: var(--color-border-discrete);
+  --component-divider-border-subtle-default: var(--color-border-subtle);
+  --component-divider-border-soft-default: var(--color-border-soft);
+  --component-divider-border-defined-default: var(--color-border-defined);
+  --component-divider-border-strong-default: var(--color-border-strong);
+  --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-divider-border-discrete-default: var(--color-border-discrete);
+  --component-divider-border-subtle-default: var(--color-border-subtle);
+  --component-divider-border-soft-default: var(--color-border-soft);
+  --component-divider-border-defined-default: var(--color-border-defined);
+  --component-divider-border-strong-default: var(--color-border-strong);
+  --component-divider-border-expressive-default: var(--scania-color-blue-800);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-divider-border-discrete-default: var(--color-border-discrete);
+  --component-divider-border-subtle-default: var(--color-border-subtle);
+  --component-divider-border-soft-default: var(--color-border-soft);
+  --component-divider-border-defined-default: var(--color-border-defined);
+  --component-divider-border-strong-default: var(--color-border-strong);
+  --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
+}
+
 .tl-divider {
-  --divider-background: var(--color-foreground-border-discrete);
-  --divider-background-strong: var(--color-foreground-border-strong);
-  --divider-background-discrete: var(--color-foreground-border-discrete);
+  --divider-background: var(--component-divider-border-discrete-default);
+  --divider-background-discrete: var(--component-divider-border-discrete-default);
+  --divider-background-subtle: var(--component-divider-border-subtle-default);
+  --divider-background-soft: var(--component-divider-border-soft-default);
+  --divider-background-defined: var(--component-divider-border-defined-default);
+  --divider-background-strong: var(--component-divider-border-strong-default);
+  --divider-background-expressive: var(--component-divider-border-expressive-default);
 }
 
 .tl-divider {

package/dist/tl-dropdown.css

@@ -280,8 +280,10 @@ body {
   display: block;
 }
 .tl-dropdown__input-clear:focus, .tl-dropdown__input-clear:focus-visible {
-  outline: 2px solid var(--color-foreground-border-accent-focus);
-  outline-offset: 2px;
+  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;
 }
 
 .tl-dropdown__input-wrapper:has(.tl-dropdown__input[aria-expanded=true]:not(:placeholder-shown)) .tl-dropdown__input-clear {
@@ -588,12 +590,12 @@ body {
   display: none;
 }
 
-.tl-dropdown--label-inside:not(:has(.tl-dropdown__text:not(:empty))):not(:has(.tl-dropdown__input:focus)):not(:has(.tl-dropdown__input:not(:placeholder-shown))):not(:has(.tl-dropdown__select option:not([value=""]):checked)) .tl-dropdown__label {
+.tl-dropdown--label-inside:not(:has(.tl-dropdown__text:not(:empty)), :has(.tl-dropdown__input:focus), :has(.tl-dropdown__input:not(:placeholder-shown)), :has(.tl-dropdown__select option:not([value=""]):checked)) .tl-dropdown__label {
   top: 50%;
   transform: translateY(-50%);
 }
 
-.tl-dropdown--label-inside:has(.tl-dropdown__helper):not(:has(.tl-dropdown__text:not(:empty))):not(:has(.tl-dropdown__input:focus)):not(:has(.tl-dropdown__input:not(:placeholder-shown))):not(:has(.tl-dropdown__select option:not([value=""]):checked)) .tl-dropdown__label {
+.tl-dropdown--label-inside:has(.tl-dropdown__helper):not(:has(.tl-dropdown__text:not(:empty)), :has(.tl-dropdown__input:focus), :has(.tl-dropdown__input:not(:placeholder-shown)), :has(.tl-dropdown__select option:not([value=""]):checked)) .tl-dropdown__label {
   top: calc(50% - 9.5px);
 }
 
@@ -737,8 +739,9 @@ body {
   background: var(--dropdown-option-background-hover);
 }
 .tl-dropdown__option:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
-  z-index: 2;
+  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;
 }
 .tl-dropdown__option--selected {
   background: var(--dropdown-option-background-selected);

package/dist/tl-folder-tabs.css

@@ -54,11 +54,12 @@
   border-left-color: var(--folder-tab-divider);
 }
 .tl-folder-tabs__tab:focus-visible {
-  outline: 2px solid currentcolor;
-  outline-offset: -4px;
-  box-shadow: none;
+  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;
 }
-.tl-folder-tabs__tab:hover:not(.tl-folder-tabs__tab--disabled):not(.tl-folder-tabs__tab--selected) {
+.tl-folder-tabs__tab:hover:not(.tl-folder-tabs__tab--disabled, .tl-folder-tabs__tab--selected) {
   background-color: var(--folder-tab-surface-hover);
   border-top-color: var(--folder-tab-surface-hover);
   color: var(--folder-tab-text);

package/dist/tl-footer.css

@@ -8,20 +8,36 @@
 .scania.tds-mode-light,
 .scania .tl-mode-light,
 .scania.tl-mode-light {
-  --component-footer-border: var(--scania-color-blue-700);
-  --component-footer-primary: var(--scania-color-blue-800);
-  --component-footer-color-text-link-default: var(--color-text-brand);
-  --component-footer-color-text-copyright-default: var(--color-text-inverse-soft);
+  --component-footer-border-divider-default: var(--scania-color-blue-700);
+  --component-footer-background-main-default: var(--scania-color-blue-800);
+  --component-footer-background-top-default: var(--color-background-layer-01);
+  --component-footer-background-top-secondary: var(--color-background-base);
+  --component-footer-background-list-item-default: var(--component-footer-background-top-default);
+  --component-footer-background-list-item-active: var(--scania-color-grey-150);
+  --component-footer-text-copyright-default: var(--color-text-inverse-soft);
+  --component-footer-text-link-default: var(--color-text-strong);
+  --component-footer-text-title-default: var(--color-text-strong);
+  --component-footer-text-inverse-link-default: var(--scania-color-base-white);
+  --component-footer-icon-link-default: var(--color-icon-strong);
+  --component-footer-icon-social-default: var(--color-icon-inverse-strong);
 }
 
 .traton .tds-mode-light,
 .traton.tds-mode-light,
 .traton .tl-mode-light,
 .traton.tl-mode-light {
-  --component-footer-border: var(--traton-color-transparent-invisible-light);
-  --component-footer-primary: var(--traton-color-grey-50);
-  --component-footer-color-text-link-default: var(--color-text-strong);
-  --component-footer-color-text-copyright-default: var(--traton-color-transparent-600);
+  --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
+  --component-footer-background-main-default: var(--traton-color-grey-50);
+  --component-footer-background-top-default: var(--color-background-layer-01);
+  --component-footer-background-top-secondary: var(--color-background-layer-01);
+  --component-footer-background-list-item-default: var(--component-footer-background-top-default);
+  --component-footer-background-list-item-active: var(--traton-color-grey-300);
+  --component-footer-text-copyright-default: var(--color-text-soft);
+  --component-footer-text-link-default: var(--color-text-strong);
+  --component-footer-text-title-default: var(--color-text-strong);
+  --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
+  --component-footer-icon-link-default: var(--color-icon-strong);
+  --component-footer-icon-social-default: var(--color-icon-strong);
 }
 
 .tds-mode-dark,
@@ -29,35 +45,51 @@
 .scania.tds-mode-dark,
 .scania .tl-mode-dark,
 .scania.tl-mode-dark {
-  --component-footer-border: var(--scania-color-blue-800);
-  --component-footer-primary: var(--scania-color-blue-900);
-  --component-footer-color-text-link-default: #d8dde5;
-  --component-footer-color-text-copyright-default: var(--color-text-soft);
+  --component-footer-border-divider-default: var(--scania-color-blue-800);
+  --component-footer-background-main-default: var(--scania-color-blue-900);
+  --component-footer-background-top-default: var(--color-background-layer-01);
+  --component-footer-background-top-secondary: var(--color-background-layer-02);
+  --component-footer-background-list-item-default: var(--component-footer-background-top-default);
+  --component-footer-background-list-item-active: var(--scania-color-grey-800);
+  --component-footer-text-copyright-default: var(--color-text-soft);
+  --component-footer-text-link-default: var(--color-text-strong);
+  --component-footer-text-title-default: var(--color-text-strong);
+  --component-footer-text-inverse-link-default: var(--scania-color-base-white);
+  --component-footer-icon-link-default: var(--color-icon-strong);
+  --component-footer-icon-social-default: var(--color-icon-strong);
 }
 
 .traton .tds-mode-dark,
 .traton.tds-mode-dark,
 .traton .tl-mode-dark,
 .traton.tl-mode-dark {
-  --component-footer-border: var(--traton-color-transparent-invisible-light);
-  --component-footer-primary: var(--traton-color-blue-1000);
-  --component-footer-color-text-link-default: var(--color-text-strong);
-  --component-footer-color-text-copyright-default: var(--traton-color-transparent-inverse-600);
+  --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
+  --component-footer-background-main-default: var(--traton-color-blue-1000);
+  --component-footer-background-top-default: var(--color-background-layer-01);
+  --component-footer-background-top-secondary: var(--color-background-layer-01);
+  --component-footer-background-list-item-default: var(--component-footer-background-top-default);
+  --component-footer-background-list-item-active: var(--traton-color-blue-800);
+  --component-footer-text-copyright-default: var(--color-text-soft);
+  --component-footer-text-link-default: var(--color-text-strong);
+  --component-footer-text-title-default: var(--color-text-strong);
+  --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
+  --component-footer-icon-link-default: var(--color-icon-strong);
+  --component-footer-icon-social-default: var(--color-icon-strong);
 }
 
 .tl-footer {
-  --footer-top-background-primary: var(--color-background-layer-01);
-  --footer-top-background-secondary: var(--color-background-base);
-  --footer-top-background: var(--color-background-layer-01);
-  --footer-top-divider: var(--color-foreground-border-discrete);
-  --footer-top-links-desktop: var(--color-foreground-text-subtle);
-  --footer-top-links: var(--component-footer-text-color-link-text);
-  --footer-top-links-background-hover: var(--color-background-surface-300);
-  --footer-top-button-active: var(--color-background-surface-300);
-  --footer-main-background: var(--component-footer-primary);
-  --footer-main-links: var(--color-foreground-text-accent-brand);
-  --footer-main-divider: var(--component-footer-border);
-  --footer-main-copyright: var(--component-footer-text-color-copyright);
+  --footer-top-background-primary: var(--component-footer-background-top-default);
+  --footer-top-background-secondary: var(--component-footer-background-top-secondary);
+  --footer-top-background: var(--component-footer-background-top-default);
+  --footer-top-divider: var(--color-border-discrete);
+  --footer-top-links-desktop: var(--component-footer-text-title-default);
+  --footer-top-links: var(--component-footer-text-link-default);
+  --footer-top-links-background-hover: var(--component-footer-background-list-item-active);
+  --footer-top-button-active: var(--component-footer-background-list-item-active);
+  --footer-main-background: var(--component-footer-background-main-default);
+  --footer-main-links: var(--component-footer-text-inverse-link-default);
+  --footer-main-divider: var(--component-footer-border-divider-default);
+  --footer-main-copyright: var(--component-footer-text-copyright-default);
 }
 .tl-footer.tl-footer--primary {
   --footer-top-background: var(--footer-top-background-primary);
@@ -66,6 +98,26 @@
   --footer-top-background: var(--footer-top-background-secondary);
 }
 
+.scania .tl-footer {
+  --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
+  --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
+}
+
+.traton .tl-mode-dark .tl-footer {
+  --component-footer-logotype-local: var(--traton-logotype-white-svg-local);
+  --component-footer-logotype-cdn: var(--traton-logotype-white-svg);
+}
+
+.traton .tl-mode-light .tl-footer {
+  --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
+  --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
+}
+
+.traton .tl-footer {
+  --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
+  --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
+}
+
 .tl-footer__group {
   display: block;
 }
@@ -107,8 +159,8 @@
   text-decoration: underline;
 }
 .tl-footer__link:focus-visible {
-  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-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;
 }
@@ -167,8 +219,8 @@
     background-color: var(--footer-top-button-active);
   }
   .tl-footer__top-title:focus-visible {
-    outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
-    box-shadow: 0 0 0 1px var(--color-brand-neutral-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;
   }
@@ -188,8 +240,8 @@
   text-decoration: none;
 }
 .tl-footer__main .tl-footer__link:focus-visible {
-  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-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/tl-header.css

@@ -348,8 +348,9 @@
   background-color: var(--header-item-hover);
 }
 .tl-header__item-wrapper:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+  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;
 }
 .tl-header__item-wrapper:active {
   padding-top: 2px;
@@ -402,8 +403,9 @@ body {
   background-color: var(--header-item-hover);
 }
 .tl-header__dropdown-wrapper:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+  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;
 }
 .tl-header__dropdown-wrapper:active {
   background-color: var(--header-basic-element-background-selected);
@@ -448,8 +450,9 @@ body {
   background-color: var(--header-item-hover);
 }
 .tl-header__dropdown-wrapper-user:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+  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;
 }
 .tl-header__dropdown-wrapper-user:active {
   background-color: var(--header-basic-element-background-selected);
@@ -789,8 +792,9 @@ body {
 }
 .tl-header__dropdown-menu-item a:focus-visible,
 .tl-header__dropdown-menu-item button:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+  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;
 }
 .tl-header__dropdown-menu-item--selected a,
 .tl-header__dropdown-menu-item--selected button {
@@ -827,8 +831,10 @@ body {
 }
 .tl-header__launcher-menu-item a:focus-visible,
 .tl-header__launcher-menu-item button:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+  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;
 }
 
 .tl-header__user-menu-image img {

package/dist/tl-inline-tabs.css

@@ -64,12 +64,14 @@
   outline: none;
 }
 .tl-inline-tabs__tab:focus-visible::before {
+  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: "";
   position: absolute;
   inset: 18px 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px var(--inline-tabs-tab-focus) inset;
-  z-index: 2;
   pointer-events: none;
 }
 .tl-inline-tabs__tab::after {
@@ -112,6 +114,7 @@
   content: none;
 }
 .tl-inline-tabs__tab--disabled:focus-visible::before {
+  outline: none;
   box-shadow: none;
 }