@hashicorp/design-system-components 2.12.2 → 2.13.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @hashicorp/design-system-components
 
+## 2.13.0
+
+### Minor Changes
+
+- [#1623](https://github.com/hashicorp/design-system/pull/1623) [`2111a5439`](https://github.com/hashicorp/design-system/commit/2111a5439abea2951f12517354db662edd7c9cb9) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - `AppFooter` - Added new component
+
+- [#1630](https://github.com/hashicorp/design-system/pull/1630) [`04da95443`](https://github.com/hashicorp/design-system/commit/04da95443290ee2d03d9bef23787a4ef10577247) Thanks [@alex-ju](https://github.com/alex-ju)! - `SideNav` - add `@isCollapsible` (to control if users can collapse the sidenav on 'desktop' viewports) and `@isMinimized` (to control the default state on 'desktop' viewports) arguments
+
+### Patch Changes
+
+- [#1696](https://github.com/hashicorp/design-system/pull/1696) [`f3f3fb103`](https://github.com/hashicorp/design-system/commit/f3f3fb103a5aa1c6489d011b6820560df4c2ed88) Thanks [@MelSumner](https://github.com/MelSumner)! - `Tag` - Updated padding for dismiss button for WCAG conformance
+
+- [#1678](https://github.com/hashicorp/design-system/pull/1678) [`a51976ded`](https://github.com/hashicorp/design-system/commit/a51976ded4f7939fe140a1abade0f98832ccc2d0) Thanks [@alex-ju](https://github.com/alex-ju)! - `Link::Standalone` – increase target size
+
+- Updated dependencies [[`04da95443`](https://github.com/hashicorp/design-system/commit/04da95443290ee2d03d9bef23787a4ef10577247)]:
+  - @hashicorp/design-system-tokens@1.9.0
+
 ## 2.12.2
 
 ### Patch Changes

package/addon/components/hds/app-footer/copyright.hbs

@@ -0,0 +1,9 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<div class="hds-app-footer__copyright" ...attributes>
+  <FlightIcon @name="hashicorp" />
+  <Hds::Text::Body @tag="span" @size="100">© {{this.year}} HashiCorp</Hds::Text::Body>
+</div>

package/addon/components/hds/app-footer/copyright.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+export default class HdsAppFooterCopyrightComponent extends Component {
+  /**
+   * @param year
+   * @type {string}
+   * @description The copyright year
+   * @default The current year (calculated via `Date()`)
+   */
+  get year() {
+    return this.args.year ?? new Date().getFullYear();
+  }
+}

package/addon/components/hds/app-footer/index.hbs

@@ -0,0 +1,20 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<div class={{this.classNames}} ...attributes>
+  {{yield (hash ExtraBefore=(component "hds/yield"))}}
+  <ul class="hds-app-footer__list" aria-label={{this.ariaLabel}}>
+    {{yield (hash StatusLink=(component "hds/app-footer/status-link"))}}
+    {{yield
+      (hash
+        Link=(component "hds/app-footer/link")
+        LegalLinks=(component "hds/app-footer/legal-links")
+        Item=(component "hds/app-footer/item")
+      )
+    }}
+  </ul>
+  {{yield (hash ExtraAfter=(component "hds/yield"))}}
+  <Hds::AppFooter::Copyright @year={{@copyrightYear}} />
+</div>

package/addon/components/hds/app-footer/index.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+export default class HdsAppFooterIndexComponent extends Component {
+  /**
+   * @param ariaLabel
+   * @type {string}
+   * @default 'Footer items'
+   */
+  get ariaLabel() {
+    return this.args.ariaLabel ?? 'Footer items';
+  }
+
+  /**
+   * @param theme
+   * @type {string}
+   * @description The component theme
+   * @default 'light'
+   */
+  get theme() {
+    return this.args.theme ?? 'light';
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-app-footer'];
+
+    // add a class based on the @theme argument
+    classes.push(`hds-app-footer--theme-${this.theme}`);
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/app-footer/item.hbs

@@ -0,0 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<li class="hds-app-footer__list-item" ...attributes>
+  {{yield}}
+</li>

package/addon/components/hds/app-footer/legal-links.hbs

@@ -0,0 +1,14 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<Hds::AppFooter::Item>
+  <ul class="hds-app-footer__legal-links" aria-label={{this.ariaLabel}} ...attributes>
+    <Hds::AppFooter::Link @href={{this.hrefForSupport}}>Support</Hds::AppFooter::Link>
+    <Hds::AppFooter::Link @href={{this.hrefForTerms}}>Terms</Hds::AppFooter::Link>
+    <Hds::AppFooter::Link @href={{this.hrefForPrivacy}}>Privacy</Hds::AppFooter::Link>
+    <Hds::AppFooter::Link @href={{this.hrefForSecurity}}>Security</Hds::AppFooter::Link>
+    <Hds::AppFooter::Link @href={{this.hrefForAccessibility}}>Accessibility</Hds::AppFooter::Link>
+  </ul>
+</Hds::AppFooter::Item>

package/addon/components/hds/app-footer/legal-links.js

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+export default class HdsAppFooterLegalLinksComponent extends Component {
+  /**
+   * @param ariaLabel
+   * @type {string}
+   * @default 'Legal links'
+   */
+  get ariaLabel() {
+    return this.args.ariaLabel ?? 'Legal links';
+  }
+
+  /**
+   * @param hrefForSupport
+   * @type {string}
+   * @description The href value of the "Support" link
+   */
+  get hrefForSupport() {
+    return this.args.hrefForSupport ?? 'https://www.hashicorp.com/support';
+  }
+
+  /**
+   * @param hrefForTerms
+   * @type {string}
+   * @description The href value of the "Terms" link
+   */
+  get hrefForTerms() {
+    return (
+      this.args.hrefForTerms ?? 'https://www.hashicorp.com/terms-of-service'
+    );
+  }
+
+  /**
+   * @param hrefForPrivacy
+   * @type {string}
+   * @description The href value of the "Privacy" link
+   */
+  get hrefForPrivacy() {
+    return this.args.hrefForPrivacy ?? 'https://www.hashicorp.com/privacy';
+  }
+
+  /**
+   * @param hrefForSecurity
+   * @type {string}
+   * @description The href value of the "Security" link
+   */
+  get hrefForSecurity() {
+    return this.args.hrefForSecurity ?? 'https://www.hashicorp.com/security';
+  }
+
+  /**
+   * @param hrefForAccessibility
+   * @type {string}
+   * @description The href value of the "Accessibility" link
+   */
+  get hrefForAccessibility() {
+    return (
+      this.args.hrefForAccessibility ?? 'mailto:accessibility@hashicorp.com'
+    );
+  }
+}

package/addon/components/hds/app-footer/link.hbs

@@ -0,0 +1,22 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<Hds::AppFooter::Item>
+  <Hds::Link::Inline
+    class="hds-app-footer__link"
+    @color="secondary"
+    @current-when={{@current-when}}
+    @models={{hds-link-to-models @model @models}}
+    @query={{hds-link-to-query @query}}
+    @replace={{@replace}}
+    @route={{@route}}
+    @isRouteExternal={{@isRouteExternal}}
+    @href={{@href}}
+    @isHrefExternal={{@isHrefExternal}}
+    @icon={{@icon}}
+    @iconPosition={{@iconPosition}}
+    ...attributes
+  ><Hds::Text::Body @tag="span" @size="100">{{yield}}</Hds::Text::Body></Hds::Link::Inline>
+</Hds::AppFooter::Item>

package/addon/components/hds/app-footer/status-link.hbs

@@ -0,0 +1,20 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<Hds::AppFooter::Link
+  class={{this.classNames}}
+  style={{this.itemStyle}}
+  @current-when={{@current-when}}
+  @models={{hds-link-to-models @model @models}}
+  @query={{hds-link-to-query @query}}
+  @replace={{@replace}}
+  @route={{@route}}
+  @isRouteExternal={{@isRouteExternal}}
+  @href={{this.href}}
+  @isHrefExternal={{@isHrefExternal}}
+  @icon={{this.statusIcon}}
+  @iconPosition="leading"
+  ...attributes
+>{{this.text}}</Hds::AppFooter::Link>

package/addon/components/hds/app-footer/status-link.js

@@ -0,0 +1,133 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
+import { assert } from '@ember/debug';
+
+export const STATUSES = {
+  operational: {
+    text: 'System operational',
+    iconName: 'check-circle',
+  },
+  degraded: {
+    text: 'System degraded',
+    iconName: 'alert-triangle',
+  },
+  maintenance: {
+    text: 'System maintenance',
+    iconName: 'alert-triangle',
+  },
+  critical: {
+    text: 'System critical',
+    iconName: 'x-circle',
+  },
+};
+
+export default class HdsAppFooterStatusLinkComponent extends Component {
+  constructor() {
+    super(...arguments);
+
+    assert(
+      'Either @status or @text for "Hds::AppFooter::StatusLink" must have a valid value',
+      this.args.text !== undefined || this.args.status
+    );
+  }
+
+  /**
+   * @param status
+   * @type {string}
+   * @description The name of the status which the StatusLink is being set to
+   */
+  get status() {
+    let status;
+    if (this.args.status) {
+      status = this.args.status.toLowerCase();
+      assert(
+        `@status for "Hds::AppFooter" must be one of the following: ${Object.keys(
+          STATUSES
+        ).join(', ')} received: ${this.args.status}`,
+        Object.keys(STATUSES).includes(status)
+      );
+    }
+    return status;
+  }
+
+  /**
+   * @param statusIcon
+   * @type {string}
+   * @description The name for the StatusLink icon
+   */
+  get statusIcon() {
+    if (this.status && !this.args.statusIcon) {
+      return STATUSES[this.status].iconName;
+    }
+    return this.args.statusIcon;
+  }
+
+  /**
+   * @param statusIconColor
+   * @type {string}
+   * @description The color for the StatusLink icon
+   */
+  get statusIconColor() {
+    if (this.status && !this.args.statusIconColor) {
+      return STATUSES[this.status].iconColor;
+    }
+    return this.args.statusIconColor;
+  }
+
+  /**
+   * Get the inline style to apply to the item.
+   * @method StatusLink#itemStyle
+   * @return {string} The "style" attribute to apply to the item.
+   */
+  get itemStyle() {
+    if (this.args.statusIconColor) {
+      return htmlSafe(
+        `--hds-app-footer-status-icon-color: ${this.args.statusIconColor}`
+      );
+    } else {
+      return undefined;
+    }
+  }
+
+  /**
+   * @param text
+   * @type {string}
+   * @description The text content of the StatusLink
+   */
+  get text() {
+    if (!this.args.text) {
+      return STATUSES[this.status].text;
+    }
+    return this.args.text;
+  }
+
+  /**
+   * @param href
+   * @type {string}
+   * @description The href value of the StatusLink
+   */
+  get href() {
+    return this.args.href ?? 'https://status.hashicorp.com';
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-app-footer__status-link'];
+
+    // add a class based on the @status argument
+    if (this.args.status) {
+      classes.push(`hds-app-footer__status-link--${this.status}`);
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/side-nav/index.hbs

@@ -19,18 +19,15 @@
         @navigationText={{@a11yRefocusNavigationText}}
       />
     {{/if}}
-    {{#if this.isResponsive}}
+    {{#if this.showToggleButton}}
       {{! template-lint-disable no-invalid-interactive}}
       <div class="hds-side-nav__overlay" {{on "click" this.toggleMinimizedStatus}} />
       {{! template-lint-enable no-invalid-interactive}}
-      <button
-        class="hds-side-nav__menu-toggle-button"
-        type="button"
-        {{on "click" this.toggleMinimizedStatus}}
+      <Hds::SideNav::ToggleButton
         aria-label={{this.ariaLabel}}
-      >
-        <FlightIcon @name={{if this.isMinimized "menu" "x"}} @size="24" @stretched={{true}} />
-      </button>
+        @icon={{if this.isMinimized "chevrons-right" "chevrons-left"}}
+        {{on "click" this.toggleMinimizedStatus}}
+      />
     {{/if}}
   </:root>
   <:header as |Header|>

package/addon/components/hds/side-nav/index.js

@@ -10,8 +10,9 @@ import { assert } from '@ember/debug';
 import { registerDestructor } from '@ember/destroyable';
 
 export default class HdsSideNavComponent extends Component {
-  @tracked isResponsive = this.args.isResponsive ?? true;
-  @tracked isMinimized = this.isResponsive; // we set it minimized by default so that if we switch viewport from desktop to mobile its already minimized
+  @tracked isResponsive = this.args.isResponsive ?? true; // controls if the component reacts to viewport changes
+  @tracked isMinimized = this.args.isMinimized ?? false; // sets the default state on 'desktop' viewports
+  @tracked isCollapsible = this.args.isCollapsible ?? false; // controls if users can collapse the sidenav on 'desktop' viewports
   @tracked isAnimating = false;
   @tracked isDesktop = true;
   hasA11yRefocus = this.args.hasA11yRefocus ?? true;
@@ -39,8 +40,11 @@ export default class HdsSideNavComponent extends Component {
   addEventListeners() {
     document.addEventListener('keydown', this.escapePress, true);
     this.desktopMQ.addEventListener('change', this.updateDesktopVariable, true);
-    // set initial state based on viewport
-    this.updateDesktopVariable({ matches: this.desktopMQ.matches });
+    // if not instantiated as minimized via arguments
+    if (!this.args.isMinimized) {
+      // set initial state based on viewport
+      this.updateDesktopVariable({ matches: this.desktopMQ.matches });
+    }
   }
 
   removeEventListeners() {
@@ -56,6 +60,10 @@ export default class HdsSideNavComponent extends Component {
     return this.isResponsive && !this.isDesktop && !this.isMinimized;
   }
 
+  get showToggleButton() {
+    return (this.isResponsive && !this.isDesktop) || this.isCollapsible;
+  }
+
   /**
    * @param ariaLabel
    * @type {string}
@@ -72,15 +80,15 @@ export default class HdsSideNavComponent extends Component {
     let classes = []; // `hds-side-nav` is already set by the "Hds::SideNav::Base" component
 
     // add specific class names for the different possible states
-    if (this.isDesktop) {
-      classes.push('hds-side-nav--is-desktop');
-    } else {
-      classes.push('hds-side-nav--is-mobile');
-    }
     if (this.isResponsive) {
       classes.push('hds-side-nav--is-responsive');
     }
-    if (this.isMinimized) {
+    if (!this.isDesktop && this.isResponsive) {
+      classes.push('hds-side-nav--is-mobile');
+    } else {
+      classes.push('hds-side-nav--is-desktop');
+    }
+    if (this.isMinimized && this.isResponsive) {
       classes.push('hds-side-nav--is-minimized');
     } else {
       classes.push('hds-side-nav--is-not-minimized');
@@ -94,7 +102,7 @@ export default class HdsSideNavComponent extends Component {
 
   @action
   escapePress(event) {
-    if (event.key === 'Escape' && !this.isMinimized) {
+    if (event.key === 'Escape' && !this.isMinimized && !this.isDesktop) {
       this.isMinimized = true;
     }
   }
@@ -127,6 +135,9 @@ export default class HdsSideNavComponent extends Component {
   updateDesktopVariable(event) {
     this.isDesktop = event.matches;
 
+    // automatically minimize on narrow viewports (when not in desktop mode)
+    this.isMinimized = !this.isDesktop;
+
     let { onDesktopViewportChange } = this.args;
 
     if (typeof onDesktopViewportChange === 'function') {

package/addon/components/hds/side-nav/toggle-button.hbs

@@ -0,0 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<button class="hds-side-nav__toggle-button" type="button" ...attributes>
+  <FlightIcon @name={{@icon}} />
+</button>

package/app/components/hds/app-footer/copyright.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/app-footer/copyright';

package/app/components/hds/app-footer/index.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/app-footer/index';

package/app/components/hds/app-footer/item.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/app-footer/item';

package/app/components/hds/app-footer/legal-links.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/app-footer/legal-links';

package/app/components/hds/app-footer/link.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/app-footer/link';

package/app/components/hds/app-footer/status-link.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/app-footer/status-link';

package/app/components/hds/side-nav/toggle-button.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/toggle-button';

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

@@ -14,6 +14,7 @@
 // START COMPONENTS CSS FILES IMPORTS
 @use "../components/accordion";
 @use "../components/alert";
+@use "../components/app-footer";
 @use "../components/app-frame";
 @use "../components/application-state";
 @use "../components/avatar";

package/app/styles/components/app-footer.scss

@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// app-footer
+//
+
+$app-footer-gap: 24px;
+$app-footer-icon-text-gap: 6px;
+
+.hds-app-footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $app-footer-gap;
+  justify-content: flex-end;
+  padding: 24px;
+  color: var(--app-footer-foreground-color);
+  border-top: 1px solid var(--app-footer-border-top-color);
+}
+
+// SUB-ELEMENTS
+
+// hide list if no children
+.hds-app-footer__list:not(:has(li)) { display: none; }
+
+.hds-app-footer__list,
+.hds-app-footer__legal-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $app-footer-gap;
+  align-items: center;
+  justify-content: flex-end;
+  width: fit-content;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.hds-app-footer__status-link {
+  // custom spacing for the status link (internally is using the "AppFooter::Link")
+  // Note: we increase specificity because otherwise is overwritten by the order of imports of components scss files
+  &.hds-link-inline--icon-leading > .hds-link-inline__icon { margin-right: $app-footer-icon-text-gap; }
+
+  .flight-icon {
+    fill: var(--hds-app-footer-status-icon-color, currentColor);
+  }
+}
+
+// preset status types
+.hds-app-footer__status-link--operational {
+  .flight-icon { fill: var(--app-footer-status-link-icon-operational-color); }
+}
+
+.hds-app-footer__status-link--degraded {
+  .flight-icon { fill: var(--app-footer-status-link-icon-degraded-color); }
+}
+
+.hds-app-footer__status-link--maintenance {
+  .flight-icon { fill: var(--app-footer-status-link-icon-maintenance-color); }
+}
+
+.hds-app-footer__status-link--critical {
+  .flight-icon { fill: var(--app-footer-status-link-icon-critical-color); }
+}
+
+
+.hds-app-footer__link.hds-link-inline--color-secondary,
+.hds-app-footer__status-link {
+  // Overriding default colors
+  color: var(--app-footer-link-default-color);
+  text-align: right;
+
+  &:hover,
+  &.mock-hover {
+    color: var(--app-footer-link-hover-color);
+  }
+
+  &:active,
+  &.mock-active {
+    color: var(--app-footer-link-active-color);
+  }
+
+  &:focus,
+  &.mock-focus,
+  &:focus-visible {
+    color: var(--app-footer-link-focus-color);
+    outline-color: var(--app-footer-link-focus-outline-color);
+  }
+}
+
+.hds-app-footer__list-item {
+  display: flex;
+  align-items: center;
+}
+
+.hds-app-footer__copyright {
+  display: flex;
+  gap: $app-footer-icon-text-gap;
+  align-items: center;
+  color: var(--app-footer-copyright-text-color);
+
+  .flight-icon { fill: var(--app-footer-copyright-icon-color); }
+}
+
+// THEMING
+
+// Light
+.hds-app-footer--theme-light {
+  --app-footer-foreground-color: var(--token-color-foreground-primary);
+  --app-footer-border-top-color: var(--token-color-border-primary);
+
+  // Overriding default Secondary Link colors
+  --app-footer-link-default-color: var(--token-color-foreground-faint);
+  --app-footer-link-hover-color: var(--token-color-palette-neutral-600);
+  --app-footer-link-active-color: var(--token-color-palette-neutral-700);
+  --app-footer-link-focus-color: var(--token-color-foreground-faint);
+  --app-footer-link-focus-outline-color: var(--token-color-focus-action-internal);
+
+  // Copyright
+  --app-footer-copyright-text-color: var(--token-color-foreground-primary);
+  --app-footer-copyright-icon-color: var(--token-color-hashicorp-brand);
+
+  // StatusLink icon colors
+  --app-footer-status-link-icon-operational-color: var(--token-color-foreground-success);
+  --app-footer-status-link-icon-degraded-color: var(--token-color-foreground-warning);
+  --app-footer-status-link-icon-maintenance-color: var(--token-color-foreground-warning);
+  --app-footer-status-link-icon-critical-color: var(--token-color-foreground-critical);
+}
+
+// Dark
+.hds-app-footer--theme-dark {
+  --app-footer-foreground-color: #b2b6bd;
+  --app-footer-border-top-color: #b2b6bd66; // rgba(#b2b6bd, 0.4) - Sass color functions don't work with CSS variables
+
+  // Overriding default Secondary Link colors
+  --app-footer-link-default-color: #b2b6bd;
+  --app-footer-link-hover-color: #d5d7db;
+  --app-footer-link-active-color: #efeff1;
+  --app-footer-link-focus-color: #b2b6bd;
+  --app-footer-link-focus-outline-color: #389aff;
+
+  // Copyright
+  --app-footer-copyright-text-color: #b2b6bd;
+  --app-footer-copyright-icon-color: #fff;
+
+  // StatusLink Icon colors
+  --app-footer-status-link-icon-operational-color: #009241;
+  --app-footer-status-link-icon-degraded-color: #e88c03;
+  --app-footer-status-link-icon-maintenance-color: #e88c03;
+  --app-footer-status-link-icon-critical-color: #ef3016;
+}

package/app/styles/components/link/standalone.scss

@@ -21,6 +21,8 @@ $hds-link-standalone-border-width: 1px;
   align-items: center;
   justify-content: center;
   width: fit-content;
+  padding-top: 4px;
+  padding-bottom: 4px;
   font-weight: var(--token-typography-font-weight-regular);
   font-family: var(--token-typography-font-stack-text);
   background-color: transparent; // needs to exist for a11y
@@ -137,7 +139,7 @@ $hds-link-standalone-focus-shift: 4px;
   $shift-extra: $shift + 2px;
 
   // notice: this is used not only for the focus, but also to increase the clickable area
-  @include hds-focus-ring-with-pseudo-element($top: -$shift, $right: -$shift, $bottom: -$shift, $left: -$shift, $radius: $hds-link-standalone-focus-border-radius);
+  @include hds-focus-ring-with-pseudo-element($right: -$shift, $left: -$shift, $radius: $hds-link-standalone-focus-border-radius);
 
   // we need to override a couple of values for better visual alignment
   &.hds-link-standalone--icon-position-leading::before {

package/app/styles/components/side-nav/header.scss

@@ -60,6 +60,16 @@
   justify-content: center;
   width: var(--token-side-nav-header-home-link-logo-size);
   height: var(--token-side-nav-header-home-link-logo-size);
+  transition:
+    width var(--hds-app-sidenav-animation-duration)
+    var(--hds-app-sidenav-animation-easing),
+    height var(--hds-app-sidenav-animation-duration)
+    var(--hds-app-sidenav-animation-easing);
+
+  .hds-side-nav--is-minimized & {
+    width: var(--token-side-nav-header-home-link-logo-size-minimized);
+    height: var(--token-side-nav-header-home-link-logo-size-minimized);
+  }
 }
 
 // "home-link"

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

@@ -7,4 +7,5 @@
 @use "./main.scss";
 @use "./header.scss";
 @use "./content.scss";
+@use "./toggle-button.scss";
 @use "./a11y-refocus.scss";

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

@@ -31,7 +31,13 @@
 
   // desktop
   &.hds-side-nav--is-desktop {
-    width: var(--hds-app-sidenav-width-expanded);
+    &.hds-side-nav--is-not-minimized {
+      width: var(--hds-app-sidenav-width-expanded);
+    }
+
+    &.hds-side-nav--is-minimized {
+      width: var(--hds-app-sidenav-width-minimized);
+    }
   }
 }
 
@@ -61,65 +67,6 @@
   }
 }
 
-
-// MENU/TOGGLE BUTTON
-
-.hds-side-nav__menu-toggle-button {
-  position: absolute;
-  z-index: 1;
-  color: var(--token-color-foreground-high-contrast);
-  background: none;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition-timing-function: var(--hds-app-sidenav-animation-easing);
-  transition-duration: var(--hds-app-sidenav-animation-duration);
-  transition-property: width, height, padding, border-radius, transform;
-
-  &:hover {
-    background-color: var(--token-color-palette-neutral-600);
-    border-color: transparent;
-  }
-
-  &:active {
-    background-color: var(--token-color-palette-neutral-500);
-    border-color: transparent;
-  }
-
-  &:focus {
-    background-color: var(--token-color-palette-neutral-500);
-    border-color: var(--token-color-focus-action-internal);
-    outline: 3px solid var(--token-color-focus-action-external);
-  }
-
-  // by default it's styled as "close" button
-  .hds-side-nav--is-mobile & {
-    width: 24px;
-    height: 24px;
-    padding: 1px;
-    background-color: var(--token-color-foreground-primary);
-    border-radius: 3px;
-    transform:
-      translateX(calc(var(--hds-app-sidenav-width-expanded) + 8px))
-      translateY(24px);
-    // z-index: 15; // not needed anymore?
-  }
-
-  // when the sidenav is minimized it's styled as "menu" button
-  .hds-side-nav--is-mobile.hds-side-nav--is-minimized & {
-    width: 36px;
-    height: 36px;
-    padding: 5px;
-    border-radius: 5px;
-    transform: translateX(22px) translateY(var(--hds-app-sidenav-menu-button-y-shift));
-  }
-
-  // when it's desktop we _never_ want to show the menu/toggle button
-  .hds-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)
 
@@ -129,6 +76,7 @@
   height: 100%;
   color: var(--token-side-nav-color-foreground-primary); // we set a default color (in case generic content is added to the header/body/footer of the sidenav)
   background: var(--token-side-nav-color-surface-primary);
+  border-right: var(--token-side-nav-wrapper-border-width) solid var(--token-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
 
@@ -138,17 +86,11 @@
       var(--hds-app-sidenav-animation-easing);
   }
 
-  // mobile
-  .hds-side-nav--is-mobile.hds-side-nav--is-minimized & {
+  .hds-side-nav--is-minimized & {
     width: var(--hds-app-sidenav-width-minimized);
   }
 
-  .hds-side-nav--is-mobile.hds-side-nav--is-not-minimized & {
-    width: var(--hds-app-sidenav-width-expanded);
-  }
-
-  // desktop
-  .hds-side-nav--is-desktop & {
+  .hds-side-nav--is-not-minimized & {
     width: var(--hds-app-sidenav-width-expanded);
   }
 }
@@ -160,6 +102,15 @@
   padding-right: var(--token-side-nav-wrapper-padding-horizontal);
   padding-bottom: 8px; // by design
   padding-left: var(--token-side-nav-wrapper-padding-horizontal);
+  transition:
+    padding var(--hds-app-sidenav-animation-duration)
+    var(--hds-app-sidenav-animation-easing);
+
+  .hds-side-nav--is-minimized & {
+    padding-top: var(--token-side-nav-wrapper-padding-vertical-minimized);
+    padding-right: var(--token-side-nav-wrapper-padding-horizontal-minimized);
+    padding-left: var(--token-side-nav-wrapper-padding-horizontal-minimized);
+  }
 }
 
 .hds-side-nav__wrapper-body {
@@ -187,10 +138,9 @@
 // - shown (transitioning their opacity) when the sidenav is "expanded"
 
 .hds-side-nav-hide-when-minimized {
-  .hds-side-nav--is-mobile.hds-side-nav--is-minimized & {
+  .hds-side-nav--is-minimized & {
     visibility: hidden !important; // we need `!important` here to override the inline style applied to the single panels
     opacity: 0;
-    transition: none;
     // 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
@@ -206,8 +156,7 @@
     pointer-events: none;
   }
 
-  .hds-side-nav--is-mobile.hds-side-nav--is-not-minimized &,
-  .hds-side-nav--is-desktop & {
+  .hds-side-nav--is-not-minimized & {
     visibility: visible;
     opacity: 1;
     transition:

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

@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// SIDE-NAV > TOGGLE BUTTON
+//
+
+
+.hds-side-nav__toggle-button {
+  position: absolute;
+  top: 22px;
+  left: calc(var(--token-side-nav-wrapper-border-width) * -1);
+  z-index: 1;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  width: 26px;
+  height: 36px;
+  padding: 0 4px;
+  color: var(--token-color-foreground-high-contrast);
+  background: none;
+  background-color: var(--token-side-nav-color-surface-primary);
+  border: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color);
+  border-left-color: transparent;
+  border-top-right-radius: var(--token-side-nav-toggle-button-border-radius);
+  border-bottom-right-radius: var(--token-side-nav-toggle-button-border-radius);
+  transform: translateX(var(--hds-app-sidenav-width-expanded));
+  cursor: pointer;
+  transition:
+    transform var(--hds-app-sidenav-animation-duration)
+    var(--hds-app-sidenav-animation-easing),
+    width var(--hds-app-sidenav-animation-duration)
+    var(--hds-app-sidenav-animation-easing);
+
+  &::before {
+    position: absolute;
+    top: calc(var(--token-side-nav-toggle-button-border-radius) * -2);
+    left: calc(var(--token-side-nav-wrapper-border-width) * -1);
+    box-sizing: border-box;
+    width: calc(var(--token-side-nav-toggle-button-border-radius) * 2);
+    height: calc(var(--token-side-nav-toggle-button-border-radius) * 2);
+    border-bottom: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color);
+    border-left: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color);
+    border-bottom-left-radius: var(--token-side-nav-toggle-button-border-radius);
+    box-shadow: 0 var(--token-side-nav-toggle-button-border-radius) 0 var(--token-side-nav-color-surface-primary);
+    content: "";
+  }
+
+  &::after {
+    position: absolute;
+    bottom: calc(var(--token-side-nav-toggle-button-border-radius) * -2);
+    left: calc(var(--token-side-nav-wrapper-border-width) * -1);
+    box-sizing: border-box;
+    width: calc(var(--token-side-nav-toggle-button-border-radius) * 2);
+    height: calc(var(--token-side-nav-toggle-button-border-radius) * 2);
+    border-top: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color);
+    border-left: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color);
+    border-top-left-radius: var(--token-side-nav-toggle-button-border-radius);
+    box-shadow: 0 calc(var(--token-side-nav-toggle-button-border-radius) * -1) 0 var(--token-side-nav-color-surface-primary);
+    content: "";
+  }
+
+  &:hover,
+  &.mock-hover {
+    width: 30px;
+    background-color: var(--token-side-nav-color-surface-interactive-hover);
+
+    &::before {
+      box-shadow: 0 var(--token-side-nav-toggle-button-border-radius) 0 var(--token-side-nav-color-surface-interactive-hover);
+    }
+
+    &::after {
+      box-shadow: 0 calc(var(--token-side-nav-toggle-button-border-radius) * -1) 0 var(--token-side-nav-color-surface-interactive-hover);
+    }
+  }
+
+  &:active,
+  &.mock-active {
+    background-color: var(--token-side-nav-color-surface-interactive-active);
+
+    &::before {
+      box-shadow: 0 var(--token-side-nav-toggle-button-border-radius) 0 var(--token-side-nav-color-surface-interactive-active);
+    }
+
+    &::after {
+      box-shadow: 0 calc(var(--token-side-nav-toggle-button-border-radius) * -1) 0 var(--token-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-side-nav--is-minimized & {
+    transform: translateX(var(--hds-app-sidenav-width-minimized));
+  }
+}

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

@@ -16,13 +16,11 @@
   // breakpoint
   --hds-app-desktop-breakpoint: 1088px; // this is used only to read its value via JS and set the `hds-side-nav--is-desktop` class
   // widths
-  --hds-app-sidenav-width-minimized: 80px;
+  --hds-app-sidenav-width-minimized: 48px;
   --hds-app-sidenav-width-expanded: 280px;
   --hds-app-sidenav-width-fixed: var(--hds-app-sidenav-width-expanded);
-  // sidebar menu
-  --hds-app-sidenav-menu-button-y-shift: 84px;
   // animation
-  --hds-app-sidenav-animation-duration: 250ms;
+  --hds-app-sidenav-animation-duration: 200ms;
   --hds-app-sidenav-animation-delay: var(--hds-app-sidenav-animation-duration);
   --hds-app-sidenav-animation-easing: cubic-bezier(0.65, 0, 0.35, 1);
 }

package/app/styles/components/tag.scss

@@ -29,7 +29,7 @@ $hds-tag-border-radius: 50px;
 .hds-tag__dismiss {
   flex: 0 0 auto;
   margin: 0; // reset default button margin
-  padding: 6px 2px 6px 8px;
+  padding: 6px 4px 6px 8px;
   border: none; // reset default button border
   border-radius: inherit;
   border-top-right-radius: 0;

package/blueprints/hds-component-test/files/tests/acceptance/components/hds/__name__.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { visit } from '@ember/test-helpers';
+import { setupApplicationTest } from 'dummy/tests/helpers';
+import { a11yAudit } from 'ember-a11y-testing/test-support';
+
+module('Acceptance | components/<%= dasherizedModuleName %>', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('Components/<%= dasherizedModuleName %> page passes automated a11y checks', async function (assert) {
+    await visit('/components/<%= dasherizedModuleName %>');
+
+    await a11yAudit();
+
+    assert.ok(true, 'a11y automation audit passed');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "2.12.2",
+  "version": "2.13.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@ember/render-modifiers": "^2.0.5",
     "@ember/test-waiters": "^3.0.2",
-    "@hashicorp/design-system-tokens": "^1.8.0",
+    "@hashicorp/design-system-tokens": "^1.9.0",
     "@hashicorp/ember-flight-icons": "^3.1.3",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",