diff --git a/packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts b/packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts index c9729ae18..f22fe6255 100644 --- a/packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts +++ b/packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts @@ -70,6 +70,11 @@ export class UUIBreadcrumbItemElement extends LitElement { color: var(--uui-color-focus); } + a:focus-visible { + border-radius: var(--uui-border-radius); + outline: 2px solid var(--uui-color-focus); + } + [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..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-focus-outline-color, var(--color-emphasis)); + outline: 2px solid + var( + --uui-focus-outline-color, + var(--color-emphasis, var(--uui-color-focus)) + ); } 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..f7e29151c 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); + } + 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..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; - border: 2px solid var(--uui-color-focus); + 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); - border: 2px solid var(--uui-color-focus); + outline: 2px solid var(--uui-color-focus); } /** Slots */ 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 05fb752f9..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; @@ -201,6 +205,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..dc129f958 100644 --- a/packages/uui-ref/lib/uui-ref.element.ts +++ b/packages/uui-ref/lib/uui-ref.element.ts @@ -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); } slot[name='actions']::slotted(*) {