@hashicorp/design-system-components 4.2.0 → 4.3.0

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

@@ -0,0 +1,247 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// RICH-TOOLTIP
+//
+
+@use "../mixins/focus-ring" as *;
+
+.hds-rich-tooltip {
+  display: contents;
+}
+
+// TOGGLE
+
+// The special declarations below are used to allow the button to inherit styles from the parent element
+// without preventing the consumers from applying these styles via HDS or custom classes if they want
+//
+// 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 `<button>` element, but are overwritten by any other style applied via classname
+
+:where(.hds-rich-tooltip__toggle) {
+  width: fit-content;
+  height: fit-content;
+  margin: 0;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  background-color: inherit;
+  border: none;
+  cursor: pointer;
+}
+
+.hds-rich-tooltip__toggle {
+  // we don't want to apply styles to the yielded content
+  // so we use these variables that allow us to target only
+  // the (decorated) text and the icon
+  --text-color: var(--token-color-foreground-strong);
+  --icon-color: var(--token-color-foreground-strong);
+
+  &:hover,
+  &.mock-hover {
+    --text-color: var(--token-color-foreground-primary);
+    --icon-color: var(--token-color-foreground-primary);
+  }
+
+  &:active,
+  &.mock-active {
+    --text-color: var(--token-color-foreground-faint);
+    --icon-color: var(--token-color-foreground-faint);
+  }
+
+  @include hds-focus-ring-with-pseudo-element(
+    $top: -2px,
+    $right: -2px,
+    $bottom: -2px,
+    $left: -2px
+  );
+}
+
+// decorated text
+
+.hds-rich-tooltip__toggle-text {
+  color: var(--text-color);
+  text-decoration: underline dotted;
+}
+
+// icon
+
+.hds-rich-tooltip__toggle-icon {
+  flex: none;
+  width: 1em;
+  height: 1em;
+  color: var(--icon-color);
+
+  &:first-child:not(:only-child) {
+    margin-right: 0.25rem;
+  }
+
+  &:last-child:not(:only-child) {
+    margin-left: 0.25rem;
+  }
+}
+
+// DISPLAY
+
+:where(.hds-rich-tooltip__toggle--is-inline) {
+  // it's a button, can't be `inline`
+  display: inline-flex;
+  align-items: center;
+  // this is needed to make sure the inline text is aligned with the other text before/after
+  vertical-align: bottom;
+
+  // when it's inline and it contains only an icon we need to align it at the middle of the text otherwise it "falls" down
+  &:has(.hds-rich-tooltip__toggle-icon:only-child) {
+    vertical-align: middle;
+  }
+}
+
+:where(.hds-rich-tooltip__toggle--is-block) {
+  display: flex;
+  align-items: center;
+}
+
+// SIZES
+
+.hds-rich-tooltip__toggle--size-small {
+  font-weight: var(--token-typography-font-weight-regular);
+  font-size: var(--token-typography-body-100-font-size);
+  font-family: var(--token-typography-body-100-font-family);
+  line-height: var(--token-typography-body-100-line-height);
+}
+
+.hds-rich-tooltip__toggle--size-medium {
+  font-weight: var(--token-typography-font-weight-regular);
+  font-size: var(--token-typography-body-200-font-size);
+  font-family: var(--token-typography-body-200-font-family);
+  line-height: var(--token-typography-body-200-line-height);
+}
+
+.hds-rich-tooltip__toggle--size-large {
+  font-weight: var(--token-typography-font-weight-regular);
+  font-size: var(--token-typography-body-300-font-size);
+  font-family: var(--token-typography-body-300-font-family);
+  line-height: var(--token-typography-body-300-line-height);
+}
+
+// BUBBLE
+
+.hds-rich-tooltip__bubble {
+  position: relative;
+  width: fit-content;
+  max-width: var(--token-tooltip-max-width);
+  height: fit-content;
+  max-height: none;
+  padding: 16px;
+  background: var(--token-color-surface-primary);
+  border-radius: 5px;
+  box-shadow: var(--token-surface-higher-box-shadow);
+
+  // fade-in animation (we can't do fade-out because `isOpen` removes the content of the bubble immediately from the DOM)
+  // see: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using#animating_popovers
+  opacity: 0;
+  transition: opacity 0.3s;
+  will-change: opacity;
+
+  // the "popover" attributes comes with pre-defined styling so we need to override it
+  :where(&[popover]) {
+    width: fit-content;
+    height: fit-content;
+    margin: 0;
+    padding: 0;
+    overflow: visible;
+    color: inherit;
+    background: none;
+    border: none;
+    inset: 0;
+  }
+}
+
+// arrow
+
+.hds-rich-tooltip__bubble-arrow {
+  // notice: floating-ui assumes the "arrow" container is square
+  $arrow-size: 20px;
+  position: absolute;
+  z-index: 1;
+  display: block;
+  width: $arrow-size;
+  height: $arrow-size;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><path fill="%23fff" d="M9.056 11.607.398 20h19.091l-8.37-8.393S10.69 11 10.089 11c-.602 0-1.032.608-1.032.608Z"/><path fill="%23656A76" fill-opacity=".2" fill-rule="evenodd" d="M9.359 11.308 1.423 19H0l8.674-8.417.342.362-.342-.362v-.001l.002-.001.003-.003.007-.007a1.622 1.622 0 0 1 .103-.087c.066-.053.16-.122.277-.191.224-.134.571-.293.977-.293a2.158 2.158 0 0 1 1.374.492 1.658 1.658 0 0 1 .107.098l.004.004L20 19h-1.518l-7.665-7.707-.004-.003-.002-.002a1.069 1.069 0 0 0-.18-.131 1.167 1.167 0 0 0-.588-.157.958.958 0 0 0-.47.153 1.527 1.527 0 0 0-.208.15l-.006.005Z" clip-rule="evenodd"/></svg>')
+    no-repeat 0 0 / #{$arrow-size} #{$arrow-size};
+  pointer-events: none;
+
+  &[data-hds-anchored-arrow-placement^="top"] {
+    bottom: (-1 * $arrow-size);
+    transform: rotate(180deg);
+  }
+
+  &[data-hds-anchored-arrow-placement^="right"] {
+    left: (-1 * $arrow-size);
+    transform: rotate(-90deg);
+  }
+
+  &[data-hds-anchored-arrow-placement^="bottom"] {
+    top: (-1 * $arrow-size);
+    transform: rotate(0deg); // this fixes a rendering issue in Safari
+  }
+
+  &[data-hds-anchored-arrow-placement^="left"] {
+    right: (-1 * $arrow-size);
+    transform: rotate(90deg);
+  }
+}
+
+// inner content
+
+.hds-rich-tooltip__bubble-inner-content {
+  // we need to reset the content to avoid it inheriting the styles from the parents of the component or the component's wrapping element
+  all: initial;
+  // IMPORTANT: we don't want the element to have a `layout`, to create a "box", to avoid issues with Safari
+  // see: https://hashicorp.slack.com/archives/C025N5V4PFZ/p1715247858351399
+  display: contents;
+  box-sizing: border-box;
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+}
+
+// ANIMATION
+
+// these start/end comments are needed to avoid that clean-css mangles the generated code (it happens in "production" build/code)
+// (probably it doesn't understand the @starting-style directive or thinks the `.\:popover-open` is not valid)
+
+/* clean-css ignore:start */
+
+.hds-rich-tooltip__bubble {
+  &[popover]:popover-open {
+    opacity: 1;
+  }
+
+  @starting-style {
+    &[popover]:popover-open {
+      opacity: 0;
+    }
+  }
+
+  // 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 {
+      opacity: 0;
+    }
+  }
+}
+
+/* clean-css ignore:end */

package/dist/styles/components/tabs.scss

@@ -34,6 +34,7 @@ $hds-tabs-sizes: ( "medium", "large" );
   margin: 0;
   padding: 0;
   overflow-x: auto;
+  isolation: isolate;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -99,7 +100,7 @@ $hds-tabs-sizes: ( "medium", "large" );
   bottom: 0;
   // notice: this custom prop is set dynamically via JavaScript
   left: var(--indicator-left-pos, 0);
-  z-index: 10;
+  z-index: 1;
   display: block;
   // notice: this custom prop is set dynamically via JavaScript
   width: var(--indicator-width, 0);

package/dist/styles/components/tooltip.scss

@@ -75,7 +75,7 @@
     z-index: 1;
     // This needs to go here because Tippy generates a javascript
     // max-width on .tippy-box.
-    max-width: var(--token-tooltip-max-width);
+    max-width: calc(var(--token-tooltip-max-width) - 2 * var(--token-tooltip-padding-horizontal));
     // prevent this container from potentially inheriting other values
     // such as `white-space: nowrap` that would cause content overflow
     white-space: normal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -14,31 +14,34 @@
     "url": "https://github.com/hashicorp/design-system.git",
     "directory": "packages/components"
   },
-  "types": "dist/index.d.ts",
   "license": "MPL-2.0",
   "author": "HashiCorp Design Systems <design-systems@hashicorp.com>",
   "scripts": {
-    "build": "rollup --config",
+    "build": "concurrently 'npm:build:*'",
+    "build:js": "rollup --config",
+    "build:types": "glint --declaration",
     "prepublishOnly": "yarn workspace @hashicorp/ember-flight-icons build && rollup --config && 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",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
     "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
     "lint:css": "stylelint \"src/styles/**/*.scss\"",
     "lint:css:fix": "npm-run-all \"lint:css --fix\"",
-    "lint:glint": "glint",
+    "lint:types": "glint",
     "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
-    "lint:js:fix": "eslint . --fix",
-    "lint:types": "tsc --noEmit"
+    "lint:js:fix": "eslint . --fix"
   },
   "dependencies": {
     "@ember/render-modifiers": "^2.0.5",
     "@ember/string": "^3.1.1",
     "@ember/test-waiters": "^3.1.0",
     "@embroider/addon-shim": "^1.8.7",
+    "@floating-ui/dom": "^1.6.3",
     "@hashicorp/design-system-tokens": "^2.1.0",
-    "@hashicorp/ember-flight-icons": "^5.0.1",
+    "@hashicorp/ember-flight-icons": "^5.0.2",
+    "@oddbird/popover-polyfill": "^0.4.3",
+    "decorator-transforms": "^1.1.0",
     "ember-a11y-refocus": "^3.0.2",
     "ember-cli-sass": "^11.0.1",
     "ember-composable-helpers": "^5.0.0",
@@ -46,6 +49,7 @@
     "ember-focus-trap": "^1.1.0",
     "ember-keyboard": "^8.2.1",
     "ember-modifier": "^4.1.0",
+    "ember-power-select": "^8.2.0",
     "ember-stargate": "^0.4.3",
     "ember-style-modifier": "^3.0.1",
     "ember-truth-helpers": "^4.0.3",
@@ -54,24 +58,31 @@
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.6",
-    "@babel/plugin-proposal-decorators": "^7.23.6",
-    "@babel/plugin-transform-class-properties": "^7.23.3",
-    "@babel/plugin-transform-private-methods": "^7.23.3",
+    "@babel/core": "^7.24.5",
+    "@babel/plugin-proposal-decorators": "^7.24.1",
+    "@babel/plugin-transform-class-properties": "^7.24.1",
+    "@babel/plugin-transform-private-methods": "^7.24.1",
     "@babel/plugin-transform-typescript": "^7.23.6",
-    "@babel/preset-typescript": "^7.23.3",
-    "@embroider/addon-dev": "^4.1.3",
-    "@glint/core": "^1.3.0",
-    "@glint/environment-ember-loose": "^1.3.0",
-    "@glint/template": "^1.3.0",
+    "@babel/runtime": "^7.24.5",
+    "@ember/test-helpers": "^3.3.0",
+    "@embroider/addon-dev": "^4.3.1",
+    "@glimmer/component": "^1.1.2",
+    "@glimmer/tracking": "^1.1.2",
+    "@glint/core": "^1.4.0",
+    "@glint/environment-ember-loose": "^1.4.0",
+    "@glint/template": "^1.4.0",
     "@rollup/plugin-babel": "^6.0.4",
-    "@tsconfig/ember": "^3.0.2",
+    "@tsconfig/ember": "^3.0.6",
     "@types/ember-qunit": "^6.1.1",
     "@types/ember-resolver": "^9.0.0",
     "@types/qunit": "^2.19.7",
     "@types/rsvp": "^4.0.6",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
+    "babel-plugin-ember-template-compilation": "^2.2.4",
+    "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",
     "eslint": "^8.52.0",
@@ -82,13 +93,13 @@
     "eslint-plugin-qunit": "^8.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
-    "rollup": "^4.9.0",
+    "rollup": "^4.17.2",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-ts": "^3.4.5",
-    "stylelint": "^15.11.0",
+    "stylelint": "^16.3.1",
     "stylelint-config-rational-order": "^0.1.2",
-    "stylelint-config-standard-scss": "^11.1.0",
+    "stylelint-config-standard-scss": "^13.1.0",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
@@ -108,7 +119,6 @@
       "./components/hds/alert/description.js": "./dist/_app_/components/hds/alert/description.js",
       "./components/hds/alert/index.js": "./dist/_app_/components/hds/alert/index.js",
       "./components/hds/alert/title.js": "./dist/_app_/components/hds/alert/title.js",
-      "./components/hds/alert/types.js": "./dist/_app_/components/hds/alert/types.js",
       "./components/hds/app-footer/copyright.js": "./dist/_app_/components/hds/app-footer/copyright.js",
       "./components/hds/app-footer/index.js": "./dist/_app_/components/hds/app-footer/index.js",
       "./components/hds/app-footer/item.js": "./dist/_app_/components/hds/app-footer/item.js",
@@ -133,7 +143,6 @@
       "./components/hds/button-set/index.js": "./dist/_app_/components/hds/button-set/index.js",
       "./components/hds/button/index.js": "./dist/_app_/components/hds/button/index.js",
       "./components/hds/card/container.js": "./dist/_app_/components/hds/card/container.js",
-      "./components/hds/card/types.js": "./dist/_app_/components/hds/card/types.js",
       "./components/hds/code-block/copy-button.js": "./dist/_app_/components/hds/code-block/copy-button.js",
       "./components/hds/code-block/description.js": "./dist/_app_/components/hds/code-block/description.js",
       "./components/hds/code-block/index.js": "./dist/_app_/components/hds/code-block/index.js",
@@ -187,6 +196,13 @@
       "./components/hds/form/radio/group.js": "./dist/_app_/components/hds/form/radio/group.js",
       "./components/hds/form/select/base.js": "./dist/_app_/components/hds/form/select/base.js",
       "./components/hds/form/select/field.js": "./dist/_app_/components/hds/form/select/field.js",
+      "./components/hds/form/super-select/after-options.js": "./dist/_app_/components/hds/form/super-select/after-options.js",
+      "./components/hds/form/super-select/multiple/base.js": "./dist/_app_/components/hds/form/super-select/multiple/base.js",
+      "./components/hds/form/super-select/multiple/field.js": "./dist/_app_/components/hds/form/super-select/multiple/field.js",
+      "./components/hds/form/super-select/option-group.js": "./dist/_app_/components/hds/form/super-select/option-group.js",
+      "./components/hds/form/super-select/placeholder.js": "./dist/_app_/components/hds/form/super-select/placeholder.js",
+      "./components/hds/form/super-select/single/base.js": "./dist/_app_/components/hds/form/super-select/single/base.js",
+      "./components/hds/form/super-select/single/field.js": "./dist/_app_/components/hds/form/super-select/single/field.js",
       "./components/hds/form/text-input/base.js": "./dist/_app_/components/hds/form/text-input/base.js",
       "./components/hds/form/text-input/field.js": "./dist/_app_/components/hds/form/text-input/field.js",
       "./components/hds/form/textarea/base.js": "./dist/_app_/components/hds/form/textarea/base.js",
@@ -197,10 +213,8 @@
       "./components/hds/form/visibility-toggle/index.js": "./dist/_app_/components/hds/form/visibility-toggle/index.js",
       "./components/hds/icon-tile/index.js": "./dist/_app_/components/hds/icon-tile/index.js",
       "./components/hds/interactive/index.js": "./dist/_app_/components/hds/interactive/index.js",
-      "./components/hds/interactive/types.js": "./dist/_app_/components/hds/interactive/types.js",
       "./components/hds/link/inline.js": "./dist/_app_/components/hds/link/inline.js",
       "./components/hds/link/standalone.js": "./dist/_app_/components/hds/link/standalone.js",
-      "./components/hds/link/types.js": "./dist/_app_/components/hds/link/types.js",
       "./components/hds/menu-primitive/index.js": "./dist/_app_/components/hds/menu-primitive/index.js",
       "./components/hds/modal/body.js": "./dist/_app_/components/hds/modal/body.js",
       "./components/hds/modal/footer.js": "./dist/_app_/components/hds/modal/footer.js",
@@ -219,8 +233,12 @@
       "./components/hds/pagination/nav/number.js": "./dist/_app_/components/hds/pagination/nav/number.js",
       "./components/hds/pagination/numbered/index.js": "./dist/_app_/components/hds/pagination/numbered/index.js",
       "./components/hds/pagination/size-selector/index.js": "./dist/_app_/components/hds/pagination/size-selector/index.js",
+      "./components/hds/popover-primitive/index.js": "./dist/_app_/components/hds/popover-primitive/index.js",
       "./components/hds/reveal/index.js": "./dist/_app_/components/hds/reveal/index.js",
       "./components/hds/reveal/toggle/button.js": "./dist/_app_/components/hds/reveal/toggle/button.js",
+      "./components/hds/rich-tooltip/bubble.js": "./dist/_app_/components/hds/rich-tooltip/bubble.js",
+      "./components/hds/rich-tooltip/index.js": "./dist/_app_/components/hds/rich-tooltip/index.js",
+      "./components/hds/rich-tooltip/toggle.js": "./dist/_app_/components/hds/rich-tooltip/toggle.js",
       "./components/hds/segmented-group/index.js": "./dist/_app_/components/hds/segmented-group/index.js",
       "./components/hds/separator/index.js": "./dist/_app_/components/hds/separator/index.js",
       "./components/hds/side-nav/base.js": "./dist/_app_/components/hds/side-nav/base.js",
@@ -254,30 +272,38 @@
       "./components/hds/text/code.js": "./dist/_app_/components/hds/text/code.js",
       "./components/hds/text/display.js": "./dist/_app_/components/hds/text/display.js",
       "./components/hds/text/index.js": "./dist/_app_/components/hds/text/index.js",
-      "./components/hds/text/types.js": "./dist/_app_/components/hds/text/types.js",
       "./components/hds/toast/index.js": "./dist/_app_/components/hds/toast/index.js",
       "./components/hds/tooltip-button/index.js": "./dist/_app_/components/hds/tooltip-button/index.js",
       "./components/hds/yield/index.js": "./dist/_app_/components/hds/yield/index.js",
-      "./components/hds/yield/types.js": "./dist/_app_/components/hds/yield/types.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",
+      "./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",
       "./modifiers/hds-tooltip.js": "./dist/_app_/modifiers/hds-tooltip.js"
     }
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./declarations/index.d.ts",
       "default": "./dist/index.js"
     },
     "./*": {
-      "types": "./dist/*.d.ts",
+      "types": "./declarations/*.d.ts",
       "default": "./dist/*"
     },
     "./addon-main.js": "./addon-main.js"
   },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "declarations/*"
+      ]
+    }
+  },
   "files": [
     "addon-main.js",
+    "declarations",
     "dist"
   ],
   "engines": {

package/dist/_app_/components/hds/text/types.js

@@ -1 +0,0 @@
-export { default } from "@hashicorp/design-system-components/components/hds/text/types";

package/dist/_app_/components/hds/yield/types.js

@@ -1 +0,0 @@
-export { default } from "@hashicorp/design-system-components/components/hds/yield/types";

package/dist/components/hds/interactive/types.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=types.js.map

package/dist/components/hds/interactive/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/hds/yield/types.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=types.js.map

package/dist/components/hds/yield/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}