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

package/dist/components.css

@@ -76,8 +76,8 @@
   margin-bottom: -1px;
   border-bottom: 1px solid var(--accordion-border);
 }
-.tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
-.tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-end {
+.tl-accordion__item:hover:not(.tl-accordion__item--expanded, .tl-accordion__item--disabled) .tl-accordion__header-icon-start,
+.tl-accordion__item:hover:not(.tl-accordion__item--expanded, .tl-accordion__item--disabled) .tl-accordion__header-icon-end {
   background-color: var(--accordion-background-hover);
 }
 .tl-accordion__item:active:not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
@@ -88,8 +88,10 @@
   /* Focus state  */
 }
 .tl-accordion__item:has(.tl-accordion__header-icon-start:focus-visible), .tl-accordion__item:has(.tl-accordion__header-icon-end:focus-visible) {
-  outline: 2px solid 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;
   background-color: var(--accordion-background-focus);
 }
 .tl-accordion__item--disabled:hover, .tl-accordion__item--disabled:active {
@@ -639,7 +641,10 @@
   text-decoration: underline;
 }
 .tl-breadcrumbs a:focus-visible {
-  outline: var(--breadcrumb-focus-outline-width) solid var(--breadcrumb-focus-outline-color);
+  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-breadcrumbs a[aria-current=page] {
   pointer-events: none;
@@ -1178,8 +1183,10 @@
   cursor: pointer;
 }
 .tl-button:focus-visible {
-  outline: var(--button-outline-width) solid var(--color-foreground-border-accent-focus);
-  outline-offset: calc(var(--button-outline-width) * -1);
+  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-button {
   /* Variants */
@@ -1203,11 +1210,10 @@
   background: var(--button-primary-background-focus);
   border-color: var(--button-primary-border-color-focus);
   color: var(--button-primary-color-focus);
-  outline-color: var(--button-primary-outline-color-focus);
 }
 .tl-button--primary:active:not(:disabled):focus-visible {
   outline: none;
-  outline-offset: none;
+  box-shadow: none;
 }
 .tl-button--primary:active:not(:disabled) {
   background-color: var(--button-primary-background-active);
@@ -1232,10 +1238,10 @@
   background: var(--button-secondary-background-focus);
   border-color: var(--button-secondary-border-color-focus);
   color: var(--button-secondary-color-focus);
-  outline-color: var(--button-secondary-outline-color-focus);
 }
 .tl-button--secondary:active:not(:disabled):focus-visible {
   outline: none;
+  box-shadow: none;
 }
 .tl-button--secondary:active:not(:disabled) {
   border-color: var(--button-secondary-border-color-active);
@@ -1259,10 +1265,10 @@
   background: var(--button-ghost-background-focus);
   border-color: var(--button-ghost-border-color-focus);
   color: var(--button-ghost-color-focus);
-  outline-color: var(--button-ghost-outline-color-focus);
 }
 .tl-button--ghost:active:not(:disabled):focus-visible {
   outline: none;
+  box-shadow: none;
 }
 .tl-button--ghost:active:not(:disabled) {
   border-color: var(--button-ghost-border-color-active);
@@ -1286,10 +1292,10 @@
   background: var(--button-danger-background-focus);
   border-color: var(--button-danger-border-color-focus);
   color: var(--button-danger-color-focus);
-  outline-color: var(--button-danger-outline-color-focus);
 }
 .tl-button--danger:active:not(:disabled):focus-visible {
   outline: none;
+  box-shadow: none;
 }
 .tl-button--danger:active:not(:disabled) {
   background-color: var(--button-danger-background-active);
@@ -1529,9 +1535,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);
@@ -1597,7 +1604,7 @@
 
 .tl-card__body {
   display: block;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .tl-card--stretch .tl-card__body {
   display: flex;
@@ -1891,9 +1898,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 {
@@ -1916,9 +1924,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 {
@@ -2730,8 +2739,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 {
@@ -3038,12 +3049,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);
 }
 
@@ -3187,8 +3198,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);
@@ -3530,8 +3542,8 @@ body {
   text-decoration: underline;
 }
 .tl-footer__link:focus-visible {
-  outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
-  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;
 }
@@ -3590,8 +3602,8 @@ body {
     background-color: var(--footer-top-button-active);
   }
   .tl-footer__top-title:focus-visible {
-    outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
-    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;
   }
@@ -3611,8 +3623,8 @@ body {
   text-decoration: none;
 }
 .tl-footer__main .tl-footer__link:focus-visible {
-  outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
-  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;
 }
@@ -4085,8 +4097,9 @@ body {
   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;
@@ -4126,8 +4139,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);
@@ -4172,8 +4186,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);
@@ -4513,8 +4528,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 {
@@ -4551,8 +4567,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 {
@@ -6004,8 +6022,10 @@ body {
   font: inherit;
 }
 .tl-link:focus-visible {
-  outline: var(--link-focus-outline-width) solid var(--link-focus-outline-color);
+  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;
   text-decoration: none;
 }
 .tl-link:active {
@@ -7119,8 +7139,10 @@ body {
   letter-spacing: var(--side-menu-text-item-letter-spacing);
 }
 .tl-side-menu__item:focus-visible {
-  outline: 2px solid 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;
+  z-index: 1;
 }
 .tl-side-menu__item:hover {
   background-color: var(--side-menu-item-state-hover);
@@ -7233,8 +7255,10 @@ body {
   background-color: var(--side-menu-dropdown-list-item-custom-background-active);
 }
 .tl-side-menu__dropdown-item:focus {
-  outline: 2px solid 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;
+  z-index: 1;
 }
 .tl-side-menu__dropdown-item--selected {
   background-color: var(--side-menu-dropdown-list-item-custom-background-selected);
@@ -8597,8 +8621,10 @@ body {
   cursor: pointer;
 }
 .tl-table__row--clickable:focus-visible {
-  outline: 2px solid var(--table-header-button-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;
+  z-index: 1;
 }
 .tl-table--zebra-rows-odd .tl-table__body .tl-table__row:nth-child(odd) {
   background-color: var(--table-zebra-mode);
@@ -8623,7 +8649,7 @@ body {
   transition: background-color 200ms ease;
   min-width: 192px;
 }
-.tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox):not(.tl-table__header-cell--expand) {
+.tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox, .tl-table__header-cell--expand) {
   background-color: var(--table-header-hover);
 }
 .tl-table__header-cell:first-of-type {
@@ -8697,8 +8723,10 @@ body {
   text-align: left;
 }
 .tl-table__header-button:focus-visible, .tl-table__header-button:focus, .tl-table__header-button:active {
-  outline: 2px solid var(--table-header-button-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;
+  z-index: 1;
 }
 .tl-table--compact .tl-table__header-button {
   padding: 0;
@@ -8782,7 +8810,7 @@ body {
 .tl-table--no-min-width .tl-table__body-cell {
   min-width: unset;
 }
-.tl-table--vertical-dividers .tl-table__body-cell:not(:last-child):not(.tl-table__body-cell--expand) {
+.tl-table--vertical-dividers .tl-table__body-cell:not(:last-child, .tl-table__body-cell--expand) {
   border-right: 1px solid var(--table-divider);
 }
 .tl-table--zebra-columns-odd .tl-table__body-cell:nth-child(odd) {
@@ -9008,9 +9036,9 @@ body {
   padding: 0;
 }
 .tl-table__body-cell--expand:has(.tl-table__expand-input:focus), .tl-table__body-cell--expand:has(.tl-table__expand-input:focus-visible), .tl-table__body-cell--expand:has(.tl-table__expand-input:active) {
-  outline: 2px solid var(--table-header-button-focus);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
-  outline-offset: -1px;
+  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;
 }
 
@@ -9185,11 +9213,12 @@ body {
   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);
@@ -9334,12 +9363,14 @@ body {
   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 {
@@ -9382,6 +9413,7 @@ body {
   content: none;
 }
 .tl-inline-tabs__tab--disabled:focus-visible::before {
+  outline: none;
   box-shadow: none;
 }
 
@@ -9505,12 +9537,14 @@ body {
   outline: none;
 }
 .tl-navigation-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(--navigation-tabs-tab-focus) inset;
-  z-index: 2;
   pointer-events: none;
 }
 .tl-navigation-tabs__tab::after {
@@ -9553,6 +9587,7 @@ body {
   content: none;
 }
 .tl-navigation-tabs__tab--disabled:focus-visible::before {
+  outline: none;
   box-shadow: none;
 }
 

package/dist/tl-accordion.css

@@ -63,8 +63,8 @@
   margin-bottom: -1px;
   border-bottom: 1px solid var(--accordion-border);
 }
-.tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
-.tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-end {
+.tl-accordion__item:hover:not(.tl-accordion__item--expanded, .tl-accordion__item--disabled) .tl-accordion__header-icon-start,
+.tl-accordion__item:hover:not(.tl-accordion__item--expanded, .tl-accordion__item--disabled) .tl-accordion__header-icon-end {
   background-color: var(--accordion-background-hover);
 }
 .tl-accordion__item:active:not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
@@ -75,8 +75,10 @@
   /* Focus state  */
 }
 .tl-accordion__item:has(.tl-accordion__header-icon-start:focus-visible), .tl-accordion__item:has(.tl-accordion__header-icon-end:focus-visible) {
-  outline: 2px solid 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;
   background-color: var(--accordion-background-focus);
 }
 .tl-accordion__item--disabled:hover, .tl-accordion__item--disabled:active {

package/dist/tl-breadcrumbs.css

@@ -108,7 +108,10 @@
   text-decoration: underline;
 }
 .tl-breadcrumbs a:focus-visible {
-  outline: var(--breadcrumb-focus-outline-width) solid var(--breadcrumb-focus-outline-color);
+  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-breadcrumbs a[aria-current=page] {
   pointer-events: none;

package/dist/tl-button.css

@@ -526,8 +526,10 @@
   cursor: pointer;
 }
 .tl-button:focus-visible {
-  outline: var(--button-outline-width) solid var(--color-foreground-border-accent-focus);
-  outline-offset: calc(var(--button-outline-width) * -1);
+  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-button {
   /* Variants */
@@ -551,11 +553,10 @@
   background: var(--button-primary-background-focus);
   border-color: var(--button-primary-border-color-focus);
   color: var(--button-primary-color-focus);
-  outline-color: var(--button-primary-outline-color-focus);
 }
 .tl-button--primary:active:not(:disabled):focus-visible {
   outline: none;
-  outline-offset: none;
+  box-shadow: none;
 }
 .tl-button--primary:active:not(:disabled) {
   background-color: var(--button-primary-background-active);
@@ -580,10 +581,10 @@
   background: var(--button-secondary-background-focus);
   border-color: var(--button-secondary-border-color-focus);
   color: var(--button-secondary-color-focus);
-  outline-color: var(--button-secondary-outline-color-focus);
 }
 .tl-button--secondary:active:not(:disabled):focus-visible {
   outline: none;
+  box-shadow: none;
 }
 .tl-button--secondary:active:not(:disabled) {
   border-color: var(--button-secondary-border-color-active);
@@ -607,10 +608,10 @@
   background: var(--button-ghost-background-focus);
   border-color: var(--button-ghost-border-color-focus);
   color: var(--button-ghost-color-focus);
-  outline-color: var(--button-ghost-outline-color-focus);
 }
 .tl-button--ghost:active:not(:disabled):focus-visible {
   outline: none;
+  box-shadow: none;
 }
 .tl-button--ghost:active:not(:disabled) {
   border-color: var(--button-ghost-border-color-active);
@@ -634,10 +635,10 @@
   background: var(--button-danger-background-focus);
   border-color: var(--button-danger-border-color-focus);
   color: var(--button-danger-color-focus);
-  outline-color: var(--button-danger-outline-color-focus);
 }
 .tl-button--danger:active:not(:disabled):focus-visible {
   outline: none;
+  box-shadow: none;
 }
 .tl-button--danger:active:not(:disabled) {
   background-color: var(--button-danger-background-active);

package/dist/tl-card.css

@@ -165,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);
@@ -233,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

@@ -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-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

@@ -159,8 +159,8 @@
   text-decoration: underline;
 }
 .tl-footer__link:focus-visible {
-  outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
-  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;
 }
@@ -219,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-system-info-default);
-    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;
   }
@@ -240,8 +240,8 @@
   text-decoration: none;
 }
 .tl-footer__main .tl-footer__link:focus-visible {
-  outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
-  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;
 }
 

package/dist/tl-link.css

@@ -142,8 +142,10 @@
   font: inherit;
 }
 .tl-link:focus-visible {
-  outline: var(--link-focus-outline-width) solid var(--link-focus-outline-color);
+  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;
   text-decoration: none;
 }
 .tl-link:active {

package/dist/tl-navigation-tabs.css

@@ -62,12 +62,14 @@
   outline: none;
 }
 .tl-navigation-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(--navigation-tabs-tab-focus) inset;
-  z-index: 2;
   pointer-events: none;
 }
 .tl-navigation-tabs__tab::after {
@@ -110,6 +112,7 @@
   content: none;
 }
 .tl-navigation-tabs__tab--disabled:focus-visible::before {
+  outline: none;
   box-shadow: none;
 }
 

package/dist/tl-side-menu.css

@@ -273,8 +273,10 @@ body {
   letter-spacing: var(--side-menu-text-item-letter-spacing);
 }
 .tl-side-menu__item:focus-visible {
-  outline: 2px solid 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;
+  z-index: 1;
 }
 .tl-side-menu__item:hover {
   background-color: var(--side-menu-item-state-hover);
@@ -387,8 +389,10 @@ body {
   background-color: var(--side-menu-dropdown-list-item-custom-background-active);
 }
 .tl-side-menu__dropdown-item:focus {
-  outline: 2px solid 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;
+  z-index: 1;
 }
 .tl-side-menu__dropdown-item--selected {
   background-color: var(--side-menu-dropdown-list-item-custom-background-selected);

package/dist/tl-slider.css

@@ -553,8 +553,10 @@
   cursor: pointer;
 }
 .tl-button:focus-visible {
-  outline: var(--button-outline-width) solid var(--color-foreground-border-accent-focus);
-  outline-offset: calc(var(--button-outline-width) * -1);
+  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-button {
   /* Variants */
@@ -578,11 +580,10 @@
   background: var(--button-primary-background-focus);
   border-color: var(--button-primary-border-color-focus);
   color: var(--button-primary-color-focus);
-  outline-color: var(--button-primary-outline-color-focus);
 }
 .tl-button--primary:active:not(:disabled):focus-visible {
   outline: none;
-  outline-offset: none;
+  box-shadow: none;
 }
 .tl-button--primary:active:not(:disabled) {
   background-color: var(--button-primary-background-active);
@@ -607,10 +608,10 @@
   background: var(--button-secondary-background-focus);
   border-color: var(--button-secondary-border-color-focus);
   color: var(--button-secondary-color-focus);
-  outline-color: var(--button-secondary-outline-color-focus);
 }
 .tl-button--secondary:active:not(:disabled):focus-visible {
   outline: none;
+  box-shadow: none;
 }
 .tl-button--secondary:active:not(:disabled) {
   border-color: var(--button-secondary-border-color-active);
@@ -634,10 +635,10 @@
   background: var(--button-ghost-background-focus);
   border-color: var(--button-ghost-border-color-focus);
   color: var(--button-ghost-color-focus);
-  outline-color: var(--button-ghost-outline-color-focus);
 }
 .tl-button--ghost:active:not(:disabled):focus-visible {
   outline: none;
+  box-shadow: none;
 }
 .tl-button--ghost:active:not(:disabled) {
   border-color: var(--button-ghost-border-color-active);
@@ -661,10 +662,10 @@
   background: var(--button-danger-background-focus);
   border-color: var(--button-danger-border-color-focus);
   color: var(--button-danger-color-focus);
-  outline-color: var(--button-danger-outline-color-focus);
 }
 .tl-button--danger:active:not(:disabled):focus-visible {
   outline: none;
+  box-shadow: none;
 }
 .tl-button--danger:active:not(:disabled) {
   background-color: var(--button-danger-background-active);

package/dist/tl-table.css

@@ -323,8 +323,10 @@ body {
   cursor: pointer;
 }
 .tl-table__row--clickable:focus-visible {
-  outline: 2px solid var(--table-header-button-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;
+  z-index: 1;
 }
 .tl-table--zebra-rows-odd .tl-table__body .tl-table__row:nth-child(odd) {
   background-color: var(--table-zebra-mode);
@@ -349,7 +351,7 @@ body {
   transition: background-color 200ms ease;
   min-width: 192px;
 }
-.tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox):not(.tl-table__header-cell--expand) {
+.tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox, .tl-table__header-cell--expand) {
   background-color: var(--table-header-hover);
 }
 .tl-table__header-cell:first-of-type {
@@ -423,8 +425,10 @@ body {
   text-align: left;
 }
 .tl-table__header-button:focus-visible, .tl-table__header-button:focus, .tl-table__header-button:active {
-  outline: 2px solid var(--table-header-button-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;
+  z-index: 1;
 }
 .tl-table--compact .tl-table__header-button {
   padding: 0;
@@ -508,7 +512,7 @@ body {
 .tl-table--no-min-width .tl-table__body-cell {
   min-width: unset;
 }
-.tl-table--vertical-dividers .tl-table__body-cell:not(:last-child):not(.tl-table__body-cell--expand) {
+.tl-table--vertical-dividers .tl-table__body-cell:not(:last-child, .tl-table__body-cell--expand) {
   border-right: 1px solid var(--table-divider);
 }
 .tl-table--zebra-columns-odd .tl-table__body-cell:nth-child(odd) {
@@ -734,9 +738,9 @@ body {
   padding: 0;
 }
 .tl-table__body-cell--expand:has(.tl-table__expand-input:focus), .tl-table__body-cell--expand:has(.tl-table__expand-input:focus-visible), .tl-table__body-cell--expand:has(.tl-table__expand-input:active) {
-  outline: 2px solid var(--table-header-button-focus);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
-  outline-offset: -1px;
+  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel-lite",
-  "version": "0.1.0-focus-ring-beta.0",
+  "version": "0.1.0-focus-ring-beta.1",
   "description": "Styles-only library for Tegel Design System (Beta)",
   "type": "module",
   "keywords": [