diff --git a/packages/components/src/styles/components/accordion.scss b/packages/components/src/styles/components/accordion.scss index 90def810923..570b4aa6f9f 100644 --- a/packages/components/src/styles/components/accordion.scss +++ b/packages/components/src/styles/components/accordion.scss @@ -138,6 +138,7 @@ // entire toggle area is interactive .hds-accordion-item__button--parent-does-not-contain-interactive { + // Pseudo element is used to make entire AccordionItemToggle area interactive (vs. just its nested button) and to style the focus ring accordingly @include hds-focus-ring-with-pseudo-element( $top: var(--hds-accordion-item-focus-ring-offset), $right: var(--hds-accordion-item-focus-ring-offset), @@ -159,10 +160,11 @@ .hds-accordion-item__button--parent-contains-interactive { @include hds-button(); - &:focus, - &.mock-focus { - @include hds-button-state-focus(); - } + // TODO: not needed if outline is used for the focus ring + // &:focus, + // &.mock-focus { + // @include hds-button-state-focus(); + // } // `hds-button-color-secondary` determines the focus color and needs to be placed after `hds-button-state-focus` @include hds-button-color-secondary(); diff --git a/packages/components/src/styles/components/advanced-table.scss b/packages/components/src/styles/components/advanced-table.scss index 75936fadddd..e1a82593838 100644 --- a/packages/components/src/styles/components/advanced-table.scss +++ b/packages/components/src/styles/components/advanced-table.scss @@ -433,9 +433,15 @@ $hds-advanced-table-drag-preview-background-color: rgba(204, 227, 254, 30%); box-shadow: var(--token-elevation-low-box-shadow); } + // Use pseudo element for focus ring to allow offset position to be partially inside the button + @include hds-focus-ring-with-pseudo-element($radius: inherit); + &:focus, &.mock-focus, .hds-dropdown-toggle-icon--is-open { + // Override outline used on regular hds-dropdown-toggle-icon + outline: none; + &::before { top: 0; right: 0; diff --git a/packages/components/src/styles/components/button.scss b/packages/components/src/styles/components/button.scss index 4c61b0b51fd..0b655f9f4b0 100644 --- a/packages/components/src/styles/components/button.scss +++ b/packages/components/src/styles/components/button.scss @@ -61,10 +61,11 @@ } } - &:focus, - &.mock-focus { - @include hds-button-state-focus(); - } + // TODO: not needed if outline is used for the focus ring + // &:focus, + // &.mock-focus { + // @include hds-button-state-focus(); + // } } .hds-button__icon { diff --git a/packages/components/src/styles/components/code-block/index.scss b/packages/components/src/styles/components/code-block/index.scss index c5f24efc996..61fc597d56c 100644 --- a/packages/components/src/styles/components/code-block/index.scss +++ b/packages/components/src/styles/components/code-block/index.scss @@ -180,10 +180,7 @@ $hds-code-block-code-footer-height: 48px; color: var(--hds-code-block-color-foreground-primary); background-color: var(--hds-code-block-color-surface-faint); border-color: var(--hds-code-block-color-focus-action-internal); - - &::before { - border-color: var(--hds-code-block-color-focus-action-external); - } + outline-color: var(--hds-code-block-color-focus-action-external); } .hds-icon { diff --git a/packages/components/src/styles/components/dropdown.scss b/packages/components/src/styles/components/dropdown.scss index fd32bf58c57..b8248ff48a5 100644 --- a/packages/components/src/styles/components/dropdown.scss +++ b/packages/components/src/styles/components/dropdown.scss @@ -50,12 +50,14 @@ &:focus, &.mock-focus { - @include hds-button-state-focus(); + // @include hds-button-state-focus(); + border-color: var(--token-color-focus-action-internal); + outline: 3px solid var(--token-color-focus-action-external); - &::before { - border-color: var(--token-color-focus-action-external); - } + // &::before { + // border-color: var(--token-color-focus-action-external); + // } } &:active, @@ -119,10 +121,11 @@ .hds-dropdown-toggle-button { @include hds-button(); - &:focus, - &.mock-focus { - @include hds-button-state-focus(); - } + // TODO: not needed if outline is used for the focus ring + // &:focus, + // &.mock-focus { + // @include hds-button-state-focus(); + // } &:disabled, &.mock-disabled, diff --git a/packages/components/src/styles/mixins/_button.scss b/packages/components/src/styles/mixins/_button.scss index 981410b0b7e..f3df57b71d5 100644 --- a/packages/components/src/styles/mixins/_button.scss +++ b/packages/components/src/styles/mixins/_button.scss @@ -37,25 +37,10 @@ $hds-button-sizes: ("small", "medium", "large"); cursor: not-allowed; } -@mixin hds-button-state-focus() { - box-shadow: none; - - &::before { - // the position absolute of an element is computed from the inside of the border of the container - // so we have to take in account the border width of the pseudo-element container itself - $shift: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - $radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width)); - position: absolute; - top: $shift; - right: $shift; - bottom: $shift; - left: $shift; - z-index: -1; - border: var(--token-button-focus-border-width) solid transparent; - border-radius: $radius; - content: ""; - } -} +// TODO: not needed if outline is used for the focus ring +// @mixin hds-button-state-focus() { +// box-shadow: none; +// } @mixin hds-button-color-primary() { color: var(--token-button-foreground-color-primary-default); @@ -76,20 +61,16 @@ $hds-button-sizes: ("small", "medium", "large"); color: var(--token-button-foreground-color-primary-focus); background-color: var(--token-button-surface-color-primary-focus); border-color: var(--token-button-border-color-primary-focus-internal); - - &::before { - // the position absolute of an element is computed from the inside of the border of the container - // so we have to take in account the border width of the pseudo-element container itself - // plus for the primary button we want to have a 2px gap between the button and the focus - $shift: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px)); - $radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px); - top: $shift; - right: $shift; - bottom: $shift; - left: $shift; - border-color: var(--token-button-border-color-primary-focus-external); - border-radius: $radius; - } + // border-color: #fff; // TEST: add greater contrast & standardize with other variants (remove outline-offset) + + // TEST: Replacement of pseudo-element-based focus ring + // Test: outline instead of box-shadow + outline: 3px solid var(--token-color-focus-action-external); + outline-offset: 2px; // non-standard (other Button variants don't use) + // box-shadow: 0 0 0 3px var(--token-color-focus-action-external); // standardized w/ other variants + // box-shadow: + // 0 0 0 2px #fff, + // 0 0 0 5px var(--token-color-focus-action-external); // similar to original style using pseudo-element } &:active, @@ -98,10 +79,6 @@ $hds-button-sizes: ("small", "medium", "large"); background-color: var(--token-button-surface-color-primary-active); border-color: var(--token-button-border-color-primary-active); box-shadow: none; - - &::before { - border-color: transparent; - } } } @@ -125,9 +102,10 @@ $hds-button-sizes: ("small", "medium", "large"); background-color: var(--token-button-surface-color-secondary-focus); border-color: var(--token-button-border-color-secondary-focus-internal); - &::before { - border-color: var(--token-button-border-color-secondary-focus-external); - } + // TEST: Replacement of pseudo-element-based focus ring + // Test: outline instead of box-shadow + outline: 3px solid var(--token-button-border-color-secondary-focus-external); + // box-shadow: 0 0 0 3px var(--token-button-border-color-secondary-focus-external); } &:active, @@ -136,10 +114,6 @@ $hds-button-sizes: ("small", "medium", "large"); background-color: var(--token-button-surface-color-secondary-active); border-color: var(--token-button-border-color-secondary-active); box-shadow: none; - - &::before { - border-color: transparent; - } } } @@ -162,9 +136,10 @@ $hds-button-sizes: ("small", "medium", "large"); background-color: var(--token-button-surface-color-tertiary-focus); border-color: var(--token-button-border-color-tertiary-focus-internal); - &::before { - border-color: var(--token-button-border-color-tertiary-focus-external); - } + // TEST: Replacement of pseudo-element-based focus ring + // Test: outline instead of box-shadow + outline: 3px solid var(--token-button-border-color-tertiary-focus-external); + // box-shadow: 0 0 0 3px var(--token-button-border-color-tertiary-focus-external); } &:active, @@ -173,10 +148,6 @@ $hds-button-sizes: ("small", "medium", "large"); background-color: var(--token-button-surface-color-tertiary-active); border-color: var(--token-button-border-color-tertiary-active); box-shadow: none; - - &::before { - border-color: transparent; - } } // @@ -195,10 +166,6 @@ $hds-button-sizes: ("small", "medium", "large"); &.mock-disabled:hover { background-color: transparent; border-color: transparent; - - &::before { - border-color: transparent; - } } } @@ -222,9 +189,10 @@ $hds-button-sizes: ("small", "medium", "large"); background-color: var(--token-button-surface-color-critical-focus); border-color: var(--token-button-border-color-critical-focus-internal); - &::before { - border-color: var(--token-button-border-color-critical-focus-external); - } + // TEST: Replacement of pseudo-element-based focus ring + // Test: outline instead of box-shadow + outline: 3px solid var(--token-button-border-color-critical-focus-external); + // box-shadow: 0 0 0 3px var(--token-button-border-color-critical-focus-external); } &:active, @@ -233,10 +201,6 @@ $hds-button-sizes: ("small", "medium", "large"); background-color: var(--token-button-surface-color-critical-active); border-color: var(--token-button-border-color-critical-active); box-shadow: none; - - &::before { - border-color: transparent; - } } } diff --git a/packages/components/src/styles/mixins/_interactive-dark-theme.scss b/packages/components/src/styles/mixins/_interactive-dark-theme.scss index bd930b053a5..429ffa00bc6 100644 --- a/packages/components/src/styles/mixins/_interactive-dark-theme.scss +++ b/packages/components/src/styles/mixins/_interactive-dark-theme.scss @@ -15,9 +15,6 @@ $hds-interactive-dark-theme-focus-ring-action-box-shadow: // Used to apply dark theme to interactive elements such as Button & Dropdown @mixin hds-interactive-dark-theme($add-visible-border: true, $is-within-side-nav: false) { - // Override token used in focus ring mixin - --token-focus-ring-action-box-shadow: #{$hds-interactive-dark-theme-focus-ring-action-box-shadow}; - // Default: border: 1px solid transparent; cursor: pointer; @@ -59,25 +56,11 @@ $hds-interactive-dark-theme-focus-ring-action-box-shadow: // Focus: &:focus, &.mock-focus { - @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px); - color: var(--token-color-foreground-high-contrast); background-color: var(--token-color-palette-neutral-700); - - @if ($add-visible-border) { - border-color: $hds-interactive-dark-theme-color-focus-action-internal; - } - - // focus ring: - &::before { - color: var(--token-color-foreground-high-contrast); - border: none; - } - } - - // override style removing the focus style - &:focus:focus:not(:focus-visible)::before { - box-shadow: $hds-interactive-dark-theme-focus-ring-action-box-shadow; + border-color: $hds-interactive-dark-theme-color-focus-action-internal; + outline: 3px solid #{$hds-interactive-dark-theme-color-focus-action-external}; + outline-offset: 0; // override Primary button variant offset } // Active: diff --git a/showcase/public/assets/styles/@hashicorp/design-system-components-common.css b/showcase/public/assets/styles/@hashicorp/design-system-components-common.css index bf897236f3e..86e4abcc0a9 100644 --- a/showcase/public/assets/styles/@hashicorp/design-system-components-common.css +++ b/showcase/public/assets/styles/@hashicorp/design-system-components-common.css @@ -529,20 +529,6 @@ border-color: var(--token-button-border-color-secondary-default); box-shadow: var(--token-elevation-low-box-shadow); } -.hds-accordion-item__button--parent-contains-interactive:focus, .hds-accordion-item__button--parent-contains-interactive.mock-focus { - box-shadow: none; -} -.hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button--parent-contains-interactive.mock-focus::before { - position: absolute; - top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - z-index: -1; - border: var(--token-button-focus-border-width) solid transparent; - border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width)); - content: ""; -} .hds-accordion-item__button--parent-contains-interactive:hover, .hds-accordion-item__button--parent-contains-interactive.mock-hover { color: var(--token-button-foreground-color-secondary-hover); background-color: var(--token-button-surface-color-secondary-hover); @@ -553,9 +539,7 @@ color: var(--token-button-foreground-color-secondary-focus); background-color: var(--token-button-surface-color-secondary-focus); border-color: var(--token-button-border-color-secondary-focus-internal); -} -.hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button--parent-contains-interactive.mock-focus::before { - border-color: var(--token-button-border-color-secondary-focus-external); + outline: 3px solid var(--token-button-border-color-secondary-focus-external); } .hds-accordion-item__button--parent-contains-interactive:active, .hds-accordion-item__button--parent-contains-interactive.mock-active { color: var(--token-button-foreground-color-secondary-active); @@ -563,9 +547,6 @@ border-color: var(--token-button-border-color-secondary-active); box-shadow: none; } -.hds-accordion-item__button--parent-contains-interactive:active::before, .hds-accordion-item__button--parent-contains-interactive.mock-active::before { - border-color: transparent; -} .hds-accordion-item__button { width: var(--hds-accordion-item-icon-size); @@ -960,6 +941,10 @@ background-color: transparent; border: 1px solid transparent; border-radius: var(--token-border-radius-x-small); + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; } .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:hover, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-hover { color: var(--token-color-foreground-primary); @@ -967,6 +952,32 @@ border-color: var(--token-color-border-strong); box-shadow: var(--token-elevation-low-box-shadow); } +.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + border-radius: inherit; + content: ""; +} +.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus:active::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus, +.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon .hds-dropdown-toggle-icon--is-open { + outline: none; +} .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon .hds-dropdown-toggle-icon--is-open::before { top: 0; @@ -1706,7 +1717,6 @@ .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, .hds-dialog-primitive__wrapper *) { - --token-focus-ring-action-box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; border: 1px solid transparent; cursor: pointer; border-color: var(--token-color-palette-neutral-500); @@ -1764,229 +1774,11 @@ .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, .hds-dialog-primitive__wrapper *).mock-focus { - position: relative; - outline-style: solid; - outline-color: transparent; - isolation: isolate; color: var(--token-color-foreground-high-contrast); background-color: var(--token-color-palette-neutral-700); border-color: #bcc7fd; -} -.hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before { - position: absolute; - top: -1px; - right: -1px; - bottom: -1px; - left: -1px; - z-index: -1; - border-radius: 5px; - content: ""; -} -.hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before { - box-shadow: none; -} -.hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before { - box-shadow: none; -} -.hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before { - color: var(--token-color-foreground-high-contrast); - border: none; -} -.hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before { - box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; + outline: 3px solid #0d69f2; + outline-offset: 0; } .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, @@ -2135,7 +1927,6 @@ } .hds-app-header__home-link { - --token-focus-ring-action-box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; border: 1px solid transparent; cursor: pointer; color: var(--token-color-foreground-high-contrast); @@ -2153,41 +1944,11 @@ background-color: var(--token-color-palette-neutral-600); } .hds-app-header__home-link:focus, .hds-app-header__home-link.mock-focus { - position: relative; - outline-style: solid; - outline-color: transparent; - isolation: isolate; color: var(--token-color-foreground-high-contrast); background-color: var(--token-color-palette-neutral-700); -} -.hds-app-header__home-link:focus::before, .hds-app-header__home-link.mock-focus::before { - position: absolute; - top: -1px; - right: -1px; - bottom: -1px; - left: -1px; - z-index: -1; - border-radius: 5px; - content: ""; -} -.hds-app-header__home-link:focus:focus::before, .hds-app-header__home-link:focus.mock-focus::before, .hds-app-header__home-link.mock-focus:focus::before, .hds-app-header__home-link.mock-focus.mock-focus::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-app-header__home-link:focus:focus:not(:focus-visible)::before, .hds-app-header__home-link.mock-focus:focus:not(:focus-visible)::before { - box-shadow: none; -} -.hds-app-header__home-link:focus:focus-visible::before, .hds-app-header__home-link.mock-focus:focus-visible::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-app-header__home-link:focus:focus:active::before, .hds-app-header__home-link:focus.mock-focus.mock-active::before, .hds-app-header__home-link.mock-focus:focus:active::before, .hds-app-header__home-link.mock-focus.mock-focus.mock-active::before { - box-shadow: none; -} -.hds-app-header__home-link:focus::before, .hds-app-header__home-link.mock-focus::before { - color: var(--token-color-foreground-high-contrast); - border: none; -} -.hds-app-header__home-link:focus:focus:not(:focus-visible)::before { - box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; + border-color: #bcc7fd; + outline: 3px solid #0d69f2; + outline-offset: 0; } .hds-app-header__home-link:active, .hds-app-header__home-link.mock-active { color: var(--token-color-foreground-high-contrast); @@ -3094,20 +2855,6 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h .hds-button.hds-button--width-full .hds-button__text { flex: 0 0 auto; } -.hds-button:focus, .hds-button.mock-focus { - box-shadow: none; -} -.hds-button:focus::before, .hds-button.mock-focus::before { - position: absolute; - top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - z-index: -1; - border: var(--token-button-focus-border-width) solid transparent; - border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width)); - content: ""; -} .hds-button__icon { display: block; @@ -3135,14 +2882,8 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h color: var(--token-button-foreground-color-primary-focus); background-color: var(--token-button-surface-color-primary-focus); border-color: var(--token-button-border-color-primary-focus-internal); -} -.hds-button--color-primary:focus::before, .hds-button--color-primary.mock-focus::before { - top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px)); - right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px)); - bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px)); - left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px)); - border-color: var(--token-button-border-color-primary-focus-external); - border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px); + outline: 3px solid var(--token-color-focus-action-external); + outline-offset: 2px; } .hds-button--color-primary:active, .hds-button--color-primary.mock-active { color: var(--token-button-foreground-color-primary-active); @@ -3150,9 +2891,6 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h border-color: var(--token-button-border-color-primary-active); box-shadow: none; } -.hds-button--color-primary:active::before, .hds-button--color-primary.mock-active::before { - border-color: transparent; -} .hds-button--color-secondary { color: var(--token-button-foreground-color-secondary-default); @@ -3170,9 +2908,7 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h color: var(--token-button-foreground-color-secondary-focus); background-color: var(--token-button-surface-color-secondary-focus); border-color: var(--token-button-border-color-secondary-focus-internal); -} -.hds-button--color-secondary:focus::before, .hds-button--color-secondary.mock-focus::before { - border-color: var(--token-button-border-color-secondary-focus-external); + outline: 3px solid var(--token-button-border-color-secondary-focus-external); } .hds-button--color-secondary:active, .hds-button--color-secondary.mock-active { color: var(--token-button-foreground-color-secondary-active); @@ -3180,9 +2916,6 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h border-color: var(--token-button-border-color-secondary-active); box-shadow: none; } -.hds-button--color-secondary:active::before, .hds-button--color-secondary.mock-active::before { - border-color: transparent; -} .hds-button--color-tertiary { color: var(--token-button-foreground-color-tertiary-default); @@ -3199,9 +2932,7 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h color: var(--token-button-foreground-color-tertiary-focus); background-color: var(--token-button-surface-color-tertiary-focus); border-color: var(--token-button-border-color-tertiary-focus-internal); -} -.hds-button--color-tertiary:focus::before, .hds-button--color-tertiary.mock-focus::before { - border-color: var(--token-button-border-color-tertiary-focus-external); + outline: 3px solid var(--token-button-border-color-tertiary-focus-external); } .hds-button--color-tertiary:active, .hds-button--color-tertiary.mock-active { color: var(--token-button-foreground-color-tertiary-active); @@ -3209,16 +2940,10 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h border-color: var(--token-button-border-color-tertiary-active); box-shadow: none; } -.hds-button--color-tertiary:active::before, .hds-button--color-tertiary.mock-active::before { - border-color: transparent; -} .hds-button--color-tertiary:disabled, .hds-button--color-tertiary[disabled], .hds-button--color-tertiary.mock-disabled, .hds-button--color-tertiary:disabled:focus, .hds-button--color-tertiary[disabled]:focus, .hds-button--color-tertiary.mock-disabled:focus, .hds-button--color-tertiary:disabled:hover, .hds-button--color-tertiary[disabled]:hover, .hds-button--color-tertiary.mock-disabled:hover { background-color: transparent; border-color: transparent; } -.hds-button--color-tertiary:disabled::before, .hds-button--color-tertiary[disabled]::before, .hds-button--color-tertiary.mock-disabled::before, .hds-button--color-tertiary:disabled:focus::before, .hds-button--color-tertiary[disabled]:focus::before, .hds-button--color-tertiary.mock-disabled:focus::before, .hds-button--color-tertiary:disabled:hover::before, .hds-button--color-tertiary[disabled]:hover::before, .hds-button--color-tertiary.mock-disabled:hover::before { - border-color: transparent; -} .hds-button--color-critical { color: var(--token-button-foreground-color-critical-default); @@ -3236,9 +2961,7 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h color: var(--token-button-foreground-color-critical-focus); background-color: var(--token-button-surface-color-critical-focus); border-color: var(--token-button-border-color-critical-focus-internal); -} -.hds-button--color-critical:focus::before, .hds-button--color-critical.mock-focus::before { - border-color: var(--token-button-border-color-critical-focus-external); + outline: 3px solid var(--token-button-border-color-critical-focus-external); } .hds-button--color-critical:active, .hds-button--color-critical.mock-active { color: var(--token-button-foreground-color-critical-active); @@ -3246,9 +2969,6 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h border-color: var(--token-button-border-color-critical-active); box-shadow: none; } -.hds-button--color-critical:active::before, .hds-button--color-critical.mock-active::before { - border-color: transparent; -} .hds-button--size-small { min-height: var(--token-button-height-small); @@ -3807,12 +3527,7 @@ button.hds-button[href]::after { color: var(--hds-code-block-color-foreground-primary); background-color: var(--hds-code-block-color-surface-faint); border-color: var(--hds-code-block-color-focus-action-internal); -} -.hds-code-block__height-toggle-button:focus::before, .hds-code-block__height-toggle-button.mock-focus::before, .hds-code-block__height-toggle-button:focus-visible::before, -.hds-code-block__copy-button:focus::before, -.hds-code-block__copy-button.mock-focus::before, -.hds-code-block__copy-button:focus-visible::before { - border-color: var(--hds-code-block-color-focus-action-external); + outline-color: var(--hds-code-block-color-focus-action-external); } .hds-code-block__height-toggle-button .hds-icon, .hds-code-block__copy-button .hds-icon { @@ -4408,22 +4123,8 @@ button.hds-button[href]::after { cursor: pointer; } .hds-dropdown-toggle-icon:focus, .hds-dropdown-toggle-icon.mock-focus { - box-shadow: none; border-color: var(--token-color-focus-action-internal); -} -.hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before { - position: absolute; - top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - z-index: -1; - border: var(--token-button-focus-border-width) solid transparent; - border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width)); - content: ""; -} -.hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before { - border-color: var(--token-color-focus-action-external); + outline: 3px solid var(--token-color-focus-action-external); } .hds-dropdown-toggle-icon:active, .hds-dropdown-toggle-icon.mock-active { background-color: var(--token-color-surface-interactive-active); @@ -4483,20 +4184,6 @@ button.hds-button[href]::after { outline-color: transparent; isolation: isolate; } -.hds-dropdown-toggle-button:focus, .hds-dropdown-toggle-button.mock-focus { - box-shadow: none; -} -.hds-dropdown-toggle-button:focus::before, .hds-dropdown-toggle-button.mock-focus::before { - position: absolute; - top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - z-index: -1; - border: var(--token-button-focus-border-width) solid transparent; - border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width)); - content: ""; -} .hds-dropdown-toggle-button:disabled, .hds-dropdown-toggle-button.mock-disabled, .hds-dropdown-toggle-button:disabled:focus, .hds-dropdown-toggle-button.mock-disabled:focus, .hds-dropdown-toggle-button:disabled:hover, .hds-dropdown-toggle-button.mock-disabled:hover { color: var(--token-button-foreground-color-disabled); background-color: var(--token-button-surface-color-disabled); @@ -4597,14 +4284,8 @@ button.hds-button[href]::after { color: var(--token-button-foreground-color-primary-focus); background-color: var(--token-button-surface-color-primary-focus); border-color: var(--token-button-border-color-primary-focus-internal); -} -.hds-dropdown-toggle-button--color-primary:focus::before, .hds-dropdown-toggle-button--color-primary.mock-focus::before { - top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px)); - right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px)); - bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px)); - left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px)); - border-color: var(--token-button-border-color-primary-focus-external); - border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px); + outline: 3px solid var(--token-color-focus-action-external); + outline-offset: 2px; } .hds-dropdown-toggle-button--color-primary:active, .hds-dropdown-toggle-button--color-primary.mock-active { color: var(--token-button-foreground-color-primary-active); @@ -4612,9 +4293,6 @@ button.hds-button[href]::after { border-color: var(--token-button-border-color-primary-active); box-shadow: none; } -.hds-dropdown-toggle-button--color-primary:active::before, .hds-dropdown-toggle-button--color-primary.mock-active::before { - border-color: transparent; -} .hds-dropdown-toggle-button--color-secondary { color: var(--token-button-foreground-color-secondary-default); @@ -4632,9 +4310,7 @@ button.hds-button[href]::after { color: var(--token-button-foreground-color-secondary-focus); background-color: var(--token-button-surface-color-secondary-focus); border-color: var(--token-button-border-color-secondary-focus-internal); -} -.hds-dropdown-toggle-button--color-secondary:focus::before, .hds-dropdown-toggle-button--color-secondary.mock-focus::before { - border-color: var(--token-button-border-color-secondary-focus-external); + outline: 3px solid var(--token-button-border-color-secondary-focus-external); } .hds-dropdown-toggle-button--color-secondary:active, .hds-dropdown-toggle-button--color-secondary.mock-active { color: var(--token-button-foreground-color-secondary-active); @@ -4642,9 +4318,6 @@ button.hds-button[href]::after { border-color: var(--token-button-border-color-secondary-active); box-shadow: none; } -.hds-dropdown-toggle-button--color-secondary:active::before, .hds-dropdown-toggle-button--color-secondary.mock-active::before { - border-color: transparent; -} .hds-dropdown-toggle-button--width-full { justify-content: space-between; @@ -8039,7 +7712,6 @@ button.hds-button[href]::after { } .hds-side-nav__home-link { - --token-focus-ring-action-box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; border: 1px solid transparent; cursor: pointer; color: var(--token-side-nav-color-foreground-strong); @@ -8055,41 +7727,11 @@ button.hds-button[href]::after { background-color: var(--token-side-nav-color-surface-interactive-hover); } .hds-side-nav__home-link:focus, .hds-side-nav__home-link.mock-focus { - position: relative; - outline-style: solid; - outline-color: transparent; - isolation: isolate; color: var(--token-color-foreground-high-contrast); background-color: var(--token-color-palette-neutral-700); -} -.hds-side-nav__home-link:focus::before, .hds-side-nav__home-link.mock-focus::before { - position: absolute; - top: -1px; - right: -1px; - bottom: -1px; - left: -1px; - z-index: -1; - border-radius: 5px; - content: ""; -} -.hds-side-nav__home-link:focus:focus::before, .hds-side-nav__home-link:focus.mock-focus::before, .hds-side-nav__home-link.mock-focus:focus::before, .hds-side-nav__home-link.mock-focus.mock-focus::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-side-nav__home-link:focus:focus:not(:focus-visible)::before, .hds-side-nav__home-link.mock-focus:focus:not(:focus-visible)::before { - box-shadow: none; -} -.hds-side-nav__home-link:focus:focus-visible::before, .hds-side-nav__home-link.mock-focus:focus-visible::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-side-nav__home-link:focus:focus:active::before, .hds-side-nav__home-link:focus.mock-focus.mock-active::before, .hds-side-nav__home-link.mock-focus:focus:active::before, .hds-side-nav__home-link.mock-focus.mock-focus.mock-active::before { - box-shadow: none; -} -.hds-side-nav__home-link:focus::before, .hds-side-nav__home-link.mock-focus::before { - color: var(--token-color-foreground-high-contrast); - border: none; -} -.hds-side-nav__home-link:focus:focus:not(:focus-visible)::before { - box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; + border-color: #bcc7fd; + outline: 3px solid #0d69f2; + outline-offset: 0; } .hds-side-nav__home-link:active, .hds-side-nav__home-link.mock-active { color: var(--token-side-nav-color-foreground-strong); @@ -8142,7 +7784,6 @@ button.hds-button[href]::after { .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, .hds-dialog-primitive__wrapper *) { - --token-focus-ring-action-box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; border: 1px solid transparent; cursor: pointer; border-color: var(--token-color-palette-neutral-500); @@ -8296,962 +7937,336 @@ button.hds-button[href]::after { .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, .hds-dialog-primitive__wrapper *).mock-focus { - position: relative; - outline-style: solid; - outline-color: transparent; - isolation: isolate; color: var(--token-color-foreground-high-contrast); background-color: var(--token-color-palette-neutral-700); border-color: #bcc7fd; + outline: 3px solid #0d69f2; + outline-offset: 0; } .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):active, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, +.hds-dialog-primitive__wrapper *).mock-active, .hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, +.hds-dialog-primitive__wrapper *):active, .hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, +.hds-dialog-primitive__wrapper *).mock-active, .hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, +.hds-dialog-primitive__wrapper *):active, .hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, +.hds-dialog-primitive__wrapper *).mock-active, .hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, +.hds-dialog-primitive__wrapper *):active, .hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, +.hds-dialog-primitive__wrapper *).mock-active, .hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, +.hds-dialog-primitive__wrapper *):active, .hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, +.hds-dialog-primitive__wrapper *).mock-active, .hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, +.hds-dialog-primitive__wrapper *):active, .hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, +.hds-dialog-primitive__wrapper *).mock-active, .hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, +.hds-dialog-primitive__wrapper *):active, .hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, +.hds-dialog-primitive__wrapper *).mock-active, .hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, +.hds-dialog-primitive__wrapper *):active, .hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, +.hds-dialog-primitive__wrapper *).mock-active, .hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, +.hds-dialog-primitive__wrapper *):active, .hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before { - position: absolute; - top: -1px; - right: -1px; - bottom: -1px; - left: -1px; - z-index: -1; - border-radius: 5px; - content: ""; +.hds-dialog-primitive__wrapper *).mock-active { + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-500); + border-color: var(--token-color-palette-neutral-400); } .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled], .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:hover, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:hover, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled], +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled], +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:hover, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled], +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:focus, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:focus, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:focus, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:hover, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:hover, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:hover, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled], +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:focus, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:focus, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:focus, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, +.hds-dialog-primitive__wrapper *):disabled:hover, .hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, +.hds-dialog-primitive__wrapper *)[disabled]:hover, .hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, +.hds-dialog-primitive__wrapper *).mock-disabled:hover, .hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, +.hds-dialog-primitive__wrapper *):disabled, .hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled], +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:focus, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:focus, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:focus, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:hover, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before { - box-shadow: none; -} -.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:hover, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:hover, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled], +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:focus, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:focus, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:focus, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:hover, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:hover, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:hover, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before { - box-shadow: none; -} -.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before { - color: var(--token-color-foreground-high-contrast); - border: none; -} -.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before { - box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; -} -.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):active, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-active, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):active, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-active, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):active, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-active, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):active, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-active, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):active, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-active, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):active, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-active, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):active, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-active, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):active, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-active, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):active, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-active { - color: var(--token-color-foreground-high-contrast); - background-color: var(--token-color-palette-neutral-500); - border-color: var(--token-color-palette-neutral-400); -} -.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled], .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:hover, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:hover, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:hover, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled], -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:focus, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:focus, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:focus, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:hover, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:hover, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:hover, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled], -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:focus, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:focus, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:focus, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:hover, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:hover, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:hover, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled], -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:focus, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:focus, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:focus, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:hover, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:hover, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:hover, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled], -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:focus, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:focus, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:focus, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:hover, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:hover, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:hover, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled], -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:focus, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:focus, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:focus, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:hover, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:hover, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:hover, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled], -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:focus, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:focus, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:focus, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:hover, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:hover, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:hover, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, .hds-dialog-primitive__wrapper *)[disabled], @@ -9325,7 +8340,6 @@ button.hds-button[href]::after { } .hds-side-nav__icon-button { - --token-focus-ring-action-box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; border: 1px solid transparent; cursor: pointer; border-color: var(--token-color-palette-neutral-500); @@ -9345,42 +8359,11 @@ button.hds-button[href]::after { background-color: var(--token-color-palette-neutral-600); } .hds-side-nav__icon-button:focus, .hds-side-nav__icon-button.mock-focus { - position: relative; - outline-style: solid; - outline-color: transparent; - isolation: isolate; color: var(--token-color-foreground-high-contrast); background-color: var(--token-color-palette-neutral-700); border-color: #bcc7fd; -} -.hds-side-nav__icon-button:focus::before, .hds-side-nav__icon-button.mock-focus::before { - position: absolute; - top: -1px; - right: -1px; - bottom: -1px; - left: -1px; - z-index: -1; - border-radius: 5px; - content: ""; -} -.hds-side-nav__icon-button:focus:focus::before, .hds-side-nav__icon-button:focus.mock-focus::before, .hds-side-nav__icon-button.mock-focus:focus::before, .hds-side-nav__icon-button.mock-focus.mock-focus::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-side-nav__icon-button:focus:focus:not(:focus-visible)::before, .hds-side-nav__icon-button.mock-focus:focus:not(:focus-visible)::before { - box-shadow: none; -} -.hds-side-nav__icon-button:focus:focus-visible::before, .hds-side-nav__icon-button.mock-focus:focus-visible::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-side-nav__icon-button:focus:focus:active::before, .hds-side-nav__icon-button:focus.mock-focus.mock-active::before, .hds-side-nav__icon-button.mock-focus:focus:active::before, .hds-side-nav__icon-button.mock-focus.mock-focus.mock-active::before { - box-shadow: none; -} -.hds-side-nav__icon-button:focus::before, .hds-side-nav__icon-button.mock-focus::before { - color: var(--token-color-foreground-high-contrast); - border: none; -} -.hds-side-nav__icon-button:focus:focus:not(:focus-visible)::before { - box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; + outline: 3px solid #0d69f2; + outline-offset: 0; } .hds-side-nav__icon-button:active, .hds-side-nav__icon-button.mock-active { color: var(--token-color-foreground-high-contrast); diff --git a/showcase/public/assets/styles/@hashicorp/design-system-components.css b/showcase/public/assets/styles/@hashicorp/design-system-components.css index d0b04c321a9..8d434446c84 100644 --- a/showcase/public/assets/styles/@hashicorp/design-system-components.css +++ b/showcase/public/assets/styles/@hashicorp/design-system-components.css @@ -1065,20 +1065,6 @@ border-color: var(--token-button-border-color-secondary-default); box-shadow: var(--token-elevation-low-box-shadow); } -.hds-accordion-item__button--parent-contains-interactive:focus, .hds-accordion-item__button--parent-contains-interactive.mock-focus { - box-shadow: none; -} -.hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button--parent-contains-interactive.mock-focus::before { - position: absolute; - top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - z-index: -1; - border: var(--token-button-focus-border-width) solid transparent; - border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width)); - content: ""; -} .hds-accordion-item__button--parent-contains-interactive:hover, .hds-accordion-item__button--parent-contains-interactive.mock-hover { color: var(--token-button-foreground-color-secondary-hover); background-color: var(--token-button-surface-color-secondary-hover); @@ -1089,9 +1075,7 @@ color: var(--token-button-foreground-color-secondary-focus); background-color: var(--token-button-surface-color-secondary-focus); border-color: var(--token-button-border-color-secondary-focus-internal); -} -.hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button--parent-contains-interactive.mock-focus::before { - border-color: var(--token-button-border-color-secondary-focus-external); + outline: 3px solid var(--token-button-border-color-secondary-focus-external); } .hds-accordion-item__button--parent-contains-interactive:active, .hds-accordion-item__button--parent-contains-interactive.mock-active { color: var(--token-button-foreground-color-secondary-active); @@ -1099,9 +1083,6 @@ border-color: var(--token-button-border-color-secondary-active); box-shadow: none; } -.hds-accordion-item__button--parent-contains-interactive:active::before, .hds-accordion-item__button--parent-contains-interactive.mock-active::before { - border-color: transparent; -} .hds-accordion-item__button { width: var(--hds-accordion-item-icon-size); @@ -1496,6 +1477,10 @@ background-color: transparent; border: 1px solid transparent; border-radius: var(--token-border-radius-x-small); + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; } .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:hover, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-hover { color: var(--token-color-foreground-primary); @@ -1503,6 +1488,32 @@ border-color: var(--token-color-border-strong); box-shadow: var(--token-elevation-low-box-shadow); } +.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + border-radius: inherit; + content: ""; +} +.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus:active::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus, +.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon .hds-dropdown-toggle-icon--is-open { + outline: none; +} .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon .hds-dropdown-toggle-icon--is-open::before { top: 0; @@ -2242,7 +2253,6 @@ .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, .hds-dialog-primitive__wrapper *) { - --token-focus-ring-action-box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; border: 1px solid transparent; cursor: pointer; border-color: var(--token-color-palette-neutral-500); @@ -2300,229 +2310,11 @@ .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, .hds-dialog-primitive__wrapper *).mock-focus { - position: relative; - outline-style: solid; - outline-color: transparent; - isolation: isolate; color: var(--token-color-foreground-high-contrast); background-color: var(--token-color-palette-neutral-700); border-color: #bcc7fd; -} -.hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before { - position: absolute; - top: -1px; - right: -1px; - bottom: -1px; - left: -1px; - z-index: -1; - border-radius: 5px; - content: ""; -} -.hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before { - box-shadow: none; -} -.hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before { - box-shadow: none; -} -.hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, .hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before { - color: var(--token-color-foreground-high-contrast); - border: none; -} -.hds-app-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before { - box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; + outline: 3px solid #0d69f2; + outline-offset: 0; } .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, @@ -2671,7 +2463,6 @@ } .hds-app-header__home-link { - --token-focus-ring-action-box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; border: 1px solid transparent; cursor: pointer; color: var(--token-color-foreground-high-contrast); @@ -2689,41 +2480,11 @@ background-color: var(--token-color-palette-neutral-600); } .hds-app-header__home-link:focus, .hds-app-header__home-link.mock-focus { - position: relative; - outline-style: solid; - outline-color: transparent; - isolation: isolate; color: var(--token-color-foreground-high-contrast); background-color: var(--token-color-palette-neutral-700); -} -.hds-app-header__home-link:focus::before, .hds-app-header__home-link.mock-focus::before { - position: absolute; - top: -1px; - right: -1px; - bottom: -1px; - left: -1px; - z-index: -1; - border-radius: 5px; - content: ""; -} -.hds-app-header__home-link:focus:focus::before, .hds-app-header__home-link:focus.mock-focus::before, .hds-app-header__home-link.mock-focus:focus::before, .hds-app-header__home-link.mock-focus.mock-focus::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-app-header__home-link:focus:focus:not(:focus-visible)::before, .hds-app-header__home-link.mock-focus:focus:not(:focus-visible)::before { - box-shadow: none; -} -.hds-app-header__home-link:focus:focus-visible::before, .hds-app-header__home-link.mock-focus:focus-visible::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-app-header__home-link:focus:focus:active::before, .hds-app-header__home-link:focus.mock-focus.mock-active::before, .hds-app-header__home-link.mock-focus:focus:active::before, .hds-app-header__home-link.mock-focus.mock-focus.mock-active::before { - box-shadow: none; -} -.hds-app-header__home-link:focus::before, .hds-app-header__home-link.mock-focus::before { - color: var(--token-color-foreground-high-contrast); - border: none; -} -.hds-app-header__home-link:focus:focus:not(:focus-visible)::before { - box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; + border-color: #bcc7fd; + outline: 3px solid #0d69f2; + outline-offset: 0; } .hds-app-header__home-link:active, .hds-app-header__home-link.mock-active { color: var(--token-color-foreground-high-contrast); @@ -3630,20 +3391,6 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h .hds-button.hds-button--width-full .hds-button__text { flex: 0 0 auto; } -.hds-button:focus, .hds-button.mock-focus { - box-shadow: none; -} -.hds-button:focus::before, .hds-button.mock-focus::before { - position: absolute; - top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - z-index: -1; - border: var(--token-button-focus-border-width) solid transparent; - border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width)); - content: ""; -} .hds-button__icon { display: block; @@ -3671,14 +3418,8 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h color: var(--token-button-foreground-color-primary-focus); background-color: var(--token-button-surface-color-primary-focus); border-color: var(--token-button-border-color-primary-focus-internal); -} -.hds-button--color-primary:focus::before, .hds-button--color-primary.mock-focus::before { - top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px)); - right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px)); - bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px)); - left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px)); - border-color: var(--token-button-border-color-primary-focus-external); - border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px); + outline: 3px solid var(--token-color-focus-action-external); + outline-offset: 2px; } .hds-button--color-primary:active, .hds-button--color-primary.mock-active { color: var(--token-button-foreground-color-primary-active); @@ -3686,9 +3427,6 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h border-color: var(--token-button-border-color-primary-active); box-shadow: none; } -.hds-button--color-primary:active::before, .hds-button--color-primary.mock-active::before { - border-color: transparent; -} .hds-button--color-secondary { color: var(--token-button-foreground-color-secondary-default); @@ -3706,9 +3444,7 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h color: var(--token-button-foreground-color-secondary-focus); background-color: var(--token-button-surface-color-secondary-focus); border-color: var(--token-button-border-color-secondary-focus-internal); -} -.hds-button--color-secondary:focus::before, .hds-button--color-secondary.mock-focus::before { - border-color: var(--token-button-border-color-secondary-focus-external); + outline: 3px solid var(--token-button-border-color-secondary-focus-external); } .hds-button--color-secondary:active, .hds-button--color-secondary.mock-active { color: var(--token-button-foreground-color-secondary-active); @@ -3716,9 +3452,6 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h border-color: var(--token-button-border-color-secondary-active); box-shadow: none; } -.hds-button--color-secondary:active::before, .hds-button--color-secondary.mock-active::before { - border-color: transparent; -} .hds-button--color-tertiary { color: var(--token-button-foreground-color-tertiary-default); @@ -3735,9 +3468,7 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h color: var(--token-button-foreground-color-tertiary-focus); background-color: var(--token-button-surface-color-tertiary-focus); border-color: var(--token-button-border-color-tertiary-focus-internal); -} -.hds-button--color-tertiary:focus::before, .hds-button--color-tertiary.mock-focus::before { - border-color: var(--token-button-border-color-tertiary-focus-external); + outline: 3px solid var(--token-button-border-color-tertiary-focus-external); } .hds-button--color-tertiary:active, .hds-button--color-tertiary.mock-active { color: var(--token-button-foreground-color-tertiary-active); @@ -3745,16 +3476,10 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h border-color: var(--token-button-border-color-tertiary-active); box-shadow: none; } -.hds-button--color-tertiary:active::before, .hds-button--color-tertiary.mock-active::before { - border-color: transparent; -} .hds-button--color-tertiary:disabled, .hds-button--color-tertiary[disabled], .hds-button--color-tertiary.mock-disabled, .hds-button--color-tertiary:disabled:focus, .hds-button--color-tertiary[disabled]:focus, .hds-button--color-tertiary.mock-disabled:focus, .hds-button--color-tertiary:disabled:hover, .hds-button--color-tertiary[disabled]:hover, .hds-button--color-tertiary.mock-disabled:hover { background-color: transparent; border-color: transparent; } -.hds-button--color-tertiary:disabled::before, .hds-button--color-tertiary[disabled]::before, .hds-button--color-tertiary.mock-disabled::before, .hds-button--color-tertiary:disabled:focus::before, .hds-button--color-tertiary[disabled]:focus::before, .hds-button--color-tertiary.mock-disabled:focus::before, .hds-button--color-tertiary:disabled:hover::before, .hds-button--color-tertiary[disabled]:hover::before, .hds-button--color-tertiary.mock-disabled:hover::before { - border-color: transparent; -} .hds-button--color-critical { color: var(--token-button-foreground-color-critical-default); @@ -3772,9 +3497,7 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h color: var(--token-button-foreground-color-critical-focus); background-color: var(--token-button-surface-color-critical-focus); border-color: var(--token-button-border-color-critical-focus-internal); -} -.hds-button--color-critical:focus::before, .hds-button--color-critical.mock-focus::before { - border-color: var(--token-button-border-color-critical-focus-external); + outline: 3px solid var(--token-button-border-color-critical-focus-external); } .hds-button--color-critical:active, .hds-button--color-critical.mock-active { color: var(--token-button-foreground-color-critical-active); @@ -3782,9 +3505,6 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h border-color: var(--token-button-border-color-critical-active); box-shadow: none; } -.hds-button--color-critical:active::before, .hds-button--color-critical.mock-active::before { - border-color: transparent; -} .hds-button--size-small { min-height: var(--token-button-height-small); @@ -4343,12 +4063,7 @@ button.hds-button[href]::after { color: var(--hds-code-block-color-foreground-primary); background-color: var(--hds-code-block-color-surface-faint); border-color: var(--hds-code-block-color-focus-action-internal); -} -.hds-code-block__height-toggle-button:focus::before, .hds-code-block__height-toggle-button.mock-focus::before, .hds-code-block__height-toggle-button:focus-visible::before, -.hds-code-block__copy-button:focus::before, -.hds-code-block__copy-button.mock-focus::before, -.hds-code-block__copy-button:focus-visible::before { - border-color: var(--hds-code-block-color-focus-action-external); + outline-color: var(--hds-code-block-color-focus-action-external); } .hds-code-block__height-toggle-button .hds-icon, .hds-code-block__copy-button .hds-icon { @@ -4944,22 +4659,8 @@ button.hds-button[href]::after { cursor: pointer; } .hds-dropdown-toggle-icon:focus, .hds-dropdown-toggle-icon.mock-focus { - box-shadow: none; border-color: var(--token-color-focus-action-internal); -} -.hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before { - position: absolute; - top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - z-index: -1; - border: var(--token-button-focus-border-width) solid transparent; - border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width)); - content: ""; -} -.hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before { - border-color: var(--token-color-focus-action-external); + outline: 3px solid var(--token-color-focus-action-external); } .hds-dropdown-toggle-icon:active, .hds-dropdown-toggle-icon.mock-active { background-color: var(--token-color-surface-interactive-active); @@ -5019,20 +4720,6 @@ button.hds-button[href]::after { outline-color: transparent; isolation: isolate; } -.hds-dropdown-toggle-button:focus, .hds-dropdown-toggle-button.mock-focus { - box-shadow: none; -} -.hds-dropdown-toggle-button:focus::before, .hds-dropdown-toggle-button.mock-focus::before { - position: absolute; - top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); - z-index: -1; - border: var(--token-button-focus-border-width) solid transparent; - border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width)); - content: ""; -} .hds-dropdown-toggle-button:disabled, .hds-dropdown-toggle-button.mock-disabled, .hds-dropdown-toggle-button:disabled:focus, .hds-dropdown-toggle-button.mock-disabled:focus, .hds-dropdown-toggle-button:disabled:hover, .hds-dropdown-toggle-button.mock-disabled:hover { color: var(--token-button-foreground-color-disabled); background-color: var(--token-button-surface-color-disabled); @@ -5133,14 +4820,8 @@ button.hds-button[href]::after { color: var(--token-button-foreground-color-primary-focus); background-color: var(--token-button-surface-color-primary-focus); border-color: var(--token-button-border-color-primary-focus-internal); -} -.hds-dropdown-toggle-button--color-primary:focus::before, .hds-dropdown-toggle-button--color-primary.mock-focus::before { - top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px)); - right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px)); - bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px)); - left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px)); - border-color: var(--token-button-border-color-primary-focus-external); - border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px); + outline: 3px solid var(--token-color-focus-action-external); + outline-offset: 2px; } .hds-dropdown-toggle-button--color-primary:active, .hds-dropdown-toggle-button--color-primary.mock-active { color: var(--token-button-foreground-color-primary-active); @@ -5148,9 +4829,6 @@ button.hds-button[href]::after { border-color: var(--token-button-border-color-primary-active); box-shadow: none; } -.hds-dropdown-toggle-button--color-primary:active::before, .hds-dropdown-toggle-button--color-primary.mock-active::before { - border-color: transparent; -} .hds-dropdown-toggle-button--color-secondary { color: var(--token-button-foreground-color-secondary-default); @@ -5168,9 +4846,7 @@ button.hds-button[href]::after { color: var(--token-button-foreground-color-secondary-focus); background-color: var(--token-button-surface-color-secondary-focus); border-color: var(--token-button-border-color-secondary-focus-internal); -} -.hds-dropdown-toggle-button--color-secondary:focus::before, .hds-dropdown-toggle-button--color-secondary.mock-focus::before { - border-color: var(--token-button-border-color-secondary-focus-external); + outline: 3px solid var(--token-button-border-color-secondary-focus-external); } .hds-dropdown-toggle-button--color-secondary:active, .hds-dropdown-toggle-button--color-secondary.mock-active { color: var(--token-button-foreground-color-secondary-active); @@ -5178,9 +4854,6 @@ button.hds-button[href]::after { border-color: var(--token-button-border-color-secondary-active); box-shadow: none; } -.hds-dropdown-toggle-button--color-secondary:active::before, .hds-dropdown-toggle-button--color-secondary.mock-active::before { - border-color: transparent; -} .hds-dropdown-toggle-button--width-full { justify-content: space-between; @@ -8575,7 +8248,6 @@ button.hds-button[href]::after { } .hds-side-nav__home-link { - --token-focus-ring-action-box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; border: 1px solid transparent; cursor: pointer; color: var(--token-side-nav-color-foreground-strong); @@ -8591,41 +8263,11 @@ button.hds-button[href]::after { background-color: var(--token-side-nav-color-surface-interactive-hover); } .hds-side-nav__home-link:focus, .hds-side-nav__home-link.mock-focus { - position: relative; - outline-style: solid; - outline-color: transparent; - isolation: isolate; color: var(--token-color-foreground-high-contrast); background-color: var(--token-color-palette-neutral-700); -} -.hds-side-nav__home-link:focus::before, .hds-side-nav__home-link.mock-focus::before { - position: absolute; - top: -1px; - right: -1px; - bottom: -1px; - left: -1px; - z-index: -1; - border-radius: 5px; - content: ""; -} -.hds-side-nav__home-link:focus:focus::before, .hds-side-nav__home-link:focus.mock-focus::before, .hds-side-nav__home-link.mock-focus:focus::before, .hds-side-nav__home-link.mock-focus.mock-focus::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-side-nav__home-link:focus:focus:not(:focus-visible)::before, .hds-side-nav__home-link.mock-focus:focus:not(:focus-visible)::before { - box-shadow: none; -} -.hds-side-nav__home-link:focus:focus-visible::before, .hds-side-nav__home-link.mock-focus:focus-visible::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-side-nav__home-link:focus:focus:active::before, .hds-side-nav__home-link:focus.mock-focus.mock-active::before, .hds-side-nav__home-link.mock-focus:focus:active::before, .hds-side-nav__home-link.mock-focus.mock-focus.mock-active::before { - box-shadow: none; -} -.hds-side-nav__home-link:focus::before, .hds-side-nav__home-link.mock-focus::before { - color: var(--token-color-foreground-high-contrast); - border: none; -} -.hds-side-nav__home-link:focus:focus:not(:focus-visible)::before { - box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; + border-color: #bcc7fd; + outline: 3px solid #0d69f2; + outline-offset: 0; } .hds-side-nav__home-link:active, .hds-side-nav__home-link.mock-active { color: var(--token-side-nav-color-foreground-strong); @@ -8678,7 +8320,6 @@ button.hds-button[href]::after { .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, .hds-dialog-primitive__wrapper *) { - --token-focus-ring-action-box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; border: 1px solid transparent; cursor: pointer; border-color: var(--token-color-palette-neutral-500); @@ -8832,962 +8473,336 @@ button.hds-button[href]::after { .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, .hds-dialog-primitive__wrapper *).mock-focus { - position: relative; - outline-style: solid; - outline-color: transparent; - isolation: isolate; color: var(--token-color-foreground-high-contrast); background-color: var(--token-color-palette-neutral-700); border-color: #bcc7fd; + outline: 3px solid #0d69f2; + outline-offset: 0; } .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):active, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, +.hds-dialog-primitive__wrapper *).mock-active, .hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, +.hds-dialog-primitive__wrapper *):active, .hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, +.hds-dialog-primitive__wrapper *).mock-active, .hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, +.hds-dialog-primitive__wrapper *):active, .hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, +.hds-dialog-primitive__wrapper *).mock-active, .hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, +.hds-dialog-primitive__wrapper *):active, .hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, +.hds-dialog-primitive__wrapper *).mock-active, .hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, +.hds-dialog-primitive__wrapper *):active, .hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, +.hds-dialog-primitive__wrapper *).mock-active, .hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, +.hds-dialog-primitive__wrapper *):active, .hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, +.hds-dialog-primitive__wrapper *).mock-active, .hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, +.hds-dialog-primitive__wrapper *):active, .hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, +.hds-dialog-primitive__wrapper *).mock-active, .hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, +.hds-dialog-primitive__wrapper *):active, .hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, +.hds-dialog-primitive__wrapper *).mock-active, .hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, +.hds-dialog-primitive__wrapper *):active, .hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before { - position: absolute; - top: -1px; - right: -1px; - bottom: -1px; - left: -1px; - z-index: -1; - border-radius: 5px; - content: ""; +.hds-dialog-primitive__wrapper *).mock-active { + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-500); + border-color: var(--token-color-palette-neutral-400); } .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled], .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:hover, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:hover, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled], +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled], +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:hover, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled], +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:focus, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:focus, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:focus, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:hover, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:hover, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:hover, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled], +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:focus, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:focus, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:focus, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, +.hds-dialog-primitive__wrapper *):disabled:hover, .hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, +.hds-dialog-primitive__wrapper *)[disabled]:hover, .hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, +.hds-dialog-primitive__wrapper *).mock-disabled:hover, .hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, +.hds-dialog-primitive__wrapper *):disabled, .hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled], +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:focus, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:focus, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:focus, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:hover, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:not(:focus-visible)::before { - box-shadow: none; -} -.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:hover, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:hover, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled], +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:focus, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:focus, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:focus, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled:hover, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *)[disabled]:hover, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *).mock-disabled:hover, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus-visible::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus-visible::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:active::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus.mock-focus.mock-active::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus:focus:active::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus.mock-focus.mock-active::before { - box-shadow: none; -} -.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-focus::before { - color: var(--token-color-foreground-high-contrast); - border: none; -} -.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):focus:focus:not(:focus-visible)::before { - box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; -} -.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):active, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-active, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):active, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-active, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):active, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-active, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):active, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-active, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):active, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-active, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):active, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-active, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):active, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-active, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):active, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-active, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):active, -.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-active { - color: var(--token-color-foreground-high-contrast); - background-color: var(--token-color-palette-neutral-500); - border-color: var(--token-color-palette-neutral-400); -} -.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled], .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:hover, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:hover, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:hover, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled], -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:focus, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:focus, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:focus, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:hover, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:hover, -.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:hover, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled], -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:focus, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:focus, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:focus, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:hover, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:hover, -.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:hover, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled], -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:focus, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:focus, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:focus, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:hover, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:hover, -.hds-side-nav .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:hover, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled], -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:focus, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:focus, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:focus, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:hover, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:hover, -.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:hover, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled], -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:focus, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:focus, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:focus, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:hover, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:hover, -.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:hover, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled], -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:focus, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:focus, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:focus, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled:hover, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *)[disabled]:hover, -.hds-side-nav-header .hds-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *).mock-disabled:hover, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, -.ember-basic-dropdown-trigger * *, -.ember-basic-dropdown-content * *, -.hds-dialog-primitive__wrapper *):disabled, -.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, +.hds-dialog-primitive__wrapper *):disabled, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *, .hds-dialog-primitive__wrapper *)[disabled], @@ -9861,7 +8876,6 @@ button.hds-button[href]::after { } .hds-side-nav__icon-button { - --token-focus-ring-action-box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; border: 1px solid transparent; cursor: pointer; border-color: var(--token-color-palette-neutral-500); @@ -9881,42 +8895,11 @@ button.hds-button[href]::after { background-color: var(--token-color-palette-neutral-600); } .hds-side-nav__icon-button:focus, .hds-side-nav__icon-button.mock-focus { - position: relative; - outline-style: solid; - outline-color: transparent; - isolation: isolate; color: var(--token-color-foreground-high-contrast); background-color: var(--token-color-palette-neutral-700); border-color: #bcc7fd; -} -.hds-side-nav__icon-button:focus::before, .hds-side-nav__icon-button.mock-focus::before { - position: absolute; - top: -1px; - right: -1px; - bottom: -1px; - left: -1px; - z-index: -1; - border-radius: 5px; - content: ""; -} -.hds-side-nav__icon-button:focus:focus::before, .hds-side-nav__icon-button:focus.mock-focus::before, .hds-side-nav__icon-button.mock-focus:focus::before, .hds-side-nav__icon-button.mock-focus.mock-focus::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-side-nav__icon-button:focus:focus:not(:focus-visible)::before, .hds-side-nav__icon-button.mock-focus:focus:not(:focus-visible)::before { - box-shadow: none; -} -.hds-side-nav__icon-button:focus:focus-visible::before, .hds-side-nav__icon-button.mock-focus:focus-visible::before { - box-shadow: var(--token-focus-ring-action-box-shadow); -} -.hds-side-nav__icon-button:focus:focus:active::before, .hds-side-nav__icon-button:focus.mock-focus.mock-active::before, .hds-side-nav__icon-button.mock-focus:focus:active::before, .hds-side-nav__icon-button.mock-focus.mock-focus.mock-active::before { - box-shadow: none; -} -.hds-side-nav__icon-button:focus::before, .hds-side-nav__icon-button.mock-focus::before { - color: var(--token-color-foreground-high-contrast); - border: none; -} -.hds-side-nav__icon-button:focus:focus:not(:focus-visible)::before { - box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2; + outline: 3px solid #0d69f2; + outline-offset: 0; } .hds-side-nav__icon-button:active, .hds-side-nav__icon-button.mock-active { color: var(--token-color-foreground-high-contrast);