@hashicorp/design-system-components 4.23.0 → 4.23.1

package/dist/components/hds/stepper/nav/index.js

@@ -11,7 +11,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { g, i, n } from 'decorator-transforms/runtime';
 import { setComponentTemplate } from '@ember/component';
 
-var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<div class={{this.classNames}} ...attributes {{style this.inlineStyles}} {{this._setUpStepperNav}}>\n  <ol class=\"hds-stepper-nav__list\" aria-label={{@ariaLabel}} role={{if this.isInteractive \"tablist\"}}>\n    {{#if @steps}}\n      {{#each @steps as |step|}}\n        <Hds::Stepper::Nav::Step\n          @currentStep={{this.currentStep}}\n          @isNavInteractive={{this.isInteractive}}\n          @titleTag={{this.titleTag}}\n          @didInsertNode={{this.didInsertStep}}\n          @willDestroyNode={{this.willDestroyStep}}\n          @stepIds={{this._stepIds}}\n          @panelIds={{this._panelIds}}\n          @onStepChange={{@onStepChange}}\n          @onKeyUp={{this.onKeyUp}}\n        >\n          <:title>{{step.title}}</:title>\n          <:description>{{step.description}}</:description>\n        </Hds::Stepper::Nav::Step>\n      {{/each}}\n    {{else}}\n      {{yield\n        (hash\n          Step=(component\n            \"hds/stepper/nav/step\"\n            currentStep=this.currentStep\n            isNavInteractive=this.isInteractive\n            titleTag=this.titleTag\n            stepIds=this._stepIds\n            panelIds=this._panelIds\n            didInsertNode=this.didInsertStep\n            willDestroyNode=this.willDestroyStep\n            onStepChange=@onStepChange\n            onKeyUp=this.onKeyUp\n          )\n        )\n      }}\n    {{/if}}\n  </ol>\n  {{#if (and @steps (has-block \"body\"))}}\n    {{#each @steps}}\n      <Hds::Stepper::Nav::Panel\n        @currentStep={{this.currentStep}}\n        @isNavInteractive={{this.isInteractive}}\n        @stepIds={{this._stepIds}}\n        @panelIds={{this._panelIds}}\n        @didInsertNode={{this.didInsertPanel}}\n        @willDestroyNode={{this.willDestroyPanel}}\n      >\n        {{yield to=\"body\"}}\n      </Hds::Stepper::Nav::Panel>\n    {{/each}}\n  {{else}}\n    {{yield\n      (hash\n        Panel=(component\n          \"hds/stepper/nav/panel\"\n          currentStep=this.currentStep\n          isNavInteractive=this.isInteractive\n          stepIds=this._stepIds\n          panelIds=this._panelIds\n          didInsertNode=this.didInsertPanel\n          willDestroyNode=this.willDestroyPanel\n        )\n      )\n    }}\n  {{/if}}\n</div>");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<div class={{this.classNames}} ...attributes {{style this.inlineStyles}} {{this._setUpStepperNav}}>\n  <div class=\"hds-stepper-nav__progress-bar\"></div>\n  <ol class=\"hds-stepper-nav__list\" aria-label={{@ariaLabel}} role={{if this.isInteractive \"tablist\"}}>\n    {{#if @steps}}\n      {{#each @steps as |step|}}\n        <Hds::Stepper::Nav::Step\n          @currentStep={{this.currentStep}}\n          @isNavInteractive={{this.isInteractive}}\n          @titleTag={{this.titleTag}}\n          @didInsertNode={{this.didInsertStep}}\n          @willDestroyNode={{this.willDestroyStep}}\n          @stepIds={{this._stepIds}}\n          @panelIds={{this._panelIds}}\n          @onStepChange={{@onStepChange}}\n          @onKeyUp={{this.onKeyUp}}\n        >\n          <:title>{{step.title}}</:title>\n          <:description>{{step.description}}</:description>\n        </Hds::Stepper::Nav::Step>\n      {{/each}}\n    {{else}}\n      {{yield\n        (hash\n          Step=(component\n            \"hds/stepper/nav/step\"\n            currentStep=this.currentStep\n            isNavInteractive=this.isInteractive\n            titleTag=this.titleTag\n            stepIds=this._stepIds\n            panelIds=this._panelIds\n            didInsertNode=this.didInsertStep\n            willDestroyNode=this.willDestroyStep\n            onStepChange=@onStepChange\n            onKeyUp=this.onKeyUp\n          )\n        )\n      }}\n    {{/if}}\n  </ol>\n  {{#if (and @steps (has-block \"body\"))}}\n    {{#each @steps}}\n      <Hds::Stepper::Nav::Panel\n        @currentStep={{this.currentStep}}\n        @isNavInteractive={{this.isInteractive}}\n        @stepIds={{this._stepIds}}\n        @panelIds={{this._panelIds}}\n        @didInsertNode={{this.didInsertPanel}}\n        @willDestroyNode={{this.willDestroyPanel}}\n      >\n        {{yield to=\"body\"}}\n      </Hds::Stepper::Nav::Panel>\n    {{/each}}\n  {{else}}\n    {{yield\n      (hash\n        Panel=(component\n          \"hds/stepper/nav/panel\"\n          currentStep=this.currentStep\n          isNavInteractive=this.isInteractive\n          stepIds=this._stepIds\n          panelIds=this._panelIds\n          didInsertNode=this.didInsertPanel\n          willDestroyNode=this.willDestroyPanel\n        )\n      )\n    }}\n  {{/if}}\n</div>");
 
 /**
  * Copyright (c) HashiCorp, Inc.

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

@@ -8919,11 +8919,11 @@ button.hds-button[href]::after {
   stroke: var(--token-color-palette-blue-400);
 }
 
-.hds-stepper-nav {
+.hds-stepper-nav__progress-bar {
   position: relative;
   isolation: isolate;
 }
-.hds-stepper-nav::before, .hds-stepper-nav::after {
+.hds-stepper-nav__progress-bar::before, .hds-stepper-nav__progress-bar::after {
   position: absolute;
   top: -4px;
   left: 0;
@@ -8931,17 +8931,17 @@ button.hds-button[href]::after {
   height: 4px;
   content: "";
 }
-.hds-stepper-nav::before {
+.hds-stepper-nav__progress-bar::before {
   width: 100%;
   background: linear-gradient(0deg, var(--token-color-palette-alpha-200) 0%, var(--token-color-palette-alpha-200) 100%), var(--token-color-palette-neutral-100);
 }
-.hds-stepper-nav::after {
+.hds-stepper-nav__progress-bar::after {
   width: var(--hds-stepper-nav-progress-bar-width, 0);
   background-color: var(--token-color-palette-neutral-700);
   border-radius: 0 var(--token-border-radius-x-small) var(--token-border-radius-x-small) 0;
 }
 @media (prefers-reduced-motion: no-preference) {
-  .hds-stepper-nav::after {
+  .hds-stepper-nav__progress-bar::after {
     transition: width 0.25s ease-in-out;
   }
 }
@@ -9021,7 +9021,7 @@ button.hds-button[href]::after {
   }
 }
 
-.hds-stepper-nav--interactive::after {
+.hds-stepper-nav--interactive .hds-stepper-nav__progress-bar::after {
   background-color: var(--token-color-palette-blue-200);
 }
 .hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-title,
@@ -9291,7 +9291,7 @@ button.hds-button[href]::after {
 }
 
 @media screen and (max-width: 479.98px) {
-  .hds-stepper-nav::before, .hds-stepper-nav::after {
+  .hds-stepper-nav__progress-bar::before, .hds-stepper-nav__progress-bar::after {
     content: none;
   }
   .hds-stepper-nav__list {

package/dist/styles/components/stepper/nav.scss

@@ -14,7 +14,7 @@
 
 $progress-bar-animation-duration: 0.25s;
 
-.hds-stepper-nav {
+.hds-stepper-nav__progress-bar {
   position: relative;
   isolation: isolate;
 
@@ -137,7 +137,7 @@ $progress-bar-animation-duration: 0.25s;
 // NAV INTERACTIVE
 
 .hds-stepper-nav--interactive {
-  &::after {
+  .hds-stepper-nav__progress-bar::after {
     background-color: var(--token-color-palette-blue-200);
   }
 
@@ -292,7 +292,7 @@ $progress-bar-animation-duration: 0.25s;
 // MOBILE
 
 @include hds-breakpoint-below("sm") {
-  .hds-stepper-nav {
+  .hds-stepper-nav__progress-bar {
     &::before,
     &::after {
       content: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "4.23.0",
+  "version": "4.23.1",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -35,7 +35,7 @@
     "@embroider/macros": "^1.18.1",
     "@embroider/util": "^1.13.4",
     "@floating-ui/dom": "^1.6.12",
-    "@hashicorp/design-system-tokens": "^2.3.0",
+    "@hashicorp/design-system-tokens": "^2.3.1",
     "@hashicorp/flight-icons": "^3.13.0",
     "@lezer/highlight": "^1.2.1",
     "@nullvoxpopuli/ember-composable-helpers": "^5.2.11",