From f36aed8f8b1ce34c7973b81a8d0c03d851da14c1 Mon Sep 17 00:00:00 2001 From: Jacob Welander Jensen <64834767+Welander1994@users.noreply.github.com> Date: Wed, 29 Oct 2025 10:43:22 +0100 Subject: [PATCH 1/3] align all the focus css rules to use the same, and add a margin botton, to ensure that the bottom styling does not get cut of when in focus --- packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts | 4 ++++ packages/uui-button/lib/uui-button.element.ts | 2 +- packages/uui-card/lib/uui-card.element.ts | 1 + packages/uui-color-picker/lib/uui-color-picker.element.ts | 4 ++++ packages/uui-menu-item/lib/uui-menu-item.element.ts | 4 ++-- packages/uui-radio/lib/uui-radio.element.ts | 2 +- packages/uui-ref-node/lib/uui-ref-node.element.ts | 1 + packages/uui-ref/lib/uui-ref.element.ts | 6 ++---- 8 files changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts b/packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts index c9729ae18..f609da127 100644 --- a/packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts +++ b/packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts @@ -70,6 +70,10 @@ export class UUIBreadcrumbItemElement extends LitElement { color: var(--uui-color-focus); } + a:focus-visible { + outline: 2px solid var(--uui-color-focus, var(--color-emphasis)); + } + [part='separator']::after { content: '/'; speak: never; diff --git a/packages/uui-button/lib/uui-button.element.ts b/packages/uui-button/lib/uui-button.element.ts index ed6ee978e..bf9d544b4 100644 --- a/packages/uui-button/lib/uui-button.element.ts +++ b/packages/uui-button/lib/uui-button.element.ts @@ -370,7 +370,7 @@ export class UUIButtonElement extends UUIFormControlMixin( } #button:focus-visible { - outline: 2px solid var(--uui-focus-outline-color, var(--color-emphasis)); + outline: 2px solid var(--uui-color-focus, var(--color-emphasis)); } button[disabled]:active, diff --git a/packages/uui-card/lib/uui-card.element.ts b/packages/uui-card/lib/uui-card.element.ts index 2d9f65c1f..e0797c482 100644 --- a/packages/uui-card/lib/uui-card.element.ts +++ b/packages/uui-card/lib/uui-card.element.ts @@ -151,6 +151,7 @@ export class UUICardElement extends SelectOnlyMixin( font-family: inherit; border: 0; padding: 0; + margin: 0 0 1px 0; background-color: transparent; text-align: left; color: var(--uui-color-text); diff --git a/packages/uui-color-picker/lib/uui-color-picker.element.ts b/packages/uui-color-picker/lib/uui-color-picker.element.ts index 26f26d743..8d7512301 100644 --- a/packages/uui-color-picker/lib/uui-color-picker.element.ts +++ b/packages/uui-color-picker/lib/uui-color-picker.element.ts @@ -719,6 +719,10 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) { flex: 1; } + button.color-picker__trigger:focus-visible { + outline: 2px solid var(--uui-color-focus, var(--color-emphasis)); + } + uui-color-area { width: 100%; } diff --git a/packages/uui-menu-item/lib/uui-menu-item.element.ts b/packages/uui-menu-item/lib/uui-menu-item.element.ts index a3ed89ffd..5b27becb4 100644 --- a/packages/uui-menu-item/lib/uui-menu-item.element.ts +++ b/packages/uui-menu-item/lib/uui-menu-item.element.ts @@ -584,7 +584,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin( border-radius: calc(var(--uui-border-radius) - 1px); position: absolute; inset: 3px 3px 3px -5px; - border: 2px solid var(--uui-color-focus); + outline: 2px solid var(--uui-color-focus, var(--color-emphasis)); } :host([select-mode='highlight']) #caret-button:focus-visible { @@ -597,7 +597,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin( position: absolute; inset: 3px; border-radius: calc(var(--uui-border-radius) - 1px); - border: 2px solid var(--uui-color-focus); + outline: 2px solid var(--uui-color-focus, var(--color-emphasis)); } /** Slots */ diff --git a/packages/uui-radio/lib/uui-radio.element.ts b/packages/uui-radio/lib/uui-radio.element.ts index b249ba92a..eb3067b80 100644 --- a/packages/uui-radio/lib/uui-radio.element.ts +++ b/packages/uui-radio/lib/uui-radio.element.ts @@ -201,7 +201,7 @@ export class UUIRadioElement extends LitElement { outline: none; } :host(:focus-within) input:focus-visible + #button { - outline: 2px solid var(--uui-color-focus); + outline: 2px solid var(--uui-color-focus, var(--color-emphasis)); } input:checked ~ #button::after { diff --git a/packages/uui-ref-node/lib/uui-ref-node.element.ts b/packages/uui-ref-node/lib/uui-ref-node.element.ts index f93f80490..18a87360d 100644 --- a/packages/uui-ref-node/lib/uui-ref-node.element.ts +++ b/packages/uui-ref-node/lib/uui-ref-node.element.ts @@ -198,6 +198,7 @@ export class UUIRefNodeElement extends UUIRefElement { cursor: pointer; display: flex; flex-grow: 1; + margin: 0 0 1px 0; } #icon { diff --git a/packages/uui-ref/lib/uui-ref.element.ts b/packages/uui-ref/lib/uui-ref.element.ts index ad5ecfbd8..b37fc3a38 100644 --- a/packages/uui-ref/lib/uui-ref.element.ts +++ b/packages/uui-ref/lib/uui-ref.element.ts @@ -79,7 +79,7 @@ export class UUIRefElement extends SelectOnlyMixin( } :host([selectable]:focus-visible) { - outline-color: var(--uui-color-focus); + outline-color: var(--uui-color-focus), var(--color-emphasis); outline-width: var(--uui-card-border-width); outline-style: solid; outline-offset: var(--uui-card-border-width); @@ -186,11 +186,9 @@ export class UUIRefElement extends SelectOnlyMixin( button:focus, a:focus { - outline-color: var(--uui-color-focus); - outline-width: var(--uui-card-border-width); - outline-style: solid; outline-offset: var(--uui-card-border-width); border-radius: var(--uui-border-radius); + outline: 2px solid var(--uui-color-focus, var(--color-emphasis)); } slot[name='actions']::slotted(*) { From b8c9c7a84a1cb2c3c8cc5797d1ebd4a0a8a79e60 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 5 Nov 2025 18:19:21 +0000 Subject: [PATCH 2/3] Removed most of the `--color-emphasis` variable fallbacks As `--color-emphasis` is generally used as an override, whereas `--uui-color-focus` will always have a value, so it wouldn't need a fallback. --- packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts | 3 ++- packages/uui-color-picker/lib/uui-color-picker.element.ts | 2 +- packages/uui-menu-item/lib/uui-menu-item.element.ts | 4 ++-- packages/uui-radio/lib/uui-radio.element.ts | 2 +- packages/uui-ref-node/lib/uui-ref-node.element.ts | 4 ++++ packages/uui-ref/lib/uui-ref.element.ts | 4 ++-- 6 files changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts b/packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts index f609da127..f22fe6255 100644 --- a/packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts +++ b/packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts @@ -71,7 +71,8 @@ export class UUIBreadcrumbItemElement extends LitElement { } a:focus-visible { - outline: 2px solid var(--uui-color-focus, var(--color-emphasis)); + border-radius: var(--uui-border-radius); + outline: 2px solid var(--uui-color-focus); } [part='separator']::after { diff --git a/packages/uui-color-picker/lib/uui-color-picker.element.ts b/packages/uui-color-picker/lib/uui-color-picker.element.ts index 8d7512301..f7e29151c 100644 --- a/packages/uui-color-picker/lib/uui-color-picker.element.ts +++ b/packages/uui-color-picker/lib/uui-color-picker.element.ts @@ -720,7 +720,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) { } button.color-picker__trigger:focus-visible { - outline: 2px solid var(--uui-color-focus, var(--color-emphasis)); + outline: 2px solid var(--uui-color-focus); } uui-color-area { diff --git a/packages/uui-menu-item/lib/uui-menu-item.element.ts b/packages/uui-menu-item/lib/uui-menu-item.element.ts index 5b27becb4..146b3232d 100644 --- a/packages/uui-menu-item/lib/uui-menu-item.element.ts +++ b/packages/uui-menu-item/lib/uui-menu-item.element.ts @@ -584,7 +584,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin( border-radius: calc(var(--uui-border-radius) - 1px); position: absolute; inset: 3px 3px 3px -5px; - outline: 2px solid var(--uui-color-focus, var(--color-emphasis)); + outline: 2px solid var(--uui-color-focus); } :host([select-mode='highlight']) #caret-button:focus-visible { @@ -597,7 +597,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin( position: absolute; inset: 3px; border-radius: calc(var(--uui-border-radius) - 1px); - outline: 2px solid var(--uui-color-focus, var(--color-emphasis)); + outline: 2px solid var(--uui-color-focus); } /** Slots */ diff --git a/packages/uui-radio/lib/uui-radio.element.ts b/packages/uui-radio/lib/uui-radio.element.ts index eb3067b80..b249ba92a 100644 --- a/packages/uui-radio/lib/uui-radio.element.ts +++ b/packages/uui-radio/lib/uui-radio.element.ts @@ -201,7 +201,7 @@ export class UUIRadioElement extends LitElement { outline: none; } :host(:focus-within) input:focus-visible + #button { - outline: 2px solid var(--uui-color-focus, var(--color-emphasis)); + outline: 2px solid var(--uui-color-focus); } input:checked ~ #button::after { diff --git a/packages/uui-ref-node/lib/uui-ref-node.element.ts b/packages/uui-ref-node/lib/uui-ref-node.element.ts index ded76c72f..632e88cd3 100644 --- a/packages/uui-ref-node/lib/uui-ref-node.element.ts +++ b/packages/uui-ref-node/lib/uui-ref-node.element.ts @@ -187,6 +187,10 @@ export class UUIRefNodeElement extends UUIRefElement { padding: 1px; } + #actions-container { + --uui-focus-outline-color: var(--uui-color-focus); + } + #content { display: flex; flex-grow: 1; diff --git a/packages/uui-ref/lib/uui-ref.element.ts b/packages/uui-ref/lib/uui-ref.element.ts index b37fc3a38..dc129f958 100644 --- a/packages/uui-ref/lib/uui-ref.element.ts +++ b/packages/uui-ref/lib/uui-ref.element.ts @@ -79,7 +79,7 @@ export class UUIRefElement extends SelectOnlyMixin( } :host([selectable]:focus-visible) { - outline-color: var(--uui-color-focus), var(--color-emphasis); + outline-color: var(--uui-color-focus); outline-width: var(--uui-card-border-width); outline-style: solid; outline-offset: var(--uui-card-border-width); @@ -188,7 +188,7 @@ export class UUIRefElement extends SelectOnlyMixin( a:focus { outline-offset: var(--uui-card-border-width); border-radius: var(--uui-border-radius); - outline: 2px solid var(--uui-color-focus, var(--color-emphasis)); + outline: 2px solid var(--uui-color-focus); } slot[name='actions']::slotted(*) { From 0f2bf3d4a35d967d666ea230d11b3cd9fb0d0899 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 5 Nov 2025 18:21:06 +0000 Subject: [PATCH 3/3] Button: restored the `--uui-focus-outline-color` variable Removing this would be a breaking-change, as it is documented and we use it in Umbraco CMS backoffice. I have also changed the fallback order, so that `--color-emphasis` comes before `--uui-color-focus`. --- packages/uui-button/lib/uui-button.element.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/uui-button/lib/uui-button.element.ts b/packages/uui-button/lib/uui-button.element.ts index bf9d544b4..bbe81c6bd 100644 --- a/packages/uui-button/lib/uui-button.element.ts +++ b/packages/uui-button/lib/uui-button.element.ts @@ -370,7 +370,11 @@ export class UUIButtonElement extends UUIFormControlMixin( } #button:focus-visible { - outline: 2px solid var(--uui-color-focus, var(--color-emphasis)); + outline: 2px solid + var( + --uui-focus-outline-color, + var(--color-emphasis, var(--uui-color-focus)) + ); } button[disabled]:active,