@hashicorp/design-system-components 4.13.1 → 4.15.0

package/dist/styles/@hashicorp/design-system-components.scss

@@ -16,7 +16,8 @@
 @use "../components/alert";
 @use "../components/app-footer";
 @use "../components/app-frame";
-@use "../components/app-header";
+// @use "../components/app-header";
+// @use "../components/app-side-nav";
 @use "../components/application-state";
 @use "../components/badge";
 @use "../components/badge-count";
@@ -49,6 +50,7 @@
 @use "../components/tabs";
 @use "../components/tag";
 @use "../components/text";
+@use "../components/time";
 @use "../components/toast";
 @use "../components/tooltip";
 // END COMPONENT CSS FILES IMPORTS

package/dist/styles/components/alert.scss

@@ -39,7 +39,6 @@
   flex-direction: column;
   gap: 4px;
   justify-content: center;
-  color: var(--token-color-foreground-warning-on-surface);
 }
 
 .hds-alert__description {

package/dist/styles/components/app-side-nav/content.scss

@@ -0,0 +1,182 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// SIDE-NAV > CONTENT (PORTALS + LISTS OF ITEMS/LINKS)
+//
+
+@use "../../mixins/focus-ring" as *;
+
+
+// PANELS (wrappers used in conjunction with the portal elements)
+
+.hds-app-side-nav__content {
+  // we use this trick (increasing the container size here, and reducing it at single panel level)
+  // to have the panels width match the sidebar extended width (it's used in the animated sliding of the panels)
+  margin: 0 calc(var(--token-app-side-nav-wrapper-padding-horizontal) * -1);
+
+  // we hide the content when the SideNav is collapsed to prevent the vertical scrollbar from being visible
+  // when the scrollbar is set to be always visible or a mouse or trackpad force it to be always visible.
+  // ideally we would use `display: none` but doing so would disable the fade-in transition when expanding
+  .hds-app-side-nav--is-minimized & {
+    height: 0;
+    overflow: hidden;
+  }
+}
+
+.hds-app-side-nav__content-panels {
+  // see https://codepen.io/didoo/pen/YzOeRPr
+  display: grid;
+  grid-template-columns: repeat(5, var(--hds-app-side-nav-width-expanded));
+  width: 100%;
+}
+
+.hds-app-side-nav__content-panel {
+  padding: 0 var(--token-app-side-nav-wrapper-padding-horizontal);
+  overflow: hidden; // the panel itself does not need to be scrollable
+
+  &[aria-hidden="true"] {
+    max-height: 0; // prevents hidden panels from causing scrolling
+  }
+}
+
+// (LIST) TITLE
+
+.hds-app-side-nav__list-title {
+  min-height: var(--token-app-side-nav-body-list-item-height);
+  margin-top: var(--token-app-side-nav-body-list-margin-vertical);
+  padding: 9px var(--token-app-side-nav-body-list-item-padding-horizontal); // 8px = (min-height - body-100-line-height) / 2
+  color: var(--token-app-side-nav-color-foreground-faint);
+  overflow-wrap: break-word;
+
+  // Remove margin from title at top of all list-items & lists
+  .hds-app-side-nav__list-wrapper:first-child .hds-app-side-nav__list-item:first-child > & {
+    margin-top: 0;
+  }
+}
+
+// LIST (root elements)
+
+.hds-app-side-nav__list-wrapper, // <nav> element
+.hds-app-side-nav__list {        // <ul> element
+  margin: 0;
+  padding: 0;
+}
+
+
+// ITEM (generic container)
+
+.hds-app-side-nav__list-item { // <li> element
+  position: relative; // for the "active" state indicator
+  list-style-type: none;
+
+  & + & {
+    margin-top: var(--token-app-side-nav-body-list-item-spacing-vertical);
+  }
+}
+
+.hds-app-side-nav__list-item-link { // <a>/<button> element (via Hds::Interactive)
+  display: flex;
+  gap: var(--token-app-side-nav-body-list-item-content-spacing-horizontal);
+  align-items: center;
+  width: 100%;
+  min-height: var(--token-app-side-nav-body-list-item-height);
+  padding: var(--token-app-side-nav-body-list-item-padding-vertical) var(--token-app-side-nav-body-list-item-padding-horizontal);
+  color: var(--token-app-side-nav-color-foreground-primary);
+  text-decoration: none;
+  // "Link" could render as an HTML button element so this overrides the default border style in that case:
+  border-color: transparent;
+  border-radius: var(--token-app-side-nav-body-list-item-border-radius);
+
+  // :Focus
+  &:focus,
+  &.mock-focus {
+    @include hds-focus-ring-with-pseudo-element();
+  }
+
+  // :Hover
+  &:hover,
+  &.mock-hover {
+    background: var(--token-app-side-nav-color-surface-interactive-hover);
+    border-color: transparent;
+
+    .hds-app-side-nav__list-item-text,
+    .hds-app-side-nav__list-item-icon-leading,
+    .hds-app-side-nav__list-item-icon-trailing {
+      color: var(--token-app-side-nav-color-foreground-strong);
+    }
+  }
+
+  // :Active
+  &:active,
+  &.mock-active {
+    background: var(--token-color-surface-interactive-active);
+  }
+
+  // ".Active" (current page) link
+  // NOTICE: this is necessary to mitigate the flickering of the link when clicked (expecially noticeable with a badge)
+  // For details see: https://github.com/hashicorp/design-system/pull/1328
+  // &:hover:focus, // This is causing issues with :active state styles not applying, refactored to apply to "active" class
+  // notice: this ".active" extra class is used to match the corresponding `active` class assigned automatically
+  // by the `<LinkTo>` Ember component (when the link is "current), so that consumers get it for free if they want
+  // otherwise they can use the `@isActive` argument to set this visual state directly
+  // Important: This element does not doing anything when interacted with so should not change color according to state
+  &.active,
+  &.active:hover:focus {
+    background: var(--token-color-surface-strong);
+
+    // indicator bar
+    &::after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: calc(var(--token-app-side-nav-wrapper-padding-horizontal) * -1);
+      width: 4px;
+      background: var(--token-color-foreground-action);
+      border-radius: 0 2px 2px 0;
+      content: "";
+    }
+
+    .hds-app-side-nav__list-item-text,
+    .hds-app-side-nav__list-item-icon-leading,
+    .hds-app-side-nav__list-item-icon-trailing {
+      color: var(--token-color-foreground-action);
+    }
+  }
+}
+
+// special override for the "back-link" element (no visible active state, by design)
+.hds-app-side-nav__list-item-link--back-link {
+  &:active,
+  &.mock-active {
+    background: var(--token-app-side-nav-color-surface-primary);
+
+    .hds-app-side-nav__list-item-text,
+    .hds-app-side-nav__list-item-icon-leading,
+    .hds-app-side-nav__list-item-icon-trailing {
+      color: var(--token-app-side-nav-color-foreground-primary);
+    }
+  }
+}
+
+
+// LIST ITEM > INNER ELEMENTS
+
+.hds-app-side-nav__list-item-text {
+  min-width: 0;
+  max-width: 100%;
+  color: var(--token-color-foreground-strong);
+  text-align: left;
+  overflow-wrap: break-word;
+}
+
+.hds-app-side-nav__list-item-icon-leading {
+  flex: none;
+}
+
+.hds-app-side-nav__list-item-icon-trailing {
+  flex: none;
+  margin-left: auto;
+}

package/dist/styles/components/app-side-nav/index.scss

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+@use "./vars";
+@use "./main";
+@use "./content";
+@use "./toggle-button";

package/dist/styles/components/app-side-nav/main.scss

@@ -0,0 +1,147 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// APP-SIDE-NAV
+//
+
+.hds-app-side-nav {
+  position: relative;
+  width: var(--hds-app-side-nav-width-fixed); // "default" width used by the `AppSideNav::Base` subcomponent (that is not responsive)
+  height: 100%;
+  min-height: 100%;
+  isolation: isolate; // used to create a new stacking context (so we can set the overlay's z-index to -1)
+
+  // RESPONSIVENESS - This controls the width of the top-level container ("sidebar") in the grid, and impacts the available space for the "main" grid area
+
+  &.hds-app-side-nav--is-responsive {
+    transition:
+      width var(--hds-app-side-nav-animation-duration)
+      var(--hds-app-side-nav-animation-easing);
+  }
+
+  // mobile
+  &.hds-app-side-nav--is-mobile {
+    width: var(--hds-app-side-nav-width-minimized);
+  }
+
+  // desktop
+  &.hds-app-side-nav--is-desktop {
+    &.hds-app-side-nav--is-not-minimized {
+      width: var(--hds-app-side-nav-width-expanded);
+    }
+
+    &.hds-app-side-nav--is-minimized {
+      width: var(--hds-app-side-nav-width-minimized);
+    }
+  }
+}
+
+// OVERLAY
+
+.hds-app-side-nav__overlay {
+  position: fixed;
+  z-index: -1;
+  inset: 0;
+  background-color: var(--token-color-palette-neutral-700);
+  opacity: 0.2;
+  transition:
+    opacity var(--hds-app-side-nav-animation-duration)
+    var(--hds-app-side-nav-animation-easing)
+    var(--hds-app-side-nav-animation-delay);
+
+  // when we're minimized (mobile) we don't want the overlay to be visible/interactive
+  .hds-app-side-nav--is-minimized & {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  // when it's desktop we _never_ want the overlay to be visible
+  .hds-app-side-nav--is-desktop & {
+    display: none;
+  }
+}
+
+// RESPONSIVE WRAPPER
+// this container element is used to control the width of the sidebar at different viewports (desktop/mobile) and states (minimized/expanded)
+
+.hds-app-side-nav__wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  color: var(--token-app-side-nav-color-foreground-primary); // we set a default color (in case generic content is added to the body of the appsidenav)
+  background: var(--token-app-side-nav-color-surface-primary);
+  border-right: var(--token-app-side-nav-wrapper-border-width) solid var(--token-app-side-nav-wrapper-border-color);
+
+  // RESPONSIVENESS - This controls the width of the "sidenav" container, and is independent (bur related) from the parent "sidebar" grid area
+
+  .hds-app-side-nav--is-responsive & {
+    transition:
+      width var(--hds-app-side-nav-animation-duration)
+      var(--hds-app-side-nav-animation-easing);
+  }
+
+  .hds-app-side-nav--is-minimized & {
+    width: var(--hds-app-side-nav-width-minimized);
+  }
+
+  .hds-app-side-nav--is-not-minimized & {
+    width: var(--hds-app-side-nav-width-expanded);
+  }
+}
+
+// wrapper's child "containers"
+
+.hds-app-side-nav__wrapper-body {
+  flex: 1;
+  padding:
+    var(--token-app-side-nav-wrapper-padding-vertical)
+    var(--token-app-side-nav-wrapper-padding-horizontal);
+  // this is necessary, otherwise when the sidenav is minimized an horizontal scrollbar may appear
+  // (if there are words longer than the width of the available space for the list "item" content)
+  overflow-x: hidden;
+  // we want the content to vertically scroll if needed
+  overflow-y: auto;
+}
+
+// "HIDE-WHEN-MINIMIZED" SPECIAL CLASS
+// this is a special class that is used to control which elements of the sidenav need to be:
+// - hidden (immediately) when the sidenav is "minimized"
+// - shown (transitioning their opacity) when the sidenav is "expanded"
+
+.hds-app-side-nav-hide-when-minimized {
+  .hds-app-side-nav--is-minimized & {
+    visibility: hidden !important; // we need `!important` here to override the inline style applied to the single panels
+    opacity: 0;
+    // this is needed because, despite the element having `visibility: hidden`,
+    // the child elements ("panels") have their visibility dynamically managed via JS
+    // and when they have "visibility: visible" applied, they are not visually visible
+    // (because of the `opacity: 0` of the parent) but the user can still interact with them
+    // and click on the links inside the sidenav even if they're not visible at all,
+    // so we have to block the interactivity of the whole container
+    // for reference see these PRs:
+    // - https://github.com/hashicorp/design-system/pull/1338
+    // - https://github.com/hashicorp/design-system/pull/1388
+    // - https://github.com/hashicorp/design-system/pull/1516
+    // and this codepen with a redux of the problem:
+    // - https://codepen.io/didoo/pen/mdQKMJW?editors=1100
+    pointer-events: none;
+  }
+
+  .hds-app-side-nav--is-not-minimized & {
+    visibility: visible;
+    opacity: 1;
+    transition:
+      opacity var(--hds-app-side-nav-animation-duration)
+      var(--hds-app-side-nav-animation-easing)
+      var(--hds-app-side-nav-animation-delay);
+  }
+
+  // we want to avoid accidental interactions with the navigation elements while the sidenav is animating its width
+  // (elements with `visibility: visible` can already be interacted with, while their opacity is transitioning)
+  .hds-app-side-nav--is-animating & {
+    pointer-events: none;
+  }
+}

package/dist/styles/components/app-side-nav/toggle-button.scss

@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// APP-SIDE-NAV > TOGGLE BUTTON
+//
+
+
+.hds-app-side-nav__toggle-button {
+  position: absolute;
+  top: var(--token-app-side-nav-wrapper-padding-vertical); // visually align with :header content
+  left: calc(var(--token-app-side-nav-wrapper-border-width) * -1);
+  z-index: 1;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  width: var(--hds-app-side-nav-toggle-button-width);
+  height: 36px;
+  padding: 0 4px;
+  color: var(--token-color-foreground-primary);
+  background: none;
+  background-color: var(--token-app-side-nav-color-surface-primary);
+  border: var(--token-app-side-nav-wrapper-border-width) solid var(--token-app-side-nav-wrapper-border-color);
+  border-left-color: transparent;
+  border-top-right-radius: var(--token-app-side-nav-toggle-button-border-radius);
+  border-bottom-right-radius: var(--token-app-side-nav-toggle-button-border-radius);
+  transform: translateX(var(--hds-app-side-nav-width-expanded));
+  cursor: pointer;
+  transition:
+    transform var(--hds-app-side-nav-animation-duration)
+    var(--hds-app-side-nav-animation-easing),
+    width var(--hds-app-side-nav-animation-duration)
+    var(--hds-app-side-nav-animation-easing);
+
+  &::before {
+    position: absolute;
+    top: calc(var(--token-app-side-nav-toggle-button-border-radius) * -2);
+    left: calc(var(--token-app-side-nav-wrapper-border-width) * -1);
+    box-sizing: border-box;
+    width: calc(var(--token-app-side-nav-toggle-button-border-radius) * 2);
+    height: calc(var(--token-app-side-nav-toggle-button-border-radius) * 2);
+    border-bottom: var(--token-app-side-nav-wrapper-border-width) solid var(--token-app-side-nav-wrapper-border-color);
+    border-left: var(--token-app-side-nav-wrapper-border-width) solid var(--token-app-side-nav-wrapper-border-color);
+    border-bottom-left-radius: var(--token-app-side-nav-toggle-button-border-radius);
+    box-shadow: 0 var(--token-app-side-nav-toggle-button-border-radius) 0 var(--token-app-side-nav-color-surface-primary);
+    content: "";
+  }
+
+  &::after {
+    position: absolute;
+    bottom: calc(var(--token-app-side-nav-toggle-button-border-radius) * -2);
+    left: calc(var(--token-app-side-nav-wrapper-border-width) * -1);
+    box-sizing: border-box;
+    width: calc(var(--token-app-side-nav-toggle-button-border-radius) * 2);
+    height: calc(var(--token-app-side-nav-toggle-button-border-radius) * 2);
+    border-bottom: var(--token-app-side-nav-wrapper-border-width) solid var(--token-app-side-nav-wrapper-border-color);
+    border-left: var(--token-app-side-nav-wrapper-border-width) solid var(--token-app-side-nav-wrapper-border-color);
+    border-bottom-left-radius: var(--token-app-side-nav-toggle-button-border-radius);
+    box-shadow: 0 var(--token-app-side-nav-toggle-button-border-radius) 0 var(--token-app-side-nav-color-surface-primary);
+    transform: scaleY(-1); // rotate so same clip path can be used
+    content: "";
+  }
+
+  &:hover,
+  &.mock-hover {
+    width: 30px;
+    background-color: var(--token-app-side-nav-color-surface-interactive-hover);
+
+    &::before,
+    &::after {
+      box-shadow: 0 var(--token-app-side-nav-toggle-button-border-radius) 0 var(--token-app-side-nav-color-surface-interactive-hover);
+    }
+  }
+
+  &:active,
+  &.mock-active {
+    background-color: var(--token-app-side-nav-color-surface-interactive-active);
+
+    &::before,
+    &::after {
+      box-shadow: 0 var(--token-app-side-nav-toggle-button-border-radius) 0 var(--token-app-side-nav-color-surface-interactive-active);
+    }
+  }
+
+  &:focus-visible,
+  &.mock-focus {
+    border-color: var(--token-color-focus-action-internal);
+    outline: 3px solid var(--token-color-focus-action-external);
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+
+  .hds-app-side-nav--is-minimized & {
+    transform: translateX(var(--hds-app-side-nav-width-minimized));
+  }
+}

package/dist/styles/components/app-side-nav/vars.scss

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// APP-SIDE-NAV - VARS
+//
+
+
+// LOCAL VARIABLES
+// we use `hds-app` as prefix to distinguish them from the normal tokens
+// notice: they may be overwritten at consumer-level side if needed by re-defining the variables in a container element
+
+:root {
+  // breakpoint
+  --hds-app-desktop-breakpoint: 1088px; // this is used only to read its value via JS and set the `hds-app-side-nav--is-desktop` class
+  // widths
+  --hds-app-side-nav-width-minimized: 16px;
+  --hds-app-side-nav-width-expanded: 280px;
+  --hds-app-side-nav-width-fixed: var(--hds-app-sidenav-width-expanded);
+  // animation
+  --hds-app-side-nav-animation-duration: 200ms;
+  --hds-app-side-nav-animation-delay: var(--hds-app-sidenav-animation-duration);
+  --hds-app-side-nav-animation-easing: cubic-bezier(0.65, 0, 0.35, 1);
+  // toggle-button
+  --hds-app-side-nav-toggle-button-width: 24px;
+}
+
+// reduced motion
+
+@media (prefers-reduced-motion) {
+  :root {
+    --hds-app-side-nav-animation-duration: 0;
+  }
+}

package/dist/styles/components/badge-count.scss

@@ -8,6 +8,7 @@
 //
 
 @use "sass:math";
+@use "sass:map";
 
 $hds-badge-count-types: ( "flat","inverted","outlined" );
 $hds-badge-count-sizes: ( "small", "medium", "large" );
@@ -52,11 +53,11 @@ $hds-badge-count-size-props: (
 
 @each $size in $hds-badge-count-sizes {
   .hds-badge-count--size-#{$size} {
-    min-height: map-get($hds-badge-count-size-props, $size, "height");
-    padding: calc(#{map-get($hds-badge-count-size-props, $size, "padding-vertical")} - #{$hds-badge-count-border-width}) calc(#{map-get($hds-badge-count-size-props, $size, "padding-horizontal")} - #{$hds-badge-count-border-width});
-    font-size: map-get($hds-badge-count-size-props, $size, "font-size");
-    line-height: map-get($hds-badge-count-size-props, $size, "line-height");
-    border-radius: math.div(map-get($hds-badge-count-size-props, $size, "height"), 2);
+    min-height: map.get($hds-badge-count-size-props, $size, "height");
+    padding: calc(#{map.get($hds-badge-count-size-props, $size, "padding-vertical")} - #{$hds-badge-count-border-width}) calc(#{map.get($hds-badge-count-size-props, $size, "padding-horizontal")} - #{$hds-badge-count-border-width});
+    font-size: map.get($hds-badge-count-size-props, $size, "font-size");
+    line-height: map.get($hds-badge-count-size-props, $size, "line-height");
+    border-radius: math.div(map.get($hds-badge-count-size-props, $size, "height"), 2);
   }
 }
 

package/dist/styles/components/badge.scss

@@ -7,6 +7,8 @@
 // BADGE COMPONENT
 //
 
+@use "sass:map";
+
 $hds-badge-types: ( "flat","inverted","outlined" );
 $hds-badge-colors-accents: ( "highlight", "success", "warning", "critical" );
 $hds-badge-sizes: ( "small", "medium", "large" );
@@ -87,18 +89,18 @@ $hds-badge-size-props: (
 
 @each $size in $hds-badge-sizes {
   .hds-badge--size-#{$size} {
-    gap: map-get($hds-badge-size-props, $size, "gap");
-    min-height: map-get($hds-badge-size-props, $size, "height");
-    padding: calc(#{map-get($hds-badge-size-props, $size, "padding-vertical")} - #{$hds-badge-border-width}) calc(#{map-get($hds-badge-size-props, $size, "padding-horizontal")} - #{$hds-badge-border-width});
+    gap: map.get($hds-badge-size-props, $size, "gap");
+    min-height: map.get($hds-badge-size-props, $size, "height");
+    padding: calc(#{map.get($hds-badge-size-props, $size, "padding-vertical")} - #{$hds-badge-border-width}) calc(#{map.get($hds-badge-size-props, $size, "padding-horizontal")} - #{$hds-badge-border-width});
 
     .hds-badge__icon {
-      width: map-get($hds-badge-size-props, $size, "icon-size");
-      height: map-get($hds-badge-size-props, $size, "icon-size");
+      width: map.get($hds-badge-size-props, $size, "icon-size");
+      height: map.get($hds-badge-size-props, $size, "icon-size");
     }
 
     .hds-badge__text {
-      font-size: map-get($hds-badge-size-props, $size, "font-size");
-      line-height: map-get($hds-badge-size-props, $size, "line-height");
+      font-size: map.get($hds-badge-size-props, $size, "font-size");
+      line-height: map.get($hds-badge-size-props, $size, "line-height");
     }
   }
 }
@@ -151,13 +153,13 @@ $hds-badge-size-props: (
 
     &.hds-badge--type-inverted {
       color: var(--token-color-foreground-high-contrast);
-      background-color: map-get($hds-badge-colors-props, $color, "inverted-background-color");
+      background-color: map.get($hds-badge-colors-props, $color, "inverted-background-color");
     }
 
     &.hds-badge--type-outlined {
       color: var(--token-color-foreground-#{$color});
       background-color: transparent;
-      border-color: map-get($hds-badge-colors-props, $color, "outlined-border-color");
+      border-color: map.get($hds-badge-colors-props, $color, "outlined-border-color");
     }
   }
 }

package/dist/styles/components/code-block/index.scss

@@ -11,7 +11,7 @@
 @use "../../mixins/focus-ring" as *;
 
 // Note: "theme" contains just color variables and syntax highlighting styles
-@import "theme";
+@use "theme";
 
 // DIMENSIONS
 $hds-code-block-line-numbers-width: 49px; // 3em ≈ 49px

package/dist/styles/components/copy/index.scss

@@ -3,6 +3,6 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-@use "./button.scss";
-@use "./snippet.scss";
+@use "./button";
+@use "./snippet";
 

package/dist/styles/components/dropdown.scss

@@ -28,6 +28,7 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 // TOGGLE/ICON
 
 .hds-dropdown-toggle-icon {
+  position: relative;
   display: flex;
   gap: 2px;
   align-items: center;
@@ -48,18 +49,24 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
     cursor: pointer;
   }
 
-  @include hds-focus-ring-with-pseudo-element(
-    $top: -1px,
-    $right: -1px,
-    $bottom: -1px,
-    $left: -1px,
-    $radius: $hds-dropdown-toggle-border-radius
-  );
+  &:focus,
+  &.mock-focus {
+    @include hds-button-state-focus();
+    border-color: var(--token-color-focus-action-internal);
+
+    &::before {
+      border-color: var(--token-color-focus-action-external);
+    }
+  }
 
   &:active,
   &.mock-active {
     background-color: var(--token-color-surface-interactive-active);
     border-color: var(--token-color-border-strong);
+
+    &::before {
+      border-color: transparent;
+    }
   }
 
   &:disabled,
@@ -136,6 +143,12 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 
 .hds-dropdown-toggle-button--size-small {
   padding-right: 0.375rem;
+
+  // For small variant with chevron, force the icon size to custom (even if the SGV size is `16px`)
+  .hds-dropdown-toggle-chevron .hds-icon {
+    width: 12px;
+    height: 12px;
+  }
 }
 
 .hds-dropdown-toggle-button--size-medium {