@hashicorp/design-system-components 5.1.1-rc-20251209143536 → 5.2.0-rc-20251216140614

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/declarations/components/hds/breadcrumb/item.d.ts +4 -8
  2. package/declarations/components/hds/dropdown/index.d.ts +2 -0
  3. package/declarations/components/hds/icon/index.d.ts +1 -1
  4. package/declarations/components/hds/interactive/index.d.ts +4 -9
  5. package/declarations/components/hds/popover-primitive/index.d.ts +2 -0
  6. package/declarations/components/hds/rich-tooltip/bubble.d.ts +2 -0
  7. package/declarations/components/hds/stepper/task/indicator.d.ts +1 -1
  8. package/declarations/components/hds/theme-context/index.d.ts +24 -0
  9. package/declarations/components/hds/theme-context/types.d.ts +19 -0
  10. package/declarations/components/hds/theme-switcher/index.d.ts +43 -0
  11. package/declarations/components.d.ts +2 -0
  12. package/declarations/modifiers/hds-anchored-position.d.ts +3 -1
  13. package/declarations/services/hds-theming.d.ts +57 -0
  14. package/declarations/services.d.ts +1 -0
  15. package/declarations/template-registry.d.ts +6 -0
  16. package/declarations/utils/hds-resolve-link-to-external.d.ts +12 -0
  17. package/dist/_app_/components/hds/theme-context.js +1 -0
  18. package/dist/_app_/components/hds/theme-switcher.js +1 -0
  19. package/dist/_app_/services/hds-theming.js +1 -0
  20. package/dist/components/hds/breadcrumb/item.js +17 -15
  21. package/dist/components/hds/breadcrumb/item.js.map +1 -1
  22. package/dist/components/hds/dropdown/index.js +3 -2
  23. package/dist/components/hds/dropdown/index.js.map +1 -1
  24. package/dist/components/hds/interactive/index.js +17 -19
  25. package/dist/components/hds/interactive/index.js.map +1 -1
  26. package/dist/components/hds/popover-primitive/index.js +1 -1
  27. package/dist/components/hds/popover-primitive/index.js.map +1 -1
  28. package/dist/components/hds/rich-tooltip/bubble.js +2 -1
  29. package/dist/components/hds/rich-tooltip/bubble.js.map +1 -1
  30. package/dist/components/hds/theme-context/index.js +45 -0
  31. package/dist/components/hds/theme-context/index.js.map +1 -0
  32. package/dist/components/hds/theme-context/types.js +27 -0
  33. package/dist/components/hds/theme-context/types.js.map +1 -0
  34. package/dist/components/hds/theme-switcher/index.js +100 -0
  35. package/dist/components/hds/theme-switcher/index.js.map +1 -0
  36. package/dist/components.js +2 -0
  37. package/dist/components.js.map +1 -1
  38. package/dist/modifiers/hds-anchored-position.js +42 -4
  39. package/dist/modifiers/hds-anchored-position.js.map +1 -1
  40. package/dist/services/hds-theming.js +214 -0
  41. package/dist/services/hds-theming.js.map +1 -0
  42. package/dist/services.js +1 -1
  43. package/dist/styles/@hashicorp/design-system-components-common.css +9584 -0
  44. package/dist/styles/@hashicorp/design-system-components-common.css.map +1 -0
  45. package/dist/styles/@hashicorp/design-system-components-common.scss +24 -0
  46. package/dist/styles/@hashicorp/design-system-components.css +544 -337
  47. package/dist/styles/@hashicorp/design-system-components.css.map +1 -0
  48. package/dist/styles/@hashicorp/design-system-components.scss +4 -62
  49. package/dist/styles/@hashicorp/design-system-power-select-overrides.css +229 -0
  50. package/dist/styles/@hashicorp/design-system-power-select-overrides.css.map +1 -0
  51. package/dist/styles/components/badge-count.scss +26 -76
  52. package/dist/styles/components/badge.scss +26 -131
  53. package/dist/styles/components/button.scss +5 -0
  54. package/dist/styles/components/dropdown.scss +3 -5
  55. package/dist/styles/components/form/file-input.scss +2 -2
  56. package/dist/styles/components/form/key-value-inputs.scss +2 -4
  57. package/dist/styles/components/form/super-select.scss +12 -4
  58. package/dist/styles/components/index.scss +52 -0
  59. package/dist/styles/components/theme-context.scss +12 -0
  60. package/dist/styles/mixins/_button.scss +82 -129
  61. package/dist/styles/mixins/_carbonization.scss +31 -0
  62. package/dist/styles/mixins/_interactive-dark-theme.scss +1 -1
  63. package/dist/utils/hds-resolve-link-to-external.js +33 -0
  64. package/dist/utils/hds-resolve-link-to-external.js.map +1 -0
  65. package/package.json +12 -4
  66. package/dist/styles/@hashicorp/design-system-components.scss.map +0 -1
@@ -3,6 +3,7 @@
3
3
  * SPDX-License-Identifier: MPL-2.0
4
4
  */
5
5
  import Component from '@glimmer/component';
6
+ import type Owner from '@ember/owner';
6
7
  import type { LinkTo } from '@ember/routing';
7
8
  import type { SafeString } from '@ember/template';
8
9
  import type { HdsIconSignature } from '../icon/index';
@@ -23,14 +24,9 @@ export interface HdsBreadcrumbItemSignature {
23
24
  Element: HTMLLIElement;
24
25
  }
25
26
  export default class HdsBreadcrumbItem extends Component<HdsBreadcrumbItemSignature> {
26
- static linkToExternal: LinkTo | null;
27
- /**
28
- *
29
- * @param linkToExternal
30
- * @type LinkTo | null
31
- * @default null
32
- */
33
- get linkToExternal(): LinkTo | null;
27
+ linkToExternal: LinkTo | null;
28
+ constructor(owner: Owner, args: HdsBreadcrumbItemSignature['Args']);
29
+ resolveLinkToExternal(): Promise<void>;
34
30
  /**
35
31
  * @param maxWidth
36
32
  * @type {string}
@@ -34,6 +34,7 @@ export interface HdsDropdownSignature {
34
34
  preserveContentInDom?: boolean;
35
35
  matchToggleWidth?: boolean;
36
36
  onClose?: HdsPopoverPrimitiveSignature['Args']['onClose'];
37
+ boundary?: HdsAnchoredPositionOptions['boundary'];
37
38
  };
38
39
  Blocks: {
39
40
  default: [
@@ -72,6 +73,7 @@ export default class HdsDropdown extends Component<HdsDropdownSignature> {
72
73
  offsetOptions: HdsAnchoredPositionOptions['offsetOptions'];
73
74
  enableCollisionDetection: HdsAnchoredPositionOptions['enableCollisionDetection'];
74
75
  matchToggleWidth: HdsAnchoredPositionOptions['matchToggleWidth'];
76
+ boundary: HdsAnchoredPositionOptions['boundary'];
75
77
  };
76
78
  /**
77
79
  * Get the class names to apply to the element
@@ -7,7 +7,7 @@ import type { HdsIconSizes, HdsIconColors } from './types';
7
7
  import type { IconName } from '@hashicorp/flight-icons/svg';
8
8
  import type Owner from '@ember/owner';
9
9
  export declare const COLORS: HdsIconColors[];
10
- export declare const NAMES: readonly ["loading", "loading-static", "running", "running-static", "apple", "apple-color", "alibaba", "alibaba-color", "amazon-ecs", "amazon-ecs-color", "amazon-eks", "amazon-eks-color", "ansible-community", "ansible-community-color", "ansible-automation-platform", "ansible-automation-platform-color", "auth0", "auth0-color", "aws", "aws-color", "aws-cdk", "aws-cdk-color", "aws-cloudwatch", "aws-cloudwatch-color", "aws-ec2", "aws-ec2-color", "aws-lambda", "aws-lambda-color", "aws-s3", "aws-s3-color", "azure", "azure-color", "azure-aks", "azure-aks-color", "azure-blob-storage", "azure-blob-storage-color", "azure-devops", "azure-devops-color", "azure-vms", "azure-vms-color", "bitbucket", "bitbucket-color", "bridgecrew", "bridgecrew-color", "cisco", "cisco-color", "codepen", "codepen-color", "confluence", "confluence-color", "confluent", "confluent-color", "datadog", "datadog-color", "digital-ocean", "digital-ocean-color", "docker", "docker-color", "duo", "duo-color", "elastic-observability", "elastic-observability-color", "f5", "f5-color", "facebook", "facebook-color", "figma", "figma-color", "gcp", "gcp-color", "git", "git-color", "gitlab", "gitlab-color", "github", "github-color", "google", "google-color", "google-docs", "google-docs-color", "google-drive", "google-drive-color", "google-forms", "google-forms-color", "google-sheets", "google-sheets-color", "google-slides", "google-slides-color", "grafana", "grafana-color", "helm", "helm-color", "infracost", "infracost-color", "jenkins", "jenkins-color", "jfrog", "jfrog-color", "jira", "jira-color", "jwt", "jwt-color", "kubernetes", "kubernetes-color", "lightlytics", "lightlytics-color", "linkedin", "linkedin-color", "linode", "linode-color", "linux", "linux-color", "loom", "loom-color", "meetup", "meetup-color", "microsoft", "microsoft-color", "microsoft-teams", "microsoft-teams-color", "minio", "minio-color", "mongodb", "mongodb-color", "new-relic", "new-relic-color", "okta", "okta-color", "oracle", "oracle-color", "opa", "opa-color", "openid", "openid-color", "openstack", "openstack-color", "pack", "pack-color", "pager-duty", "pager-duty-color", "ping-identity ", "ping-identity-color", "postgres", "postgres-color", "rabbitmq", "rabbitmq-color", "saml", "saml-color", "service-now", "service-now-color", "slack", "slack-color", "snyk", "snyk-color", "splunk", "splunk-color", "twilio", "twilio-color", "twitch", "twitch-color", "twitter", "twitter-color", "twitter-x", "twitter-x-color", "vantage", "vantage-color", "venafi", "venafi-color", "vercel", "vercel-color", "vmware", "vmware-color", "youtube", "youtube-color", "boundary", "boundary-color", "boundary-fill", "boundary-fill-color", "boundary-square", "boundary-square-color", "consul", "consul-color", "consul-fill", "consul-fill-color", "consul-square", "consul-square-color", "nomad", "nomad-color", "nomad-fill", "nomad-fill-color", "nomad-square", "nomad-square-color", "packer", "packer-color", "packer-fill", "packer-fill-color", "packer-square", "packer-square-color", "terraform", "terraform-color", "terraform-fill", "terraform-fill-color", "terraform-square", "terraform-square-color", "vagrant", "vagrant-color", "vagrant-fill", "vagrant-fill-color", "vagrant-square", "vagrant-square-color", "vault", "vault-color", "vault-fill", "vault-fill-color", "vault-square", "vault-square-color", "vault-radar", "vault-radar-color", "vault-radar-fill", "vault-radar-fill-color", "vault-radar-square", "vault-radar-square-color", "vault-secrets", "vault-secrets-color", "vault-secrets-fill", "vault-secrets-fill-color", "vault-secrets-square", "vault-secrets-square-color", "waypoint", "waypoint-color", "waypoint-fill", "waypoint-fill-color", "waypoint-square", "waypoint-square-color", "hashicorp", "hashicorp-color", "hashicorp-fill", "hashicorp-fill-color", "hashicorp-square", "hashicorp-square-color", "hcp", "hcp-color", "hcp-fill", "hcp-fill-color", "hcp-square", "hcp-square-color", "accessibility", "folder-users", "frown", "identity-service", "identity-user", "meh", "robot", "smile", "user", "user-check", "user-circle", "user-circle-fill", "user-minus", "user-plus", "user-x", "users", "ampersand", "beaker", "bucket", "bulb", "circle", "circle-dot", "circle-fill", "circle-half", "diamond", "diamond-fill", "disc", "dot", "dot-half", "droplet", "flag", "gift", "government", "handshake", "hash", "hexagon", "hexagon-fill", "labyrinth", "layers", "moon", "octagon", "outline", "random", "rocket", "sparkle", "square", "square-fill", "sun", "triangle", "triangle-fill", "truck", "wand", "zap", "zap-off", "docs", "docs-download", "docs-link", "guide", "guide-link", "help", "info", "info-fill", "learn", "learn-link", "support", "alert-circle", "alert-circle-fill", "alert-diamond", "alert-diamond-fill", "alert-octagon", "alert-octagon-fill", "alert-triangle", "alert-triangle-fill", "check", "check-circle", "check-circle-fill", "check-diamond", "check-diamond-fill", "check-hexagon", "check-hexagon-fill", "check-square", "check-square-fill", "skip", "x", "x-circle", "x-circle-fill", "x-diamond", "x-diamond-fill", "x-hexagon", "x-hexagon-fill", "x-square", "x-square-fill", "bug", "certificate", "eye", "eye-off", "fingerprint", "key", "keychain", "lock", "lock-fill", "lock-off", "shield", "shield-alert", "shield-check", "shield-off", "shield-x", "token", "unlock", "verified", "wall", "minus", "minus-circle", "minus-circle-fill", "minus-plus", "minus-plus-circle", "minus-plus-square", "minus-square", "minus-square-fill", "plus", "plus-circle", "plus-circle-fill", "plus-square", "camera", "camera-off", "cast", "closed-caption", "fast-forward", "film", "headphones", "image", "music", "pause", "pause-circle", "play", "play-circle", "radio", "rewind", "rss", "skip-back", "skip-forward", "speaker", "stop-circle", "volume", "volume-down", "volume-up", "volume-x", "wifi", "wifi-off", "compass", "crosshair", "map", "map-pin", "navigation", "navigation-alt", "redirect", "target", "align-center", "align-justify", "align-left", "align-right", "battery", "battery-charging", "bookmark", "bookmark-add", "bookmark-add-fill", "bookmark-fill", "bookmark-remove", "bookmark-remove-fill", "bottom", "top", "start", "end", "command", "crop", "dashboard", "delete", "download", "edit", "entry-point", "exit-point", "external-link", "filter", "filter-circle", "filter-fill", "grid", "grid-alt", "home", "jump-link", "layout", "link", "list", "maximize", "maximize-alt", "menu", "minimize", "minimize-alt", "more-horizontal", "more-vertical", "mouse-pointer", "move-horizontal", "paperclip", "pen-tool", "pencil-tool", "pin", "pin-off", "power", "printer", "reload", "repeat", "resize-column", "rotate-cw", "rotate-ccw", "search", "share", "sidebar", "sidebar-hide", "sidebar-show", "sign-in", "sign-out", "slash", "slash-square", "sort-asc", "sort-desc", "switcher", "sync", "sync-alert", "sync-reverse", "tag", "toggle-left", "toggle-right", "trash", "type", "text-wrap", "unfold-close", "unfold-open", "upload", "zoom-in", "zoom-out", "archive", "clipboard", "clipboard-checked", "clipboard-copy", "clipboard-x", "file", "file-change", "file-check", "file-diff", "file-minus", "file-plus", "file-source", "file-text", "file-x", "files", "folder", "folder-fill", "folder-minus", "folder-minus-fill", "folder-plus", "folder-plus-fill", "folder-star", "inbox", "api", "auto-apply", "build", "change", "change-circle", "change-square", "channel", "cloud", "cloud-check", "cloud-download", "cloud-lightning", "cloud-lock", "cloud-off", "cloud-upload", "cloud-x", "code", "connection", "connection-gateway", "cpu", "duplicate", "gateway", "git-branch", "git-commit", "git-merge", "git-pull-request", "git-repo", "hammer", "key-values", "mainframe", "mesh", "module", "monitor", "network", "network-alt", "node", "path", "pipeline", "plug", "replication-direct", "replication-perf", "scissors", "server", "server-cluster", "serverless", "service", "settings", "sliders", "smartphone", "socket", "step", "tablet", "terminal", "terminal-screen", "test", "tools", "transform-data", "tv", "webhook", "wrench", "calendar", "clock", "clock-filled", "delay", "event", "history", "hourglass", "watch", "bar-chart", "bar-chart-alt", "box", "collections", "database", "hard-drive", "line-chart", "line-chart-up", "logs", "package", "pie-chart", "queue", "save", "trend-down", "trend-up", "activity", "at-sign", "award", "bell", "bell-active", "bell-active-fill", "bell-off", "discussion-circle", "discussion-square", "heart", "heart-fill", "heart-off", "mail", "mail-open", "message-circle", "message-circle-fill", "message-square", "message-square-fill", "mic", "mic-off", "newspaper", "phone", "phone-call", "phone-off", "send", "star", "star-circle", "star-fill", "star-off", "thumbs-down", "thumbs-up", "video", "video-off", "bank-vault", "briefcase", "credit-card", "dollar-sign", "enterprise", "globe", "globe-private", "org", "provider", "shopping-bag", "shopping-cart", "arrow-down", "arrow-down-circle", "arrow-down-left", "arrow-down-right", "arrow-left", "arrow-left-circle", "arrow-right", "arrow-right-circle", "arrow-up", "arrow-up-circle", "arrow-up-left", "arrow-up-right", "caret", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "chevrons-down", "chevrons-left", "chevrons-right", "chevrons-up", "corner-down-left", "corner-down-right", "corner-left-down", "corner-left-up", "corner-right-down", "corner-right-up", "corner-up-left", "corner-up-right", "load-balancer", "migrate", "move", "shuffle", "swap-horizontal", "swap-vertical"];
10
+ export declare const NAMES: readonly ["loading", "loading-static", "running", "running-static", "apple", "apple-color", "alibaba", "alibaba-color", "amazon-ecs", "amazon-ecs-color", "amazon-eks", "amazon-eks-color", "ansible-community", "ansible-community-color", "ansible-automation-platform", "ansible-automation-platform-color", "auth0", "auth0-color", "aws", "aws-color", "aws-cdk", "aws-cdk-color", "aws-cloudwatch", "aws-cloudwatch-color", "aws-ec2", "aws-ec2-color", "aws-lambda", "aws-lambda-color", "aws-s3", "aws-s3-color", "azure", "azure-color", "azure-aks", "azure-aks-color", "azure-blob-storage", "azure-blob-storage-color", "azure-devops", "azure-devops-color", "azure-vms", "azure-vms-color", "bitbucket", "bitbucket-color", "bridgecrew", "bridgecrew-color", "cisco", "cisco-color", "codepen", "codepen-color", "confluence", "confluence-color", "confluent", "confluent-color", "datadog", "datadog-color", "digital-ocean", "digital-ocean-color", "docker", "docker-color", "duo", "duo-color", "elastic-observability", "elastic-observability-color", "f5", "f5-color", "facebook", "facebook-color", "figma", "figma-color", "gcp", "gcp-color", "git", "git-color", "gitlab", "gitlab-color", "github", "github-color", "google", "google-color", "google-docs", "google-docs-color", "google-drive", "google-drive-color", "google-forms", "google-forms-color", "google-sheets", "google-sheets-color", "google-slides", "google-slides-color", "grafana", "grafana-color", "helm", "helm-color", "infracost", "infracost-color", "jenkins", "jenkins-color", "jfrog", "jfrog-color", "jira", "jira-color", "jwt", "jwt-color", "kubernetes", "kubernetes-color", "lightlytics", "lightlytics-color", "linkedin", "linkedin-color", "linode", "linode-color", "linux", "linux-color", "loom", "loom-color", "meetup", "meetup-color", "microsoft", "microsoft-color", "microsoft-teams", "microsoft-teams-color", "minio", "minio-color", "mongodb", "mongodb-color", "new-relic", "new-relic-color", "okta", "okta-color", "oracle", "oracle-color", "opa", "opa-color", "openid", "openid-color", "openstack", "openstack-color", "pack", "pack-color", "pager-duty", "pager-duty-color", "ping-identity ", "ping-identity-color", "postgres", "postgres-color", "rabbitmq", "rabbitmq-color", "saml", "saml-color", "service-now", "service-now-color", "slack", "slack-color", "snyk", "snyk-color", "splunk", "splunk-color", "twilio", "twilio-color", "twitch", "twitch-color", "twitter", "twitter-color", "twitter-x", "twitter-x-color", "vantage", "vantage-color", "venafi", "venafi-color", "vercel", "vercel-color", "vmware", "vmware-color", "youtube", "youtube-color", "boundary", "boundary-color", "boundary-fill", "boundary-fill-color", "boundary-square", "boundary-square-color", "consul", "consul-color", "consul-fill", "consul-fill-color", "consul-square", "consul-square-color", "nomad", "nomad-color", "nomad-fill", "nomad-fill-color", "nomad-square", "nomad-square-color", "packer", "packer-color", "packer-fill", "packer-fill-color", "packer-square", "packer-square-color", "terraform", "terraform-color", "terraform-fill", "terraform-fill-color", "terraform-square", "terraform-square-color", "vagrant", "vagrant-color", "vagrant-fill", "vagrant-fill-color", "vagrant-square", "vagrant-square-color", "vault", "vault-color", "vault-fill", "vault-fill-color", "vault-square", "vault-square-color", "vault-radar", "vault-radar-color", "vault-radar-fill", "vault-radar-fill-color", "vault-radar-square", "vault-radar-square-color", "vault-secrets", "vault-secrets-color", "vault-secrets-fill", "vault-secrets-fill-color", "vault-secrets-square", "vault-secrets-square-color", "waypoint", "waypoint-color", "waypoint-fill", "waypoint-fill-color", "waypoint-square", "waypoint-square-color", "hashicorp", "hashicorp-color", "hashicorp-fill", "hashicorp-fill-color", "hashicorp-square", "hashicorp-square-color", "hcp", "hcp-color", "hcp-fill", "hcp-fill-color", "hcp-square", "hcp-square-color", "accessibility", "folder-users", "frown", "identity-service", "identity-user", "meh", "robot", "smile", "user", "user-check", "user-circle", "user-circle-fill", "user-minus", "user-plus", "user-x", "users", "ampersand", "beaker", "bucket", "bulb", "circle", "circle-dot", "circle-fill", "circle-half", "diamond", "diamond-fill", "disc", "dot", "dot-half", "droplet", "flag", "gift", "government", "handshake", "hash", "hexagon", "hexagon-fill", "labyrinth", "layers", "moon", "octagon", "outline", "random", "rocket", "sparkle", "square", "square-fill", "sun", "triangle", "triangle-fill", "truck", "wand", "zap", "zap-off", "docs", "docs-download", "docs-link", "guide", "guide-link", "help", "info", "info-fill", "learn", "learn-link", "support", "alert-circle", "alert-circle-fill", "alert-diamond", "alert-diamond-fill", "alert-octagon", "alert-octagon-fill", "alert-triangle", "alert-triangle-fill", "check", "check-circle", "check-circle-fill", "check-diamond", "check-diamond-fill", "check-hexagon", "check-hexagon-fill", "check-square", "check-square-fill", "skip", "x", "x-circle", "x-circle-fill", "x-diamond", "x-diamond-fill", "x-hexagon", "x-hexagon-fill", "x-square", "x-square-fill", "bug", "certificate", "eye", "eye-off", "fingerprint", "key", "keychain", "lock", "lock-fill", "lock-off", "shield", "shield-alert", "shield-check", "shield-off", "shield-x", "token", "unlock", "verified", "wall", "minus", "minus-circle", "minus-circle-fill", "minus-plus", "minus-plus-circle", "minus-plus-square", "minus-square", "minus-square-fill", "plus", "plus-circle", "plus-circle-fill", "plus-square", "camera", "camera-off", "cast", "closed-caption", "fast-forward", "film", "headphones", "image", "music", "pause", "pause-circle", "play", "play-circle", "radio", "rewind", "rss", "skip-back", "skip-forward", "speaker", "stop-circle", "volume", "volume-down", "volume-up", "volume-x", "wifi", "wifi-off", "compass", "crosshair", "map", "map-pin", "navigation", "navigation-alt", "redirect", "target", "align-center", "align-justify", "align-left", "align-right", "battery", "battery-charging", "bookmark", "bookmark-add", "bookmark-add-fill", "bookmark-fill", "bookmark-remove", "bookmark-remove-fill", "bottom", "command", "crop", "dashboard", "delete", "download", "edit", "end", "entry-point", "exit-point", "external-link", "filter", "filter-circle", "filter-fill", "grid", "grid-alt", "home", "jump-link", "layout", "link", "list", "maximize", "maximize-alt", "menu", "minimize", "minimize-alt", "more-horizontal", "more-vertical", "mouse-pointer", "move-horizontal", "paperclip", "pen-tool", "pencil-tool", "pin", "pin-off", "power", "printer", "reload", "repeat", "resize-column", "rotate-cw", "rotate-ccw", "search", "share", "sidebar", "sidebar-hide", "sidebar-show", "sign-in", "sign-out", "slash", "slash-square", "sort-asc", "sort-desc", "start", "switcher", "sync", "sync-alert", "sync-reverse", "tag", "text-wrap", "toggle-left", "toggle-right", "top", "trash", "type", "unfold-close", "unfold-open", "upload", "zoom-in", "zoom-out", "archive", "clipboard", "clipboard-checked", "clipboard-copy", "clipboard-x", "file", "file-change", "file-check", "file-diff", "file-minus", "file-plus", "file-source", "file-text", "file-x", "files", "folder", "folder-fill", "folder-minus", "folder-minus-fill", "folder-plus", "folder-plus-fill", "folder-star", "inbox", "api", "auto-apply", "build", "change", "change-circle", "change-square", "channel", "cloud", "cloud-check", "cloud-download", "cloud-lightning", "cloud-lock", "cloud-off", "cloud-upload", "cloud-x", "code", "connection", "connection-gateway", "cpu", "duplicate", "gateway", "git-branch", "git-commit", "git-merge", "git-pull-request", "git-repo", "hammer", "key-values", "mainframe", "mesh", "module", "monitor", "network", "network-alt", "node", "path", "pipeline", "plug", "replication-direct", "replication-perf", "scissors", "server", "server-cluster", "serverless", "service", "settings", "sliders", "smartphone", "socket", "step", "tablet", "terminal", "terminal-screen", "test", "tools", "transform-data", "tv", "webhook", "wrench", "calendar", "clock", "clock-filled", "delay", "event", "history", "hourglass", "watch", "bar-chart", "bar-chart-alt", "box", "collections", "database", "hard-drive", "line-chart", "line-chart-up", "logs", "package", "pie-chart", "queue", "save", "trend-down", "trend-up", "activity", "at-sign", "award", "bell", "bell-active", "bell-active-fill", "bell-off", "discussion-circle", "discussion-square", "heart", "heart-fill", "heart-off", "mail", "mail-open", "message-circle", "message-circle-fill", "message-square", "message-square-fill", "mic", "mic-off", "newspaper", "phone", "phone-call", "phone-off", "send", "star", "star-circle", "star-fill", "star-off", "thumbs-down", "thumbs-up", "video", "video-off", "bank-vault", "briefcase", "credit-card", "dollar-sign", "enterprise", "globe", "globe-private", "org", "provider", "shopping-bag", "shopping-cart", "arrow-down", "arrow-down-circle", "arrow-down-left", "arrow-down-right", "arrow-left", "arrow-left-circle", "arrow-right", "arrow-right-circle", "arrow-up", "arrow-up-circle", "arrow-up-left", "arrow-up-right", "caret", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "chevrons-down", "chevrons-left", "chevrons-right", "chevrons-up", "corner-down-left", "corner-down-right", "corner-left-down", "corner-left-up", "corner-right-down", "corner-right-up", "corner-up-left", "corner-up-right", "load-balancer", "migrate", "move", "shuffle", "swap-horizontal", "swap-vertical"];
11
11
  export interface HdsIconSignature {
12
12
  Args: {
13
13
  name: IconName;
@@ -3,6 +3,7 @@
3
3
  * SPDX-License-Identifier: MPL-2.0
4
4
  */
5
5
  import Component from '@glimmer/component';
6
+ import type Owner from '@ember/owner';
6
7
  import type { LinkTo } from '@ember/routing';
7
8
  export interface HdsInteractiveSignature {
8
9
  Args: {
@@ -22,15 +23,9 @@ export interface HdsInteractiveSignature {
22
23
  Element: HTMLAnchorElement | HTMLButtonElement;
23
24
  }
24
25
  export default class HdsInteractive extends Component<HdsInteractiveSignature> {
25
- static linkToExternal: LinkTo | null;
26
- /**
27
- * Determines if a @href value is "external" (it adds target="_blank" rel="noopener noreferrer")
28
- *
29
- * @param linkToExternal
30
- * @type LinkTo | null
31
- * @default null
32
- */
33
- get linkToExternal(): LinkTo | null;
26
+ linkToExternal: LinkTo | null;
27
+ constructor(owner: Owner, args: HdsInteractiveSignature['Args']);
28
+ resolveLinkToExternal(): Promise<void>;
34
29
  /**
35
30
  * Determines if a @href value is "external" (it adds target="_blank" rel="noopener noreferrer")
36
31
  *
@@ -11,6 +11,7 @@ export interface HdsPopoverPrimitiveSignature {
11
11
  isOpen?: boolean;
12
12
  enableSoftEvents?: boolean;
13
13
  enableClickEvents?: boolean;
14
+ boundary?: HdsAnchoredPositionOptions['boundary'];
14
15
  onOpen?: () => void;
15
16
  onClose?: () => void;
16
17
  };
@@ -26,6 +27,7 @@ export interface HdsPopoverPrimitiveSignature {
26
27
  showPopover: () => void;
27
28
  hidePopover: (event?: Event) => void;
28
29
  togglePopover: () => void;
30
+ boundary?: HdsAnchoredPositionOptions['boundary'];
29
31
  }
30
32
  ];
31
33
  };
@@ -16,6 +16,7 @@ export interface HdsRichTooltipBubbleSignature {
16
16
  isOpen?: boolean;
17
17
  popoverId: string;
18
18
  arrowId: string;
19
+ boundary?: HdsAnchoredPositionOptions['boundary'];
19
20
  setupPrimitivePopover: ModifierLike<SetupPrimitivePopoverModifier>;
20
21
  };
21
22
  Blocks: {
@@ -38,5 +39,6 @@ export default class HdsRichTooltipBubble extends Component<HdsRichTooltipBubble
38
39
  enableCollisionDetection: HdsAnchoredPositionOptions['enableCollisionDetection'];
39
40
  arrowSelector: string;
40
41
  arrowPadding: HdsAnchoredPositionOptions['arrowPadding'];
42
+ boundary: HdsAnchoredPositionOptions['boundary'];
41
43
  };
42
44
  }
@@ -8,7 +8,7 @@ import type { HdsIconSignature } from '../../icon';
8
8
  import type { HdsStepperStatuses } from '../types.ts';
9
9
  export declare const DEFAULT_STATUS = HdsStepperStatusesValues.Incomplete;
10
10
  export declare const STATUSES: HdsStepperStatuses[];
11
- export declare const MAPPING_STATUS_TO_ICONS: Record<HdsStepperStatusesValues, "type" | "map" | "filter" | "code" | "link" | "menu" | "search" | "video" | "circle" | "image" | "path" | "tag" | "repeat" | "hash" | "queue" | "shuffle" | "chevron-up" | "chevron-down" | "unfold-open" | "unfold-close" | "arrow-down" | "arrow-up" | "swap-vertical" | "top" | "key" | "move" | "change" | "pause" | "play" | "move-horizontal" | "loading" | "loading-static" | "running" | "running-static" | "apple" | "apple-color" | "alibaba" | "alibaba-color" | "amazon-ecs" | "amazon-ecs-color" | "amazon-eks" | "amazon-eks-color" | "ansible-community" | "ansible-community-color" | "ansible-automation-platform" | "ansible-automation-platform-color" | "auth0" | "auth0-color" | "aws" | "aws-color" | "aws-cdk" | "aws-cdk-color" | "aws-cloudwatch" | "aws-cloudwatch-color" | "aws-ec2" | "aws-ec2-color" | "aws-lambda" | "aws-lambda-color" | "aws-s3" | "aws-s3-color" | "azure" | "azure-color" | "azure-aks" | "azure-aks-color" | "azure-blob-storage" | "azure-blob-storage-color" | "azure-devops" | "azure-devops-color" | "azure-vms" | "azure-vms-color" | "bitbucket" | "bitbucket-color" | "bridgecrew" | "bridgecrew-color" | "cisco" | "cisco-color" | "codepen" | "codepen-color" | "confluence" | "confluence-color" | "confluent" | "confluent-color" | "datadog" | "datadog-color" | "digital-ocean" | "digital-ocean-color" | "docker" | "docker-color" | "duo" | "duo-color" | "elastic-observability" | "elastic-observability-color" | "f5" | "f5-color" | "facebook" | "facebook-color" | "figma" | "figma-color" | "gcp" | "gcp-color" | "git" | "git-color" | "gitlab" | "gitlab-color" | "github" | "github-color" | "google" | "google-color" | "google-docs" | "google-docs-color" | "google-drive" | "google-drive-color" | "google-forms" | "google-forms-color" | "google-sheets" | "google-sheets-color" | "google-slides" | "google-slides-color" | "grafana" | "grafana-color" | "helm" | "helm-color" | "infracost" | "infracost-color" | "jenkins" | "jenkins-color" | "jfrog" | "jfrog-color" | "jira" | "jira-color" | "jwt" | "jwt-color" | "kubernetes" | "kubernetes-color" | "lightlytics" | "lightlytics-color" | "linkedin" | "linkedin-color" | "linode" | "linode-color" | "linux" | "linux-color" | "loom" | "loom-color" | "meetup" | "meetup-color" | "microsoft" | "microsoft-color" | "microsoft-teams" | "microsoft-teams-color" | "minio" | "minio-color" | "mongodb" | "mongodb-color" | "new-relic" | "new-relic-color" | "okta" | "okta-color" | "oracle" | "oracle-color" | "opa" | "opa-color" | "openid" | "openid-color" | "openstack" | "openstack-color" | "pack" | "pack-color" | "pager-duty" | "pager-duty-color" | "ping-identity " | "ping-identity-color" | "postgres" | "postgres-color" | "rabbitmq" | "rabbitmq-color" | "saml" | "saml-color" | "service-now" | "service-now-color" | "slack" | "slack-color" | "snyk" | "snyk-color" | "splunk" | "splunk-color" | "twilio" | "twilio-color" | "twitch" | "twitch-color" | "twitter" | "twitter-color" | "twitter-x" | "twitter-x-color" | "vantage" | "vantage-color" | "venafi" | "venafi-color" | "vercel" | "vercel-color" | "vmware" | "vmware-color" | "youtube" | "youtube-color" | "boundary" | "boundary-color" | "boundary-fill" | "boundary-fill-color" | "boundary-square" | "boundary-square-color" | "consul" | "consul-color" | "consul-fill" | "consul-fill-color" | "consul-square" | "consul-square-color" | "nomad" | "nomad-color" | "nomad-fill" | "nomad-fill-color" | "nomad-square" | "nomad-square-color" | "packer" | "packer-color" | "packer-fill" | "packer-fill-color" | "packer-square" | "packer-square-color" | "terraform" | "terraform-color" | "terraform-fill" | "terraform-fill-color" | "terraform-square" | "terraform-square-color" | "vagrant" | "vagrant-color" | "vagrant-fill" | "vagrant-fill-color" | "vagrant-square" | "vagrant-square-color" | "vault" | "vault-color" | "vault-fill" | "vault-fill-color" | "vault-square" | "vault-square-color" | "vault-radar" | "vault-radar-color" | "vault-radar-fill" | "vault-radar-fill-color" | "vault-radar-square" | "vault-radar-square-color" | "vault-secrets" | "vault-secrets-color" | "vault-secrets-fill" | "vault-secrets-fill-color" | "vault-secrets-square" | "vault-secrets-square-color" | "waypoint" | "waypoint-color" | "waypoint-fill" | "waypoint-fill-color" | "waypoint-square" | "waypoint-square-color" | "hashicorp" | "hashicorp-color" | "hashicorp-fill" | "hashicorp-fill-color" | "hashicorp-square" | "hashicorp-square-color" | "hcp" | "hcp-color" | "hcp-fill" | "hcp-fill-color" | "hcp-square" | "hcp-square-color" | "accessibility" | "folder-users" | "frown" | "identity-service" | "identity-user" | "meh" | "robot" | "smile" | "user" | "user-check" | "user-circle" | "user-circle-fill" | "user-minus" | "user-plus" | "user-x" | "users" | "ampersand" | "beaker" | "bucket" | "bulb" | "circle-dot" | "circle-fill" | "circle-half" | "diamond" | "diamond-fill" | "disc" | "dot" | "dot-half" | "droplet" | "flag" | "gift" | "government" | "handshake" | "hexagon" | "hexagon-fill" | "labyrinth" | "layers" | "moon" | "octagon" | "outline" | "random" | "rocket" | "sparkle" | "square" | "square-fill" | "sun" | "triangle" | "triangle-fill" | "truck" | "wand" | "zap" | "zap-off" | "docs" | "docs-download" | "docs-link" | "guide" | "guide-link" | "help" | "info" | "info-fill" | "learn" | "learn-link" | "support" | "alert-circle" | "alert-circle-fill" | "alert-diamond" | "alert-diamond-fill" | "alert-octagon" | "alert-octagon-fill" | "alert-triangle" | "alert-triangle-fill" | "check" | "check-circle" | "check-circle-fill" | "check-diamond" | "check-diamond-fill" | "check-hexagon" | "check-hexagon-fill" | "check-square" | "check-square-fill" | "skip" | "x" | "x-circle" | "x-circle-fill" | "x-diamond" | "x-diamond-fill" | "x-hexagon" | "x-hexagon-fill" | "x-square" | "x-square-fill" | "bug" | "certificate" | "eye" | "eye-off" | "fingerprint" | "keychain" | "lock" | "lock-fill" | "lock-off" | "shield" | "shield-alert" | "shield-check" | "shield-off" | "shield-x" | "token" | "unlock" | "verified" | "wall" | "minus" | "minus-circle" | "minus-circle-fill" | "minus-plus" | "minus-plus-circle" | "minus-plus-square" | "minus-square" | "minus-square-fill" | "plus" | "plus-circle" | "plus-circle-fill" | "plus-square" | "camera" | "camera-off" | "cast" | "closed-caption" | "fast-forward" | "film" | "headphones" | "music" | "pause-circle" | "play-circle" | "radio" | "rewind" | "rss" | "skip-back" | "skip-forward" | "speaker" | "stop-circle" | "volume" | "volume-down" | "volume-up" | "volume-x" | "wifi" | "wifi-off" | "compass" | "crosshair" | "map-pin" | "navigation" | "navigation-alt" | "redirect" | "target" | "align-center" | "align-justify" | "align-left" | "align-right" | "battery" | "battery-charging" | "bookmark" | "bookmark-add" | "bookmark-add-fill" | "bookmark-fill" | "bookmark-remove" | "bookmark-remove-fill" | "bottom" | "start" | "end" | "command" | "crop" | "dashboard" | "delete" | "download" | "edit" | "entry-point" | "exit-point" | "external-link" | "filter-circle" | "filter-fill" | "grid" | "grid-alt" | "home" | "jump-link" | "layout" | "list" | "maximize" | "maximize-alt" | "minimize" | "minimize-alt" | "more-horizontal" | "more-vertical" | "mouse-pointer" | "paperclip" | "pen-tool" | "pencil-tool" | "pin" | "pin-off" | "power" | "printer" | "reload" | "resize-column" | "rotate-cw" | "rotate-ccw" | "share" | "sidebar" | "sidebar-hide" | "sidebar-show" | "sign-in" | "sign-out" | "slash" | "slash-square" | "sort-asc" | "sort-desc" | "switcher" | "sync" | "sync-alert" | "sync-reverse" | "toggle-left" | "toggle-right" | "trash" | "text-wrap" | "upload" | "zoom-in" | "zoom-out" | "archive" | "clipboard" | "clipboard-checked" | "clipboard-copy" | "clipboard-x" | "file" | "file-change" | "file-check" | "file-diff" | "file-minus" | "file-plus" | "file-source" | "file-text" | "file-x" | "files" | "folder" | "folder-fill" | "folder-minus" | "folder-minus-fill" | "folder-plus" | "folder-plus-fill" | "folder-star" | "inbox" | "api" | "auto-apply" | "build" | "change-circle" | "change-square" | "channel" | "cloud" | "cloud-check" | "cloud-download" | "cloud-lightning" | "cloud-lock" | "cloud-off" | "cloud-upload" | "cloud-x" | "connection" | "connection-gateway" | "cpu" | "duplicate" | "gateway" | "git-branch" | "git-commit" | "git-merge" | "git-pull-request" | "git-repo" | "hammer" | "key-values" | "mainframe" | "mesh" | "module" | "monitor" | "network" | "network-alt" | "node" | "pipeline" | "plug" | "replication-direct" | "replication-perf" | "scissors" | "server" | "server-cluster" | "serverless" | "service" | "settings" | "sliders" | "smartphone" | "socket" | "step" | "tablet" | "terminal" | "terminal-screen" | "test" | "tools" | "transform-data" | "tv" | "webhook" | "wrench" | "calendar" | "clock" | "clock-filled" | "delay" | "event" | "history" | "hourglass" | "watch" | "bar-chart" | "bar-chart-alt" | "box" | "collections" | "database" | "hard-drive" | "line-chart" | "line-chart-up" | "logs" | "package" | "pie-chart" | "save" | "trend-down" | "trend-up" | "activity" | "at-sign" | "award" | "bell" | "bell-active" | "bell-active-fill" | "bell-off" | "discussion-circle" | "discussion-square" | "heart" | "heart-fill" | "heart-off" | "mail" | "mail-open" | "message-circle" | "message-circle-fill" | "message-square" | "message-square-fill" | "mic" | "mic-off" | "newspaper" | "phone" | "phone-call" | "phone-off" | "send" | "star" | "star-circle" | "star-fill" | "star-off" | "thumbs-down" | "thumbs-up" | "video-off" | "bank-vault" | "briefcase" | "credit-card" | "dollar-sign" | "enterprise" | "globe" | "globe-private" | "org" | "provider" | "shopping-bag" | "shopping-cart" | "arrow-down-circle" | "arrow-down-left" | "arrow-down-right" | "arrow-left" | "arrow-left-circle" | "arrow-right" | "arrow-right-circle" | "arrow-up-circle" | "arrow-up-left" | "arrow-up-right" | "caret" | "chevron-left" | "chevron-right" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "corner-down-left" | "corner-down-right" | "corner-left-down" | "corner-left-up" | "corner-right-down" | "corner-right-up" | "corner-up-left" | "corner-up-right" | "load-balancer" | "migrate" | "swap-horizontal">;
11
+ export declare const MAPPING_STATUS_TO_ICONS: Record<HdsStepperStatusesValues, "type" | "map" | "filter" | "code" | "link" | "menu" | "search" | "video" | "circle" | "image" | "path" | "tag" | "repeat" | "hash" | "queue" | "shuffle" | "chevron-up" | "chevron-down" | "unfold-open" | "unfold-close" | "arrow-down" | "arrow-up" | "swap-vertical" | "top" | "key" | "move" | "change" | "pause" | "play" | "move-horizontal" | "loading" | "loading-static" | "running" | "running-static" | "apple" | "apple-color" | "alibaba" | "alibaba-color" | "amazon-ecs" | "amazon-ecs-color" | "amazon-eks" | "amazon-eks-color" | "ansible-community" | "ansible-community-color" | "ansible-automation-platform" | "ansible-automation-platform-color" | "auth0" | "auth0-color" | "aws" | "aws-color" | "aws-cdk" | "aws-cdk-color" | "aws-cloudwatch" | "aws-cloudwatch-color" | "aws-ec2" | "aws-ec2-color" | "aws-lambda" | "aws-lambda-color" | "aws-s3" | "aws-s3-color" | "azure" | "azure-color" | "azure-aks" | "azure-aks-color" | "azure-blob-storage" | "azure-blob-storage-color" | "azure-devops" | "azure-devops-color" | "azure-vms" | "azure-vms-color" | "bitbucket" | "bitbucket-color" | "bridgecrew" | "bridgecrew-color" | "cisco" | "cisco-color" | "codepen" | "codepen-color" | "confluence" | "confluence-color" | "confluent" | "confluent-color" | "datadog" | "datadog-color" | "digital-ocean" | "digital-ocean-color" | "docker" | "docker-color" | "duo" | "duo-color" | "elastic-observability" | "elastic-observability-color" | "f5" | "f5-color" | "facebook" | "facebook-color" | "figma" | "figma-color" | "gcp" | "gcp-color" | "git" | "git-color" | "gitlab" | "gitlab-color" | "github" | "github-color" | "google" | "google-color" | "google-docs" | "google-docs-color" | "google-drive" | "google-drive-color" | "google-forms" | "google-forms-color" | "google-sheets" | "google-sheets-color" | "google-slides" | "google-slides-color" | "grafana" | "grafana-color" | "helm" | "helm-color" | "infracost" | "infracost-color" | "jenkins" | "jenkins-color" | "jfrog" | "jfrog-color" | "jira" | "jira-color" | "jwt" | "jwt-color" | "kubernetes" | "kubernetes-color" | "lightlytics" | "lightlytics-color" | "linkedin" | "linkedin-color" | "linode" | "linode-color" | "linux" | "linux-color" | "loom" | "loom-color" | "meetup" | "meetup-color" | "microsoft" | "microsoft-color" | "microsoft-teams" | "microsoft-teams-color" | "minio" | "minio-color" | "mongodb" | "mongodb-color" | "new-relic" | "new-relic-color" | "okta" | "okta-color" | "oracle" | "oracle-color" | "opa" | "opa-color" | "openid" | "openid-color" | "openstack" | "openstack-color" | "pack" | "pack-color" | "pager-duty" | "pager-duty-color" | "ping-identity " | "ping-identity-color" | "postgres" | "postgres-color" | "rabbitmq" | "rabbitmq-color" | "saml" | "saml-color" | "service-now" | "service-now-color" | "slack" | "slack-color" | "snyk" | "snyk-color" | "splunk" | "splunk-color" | "twilio" | "twilio-color" | "twitch" | "twitch-color" | "twitter" | "twitter-color" | "twitter-x" | "twitter-x-color" | "vantage" | "vantage-color" | "venafi" | "venafi-color" | "vercel" | "vercel-color" | "vmware" | "vmware-color" | "youtube" | "youtube-color" | "boundary" | "boundary-color" | "boundary-fill" | "boundary-fill-color" | "boundary-square" | "boundary-square-color" | "consul" | "consul-color" | "consul-fill" | "consul-fill-color" | "consul-square" | "consul-square-color" | "nomad" | "nomad-color" | "nomad-fill" | "nomad-fill-color" | "nomad-square" | "nomad-square-color" | "packer" | "packer-color" | "packer-fill" | "packer-fill-color" | "packer-square" | "packer-square-color" | "terraform" | "terraform-color" | "terraform-fill" | "terraform-fill-color" | "terraform-square" | "terraform-square-color" | "vagrant" | "vagrant-color" | "vagrant-fill" | "vagrant-fill-color" | "vagrant-square" | "vagrant-square-color" | "vault" | "vault-color" | "vault-fill" | "vault-fill-color" | "vault-square" | "vault-square-color" | "vault-radar" | "vault-radar-color" | "vault-radar-fill" | "vault-radar-fill-color" | "vault-radar-square" | "vault-radar-square-color" | "vault-secrets" | "vault-secrets-color" | "vault-secrets-fill" | "vault-secrets-fill-color" | "vault-secrets-square" | "vault-secrets-square-color" | "waypoint" | "waypoint-color" | "waypoint-fill" | "waypoint-fill-color" | "waypoint-square" | "waypoint-square-color" | "hashicorp" | "hashicorp-color" | "hashicorp-fill" | "hashicorp-fill-color" | "hashicorp-square" | "hashicorp-square-color" | "hcp" | "hcp-color" | "hcp-fill" | "hcp-fill-color" | "hcp-square" | "hcp-square-color" | "accessibility" | "folder-users" | "frown" | "identity-service" | "identity-user" | "meh" | "robot" | "smile" | "user" | "user-check" | "user-circle" | "user-circle-fill" | "user-minus" | "user-plus" | "user-x" | "users" | "ampersand" | "beaker" | "bucket" | "bulb" | "circle-dot" | "circle-fill" | "circle-half" | "diamond" | "diamond-fill" | "disc" | "dot" | "dot-half" | "droplet" | "flag" | "gift" | "government" | "handshake" | "hexagon" | "hexagon-fill" | "labyrinth" | "layers" | "moon" | "octagon" | "outline" | "random" | "rocket" | "sparkle" | "square" | "square-fill" | "sun" | "triangle" | "triangle-fill" | "truck" | "wand" | "zap" | "zap-off" | "docs" | "docs-download" | "docs-link" | "guide" | "guide-link" | "help" | "info" | "info-fill" | "learn" | "learn-link" | "support" | "alert-circle" | "alert-circle-fill" | "alert-diamond" | "alert-diamond-fill" | "alert-octagon" | "alert-octagon-fill" | "alert-triangle" | "alert-triangle-fill" | "check" | "check-circle" | "check-circle-fill" | "check-diamond" | "check-diamond-fill" | "check-hexagon" | "check-hexagon-fill" | "check-square" | "check-square-fill" | "skip" | "x" | "x-circle" | "x-circle-fill" | "x-diamond" | "x-diamond-fill" | "x-hexagon" | "x-hexagon-fill" | "x-square" | "x-square-fill" | "bug" | "certificate" | "eye" | "eye-off" | "fingerprint" | "keychain" | "lock" | "lock-fill" | "lock-off" | "shield" | "shield-alert" | "shield-check" | "shield-off" | "shield-x" | "token" | "unlock" | "verified" | "wall" | "minus" | "minus-circle" | "minus-circle-fill" | "minus-plus" | "minus-plus-circle" | "minus-plus-square" | "minus-square" | "minus-square-fill" | "plus" | "plus-circle" | "plus-circle-fill" | "plus-square" | "camera" | "camera-off" | "cast" | "closed-caption" | "fast-forward" | "film" | "headphones" | "music" | "pause-circle" | "play-circle" | "radio" | "rewind" | "rss" | "skip-back" | "skip-forward" | "speaker" | "stop-circle" | "volume" | "volume-down" | "volume-up" | "volume-x" | "wifi" | "wifi-off" | "compass" | "crosshair" | "map-pin" | "navigation" | "navigation-alt" | "redirect" | "target" | "align-center" | "align-justify" | "align-left" | "align-right" | "battery" | "battery-charging" | "bookmark" | "bookmark-add" | "bookmark-add-fill" | "bookmark-fill" | "bookmark-remove" | "bookmark-remove-fill" | "bottom" | "command" | "crop" | "dashboard" | "delete" | "download" | "edit" | "end" | "entry-point" | "exit-point" | "external-link" | "filter-circle" | "filter-fill" | "grid" | "grid-alt" | "home" | "jump-link" | "layout" | "list" | "maximize" | "maximize-alt" | "minimize" | "minimize-alt" | "more-horizontal" | "more-vertical" | "mouse-pointer" | "paperclip" | "pen-tool" | "pencil-tool" | "pin" | "pin-off" | "power" | "printer" | "reload" | "resize-column" | "rotate-cw" | "rotate-ccw" | "share" | "sidebar" | "sidebar-hide" | "sidebar-show" | "sign-in" | "sign-out" | "slash" | "slash-square" | "sort-asc" | "sort-desc" | "start" | "switcher" | "sync" | "sync-alert" | "sync-reverse" | "text-wrap" | "toggle-left" | "toggle-right" | "trash" | "upload" | "zoom-in" | "zoom-out" | "archive" | "clipboard" | "clipboard-checked" | "clipboard-copy" | "clipboard-x" | "file" | "file-change" | "file-check" | "file-diff" | "file-minus" | "file-plus" | "file-source" | "file-text" | "file-x" | "files" | "folder" | "folder-fill" | "folder-minus" | "folder-minus-fill" | "folder-plus" | "folder-plus-fill" | "folder-star" | "inbox" | "api" | "auto-apply" | "build" | "change-circle" | "change-square" | "channel" | "cloud" | "cloud-check" | "cloud-download" | "cloud-lightning" | "cloud-lock" | "cloud-off" | "cloud-upload" | "cloud-x" | "connection" | "connection-gateway" | "cpu" | "duplicate" | "gateway" | "git-branch" | "git-commit" | "git-merge" | "git-pull-request" | "git-repo" | "hammer" | "key-values" | "mainframe" | "mesh" | "module" | "monitor" | "network" | "network-alt" | "node" | "pipeline" | "plug" | "replication-direct" | "replication-perf" | "scissors" | "server" | "server-cluster" | "serverless" | "service" | "settings" | "sliders" | "smartphone" | "socket" | "step" | "tablet" | "terminal" | "terminal-screen" | "test" | "tools" | "transform-data" | "tv" | "webhook" | "wrench" | "calendar" | "clock" | "clock-filled" | "delay" | "event" | "history" | "hourglass" | "watch" | "bar-chart" | "bar-chart-alt" | "box" | "collections" | "database" | "hard-drive" | "line-chart" | "line-chart-up" | "logs" | "package" | "pie-chart" | "save" | "trend-down" | "trend-up" | "activity" | "at-sign" | "award" | "bell" | "bell-active" | "bell-active-fill" | "bell-off" | "discussion-circle" | "discussion-square" | "heart" | "heart-fill" | "heart-off" | "mail" | "mail-open" | "message-circle" | "message-circle-fill" | "message-square" | "message-square-fill" | "mic" | "mic-off" | "newspaper" | "phone" | "phone-call" | "phone-off" | "send" | "star" | "star-circle" | "star-fill" | "star-off" | "thumbs-down" | "thumbs-up" | "video-off" | "bank-vault" | "briefcase" | "credit-card" | "dollar-sign" | "enterprise" | "globe" | "globe-private" | "org" | "provider" | "shopping-bag" | "shopping-cart" | "arrow-down-circle" | "arrow-down-left" | "arrow-down-right" | "arrow-left" | "arrow-left-circle" | "arrow-right" | "arrow-right-circle" | "arrow-up-circle" | "arrow-up-left" | "arrow-up-right" | "caret" | "chevron-left" | "chevron-right" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "corner-down-left" | "corner-down-right" | "corner-left-down" | "corner-left-up" | "corner-right-down" | "corner-right-up" | "corner-up-left" | "corner-up-right" | "load-balancer" | "migrate" | "swap-horizontal">;
12
12
  export interface HdsStepperTaskIndicatorSignature {
13
13
  Args: {
14
14
  status?: HdsStepperStatuses;
@@ -0,0 +1,24 @@
1
+ /**
2
+ * Copyright (c) HashiCorp, Inc.
3
+ * SPDX-License-Identifier: MPL-2.0
4
+ */
5
+ import Component from '@glimmer/component';
6
+ import type Owner from '@ember/owner';
7
+ import type { HdsThemeContexts } from './types.ts';
8
+ import type { HdsThemes, HdsModes } from '../../../services/hds-theming.ts';
9
+ export interface HdsThemeContextSignature {
10
+ Args: {
11
+ context: HdsThemeContexts;
12
+ };
13
+ Blocks: {
14
+ default: [];
15
+ };
16
+ Element: HTMLElement;
17
+ }
18
+ export declare const CONTEXTUAL_THEMES: HdsThemes[];
19
+ export declare const CONTEXTUAL_MODES: HdsModes[];
20
+ export declare const CONTEXTUAL_VALUES: HdsThemeContexts[];
21
+ export default class HdsThemeContext extends Component<HdsThemeContextSignature> {
22
+ constructor(owner: Owner, args: HdsThemeContextSignature['Args']);
23
+ get classNames(): string;
24
+ }
@@ -0,0 +1,19 @@
1
+ /**
2
+ * Copyright (c) HashiCorp, Inc.
3
+ * SPDX-License-Identifier: MPL-2.0
4
+ */
5
+ import { HdsThemeValues, HdsModesLightValues, HdsModesDarkValues } from '../../../services/hds-theming.ts';
6
+ import type { HdsThemes, HdsModes } from '../../../services/hds-theming.ts';
7
+ export declare const HdsThemeContextThemesValues: {
8
+ readonly Default: HdsThemeValues.Default;
9
+ readonly System: HdsThemeValues.System;
10
+ readonly Light: HdsThemeValues.Light;
11
+ readonly Dark: HdsThemeValues.Dark;
12
+ };
13
+ export declare const HdsThemeContextModesValues: {
14
+ readonly CdsG0: HdsModesLightValues.CdsG0;
15
+ readonly CdsG10: HdsModesLightValues.CdsG10;
16
+ readonly CdsG90: HdsModesDarkValues.CdsG90;
17
+ readonly CdsG100: HdsModesDarkValues.CdsG100;
18
+ };
19
+ export type HdsThemeContexts = HdsThemes | Exclude<HdsModes, 'default'>;
@@ -0,0 +1,43 @@
1
+ /**
2
+ * Copyright (c) HashiCorp, Inc.
3
+ * SPDX-License-Identifier: MPL-2.0
4
+ */
5
+ import Component from '@glimmer/component';
6
+ import type { HdsDropdownSignature } from '../dropdown/index.ts';
7
+ import type { HdsDropdownToggleButtonSignature } from '../dropdown/toggle/button.ts';
8
+ import type { HdsIconSignature } from '../icon/index.ts';
9
+ import type HdsThemingService from '../../../services/hds-theming.ts';
10
+ import type { HdsThemes, HdsOnSetThemeCallback } from '../../../services/hds-theming.ts';
11
+ interface ThemeOption {
12
+ theme: HdsThemes | undefined;
13
+ icon: HdsIconSignature['Args']['name'];
14
+ label: string;
15
+ }
16
+ export interface HdsThemeSwitcherSignature {
17
+ Args: {
18
+ toggleSize?: HdsDropdownToggleButtonSignature['Args']['size'];
19
+ toggleIsFullWidth?: HdsDropdownToggleButtonSignature['Args']['isFullWidth'];
20
+ hasDefaultOption?: boolean;
21
+ hasSystemOption?: boolean;
22
+ onSetTheme?: HdsOnSetThemeCallback;
23
+ };
24
+ Element: HdsDropdownSignature['Element'];
25
+ }
26
+ export default class HdsThemeSwitcher extends Component<HdsThemeSwitcherSignature> {
27
+ readonly hdsTheming: HdsThemingService;
28
+ get toggleSize(): "small" | "medium";
29
+ get toggleIsFullWidth(): boolean;
30
+ get toggleContent(): {
31
+ label: string;
32
+ icon: "type" | "map" | "filter" | "code" | "link" | "menu" | "search" | "video" | "circle" | "image" | "path" | "tag" | "repeat" | "hash" | "queue" | "shuffle" | "chevron-up" | "chevron-down" | "unfold-open" | "unfold-close" | "arrow-down" | "arrow-up" | "swap-vertical" | "top" | "key" | "move" | "change" | "pause" | "play" | "move-horizontal" | "loading" | "loading-static" | "running" | "running-static" | "apple" | "apple-color" | "alibaba" | "alibaba-color" | "amazon-ecs" | "amazon-ecs-color" | "amazon-eks" | "amazon-eks-color" | "ansible-community" | "ansible-community-color" | "ansible-automation-platform" | "ansible-automation-platform-color" | "auth0" | "auth0-color" | "aws" | "aws-color" | "aws-cdk" | "aws-cdk-color" | "aws-cloudwatch" | "aws-cloudwatch-color" | "aws-ec2" | "aws-ec2-color" | "aws-lambda" | "aws-lambda-color" | "aws-s3" | "aws-s3-color" | "azure" | "azure-color" | "azure-aks" | "azure-aks-color" | "azure-blob-storage" | "azure-blob-storage-color" | "azure-devops" | "azure-devops-color" | "azure-vms" | "azure-vms-color" | "bitbucket" | "bitbucket-color" | "bridgecrew" | "bridgecrew-color" | "cisco" | "cisco-color" | "codepen" | "codepen-color" | "confluence" | "confluence-color" | "confluent" | "confluent-color" | "datadog" | "datadog-color" | "digital-ocean" | "digital-ocean-color" | "docker" | "docker-color" | "duo" | "duo-color" | "elastic-observability" | "elastic-observability-color" | "f5" | "f5-color" | "facebook" | "facebook-color" | "figma" | "figma-color" | "gcp" | "gcp-color" | "git" | "git-color" | "gitlab" | "gitlab-color" | "github" | "github-color" | "google" | "google-color" | "google-docs" | "google-docs-color" | "google-drive" | "google-drive-color" | "google-forms" | "google-forms-color" | "google-sheets" | "google-sheets-color" | "google-slides" | "google-slides-color" | "grafana" | "grafana-color" | "helm" | "helm-color" | "infracost" | "infracost-color" | "jenkins" | "jenkins-color" | "jfrog" | "jfrog-color" | "jira" | "jira-color" | "jwt" | "jwt-color" | "kubernetes" | "kubernetes-color" | "lightlytics" | "lightlytics-color" | "linkedin" | "linkedin-color" | "linode" | "linode-color" | "linux" | "linux-color" | "loom" | "loom-color" | "meetup" | "meetup-color" | "microsoft" | "microsoft-color" | "microsoft-teams" | "microsoft-teams-color" | "minio" | "minio-color" | "mongodb" | "mongodb-color" | "new-relic" | "new-relic-color" | "okta" | "okta-color" | "oracle" | "oracle-color" | "opa" | "opa-color" | "openid" | "openid-color" | "openstack" | "openstack-color" | "pack" | "pack-color" | "pager-duty" | "pager-duty-color" | "ping-identity " | "ping-identity-color" | "postgres" | "postgres-color" | "rabbitmq" | "rabbitmq-color" | "saml" | "saml-color" | "service-now" | "service-now-color" | "slack" | "slack-color" | "snyk" | "snyk-color" | "splunk" | "splunk-color" | "twilio" | "twilio-color" | "twitch" | "twitch-color" | "twitter" | "twitter-color" | "twitter-x" | "twitter-x-color" | "vantage" | "vantage-color" | "venafi" | "venafi-color" | "vercel" | "vercel-color" | "vmware" | "vmware-color" | "youtube" | "youtube-color" | "boundary" | "boundary-color" | "boundary-fill" | "boundary-fill-color" | "boundary-square" | "boundary-square-color" | "consul" | "consul-color" | "consul-fill" | "consul-fill-color" | "consul-square" | "consul-square-color" | "nomad" | "nomad-color" | "nomad-fill" | "nomad-fill-color" | "nomad-square" | "nomad-square-color" | "packer" | "packer-color" | "packer-fill" | "packer-fill-color" | "packer-square" | "packer-square-color" | "terraform" | "terraform-color" | "terraform-fill" | "terraform-fill-color" | "terraform-square" | "terraform-square-color" | "vagrant" | "vagrant-color" | "vagrant-fill" | "vagrant-fill-color" | "vagrant-square" | "vagrant-square-color" | "vault" | "vault-color" | "vault-fill" | "vault-fill-color" | "vault-square" | "vault-square-color" | "vault-radar" | "vault-radar-color" | "vault-radar-fill" | "vault-radar-fill-color" | "vault-radar-square" | "vault-radar-square-color" | "vault-secrets" | "vault-secrets-color" | "vault-secrets-fill" | "vault-secrets-fill-color" | "vault-secrets-square" | "vault-secrets-square-color" | "waypoint" | "waypoint-color" | "waypoint-fill" | "waypoint-fill-color" | "waypoint-square" | "waypoint-square-color" | "hashicorp" | "hashicorp-color" | "hashicorp-fill" | "hashicorp-fill-color" | "hashicorp-square" | "hashicorp-square-color" | "hcp" | "hcp-color" | "hcp-fill" | "hcp-fill-color" | "hcp-square" | "hcp-square-color" | "accessibility" | "folder-users" | "frown" | "identity-service" | "identity-user" | "meh" | "robot" | "smile" | "user" | "user-check" | "user-circle" | "user-circle-fill" | "user-minus" | "user-plus" | "user-x" | "users" | "ampersand" | "beaker" | "bucket" | "bulb" | "circle-dot" | "circle-fill" | "circle-half" | "diamond" | "diamond-fill" | "disc" | "dot" | "dot-half" | "droplet" | "flag" | "gift" | "government" | "handshake" | "hexagon" | "hexagon-fill" | "labyrinth" | "layers" | "moon" | "octagon" | "outline" | "random" | "rocket" | "sparkle" | "square" | "square-fill" | "sun" | "triangle" | "triangle-fill" | "truck" | "wand" | "zap" | "zap-off" | "docs" | "docs-download" | "docs-link" | "guide" | "guide-link" | "help" | "info" | "info-fill" | "learn" | "learn-link" | "support" | "alert-circle" | "alert-circle-fill" | "alert-diamond" | "alert-diamond-fill" | "alert-octagon" | "alert-octagon-fill" | "alert-triangle" | "alert-triangle-fill" | "check" | "check-circle" | "check-circle-fill" | "check-diamond" | "check-diamond-fill" | "check-hexagon" | "check-hexagon-fill" | "check-square" | "check-square-fill" | "skip" | "x" | "x-circle" | "x-circle-fill" | "x-diamond" | "x-diamond-fill" | "x-hexagon" | "x-hexagon-fill" | "x-square" | "x-square-fill" | "bug" | "certificate" | "eye" | "eye-off" | "fingerprint" | "keychain" | "lock" | "lock-fill" | "lock-off" | "shield" | "shield-alert" | "shield-check" | "shield-off" | "shield-x" | "token" | "unlock" | "verified" | "wall" | "minus" | "minus-circle" | "minus-circle-fill" | "minus-plus" | "minus-plus-circle" | "minus-plus-square" | "minus-square" | "minus-square-fill" | "plus" | "plus-circle" | "plus-circle-fill" | "plus-square" | "camera" | "camera-off" | "cast" | "closed-caption" | "fast-forward" | "film" | "headphones" | "music" | "pause-circle" | "play-circle" | "radio" | "rewind" | "rss" | "skip-back" | "skip-forward" | "speaker" | "stop-circle" | "volume" | "volume-down" | "volume-up" | "volume-x" | "wifi" | "wifi-off" | "compass" | "crosshair" | "map-pin" | "navigation" | "navigation-alt" | "redirect" | "target" | "align-center" | "align-justify" | "align-left" | "align-right" | "battery" | "battery-charging" | "bookmark" | "bookmark-add" | "bookmark-add-fill" | "bookmark-fill" | "bookmark-remove" | "bookmark-remove-fill" | "bottom" | "command" | "crop" | "dashboard" | "delete" | "download" | "edit" | "end" | "entry-point" | "exit-point" | "external-link" | "filter-circle" | "filter-fill" | "grid" | "grid-alt" | "home" | "jump-link" | "layout" | "list" | "maximize" | "maximize-alt" | "minimize" | "minimize-alt" | "more-horizontal" | "more-vertical" | "mouse-pointer" | "paperclip" | "pen-tool" | "pencil-tool" | "pin" | "pin-off" | "power" | "printer" | "reload" | "resize-column" | "rotate-cw" | "rotate-ccw" | "share" | "sidebar" | "sidebar-hide" | "sidebar-show" | "sign-in" | "sign-out" | "slash" | "slash-square" | "sort-asc" | "sort-desc" | "start" | "switcher" | "sync" | "sync-alert" | "sync-reverse" | "text-wrap" | "toggle-left" | "toggle-right" | "trash" | "upload" | "zoom-in" | "zoom-out" | "archive" | "clipboard" | "clipboard-checked" | "clipboard-copy" | "clipboard-x" | "file" | "file-change" | "file-check" | "file-diff" | "file-minus" | "file-plus" | "file-source" | "file-text" | "file-x" | "files" | "folder" | "folder-fill" | "folder-minus" | "folder-minus-fill" | "folder-plus" | "folder-plus-fill" | "folder-star" | "inbox" | "api" | "auto-apply" | "build" | "change-circle" | "change-square" | "channel" | "cloud" | "cloud-check" | "cloud-download" | "cloud-lightning" | "cloud-lock" | "cloud-off" | "cloud-upload" | "cloud-x" | "connection" | "connection-gateway" | "cpu" | "duplicate" | "gateway" | "git-branch" | "git-commit" | "git-merge" | "git-pull-request" | "git-repo" | "hammer" | "key-values" | "mainframe" | "mesh" | "module" | "monitor" | "network" | "network-alt" | "node" | "pipeline" | "plug" | "replication-direct" | "replication-perf" | "scissors" | "server" | "server-cluster" | "serverless" | "service" | "settings" | "sliders" | "smartphone" | "socket" | "step" | "tablet" | "terminal" | "terminal-screen" | "test" | "tools" | "transform-data" | "tv" | "webhook" | "wrench" | "calendar" | "clock" | "clock-filled" | "delay" | "event" | "history" | "hourglass" | "watch" | "bar-chart" | "bar-chart-alt" | "box" | "collections" | "database" | "hard-drive" | "line-chart" | "line-chart-up" | "logs" | "package" | "pie-chart" | "save" | "trend-down" | "trend-up" | "activity" | "at-sign" | "award" | "bell" | "bell-active" | "bell-active-fill" | "bell-off" | "discussion-circle" | "discussion-square" | "heart" | "heart-fill" | "heart-off" | "mail" | "mail-open" | "message-circle" | "message-circle-fill" | "message-square" | "message-square-fill" | "mic" | "mic-off" | "newspaper" | "phone" | "phone-call" | "phone-off" | "send" | "star" | "star-circle" | "star-fill" | "star-off" | "thumbs-down" | "thumbs-up" | "video-off" | "bank-vault" | "briefcase" | "credit-card" | "dollar-sign" | "enterprise" | "globe" | "globe-private" | "org" | "provider" | "shopping-bag" | "shopping-cart" | "arrow-down-circle" | "arrow-down-left" | "arrow-down-right" | "arrow-left" | "arrow-left-circle" | "arrow-right" | "arrow-right-circle" | "arrow-up-circle" | "arrow-up-left" | "arrow-up-right" | "caret" | "chevron-left" | "chevron-right" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "corner-down-left" | "corner-down-right" | "corner-left-down" | "corner-left-up" | "corner-right-down" | "corner-right-up" | "corner-up-left" | "corner-up-right" | "load-balancer" | "migrate" | "swap-horizontal";
33
+ } | {
34
+ label: string;
35
+ icon: undefined;
36
+ };
37
+ get hasDefaultOption(): boolean;
38
+ get hasSystemOption(): boolean;
39
+ get _options(): Partial<Record<"default" | "light" | "dark" | "system", ThemeOption>>;
40
+ get currentTheme(): "default" | "light" | "dark" | "system" | undefined;
41
+ onSelectTheme(theme: HdsThemes | undefined): void;
42
+ }
43
+ export {};
@@ -222,6 +222,8 @@ export { default as HdsTextBody } from './components/hds/text/body.ts';
222
222
  export { default as HdsTextCode } from './components/hds/text/code.ts';
223
223
  export { default as HdsTextDisplay } from './components/hds/text/display.ts';
224
224
  export * from './components/hds/text/types.ts';
225
+ export { default as HdsThemeContext } from './components/hds/theme-context/index.ts';
226
+ export { default as HdsThemeSwitcher } from './components/hds/theme-switcher/index.ts';
225
227
  export { default as HdsTime } from './components/hds/time/index.ts';
226
228
  export { default as HdsTimeSingle } from './components/hds/time/single.ts';
227
229
  export { default as HdsTimeRange } from './components/hds/time/range.ts';
@@ -2,7 +2,8 @@
2
2
  * Copyright IBM Corp. 2021, 2025
3
3
  * SPDX-License-Identifier: MPL-2.0
4
4
  */
5
- import type { Placement, Strategy, OffsetOptions, FlipOptions, ShiftOptions, AutoPlacementOptions, ArrowOptions, Middleware } from '@floating-ui/dom';
5
+ import type { Placement, Strategy, OffsetOptions, FlipOptions, ShiftOptions, AutoPlacementOptions, ArrowOptions, Middleware, Boundary } from '@floating-ui/dom';
6
+ type BoundaryExtended = Boundary | (string & {});
6
7
  export declare enum HdsEnableCollisionDetectionOptions {
7
8
  Shift = "shift",
8
9
  Flip = "flip",
@@ -24,6 +25,7 @@ export type FloatingUIOptions = {
24
25
  arrowElement?: ArrowOptions['element'];
25
26
  arrowPadding?: ArrowOptions['padding'];
26
27
  matchToggleWidth?: boolean;
28
+ boundary?: BoundaryExtended;
27
29
  };
28
30
  export type HdsAnchoredPositionOptions = FloatingUIOptions & {
29
31
  arrowSelector?: string;
@@ -0,0 +1,57 @@
1
+ import Service from '@ember/service';
2
+ export declare enum HdsThemeValues {
3
+ Default = "default",
4
+ System = "system",
5
+ Light = "light",
6
+ Dark = "dark"
7
+ }
8
+ export declare enum HdsModesBaseValues {
9
+ Default = "default"
10
+ }
11
+ export declare enum HdsModesLightValues {
12
+ CdsG0 = "cds-g0",
13
+ CdsG10 = "cds-g10"
14
+ }
15
+ export declare enum HdsModesDarkValues {
16
+ CdsG90 = "cds-g90",
17
+ CdsG100 = "cds-g100"
18
+ }
19
+ export type HdsThemes = `${HdsThemeValues}`;
20
+ export type HdsModes = `${HdsModesBaseValues}` | `${HdsModesLightValues}` | `${HdsModesDarkValues}`;
21
+ export type HdsModesLight = `${HdsModesLightValues}`;
22
+ export type HdsModesDark = `${HdsModesDarkValues}`;
23
+ type HdsThemingOptions = {
24
+ lightTheme: HdsModesLight;
25
+ darkTheme: HdsModesDark;
26
+ };
27
+ type SetThemeArgs = {
28
+ theme: HdsThemes | undefined;
29
+ options?: HdsThemingOptions;
30
+ onSetTheme?: HdsOnSetThemeCallback;
31
+ };
32
+ export type HdsOnSetThemeCallbackArgs = {
33
+ currentTheme: HdsThemes | undefined;
34
+ currentMode: HdsModes | undefined;
35
+ };
36
+ export type HdsOnSetThemeCallback = (args: HdsOnSetThemeCallbackArgs) => void;
37
+ export declare const THEMES: HdsThemes[];
38
+ export declare const MODES_LIGHT: HdsModesLight[];
39
+ export declare const MODES_DARK: HdsModesDark[];
40
+ export declare const MODES: HdsModes[];
41
+ export declare const HDS_THEMING_LOCALSTORAGE_DATA = "hds-theming-data";
42
+ export declare const DEFAULT_THEMING_OPTION_LIGHT_THEME = HdsModesLightValues.CdsG0;
43
+ export declare const DEFAULT_THEMING_OPTION_DARK_THEME = HdsModesDarkValues.CdsG100;
44
+ export default class HdsThemingService extends Service {
45
+ _currentTheme: HdsThemes | undefined;
46
+ _currentMode: HdsModes | undefined;
47
+ _currentLightTheme: HdsModesLight;
48
+ _currentDarkTheme: HdsModesDark;
49
+ globalOnSetTheme: HdsOnSetThemeCallback | undefined;
50
+ initializeTheme(): void;
51
+ setTheme({ theme, options, onSetTheme }: SetThemeArgs): void;
52
+ get currentTheme(): HdsThemes | undefined;
53
+ get currentMode(): HdsModes | undefined;
54
+ get currentLightTheme(): HdsModesLight;
55
+ get currentDarkTheme(): HdsModesDark;
56
+ }
57
+ export {};
@@ -2,3 +2,4 @@
2
2
  * Copyright IBM Corp. 2021, 2025
3
3
  * SPDX-License-Identifier: MPL-2.0
4
4
  */
5
+ export * from './services/hds-theming.ts';
@@ -217,6 +217,8 @@ import type HdsTagComponent from './components/hds/tag';
217
217
  import type HdsTooltipButtonComponent from './components/hds/tooltip-button';
218
218
  import type HdsToastComponent from './components/hds/toast';
219
219
  import type HdsTextCodeComponent from './components/hds/text/code';
220
+ import type HdsThemeContextComponent from './components/hds/theme-context';
221
+ import type HdsThemeSwitcherComponent from './components/hds/theme-switcher';
220
222
  import type HdsTimeComponent from './components/hds/time';
221
223
  import type HdsTimeSingleComponent from './components/hds/time/single';
222
224
  import type HdsTimeRangeComponent from './components/hds/time/range';
@@ -687,6 +689,10 @@ export default interface HdsComponentsRegistry {
687
689
  'hds/tooltip-button': typeof HdsTooltipButtonComponent;
688
690
  'Hds::Toast': typeof HdsToastComponent;
689
691
  'hds/toast': typeof HdsToastComponent;
692
+ 'Hds::ThemeContext': typeof HdsThemeContextComponent;
693
+ 'hds/theme-context': typeof HdsThemeContextComponent;
694
+ 'Hds::ThemeSwitcher': typeof HdsThemeSwitcherComponent;
695
+ 'hds/theme-switcher': typeof HdsThemeSwitcherComponent;
690
696
  'Hds::Time': typeof HdsTimeComponent;
691
697
  'hds/time': typeof HdsTimeComponent;
692
698
  'Hds::Time::Single': typeof HdsTimeSingleComponent;
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Copyright IBM Corp. 2021, 2025
3
+ * SPDX-License-Identifier: MPL-2.0
4
+ */
5
+ import { LinkTo } from '@ember/routing';
6
+ /**
7
+ * Resolves the correct component to use for the `LinkTo`.
8
+ *
9
+ * @param isRouteExternal - If true, will return the `LinkToExternal` component. If `ember-engines` is not installed, an assertion will be thrown.
10
+ * @returns A promise resolving to the correct component to use for the `LinkTo`.
11
+ */
12
+ export declare function hdsResolveLinkToExternal(isRouteExternal?: boolean): Promise<typeof LinkTo>;
@@ -0,0 +1 @@
1
+ export { default } from "@hashicorp/design-system-components/components/hds/theme-context/index";
@@ -0,0 +1 @@
1
+ export { default } from "@hashicorp/design-system-components/components/hds/theme-switcher/index";
@@ -0,0 +1 @@
1
+ export { default } from "@hashicorp/design-system-components/services/hds-theming";
@@ -1,7 +1,10 @@
1
1
  import Component from '@glimmer/component';
2
+ import { tracked } from '@glimmer/tracking';
2
3
  import { htmlSafe } from '@ember/template';
3
4
  import { assert } from '@ember/debug';
5
+ import { hdsResolveLinkToExternal } from '../../../utils/hds-resolve-link-to-external.js';
4
6
  import { precompileTemplate } from '@ember/template-compilation';
7
+ import { g, i } from 'decorator-transforms/runtime';
5
8
  import { setComponentTemplate } from '@ember/component';
6
9
 
7
10
  var TEMPLATE = precompileTemplate("{{!\n Copyright IBM Corp. 2021, 2025\n SPDX-License-Identifier: MPL-2.0\n}}\n<li class=\"hds-breadcrumb__item\" style={{this.itemStyle}} ...attributes>\n {{#if @current}}\n <div class=\"hds-breadcrumb__current\">\n {{#if @icon}}\n <div class=\"hds-breadcrumb__icon\">\n <Hds::Icon @name={{@icon}} @size=\"16\" @stretched={{true}} />\n </div>\n {{/if}}\n <span class=\"hds-breadcrumb__text\">{{@text}}</span>\n </div>\n {{else}}\n {{#if @isRouteExternal}}\n <this.linkToExternal\n class=\"hds-breadcrumb__link\"\n @current-when={{@current-when}}\n @models={{hds-link-to-models @model @models}}\n @query={{hds-link-to-query @query}}\n @replace={{@replace}}\n @route={{@route}}\n >\n {{#if @icon}}\n <div class=\"hds-breadcrumb__icon\">\n <Hds::Icon @name={{@icon}} @size=\"16\" @stretched={{true}} />\n </div>\n {{/if}}\n <span class=\"hds-breadcrumb__text\">{{@text}}</span>\n </this.linkToExternal>\n {{else}}\n <LinkTo\n class=\"hds-breadcrumb__link\"\n @current-when={{@current-when}}\n @models={{hds-link-to-models @model @models}}\n @query={{hds-link-to-query @query}}\n @replace={{@replace}}\n @route={{@route}}\n >\n {{#if @icon}}\n <div class=\"hds-breadcrumb__icon\">\n <Hds::Icon @name={{@icon}} @size=\"16\" @stretched={{true}} />\n </div>\n {{/if}}\n <span class=\"hds-breadcrumb__text\">{{@text}}</span>\n </LinkTo>\n {{/if}}\n {{/if}}\n</li>");
@@ -12,23 +15,22 @@ var TEMPLATE = precompileTemplate("{{!\n Copyright IBM Corp. 2021, 2025\n SPDX
12
15
  */
13
16
 
14
17
  class HdsBreadcrumbItem extends Component {
15
- static linkToExternal = null;
16
-
17
- /**
18
- *
19
- * @param linkToExternal
20
- * @type LinkTo | null
21
- * @default null
22
- */
23
- get linkToExternal() {
24
- const component = HdsBreadcrumbItem.linkToExternal;
25
- if (component === null) {
26
- assert(`HdsBreadcrumbItem: You attempted to use an external link without configuring HDS with an external component. Please add this in your app.js file:
18
+ static {
19
+ g(this.prototype, "linkToExternal", [tracked], function () {
20
+ return null;
21
+ });
22
+ }
23
+ #linkToExternal = (i(this, "linkToExternal"), void 0);
24
+ constructor(owner, args) {
25
+ super(owner, args);
27
26
 
28
- import { HdsBreadcrumbItem } from @hashicorp/design-system-components/components;'
29
- HdsBreadcrumbItem.linkToExternal = LinkToExternalComponent;`);
27
+ // we want to avoid resolving the component if it's not needed
28
+ if (args.isRouteExternal) {
29
+ void this.resolveLinkToExternal();
30
30
  }
31
- return component;
31
+ }
32
+ async resolveLinkToExternal() {
33
+ this.linkToExternal = await hdsResolveLinkToExternal(this.args.isRouteExternal);
32
34
  }
33
35
 
34
36
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"item.js","sources":["../../../../src/components/hds/breadcrumb/item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2021, 2025\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { htmlSafe } from '@ember/template';\nimport { assert } from '@ember/debug';\n\nimport type { LinkTo } from '@ember/routing';\nimport type { SafeString } from '@ember/template';\nimport type { HdsIconSignature } from '../icon/index';\n\nexport interface HdsBreadcrumbItemSignature {\n Args: {\n current?: boolean;\n maxWidth?: string;\n text: string;\n isRouteExternal?: boolean;\n icon?: HdsIconSignature['Args']['name'];\n route?: string;\n models?: Array<string | number>;\n model?: string | number;\n query?: Record<string, string>;\n 'current-when'?: string;\n replace?: boolean;\n };\n Element: HTMLLIElement;\n}\n\nexport default class HdsBreadcrumbItem extends Component<HdsBreadcrumbItemSignature> {\n static linkToExternal: LinkTo | null = null;\n\n /**\n *\n * @param linkToExternal\n * @type LinkTo | null\n * @default null\n */\n get linkToExternal(): LinkTo | null {\n const component = HdsBreadcrumbItem.linkToExternal;\n if (component === null) {\n assert(\n `HdsBreadcrumbItem: You attempted to use an external link without configuring HDS with an external component. Please add this in your app.js file:\n\nimport { HdsBreadcrumbItem } from @hashicorp/design-system-components/components;'\nHdsBreadcrumbItem.linkToExternal = LinkToExternalComponent;`\n );\n }\n return component;\n }\n\n /**\n * @param maxWidth\n * @type {string}\n * @default undefined\n * @description A parameter that can be applied to an \"item\" to limit its max-width\n */\n get maxWidth(): string | undefined {\n const { maxWidth } = this.args;\n\n if (maxWidth) {\n assert(\n `@maxWidth for \"Hds::Breadcrumb::Item\" must be a size as number in 'px' or in 'em' (eg. '200px' or '24em'); received: ${maxWidth}`,\n maxWidth.match(/^\\d+(px|em)$/)\n );\n\n return maxWidth;\n } else {\n return undefined;\n }\n }\n\n /**\n * Get the inline style to apply to the item.\n * @method BreadcrumbItem#itemStyle\n * @return {string} The \"style\" attribute to apply to the item.\n */\n get itemStyle(): SafeString | undefined {\n if (this.maxWidth) {\n return htmlSafe(`max-width: ${this.maxWidth}`);\n } else {\n return undefined;\n }\n }\n\n /**\n * Get the class names to apply to the component.\n * @method BreadcrumbItem#classNames\n * @return {string} The \"class\" attribute to apply to the component.\n */\n get classNames(): string {\n const classes = ['hds-breadcrumb__item'];\n\n return classes.join(' ');\n }\n}\n"],"names":["HdsBreadcrumbItem","Component","linkToExternal","component","assert","maxWidth","args","match","undefined","itemStyle","htmlSafe","classNames","classes","join","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;;AA2Be,MAAMA,iBAAiB,SAASC,SAAS,CAA6B;EACnF,OAAOC,cAAc,GAAkB,IAAI;;AAE3C;AACF;AACA;AACA;AACA;AACA;EACE,IAAIA,cAAcA,GAAkB;AAClC,IAAA,MAAMC,SAAS,GAAGH,iBAAiB,CAACE,cAAc;IAClD,IAAIC,SAAS,KAAK,IAAI,EAAE;AACtBC,MAAAA,MAAM,CACJ,CAAA;;AAER;AACA,2DAAA,CACM,CAAC;AACH,IAAA;AACA,IAAA,OAAOD,SAAS;AAClB,EAAA;;AAEA;AACF;AACA;AACA;AACA;AACA;EACE,IAAIE,QAAQA,GAAuB;IACjC,MAAM;AAAEA,MAAAA;KAAU,GAAG,IAAI,CAACC,IAAI;AAE9B,IAAA,IAAID,QAAQ,EAAE;MACZD,MAAM,CACJ,CAAA,qHAAA,EAAwHC,QAAQ,CAAA,CAAE,EAClIA,QAAQ,CAACE,KAAK,CAAC,cAAc,CAC/B,CAAC;AAED,MAAA,OAAOF,QAAQ;AACjB,IAAA,CAAC,MAAM;AACL,MAAA,OAAOG,SAAS;AAClB,IAAA;AACF,EAAA;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIC,SAASA,GAA2B;IACtC,IAAI,IAAI,CAACJ,QAAQ,EAAE;AACjB,MAAA,OAAOK,QAAQ,CAAC,CAAA,WAAA,EAAc,IAAI,CAACL,QAAQ,EAAE,CAAC;AAChD,IAAA,CAAC,MAAM;AACL,MAAA,OAAOG,SAAS;AAClB,IAAA;AACF,EAAA;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIG,UAAUA,GAAW;AACvB,IAAA,MAAMC,OAAO,GAAG,CAAC,sBAAsB,CAAC;AAExC,IAAA,OAAOA,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC;AAC1B,EAAA;AACF;AAACC,oBAAA,CAAAC,QAAA,EAlEoBf,iBAAiB,CAAA;;;;"}
1
+ {"version":3,"file":"item.js","sources":["../../../../src/components/hds/breadcrumb/item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2021, 2025\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { htmlSafe } from '@ember/template';\nimport { assert } from '@ember/debug';\n\nimport { hdsResolveLinkToExternal } from '../../../utils/hds-resolve-link-to-external.ts';\n\nimport type Owner from '@ember/owner';\nimport type { LinkTo } from '@ember/routing';\nimport type { SafeString } from '@ember/template';\nimport type { HdsIconSignature } from '../icon/index';\n\nexport interface HdsBreadcrumbItemSignature {\n Args: {\n current?: boolean;\n maxWidth?: string;\n text: string;\n isRouteExternal?: boolean;\n icon?: HdsIconSignature['Args']['name'];\n route?: string;\n models?: Array<string | number>;\n model?: string | number;\n query?: Record<string, string>;\n 'current-when'?: string;\n replace?: boolean;\n };\n Element: HTMLLIElement;\n}\n\nexport default class HdsBreadcrumbItem extends Component<HdsBreadcrumbItemSignature> {\n @tracked linkToExternal: LinkTo | null = null;\n\n constructor(owner: Owner, args: HdsBreadcrumbItemSignature['Args']) {\n super(owner, args);\n\n // we want to avoid resolving the component if it's not needed\n if (args.isRouteExternal) {\n void this.resolveLinkToExternal();\n }\n }\n\n async resolveLinkToExternal() {\n this.linkToExternal = await hdsResolveLinkToExternal(\n this.args.isRouteExternal\n );\n }\n\n /**\n * @param maxWidth\n * @type {string}\n * @default undefined\n * @description A parameter that can be applied to an \"item\" to limit its max-width\n */\n get maxWidth(): string | undefined {\n const { maxWidth } = this.args;\n\n if (maxWidth) {\n assert(\n `@maxWidth for \"Hds::Breadcrumb::Item\" must be a size as number in 'px' or in 'em' (eg. '200px' or '24em'); received: ${maxWidth}`,\n maxWidth.match(/^\\d+(px|em)$/)\n );\n\n return maxWidth;\n } else {\n return undefined;\n }\n }\n\n /**\n * Get the inline style to apply to the item.\n * @method BreadcrumbItem#itemStyle\n * @return {string} The \"style\" attribute to apply to the item.\n */\n get itemStyle(): SafeString | undefined {\n if (this.maxWidth) {\n return htmlSafe(`max-width: ${this.maxWidth}`);\n } else {\n return undefined;\n }\n }\n\n /**\n * Get the class names to apply to the component.\n * @method BreadcrumbItem#classNames\n * @return {string} The \"class\" attribute to apply to the component.\n */\n get classNames(): string {\n const classes = ['hds-breadcrumb__item'];\n\n return classes.join(' ');\n }\n}\n"],"names":["HdsBreadcrumbItem","Component","g","prototype","tracked","i","void 0","constructor","owner","args","isRouteExternal","resolveLinkToExternal","linkToExternal","hdsResolveLinkToExternal","maxWidth","assert","match","undefined","itemStyle","htmlSafe","classNames","classes","join","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;;AA+Be,MAAMA,iBAAiB,SAASC,SAAS,CAA6B;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,gBAAA,EAAA,CAClFC,OAAO,CAAA,EAAA,YAAA;AAAA,MAAA,OAAiC,IAAI;AAAA,IAAA,CAAA,CAAA;AAAA;AAAA,EAAA,eAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,gBAAA,CAAA,EAAAC,MAAA;AAE7CC,EAAAA,WAAWA,CAACC,KAAY,EAAEC,IAAwC,EAAE;AAClE,IAAA,KAAK,CAACD,KAAK,EAAEC,IAAI,CAAC;;AAElB;IACA,IAAIA,IAAI,CAACC,eAAe,EAAE;AACxB,MAAA,KAAK,IAAI,CAACC,qBAAqB,EAAE;AACnC,IAAA;AACF,EAAA;EAEA,MAAMA,qBAAqBA,GAAG;IAC5B,IAAI,CAACC,cAAc,GAAG,MAAMC,wBAAwB,CAClD,IAAI,CAACJ,IAAI,CAACC,eACZ,CAAC;AACH,EAAA;;AAEA;AACF;AACA;AACA;AACA;AACA;EACE,IAAII,QAAQA,GAAuB;IACjC,MAAM;AAAEA,MAAAA;KAAU,GAAG,IAAI,CAACL,IAAI;AAE9B,IAAA,IAAIK,QAAQ,EAAE;MACZC,MAAM,CACJ,CAAA,qHAAA,EAAwHD,QAAQ,CAAA,CAAE,EAClIA,QAAQ,CAACE,KAAK,CAAC,cAAc,CAC/B,CAAC;AAED,MAAA,OAAOF,QAAQ;AACjB,IAAA,CAAC,MAAM;AACL,MAAA,OAAOG,SAAS;AAClB,IAAA;AACF,EAAA;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIC,SAASA,GAA2B;IACtC,IAAI,IAAI,CAACJ,QAAQ,EAAE;AACjB,MAAA,OAAOK,QAAQ,CAAC,CAAA,WAAA,EAAc,IAAI,CAACL,QAAQ,EAAE,CAAC;AAChD,IAAA,CAAC,MAAM;AACL,MAAA,OAAOG,SAAS;AAClB,IAAA;AACF,EAAA;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIG,UAAUA,GAAW;AACvB,IAAA,MAAMC,OAAO,GAAG,CAAC,sBAAsB,CAAC;AAExC,IAAA,OAAOA,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC;AAC1B,EAAA;AACF;AAACC,oBAAA,CAAAC,QAAA,EA9DoBxB,iBAAiB,CAAA;;;;"}