@hashicorp/design-system-components 4.5.2 → 4.6.0

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

@@ -779,29 +779,83 @@
 .hds-accordion {
   display: flex;
   flex-direction: column;
+}
+
+.hds-accordion--type-card.hds-accordion--size-small {
+  gap: 4px;
+}
+.hds-accordion--type-card.hds-accordion--size-medium {
+  gap: 8px;
+}
+.hds-accordion--type-card.hds-accordion--size-large {
   gap: 12px;
 }
 
-.hds-accordion-item {
+.hds-accordion-item--size-small {
+  --hds-accordion-item-toggle-padding: 8px;
+  --hds-accordion-item-toggle-padding-left: 8px;
+  --hds-accordion-item-content-padding-top: 4px;
+  --hds-accordion-item-content-padding-right: 8px;
+  --hds-accordion-item-content-padding-bottom: 8px;
+  --hds-accordion-item-content-padding-left: 12px;
+  --hds-accordion-item-gap: 8px;
+  --hds-accordion-item-icon-size: 16px;
+}
+
+.hds-accordion-item--size-medium {
+  --hds-accordion-item-toggle-padding: 12px;
+  --hds-accordion-item-toggle-padding-left: 8px;
+  --hds-accordion-item-content-padding-top: 4px;
+  --hds-accordion-item-content-padding-right: 12px;
+  --hds-accordion-item-content-padding-bottom: 12px;
+  --hds-accordion-item-content-padding-left: 12px;
+  --hds-accordion-item-gap: 12px;
+  --hds-accordion-item-icon-size: 20px;
+}
+
+.hds-accordion-item--size-large {
+  --hds-accordion-item-toggle-padding: 16px;
+  --hds-accordion-item-toggle-padding-left: 12px;
+  --hds-accordion-item-content-padding-top: 4px;
+  --hds-accordion-item-content-padding-right: 16px;
+  --hds-accordion-item-content-padding-bottom: 16px;
+  --hds-accordion-item-content-padding-left: 16px;
+  --hds-accordion-item-gap: 12px;
+  --hds-accordion-item-icon-size: 24px;
+}
+
+.hds-accordion-item--type-card {
+  --hds-accordion-item-focus-ring-offset: 0;
   background: var(--token-color-surface-primary);
   border-radius: 6px;
 }
-.hds-accordion-item.hds-accordion-item--does-not-contain-interactive {
+.hds-accordion-item--type-card.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) {
   box-shadow: var(--token-surface-mid-box-shadow);
 }
-.hds-accordion-item.hds-accordion-item--does-not-contain-interactive:hover, .hds-accordion-item.hds-accordion-item--does-not-contain-interactive.mock-hover {
+.hds-accordion-item--type-card.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static):hover, .hds-accordion-item--type-card.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static).mock-hover {
   box-shadow: var(--token-surface-high-box-shadow);
 }
-.hds-accordion-item.hds-accordion-item--contains-interactive {
+.hds-accordion-item--type-card.hds-accordion-item--contains-interactive, .hds-accordion-item--type-card.hds-accordion-item--is-static {
   box-shadow: var(--token-surface-base-box-shadow);
 }
 
+.hds-accordion-item--type-flush {
+  --hds-accordion-item-focus-ring-offset: 3px;
+  border-bottom: 1px solid var(--token-color-border-primary);
+}
+.hds-accordion-item--type-flush.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) > .hds-disclosure-primitive__toggle:hover .hds-accordion-item__toggle, .hds-accordion-item--type-flush.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) > .hds-disclosure-primitive__toggle.mock-hover .hds-accordion-item__toggle {
+  background: var(--token-color-surface-interactive-hover);
+}
+.hds-accordion-item--type-flush.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) > .hds-disclosure-primitive__toggle:active .hds-accordion-item__toggle, .hds-accordion-item--type-flush.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) > .hds-disclosure-primitive__toggle.mock-active .hds-accordion-item__toggle {
+  background: var(--token-color-surface-interactive-active);
+}
+
 .hds-accordion-item__toggle {
   position: relative;
   display: flex;
-  gap: 12px;
+  gap: var(--hds-accordion-item-gap);
   align-items: center;
-  padding: 16px 16px 16px 12px;
+  padding: var(--hds-accordion-item-toggle-padding) var(--hds-accordion-item-toggle-padding) var(--hds-accordion-item-toggle-padding) var(--hds-accordion-item-toggle-padding-left);
 }
 
 .hds-accordion-item__button {
@@ -810,47 +864,53 @@
 .hds-accordion-item__button:hover {
   cursor: pointer;
 }
-.hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive {
+@media (prefers-reduced-motion: no-preference) {
+  .hds-accordion-item__button .flight-icon {
+    transition: transform 0.3s;
+  }
+}
+.hds-accordion-item--is-static.hds-accordion-item .hds-accordion-item__button {
+  visibility: hidden;
+}
+
+.hds-accordion-item__button--parent-does-not-contain-interactive {
   position: relative;
   outline-style: solid;
   outline-color: transparent;
   isolation: isolate;
   position: static;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   margin: -1px 0;
   color: var(--token-color-foreground-primary);
   background: transparent;
-  border: 1px solid transparent;
+  border: 0;
 }
-.hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive::before {
+.hds-accordion-item__button--parent-does-not-contain-interactive::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  top: var(--hds-accordion-item-focus-ring-offset);
+  right: var(--hds-accordion-item-focus-ring-offset);
+  bottom: var(--hds-accordion-item-focus-ring-offset);
+  left: var(--hds-accordion-item-focus-ring-offset);
   z-index: -1;
   border-radius: 5px;
   content: "";
 }
-.hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive:focus::before, .hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive.mock-focus::before {
+.hds-accordion-item__button--parent-does-not-contain-interactive:focus::before, .hds-accordion-item__button--parent-does-not-contain-interactive.mock-focus::before {
   box-shadow: var(--token-focus-ring-action-box-shadow);
 }
-.hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive:focus:not(:focus-visible)::before {
+.hds-accordion-item__button--parent-does-not-contain-interactive:focus:not(:focus-visible)::before {
   box-shadow: none;
 }
-.hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive:focus-visible::before {
+.hds-accordion-item__button--parent-does-not-contain-interactive:focus-visible::before {
   box-shadow: var(--token-focus-ring-action-box-shadow);
 }
-.hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive:focus:active::before, .hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive.mock-focus.mock-active::before {
+.hds-accordion-item__button--parent-does-not-contain-interactive:focus:active::before, .hds-accordion-item__button--parent-does-not-contain-interactive.mock-focus.mock-active::before {
   box-shadow: none;
 }
-.hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive::after {
-  position: absolute;
-  display: block;
-  border-radius: 6px;
-  content: "";
-  inset: 0;
-}
-.hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive {
+
+.hds-accordion-item__button--parent-contains-interactive {
   position: relative;
   display: flex;
   gap: 0.375rem;
@@ -865,17 +925,15 @@
   outline-style: solid;
   outline-color: transparent;
   isolation: isolate;
-  width: 24px;
-  height: 24px;
   color: var(--token-color-foreground-primary);
   background-color: var(--token-color-surface-faint);
   border-color: var(--token-color-border-strong);
   box-shadow: var(--token-elevation-low-box-shadow);
 }
-.hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive:focus, .hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive.mock-focus {
+.hds-accordion-item__button--parent-contains-interactive:focus, .hds-accordion-item__button--parent-contains-interactive.mock-focus {
   box-shadow: none;
 }
-.hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive.mock-focus::before {
+.hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button--parent-contains-interactive.mock-focus::before {
   position: absolute;
   top: -4px;
   right: -4px;
@@ -886,44 +944,53 @@
   border-radius: 8px;
   content: "";
 }
-.hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive:hover, .hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive.mock-hover {
+.hds-accordion-item__button--parent-contains-interactive:hover, .hds-accordion-item__button--parent-contains-interactive.mock-hover {
   color: var(--token-color-foreground-primary);
   background-color: var(--token-color-surface-primary);
   border-color: var(--token-color-border-strong);
   cursor: pointer;
 }
-.hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive:focus, .hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive.mock-focus {
+.hds-accordion-item__button--parent-contains-interactive:focus, .hds-accordion-item__button--parent-contains-interactive.mock-focus {
   color: var(--token-color-foreground-primary);
   background-color: var(--token-color-surface-faint);
   border-color: var(--token-color-focus-action-internal);
 }
-.hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive.mock-focus::before {
+.hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button--parent-contains-interactive.mock-focus::before {
   border-color: var(--token-color-focus-action-external);
 }
-.hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive:active, .hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive.mock-active {
+.hds-accordion-item__button--parent-contains-interactive:active, .hds-accordion-item__button--parent-contains-interactive.mock-active {
   color: var(--token-color-foreground-primary);
   background-color: var(--token-color-surface-interactive-active);
   border-color: var(--token-color-border-strong);
   box-shadow: none;
 }
-.hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive:active::before, .hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive.mock-active::before {
+.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.hds-accordion-item__button--is-open .flight-icon-chevron-down {
-  transform: rotate(-180deg);
+
+.hds-accordion-item__button {
+  width: var(--hds-accordion-item-icon-size);
+  height: var(--hds-accordion-item-icon-size);
 }
-@media (prefers-reduced-motion: no-preference) {
-  .hds-accordion-item__button .flight-icon-chevron-down {
-    transition: transform 0.3s;
-  }
+
+.hds-accordion-item__button--is-open .flight-icon-chevron-down {
+  transform: rotate(-180deg);
 }
 
 .hds-accordion-item__toggle-content {
   flex: 1;
 }
 
-.hds-accordion-item__content {
-  padding: 4px 16px 16px 16px;
+.hds-accordion-item .hds-accordion-item__content {
+  padding: var(--hds-accordion-item-content-padding-top) var(--hds-accordion-item-content-padding-right) var(--hds-accordion-item-content-padding-bottom) var(--hds-accordion-item-content-padding-left);
+}
+
+.hds-accordion-item--type-flush .hds-accordion-item__content:has(> .hds-accordion--type-flush) {
+  padding: 0 var(--hds-accordion-item-content-padding-right) 0 var(--hds-accordion-item-content-padding-left);
+  border-top: 1px solid var(--token-color-border-primary);
+}
+.hds-accordion-item--type-flush .hds-accordion-item__content:has(> .hds-accordion--type-flush) .hds-accordion-item--type-flush:last-child {
+  border-bottom: none;
 }
 
 /**
@@ -5703,9 +5770,6 @@ button.hds-button[href]::after {
     opacity: 0;
   }
 }
-.hds-rich-tooltip__bubble[popover].\:popover-open {
-  opacity: 1;
-}
 @starting-style {
   .hds-rich-tooltip__bubble[popover].\:popover-open {
     opacity: 0;

package/dist/styles/components/accordion.scss

@@ -10,24 +10,66 @@
 @use "../mixins/button" as *;
 @use "../mixins/focus-ring" as *;
 
-$hds-accordion-item-padding: 16px;
-$hds-accordion-item-border-radius: 6px;
-
-// ACCORDION COMPONENT (wrapper)
-
 .hds-accordion {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+}
+
+.hds-accordion--type-card {
+  &.hds-accordion--size-small {
+    gap: 4px;
+  }
+
+  &.hds-accordion--size-medium {
+    gap: 8px;
+  }
+
+  &.hds-accordion--size-large {
+    gap: 12px;
+  }
 }
 
 // ACCORDION ITEM COMPONENT (nested child)
 
-.hds-accordion-item {
+.hds-accordion-item--size-small {
+  --hds-accordion-item-toggle-padding: 8px;
+  --hds-accordion-item-toggle-padding-left: 8px;
+  --hds-accordion-item-content-padding-top: 4px;
+  --hds-accordion-item-content-padding-right: 8px;
+  --hds-accordion-item-content-padding-bottom: 8px;
+  --hds-accordion-item-content-padding-left: 12px;
+  --hds-accordion-item-gap: 8px;
+  --hds-accordion-item-icon-size: 16px;
+}
+
+.hds-accordion-item--size-medium {
+  --hds-accordion-item-toggle-padding: 12px;
+  --hds-accordion-item-toggle-padding-left: 8px;
+  --hds-accordion-item-content-padding-top: 4px;
+  --hds-accordion-item-content-padding-right: 12px;
+  --hds-accordion-item-content-padding-bottom: 12px;
+  --hds-accordion-item-content-padding-left: 12px;
+  --hds-accordion-item-gap: 12px;
+  --hds-accordion-item-icon-size: 20px;
+}
+
+.hds-accordion-item--size-large {
+  --hds-accordion-item-toggle-padding: 16px;
+  --hds-accordion-item-toggle-padding-left: 12px;
+  --hds-accordion-item-content-padding-top: 4px;
+  --hds-accordion-item-content-padding-right: 16px;
+  --hds-accordion-item-content-padding-bottom: 16px;
+  --hds-accordion-item-content-padding-left: 16px;
+  --hds-accordion-item-gap: 12px;
+  --hds-accordion-item-icon-size: 24px;
+}
+
+.hds-accordion-item--type-card {
+  --hds-accordion-item-focus-ring-offset: 0;
   background: var(--token-color-surface-primary);
-  border-radius: $hds-accordion-item-border-radius;
+  border-radius: 6px;
 
-  &.hds-accordion-item--does-not-contain-interactive {
+  &.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) {
     box-shadow: var(--token-surface-mid-box-shadow);
 
     &:hover,
@@ -36,23 +78,41 @@ $hds-accordion-item-border-radius: 6px;
     }
   }
 
-  &.hds-accordion-item--contains-interactive {
+  &.hds-accordion-item--contains-interactive,
+  &.hds-accordion-item--is-static {
     box-shadow: var(--token-surface-base-box-shadow);
   }
 }
 
+.hds-accordion-item--type-flush {
+  --hds-accordion-item-focus-ring-offset: 3px;
+  border-bottom: 1px solid var(--token-color-border-primary);
+
+  &.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) > .hds-disclosure-primitive__toggle {
+    &:hover,
+    &.mock-hover {
+      .hds-accordion-item__toggle {
+        background: var(--token-color-surface-interactive-hover);
+      }
+    }
+
+    &:active,
+    &.mock-active {
+      .hds-accordion-item__toggle {
+        background: var(--token-color-surface-interactive-active);
+      }
+    }
+  }
+}
+
 // TOGGLE BLOCK
 
 .hds-accordion-item__toggle {
   position: relative;
   display: flex;
-  gap: 12px;
+  gap: var(--hds-accordion-item-gap);
   align-items: center;
-  padding:
-    $hds-accordion-item-padding
-    $hds-accordion-item-padding
-    $hds-accordion-item-padding
-    12px; // by design
+  padding: var(--hds-accordion-item-toggle-padding) var(--hds-accordion-item-toggle-padding) var(--hds-accordion-item-toggle-padding) var(--hds-accordion-item-toggle-padding-left);
 }
 
 .hds-accordion-item__button {
@@ -60,51 +120,54 @@ $hds-accordion-item-border-radius: 6px;
 
   &:hover { cursor: pointer; }
 
-  // entire toggle area is interactive
-  &.hds-accordion-item__button--parent-does-not-contain-interactive {
-    @include hds-focus-ring-with-pseudo-element();
-    position: static;
-    margin: -1px 0;
-    color: var(--token-color-foreground-primary);
-    background: transparent;
-    border: 1px solid transparent;
-
-    // expand button target to cover entire AccordionItem Toggle block (depending on the `@containsInteractive/@parentContainsInteractive` argument)
-    &::after {
-      position: absolute;
-      display: block;
-      border-radius: $hds-accordion-item-border-radius;
-      content: "";
-      inset: 0;
+  .flight-icon {
+    @media (prefers-reduced-motion: no-preference) {
+      transition: transform 0.3s;
     }
   }
 
-  // only chevron button area is interactive
-  &.hds-accordion-item__button--parent-contains-interactive {
-    @include hds-button();
-    width: 24px;
-    height: 24px;
+  // we hide it instead of not rendering it at all, to preserve the visual layout of the item, without requiring special CSS workarounds to compensate for the missing element
+  .hds-accordion-item--is-static.hds-accordion-item & {
+    visibility: hidden;
+  }
+}
 
-    &:focus,
-    &.mock-focus {
-      @include hds-button-state-focus();
-    }
+// entire toggle area is interactive
+.hds-accordion-item__button--parent-does-not-contain-interactive {
+  @include hds-focus-ring-with-pseudo-element($top: var(--hds-accordion-item-focus-ring-offset), $right: var(--hds-accordion-item-focus-ring-offset), $bottom: var(--hds-accordion-item-focus-ring-offset), $left: var(--hds-accordion-item-focus-ring-offset));
 
-    // `hds-button-color-secondary` determines the focus color and needs to be placed after `hds-button-state-focus`
-    @include hds-button-color-secondary();
-  }
+  position: static;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: -1px 0;
+  color: var(--token-color-foreground-primary);
+  background: transparent;
+  border: 0;
+}
 
-  // animate chevron icon
-  &.hds-accordion-item__button--is-open {
-    .flight-icon-chevron-down {
-      transform: rotate(-180deg);
-    }
+// only chevron button area is interactive
+.hds-accordion-item__button--parent-contains-interactive {
+  @include hds-button();
+
+  &: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();
+}
+
+.hds-accordion-item__button {
+  width: var(--hds-accordion-item-icon-size);
+  height: var(--hds-accordion-item-icon-size);
+}
+
+// animate chevron icon
+.hds-accordion-item__button--is-open {
   .flight-icon-chevron-down {
-    @media (prefers-reduced-motion: no-preference) {
-      transition: transform 0.3s;
-    }
+    transform: rotate(-180deg);
   }
 }
 
@@ -116,5 +179,20 @@ $hds-accordion-item-border-radius: 6px;
 // CONTENT BLOCK
 
 .hds-accordion-item__content {
-  padding: 4px $hds-accordion-item-padding $hds-accordion-item-padding $hds-accordion-item-padding;
+  .hds-accordion-item & {
+    padding: var(--hds-accordion-item-content-padding-top) var(--hds-accordion-item-content-padding-right) var(--hds-accordion-item-content-padding-bottom) var(--hds-accordion-item-content-padding-left);
+  }
+}
+
+// Adjust content padding and border for nested flush accordions
+
+.hds-accordion-item--type-flush .hds-accordion-item__content:has(> .hds-accordion--type-flush) {
+  padding: 0 var(--hds-accordion-item-content-padding-right) 0 var(--hds-accordion-item-content-padding-left);
+  border-top: 1px solid var(--token-color-border-primary);
+
+  .hds-accordion-item--type-flush {
+    &:last-child {
+      border-bottom: none;
+    }
+  }
 }

package/dist/styles/components/rich-tooltip.scss

@@ -231,11 +231,6 @@
     }
   }
 
-  // polyfilled `:popover-open` selector
-  // see: https://github.com/oddbird/popover-polyfill?tab=readme-ov-file#caveats
-  &[popover].\:popover-open {
-    opacity: 1;
-  }
 
   @starting-style {
     &[popover].\:popover-open {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "4.5.2",
+  "version": "4.6.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -39,8 +39,7 @@
     "@embroider/addon-shim": "^1.8.7",
     "@floating-ui/dom": "^1.6.3",
     "@hashicorp/design-system-tokens": "^2.1.0",
-    "@hashicorp/ember-flight-icons": "^5.1.1",
-    "@oddbird/popover-polyfill": "^0.4.3",
+    "@hashicorp/ember-flight-icons": "^5.1.2",
     "decorator-transforms": "^1.1.0",
     "ember-a11y-refocus": "^4.1.0",
     "ember-cli-sass": "^11.0.1",
@@ -84,16 +83,16 @@
     "concurrently": "^8.2.2",
     "ember-basic-dropdown": "^8.1.0",
     "ember-concurrency": "^4.0.2",
-    "ember-template-lint": "^4.18.2",
-    "ember-template-lint-plugin-prettier": "^4.2.0",
+    "ember-template-lint": "^6.0.0",
+    "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-import": "^2.29.1",
     "eslint-plugin-n": "^17.7.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-qunit": "^8.1.1",
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.2",
     "rollup": "^4.17.2",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-scss": "^4.0.0",