@hashicorp/design-system-components 4.10.0 → 4.12.0

package/dist/styles/components/dialog-primitive.scss

@@ -13,17 +13,17 @@ $hds-dialog-primitive-vertical-padding: 16px;
 
 // WRAPPER CONTAINER (<dialog>)
 
-// The special declaration below is used to allow the `<dialog>` to unset
-// all its predefined styles and set them at `Modal/Flyout` level
+// The special declaration below is used to override the `<dialog>` predefined styles
+// Note: some of these style will then be set (again) at `Modal/Flyout` level too
 //
 // Since the `:where()` selector has a specificity of `0` (see https://developer.mozilla.org/en-US/docs/Web/CSS/:where)
 // the styles declared below are applied to the `<dialog>` element, but are overwritten by any other style applied via classname
 //
 
 :where(.hds-dialog-primitive__wrapper) {
-  // -----------
-  all: unset; // removes default dialog & inherited styles. Must be the first style to be applied
-  // -----------
+  // override default `<dialog>` styles
+  position: initial;
+  inset: initial;
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -31,6 +31,7 @@ $hds-dialog-primitive-vertical-padding: 16px;
   margin: 0;
   padding: 0;
   background: var(--token-color-surface-primary);
+  border: none;
 }
 
 

package/dist/styles/components/form/masked-input.scss

@@ -19,6 +19,7 @@ $hds-form-masked-input-button-size: 24px;
   .hds-form-masked-input__control {
     grid-area: input;
     padding-right: calc(var(--token-form-control-padding) + $hds-form-masked-input-button-size);
+    scrollbar-width: thin;
   }
 }
 

package/dist/styles/components/form/radio-card.scss

@@ -7,7 +7,6 @@
 // FORM > RADIO-CARD
 //
 
-
 // RadioCard Group
 
 .hds-form-group--radio-cards {
@@ -38,7 +37,8 @@
   display: flex;
   flex-direction: column;
   background-color: var(--token-color-surface-primary);
-  border: var(--token-form-radiocard-border-width) solid var(--token-color-border-primary);
+  border: var(--token-form-radiocard-border-width) solid
+    var(--token-color-border-primary);
   border-radius: var(--token-form-radiocard-border-radius);
   box-shadow: var(--token-elevation-mid-box-shadow);
   cursor: pointer;
@@ -64,12 +64,17 @@
 
   &--checked,
   &.mock-checked {
-    border-color: var(--token-color-focus-action-internal);
+    border-color: var(--token-color-palette-blue-300);
 
     .hds-form-radio-card__control-wrapper {
       background-color: var(--token-color-surface-action);
       border-color: var(--token-color-border-action);
     }
+
+    &:hover,
+    &.mock-hover {
+      border-color: var(--token-color-palette-blue-400);
+    }
   }
 
   &--disabled,
@@ -83,6 +88,10 @@
       background-color: var(--token-color-surface-interactive-disabled);
       border-color: var(--token-color-border-primary);
     }
+
+    .hds-form-radio-card__content {
+      opacity: 0.5;
+    }
   }
 }
 

package/dist/styles/components/stepper/step-indicator.scss

@@ -7,7 +7,12 @@
 // STEPPER > INDICATOR > STEP
 //
 
-$hds-stepper-indicator-step-statuses: ( "incomplete", "progress", "processing", "complete" );
+$hds-stepper-indicator-step-statuses: (
+  "incomplete",
+  "progress",
+  "processing",
+  "complete"
+);
 $hds-stepper-indicator-step-size: 24px;
 
 // Base stepper indicator styling
@@ -72,19 +77,31 @@ $hds-stepper-indicator-step-non-interactive-props: (
     "text-color": var(--token-color-foreground-high-contrast),
     "fill-color": var(--token-color-foreground-strong),
     "stroke-color": var(--token-color-foreground-strong),
-  )
+  ),
 );
 
 @each $status in $hds-stepper-indicator-step-statuses {
   // For each status of the non-interactive variant, set the text color, svg fill, and svg stroke colors based on $non-interactive-props
   .hds-stepper-indicator-step--status-#{$status} {
     .hds-stepper-indicator-step__status {
-      color: map-get($hds-stepper-indicator-step-non-interactive-props, $status, "text-color");
+      color: map-get(
+        $hds-stepper-indicator-step-non-interactive-props,
+        $status,
+        "text-color"
+      );
     }
 
     .hds-stepper-indicator-step__svg-hexagon path {
-      fill: map-get($hds-stepper-indicator-step-non-interactive-props, $status, "fill-color");
-      stroke: map-get($hds-stepper-indicator-step-non-interactive-props, $status, "stroke-color");
+      fill: map-get(
+        $hds-stepper-indicator-step-non-interactive-props,
+        $status,
+        "fill-color"
+      );
+      stroke: map-get(
+        $hds-stepper-indicator-step-non-interactive-props,
+        $status,
+        "stroke-color"
+      );
     }
   }
 }
@@ -120,7 +137,7 @@ $hds-stepper-indicator-step-status-props: (
   ),
   "complete": (
     "text-color-default": var(--token-color-palette-blue-200),
-    "fill-color-default": var(--token-color-palette-blue-50),
+    "fill-color-default": var(--token-color-surface-action),
     "stroke-color-default": var(--token-color-palette-blue-300),
     "text-color-hover": var(--token-color-palette-blue-300),
     "fill-color-hover": var(--token-color-palette-blue-100),
@@ -128,7 +145,7 @@ $hds-stepper-indicator-step-status-props: (
     "text-color-active": var(--token-color-palette-blue-400),
     "fill-color-active": var(--token-color-palette-blue-100),
     "stroke-color-active": var(--token-color-palette-blue-400),
-  )
+  ),
 );
 
 .hds-stepper-indicator-step--is-interactive {
@@ -138,24 +155,48 @@ $hds-stepper-indicator-step-status-props: (
     // For each status set the text, svg fill, and svg stroke color based on $hds-stepper-indicator-step-status-props
     &.hds-stepper-indicator-step--status-#{$status} {
       .hds-stepper-indicator-step__status {
-        color: map-get($hds-stepper-indicator-step-status-props, $status, "text-color-default");
+        color: map-get(
+          $hds-stepper-indicator-step-status-props,
+          $status,
+          "text-color-default"
+        );
       }
 
       .hds-stepper-indicator-step__svg-hexagon path {
-        fill: map-get($hds-stepper-indicator-step-status-props, $status, "fill-color-default");
-        stroke: map-get($hds-stepper-indicator-step-status-props, $status, "stroke-color-default");
+        fill: map-get(
+          $hds-stepper-indicator-step-status-props,
+          $status,
+          "fill-color-default"
+        );
+        stroke: map-get(
+          $hds-stepper-indicator-step-status-props,
+          $status,
+          "stroke-color-default"
+        );
       }
 
       &:hover,
       &.mock-hover {
         .hds-stepper-indicator-step__status {
-          color: map-get($hds-stepper-indicator-step-status-props, $status, "text-color-hover");
+          color: map-get(
+            $hds-stepper-indicator-step-status-props,
+            $status,
+            "text-color-hover"
+          );
         }
 
         .hds-stepper-indicator-step__svg-hexagon {
           path {
-            fill: map-get($hds-stepper-indicator-step-status-props, $status, "fill-color-hover");
-            stroke: map-get($hds-stepper-indicator-step-status-props, $status, "stroke-color-hover");
+            fill: map-get(
+              $hds-stepper-indicator-step-status-props,
+              $status,
+              "fill-color-hover"
+            );
+            stroke: map-get(
+              $hds-stepper-indicator-step-status-props,
+              $status,
+              "stroke-color-hover"
+            );
           }
         }
       }
@@ -163,13 +204,25 @@ $hds-stepper-indicator-step-status-props: (
       &:active,
       &.mock-active {
         .hds-stepper-indicator-step__status {
-          color: map-get($hds-stepper-indicator-step-status-props, $status, "text-color-active");
+          color: map-get(
+            $hds-stepper-indicator-step-status-props,
+            $status,
+            "text-color-active"
+          );
         }
 
         .hds-stepper-indicator-step__svg-hexagon {
           path {
-            fill: map-get($hds-stepper-indicator-step-status-props, $status, "fill-color-active");
-            stroke: map-get($hds-stepper-indicator-step-status-props, $status, "stroke-color-active");
+            fill: map-get(
+              $hds-stepper-indicator-step-status-props,
+              $status,
+              "fill-color-active"
+            );
+            stroke: map-get(
+              $hds-stepper-indicator-step-status-props,
+              $status,
+              "stroke-color-active"
+            );
           }
         }
       }

package/dist/utils/hds-aria-described-by.js

@@ -63,10 +63,12 @@ function synchronizeDescriptors(component) {
 }
 function registerAriaDescriptionElement(component, element) {
   ariaDescriptorMap.register(component, element);
+  // eslint-disable-next-line ember/no-runloop
   scheduleOnce('afterRender', component, synchronizeDescriptors, component);
 }
 function unregisterAriaDescriptionElement(component, element) {
   ariaDescriptorMap.unregister(component, element);
+  // eslint-disable-next-line ember/no-runloop
   scheduleOnce('afterRender', component, synchronizeDescriptors, component);
 }
 

package/dist/utils/hds-aria-described-by.js.map

@@ -1 +1 @@
-{"version":3,"file":"hds-aria-described-by.js","sources":["../../src/utils/hds-aria-described-by.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport { tracked } from '@glimmer/tracking';\nimport { scheduleOnce } from '@ember/runloop';\nimport type Component from '@glimmer/component';\nimport type { HdsFormFieldSignature } from '../components/hds/form/field/';\nimport type { HdsFormFieldsetSignature } from '../components/hds/form/fieldset/';\n\ntype ElementSet = Set<HTMLElement>;\n\nclass AriaDescriptorMap {\n  private _elements = new WeakMap<AriaDescribedByComponent, ElementSet>();\n\n  register(obj: AriaDescribedByComponent, element: HTMLElement): void {\n    const elements = this.findOrCreateElementSet(obj);\n    elements.add(element);\n  }\n\n  unregister(obj: AriaDescribedByComponent, element: HTMLElement): void {\n    const elements = this.findOrCreateElementSet(obj);\n    elements.delete(element);\n  }\n\n  entries(obj: AriaDescribedByComponent): HTMLElement[] {\n    const elements = this.findOrCreateElementSet(obj);\n    return Array.from(elements.values());\n  }\n\n  private findOrCreateElementSet(obj: AriaDescribedByComponent): ElementSet {\n    if (this._elements.has(obj)) {\n      return this._elements.get(obj) as ElementSet;\n    }\n\n    const elements: ElementSet = new Set();\n    this._elements.set(obj, elements);\n    return elements;\n  }\n}\n\nconst ariaDescriptorMap = new AriaDescriptorMap();\n\ntype AriaDescribedByArgs = HdsFormFieldSignature | HdsFormFieldsetSignature;\n\nexport interface AriaDescribedByComponent\n  extends Component<AriaDescribedByArgs> {\n  __ARIA_DESCRIPTION_IDS__?: string[];\n  ariaDescribedBy?: string;\n}\n\n// essentially a type that says we return a subclass of the given type T\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype ClassOf<T> = new (owner: unknown, ...args: any[]) => T;\n\nexport function ariaDescribedBy(\n  BaseComponent: ClassOf<AriaDescribedByComponent>\n): ClassOf<AriaDescribedByComponent> {\n  class EnhancedComponent extends BaseComponent {\n    @tracked __ARIA_DESCRIPTION_IDS__: string[] = [];\n\n    get ariaDescribedBy(): string {\n      let descriptors = this.__ARIA_DESCRIPTION_IDS__;\n\n      if (this.args.extraAriaDescribedBy) {\n        descriptors = descriptors.concat(this.args.extraAriaDescribedBy);\n      }\n\n      return descriptors.join(' ');\n    }\n  }\n  return EnhancedComponent;\n}\n\nfunction synchronizeDescriptors(component: AriaDescribedByComponent): void {\n  if (component.isDestroying || component.isDestroyed) return;\n  const descriptors = ariaDescriptorMap.entries(component);\n  component.__ARIA_DESCRIPTION_IDS__ = descriptors.map(\n    (element): string => element.id\n  );\n}\n\nexport function registerAriaDescriptionElement(\n  component: AriaDescribedByComponent,\n  element: HTMLElement\n): void {\n  ariaDescriptorMap.register(component, element);\n  scheduleOnce('afterRender', component, synchronizeDescriptors, component);\n}\n\nexport function unregisterAriaDescriptionElement(\n  component: AriaDescribedByComponent,\n  element: HTMLElement\n): void {\n  ariaDescriptorMap.unregister(component, element);\n  scheduleOnce('afterRender', component, synchronizeDescriptors, component);\n}\n"],"names":["AriaDescriptorMap","constructor","_defineProperty","WeakMap","register","obj","element","elements","findOrCreateElementSet","add","unregister","delete","entries","Array","from","values","_elements","has","get","Set","set","ariaDescriptorMap","ariaDescribedBy","BaseComponent","_class","_descriptor","EnhancedComponent","args","_initializerDefineProperty","descriptors","__ARIA_DESCRIPTION_IDS__","extraAriaDescribedBy","concat","join","_applyDecoratedDescriptor","prototype","tracked","configurable","enumerable","writable","initializer","synchronizeDescriptors","component","isDestroying","isDestroyed","map","id","registerAriaDescriptionElement","scheduleOnce","unregisterAriaDescriptionElement"],"mappings":"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"}
+{"version":3,"file":"hds-aria-described-by.js","sources":["../../src/utils/hds-aria-described-by.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport { tracked } from '@glimmer/tracking';\nimport { scheduleOnce } from '@ember/runloop';\nimport type Component from '@glimmer/component';\nimport type { HdsFormFieldSignature } from '../components/hds/form/field/';\nimport type { HdsFormFieldsetSignature } from '../components/hds/form/fieldset/';\n\ntype ElementSet = Set<HTMLElement>;\n\nclass AriaDescriptorMap {\n  private _elements = new WeakMap<AriaDescribedByComponent, ElementSet>();\n\n  register(obj: AriaDescribedByComponent, element: HTMLElement): void {\n    const elements = this.findOrCreateElementSet(obj);\n    elements.add(element);\n  }\n\n  unregister(obj: AriaDescribedByComponent, element: HTMLElement): void {\n    const elements = this.findOrCreateElementSet(obj);\n    elements.delete(element);\n  }\n\n  entries(obj: AriaDescribedByComponent): HTMLElement[] {\n    const elements = this.findOrCreateElementSet(obj);\n    return Array.from(elements.values());\n  }\n\n  private findOrCreateElementSet(obj: AriaDescribedByComponent): ElementSet {\n    if (this._elements.has(obj)) {\n      return this._elements.get(obj) as ElementSet;\n    }\n\n    const elements: ElementSet = new Set();\n    this._elements.set(obj, elements);\n    return elements;\n  }\n}\n\nconst ariaDescriptorMap = new AriaDescriptorMap();\n\ntype AriaDescribedByArgs = HdsFormFieldSignature | HdsFormFieldsetSignature;\n\nexport interface AriaDescribedByComponent\n  extends Component<AriaDescribedByArgs> {\n  __ARIA_DESCRIPTION_IDS__?: string[];\n  ariaDescribedBy?: string;\n}\n\n// essentially a type that says we return a subclass of the given type T\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype ClassOf<T> = new (owner: unknown, ...args: any[]) => T;\n\nexport function ariaDescribedBy(\n  BaseComponent: ClassOf<AriaDescribedByComponent>\n): ClassOf<AriaDescribedByComponent> {\n  class EnhancedComponent extends BaseComponent {\n    @tracked __ARIA_DESCRIPTION_IDS__: string[] = [];\n\n    get ariaDescribedBy(): string {\n      let descriptors = this.__ARIA_DESCRIPTION_IDS__;\n\n      if (this.args.extraAriaDescribedBy) {\n        descriptors = descriptors.concat(this.args.extraAriaDescribedBy);\n      }\n\n      return descriptors.join(' ');\n    }\n  }\n  return EnhancedComponent;\n}\n\nfunction synchronizeDescriptors(component: AriaDescribedByComponent): void {\n  if (component.isDestroying || component.isDestroyed) return;\n  const descriptors = ariaDescriptorMap.entries(component);\n  component.__ARIA_DESCRIPTION_IDS__ = descriptors.map(\n    (element): string => element.id\n  );\n}\n\nexport function registerAriaDescriptionElement(\n  component: AriaDescribedByComponent,\n  element: HTMLElement\n): void {\n  ariaDescriptorMap.register(component, element);\n  // eslint-disable-next-line ember/no-runloop\n  scheduleOnce('afterRender', component, synchronizeDescriptors, component);\n}\n\nexport function unregisterAriaDescriptionElement(\n  component: AriaDescribedByComponent,\n  element: HTMLElement\n): void {\n  ariaDescriptorMap.unregister(component, element);\n  // eslint-disable-next-line ember/no-runloop\n  scheduleOnce('afterRender', component, synchronizeDescriptors, component);\n}\n"],"names":["AriaDescriptorMap","constructor","_defineProperty","WeakMap","register","obj","element","elements","findOrCreateElementSet","add","unregister","delete","entries","Array","from","values","_elements","has","get","Set","set","ariaDescriptorMap","ariaDescribedBy","BaseComponent","_class","_descriptor","EnhancedComponent","args","_initializerDefineProperty","descriptors","__ARIA_DESCRIPTION_IDS__","extraAriaDescribedBy","concat","join","_applyDecoratedDescriptor","prototype","tracked","configurable","enumerable","writable","initializer","synchronizeDescriptors","component","isDestroying","isDestroyed","map","id","registerAriaDescriptionElement","scheduleOnce","unregisterAriaDescriptionElement"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "4.10.0",
+  "version": "4.12.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -21,7 +21,9 @@
     "build:js": "rollup --config",
     "build:types": "glint --declaration",
     "prepublishOnly": "yarn build && test -f 'dist/styles/@hashicorp/design-system-components.css' || (echo 'The pre-compiled CSS file was not found' && exit 1)",
-    "start": "rollup --config --watch --environment development",
+    "start": "concurrently 'yarn:start:*'",
+    "start:js": "rollup --config --watch --environment development",
+    "start:types": "glint --declaration --watch",
     "lint": "concurrently \"yarn:lint:*(!fix)\" --names \"lint:\"",
     "lint:fix": "concurrently \"yarn:lint:*:fix\" --names \"fix:\"",
     "lint:css": "stylelint \"src/styles/**/*.scss\"",
@@ -39,7 +41,7 @@
     "@embroider/addon-shim": "^1.8.7",
     "@floating-ui/dom": "^1.6.3",
     "@hashicorp/design-system-tokens": "^2.2.1",
-    "@hashicorp/flight-icons": "^3.5.0",
+    "@hashicorp/flight-icons": "^3.6.0",
     "decorator-transforms": "^1.1.0",
     "ember-a11y-refocus": "^4.1.3",
     "ember-cli-sass": "^11.0.1",
@@ -47,7 +49,6 @@
     "ember-element-helper": "^0.8.5",
     "ember-focus-trap": "^1.1.0",
     "ember-get-config": "^2.1.1",
-    "ember-keyboard": "^8.2.1",
     "ember-modifier": "^4.1.0",
     "ember-power-select": "^8.2.0",
     "ember-stargate": "^0.4.3",
@@ -79,8 +80,8 @@
     "@types/prismjs": "^1.26.4",
     "@types/qunit": "^2.19.10",
     "@types/rsvp": "^4.0.9",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^8.5.0",
+    "@typescript-eslint/parser": "^8.5.0",
     "babel-plugin-ember-template-compilation": "^2.2.4",
     "concurrently": "^8.2.2",
     "ember-basic-dropdown": "^8.1.0",
@@ -89,7 +90,7 @@
     "ember-template-lint-plugin-prettier": "^5.0.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-ember": "^11.12.0",
+    "eslint-plugin-ember": "^12.2.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-n": "^17.7.0",
     "eslint-plugin-prettier": "^5.1.3",
@@ -290,6 +291,7 @@
       "./components/hds/yield/index.js": "./dist/_app_/components/hds/yield/index.js",
       "./helpers/hds-link-to-models.js": "./dist/_app_/helpers/hds-link-to-models.js",
       "./helpers/hds-link-to-query.js": "./dist/_app_/helpers/hds-link-to-query.js",
+      "./instance-initializers/load-sprite.js": "./dist/_app_/instance-initializers/load-sprite.js",
       "./modifiers/hds-anchored-position.js": "./dist/_app_/modifiers/hds-anchored-position.js",
       "./modifiers/hds-clipboard.js": "./dist/_app_/modifiers/hds-clipboard.js",
       "./modifiers/hds-register-event.js": "./dist/_app_/modifiers/hds-register-event.js",