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

package/declarations/components/hds/breadcrumb/item.d.ts

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 import Component from '@glimmer/component';
+import type Owner from '@ember/owner';
 import type { LinkTo } from '@ember/routing';
 import type { SafeString } from '@ember/template';
 import type { HdsIconSignature } from '../icon/index';
@@ -23,13 +24,9 @@ export interface HdsBreadcrumbItemSignature {
     Element: HTMLLIElement;
 }
 export default class HdsBreadcrumbItem extends Component<HdsBreadcrumbItemSignature> {
-    /**
-     *
-     * @param linkToExternal
-     * @type LinkTo | null
-     * @default null
-     */
-    get linkToExternal(): LinkTo | null;
+    linkToExternal: LinkTo | null;
+    constructor(owner: Owner, args: HdsBreadcrumbItemSignature['Args']);
+    resolveLinkToExternal(): Promise<void>;
     /**
      * @param maxWidth
      * @type {string}

package/declarations/components/hds/dropdown/index.d.ts

@@ -34,6 +34,7 @@ export interface HdsDropdownSignature {
         preserveContentInDom?: boolean;
         matchToggleWidth?: boolean;
         onClose?: HdsPopoverPrimitiveSignature['Args']['onClose'];
+        boundary?: HdsAnchoredPositionOptions['boundary'];
     };
     Blocks: {
         default: [
@@ -72,6 +73,7 @@ export default class HdsDropdown extends Component<HdsDropdownSignature> {
         offsetOptions: HdsAnchoredPositionOptions['offsetOptions'];
         enableCollisionDetection: HdsAnchoredPositionOptions['enableCollisionDetection'];
         matchToggleWidth: HdsAnchoredPositionOptions['matchToggleWidth'];
+        boundary: HdsAnchoredPositionOptions['boundary'];
     };
     /**
      * Get the class names to apply to the element

package/declarations/components/hds/interactive/index.d.ts

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 import Component from '@glimmer/component';
+import type Owner from '@ember/owner';
 import type { LinkTo } from '@ember/routing';
 export interface HdsInteractiveSignature {
     Args: {
@@ -22,14 +23,9 @@ export interface HdsInteractiveSignature {
     Element: HTMLAnchorElement | HTMLButtonElement;
 }
 export default class HdsInteractive extends Component<HdsInteractiveSignature> {
-    /**
-     * Determines if a @href value is "external" (it adds target="_blank" rel="noopener noreferrer")
-     *
-     * @param linkToExternal
-     * @type LinkTo | null
-     * @default null
-     */
-    get linkToExternal(): LinkTo | null;
+    linkToExternal: LinkTo | null;
+    constructor(owner: Owner, args: HdsInteractiveSignature['Args']);
+    resolveLinkToExternal(): Promise<void>;
     /**
      * Determines if a @href value is "external" (it adds target="_blank" rel="noopener noreferrer")
      *

package/declarations/components/hds/popover-primitive/index.d.ts

@@ -11,6 +11,7 @@ export interface HdsPopoverPrimitiveSignature {
         isOpen?: boolean;
         enableSoftEvents?: boolean;
         enableClickEvents?: boolean;
+        boundary?: HdsAnchoredPositionOptions['boundary'];
         onOpen?: () => void;
         onClose?: () => void;
     };
@@ -26,6 +27,7 @@ export interface HdsPopoverPrimitiveSignature {
                 showPopover: () => void;
                 hidePopover: (event?: Event) => void;
                 togglePopover: () => void;
+                boundary?: HdsAnchoredPositionOptions['boundary'];
             }
         ];
     };

package/declarations/components/hds/rich-tooltip/bubble.d.ts

@@ -16,6 +16,7 @@ export interface HdsRichTooltipBubbleSignature {
         isOpen?: boolean;
         popoverId: string;
         arrowId: string;
+        boundary?: HdsAnchoredPositionOptions['boundary'];
         setupPrimitivePopover: ModifierLike<SetupPrimitivePopoverModifier>;
     };
     Blocks: {
@@ -38,5 +39,6 @@ export default class HdsRichTooltipBubble extends Component<HdsRichTooltipBubble
         enableCollisionDetection: HdsAnchoredPositionOptions['enableCollisionDetection'];
         arrowSelector: string;
         arrowPadding: HdsAnchoredPositionOptions['arrowPadding'];
+        boundary: HdsAnchoredPositionOptions['boundary'];
     };
 }

package/declarations/components/hds/theme-context/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import type Owner from '@ember/owner';
+import type { HdsThemeContexts } from './types.ts';
+import type { HdsThemes, HdsModes } from '../../../services/hds-theming.ts';
+export interface HdsThemeContextSignature {
+    Args: {
+        context: HdsThemeContexts;
+    };
+    Blocks: {
+        default: [];
+    };
+    Element: HTMLElement;
+}
+export declare const CONTEXTUAL_THEMES: HdsThemes[];
+export declare const CONTEXTUAL_MODES: HdsModes[];
+export declare const CONTEXTUAL_VALUES: HdsThemeContexts[];
+export default class HdsThemeContext extends Component<HdsThemeContextSignature> {
+    constructor(owner: Owner, args: HdsThemeContextSignature['Args']);
+    get classNames(): string;
+}

package/declarations/components/hds/theme-context/types.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import { HdsThemeValues, HdsModesLightValues, HdsModesDarkValues } from '../../../services/hds-theming.ts';
+import type { HdsThemes, HdsModes } from '../../../services/hds-theming.ts';
+export declare const HdsThemeContextThemesValues: {
+    readonly Default: HdsThemeValues.Default;
+    readonly System: HdsThemeValues.System;
+    readonly Light: HdsThemeValues.Light;
+    readonly Dark: HdsThemeValues.Dark;
+};
+export declare const HdsThemeContextModesValues: {
+    readonly CdsG0: HdsModesLightValues.CdsG0;
+    readonly CdsG10: HdsModesLightValues.CdsG10;
+    readonly CdsG90: HdsModesDarkValues.CdsG90;
+    readonly CdsG100: HdsModesDarkValues.CdsG100;
+};
+export type HdsThemeContexts = HdsThemes | Exclude<HdsModes, 'default'>;

package/declarations/components/hds/theme-switcher/index.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import type { HdsDropdownSignature } from '../dropdown/index.ts';
+import type { HdsDropdownToggleButtonSignature } from '../dropdown/toggle/button.ts';
+import type { HdsIconSignature } from '../icon/index.ts';
+import type HdsThemingService from '../../../services/hds-theming.ts';
+import type { HdsThemes, HdsOnSetThemeCallback } from '../../../services/hds-theming.ts';
+interface ThemeOption {
+    theme: HdsThemes | undefined;
+    icon: HdsIconSignature['Args']['name'];
+    label: string;
+}
+export interface HdsThemeSwitcherSignature {
+    Args: {
+        toggleSize?: HdsDropdownToggleButtonSignature['Args']['size'];
+        toggleIsFullWidth?: HdsDropdownToggleButtonSignature['Args']['isFullWidth'];
+        hasDefaultOption?: boolean;
+        hasSystemOption?: boolean;
+        onSetTheme?: HdsOnSetThemeCallback;
+    };
+    Element: HdsDropdownSignature['Element'];
+}
+export default class HdsThemeSwitcher extends Component<HdsThemeSwitcherSignature> {
+    readonly hdsTheming: HdsThemingService;
+    get toggleSize(): "small" | "medium";
+    get toggleIsFullWidth(): boolean;
+    get toggleContent(): {
+        label: string;
+        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";
+    } | {
+        label: string;
+        icon: undefined;
+    };
+    get hasDefaultOption(): boolean;
+    get hasSystemOption(): boolean;
+    get _options(): Partial<Record<"default" | "light" | "dark" | "system", ThemeOption>>;
+    get currentTheme(): "default" | "light" | "dark" | "system" | undefined;
+    onSelectTheme(theme: HdsThemes | undefined): void;
+}
+export {};

package/declarations/components.d.ts

@@ -222,6 +222,8 @@ export { default as HdsTextBody } from './components/hds/text/body.ts';
 export { default as HdsTextCode } from './components/hds/text/code.ts';
 export { default as HdsTextDisplay } from './components/hds/text/display.ts';
 export * from './components/hds/text/types.ts';
+export { default as HdsThemeContext } from './components/hds/theme-context/index.ts';
+export { default as HdsThemeSwitcher } from './components/hds/theme-switcher/index.ts';
 export { default as HdsTime } from './components/hds/time/index.ts';
 export { default as HdsTimeSingle } from './components/hds/time/single.ts';
 export { default as HdsTimeRange } from './components/hds/time/range.ts';

package/declarations/modifiers/hds-anchored-position.d.ts

@@ -2,7 +2,8 @@
  * Copyright IBM Corp. 2021, 2025
  * SPDX-License-Identifier: MPL-2.0
  */
-import type { Placement, Strategy, OffsetOptions, FlipOptions, ShiftOptions, AutoPlacementOptions, ArrowOptions, Middleware } from '@floating-ui/dom';
+import type { Placement, Strategy, OffsetOptions, FlipOptions, ShiftOptions, AutoPlacementOptions, ArrowOptions, Middleware, Boundary } from '@floating-ui/dom';
+type BoundaryExtended = Boundary | (string & {});
 export declare enum HdsEnableCollisionDetectionOptions {
     Shift = "shift",
     Flip = "flip",
@@ -24,6 +25,7 @@ export type FloatingUIOptions = {
     arrowElement?: ArrowOptions['element'];
     arrowPadding?: ArrowOptions['padding'];
     matchToggleWidth?: boolean;
+    boundary?: BoundaryExtended;
 };
 export type HdsAnchoredPositionOptions = FloatingUIOptions & {
     arrowSelector?: string;

package/declarations/services/hds-theming.d.ts

@@ -0,0 +1,57 @@
+import Service from '@ember/service';
+export declare enum HdsThemeValues {
+    Default = "default",
+    System = "system",
+    Light = "light",
+    Dark = "dark"
+}
+export declare enum HdsModesBaseValues {
+    Default = "default"
+}
+export declare enum HdsModesLightValues {
+    CdsG0 = "cds-g0",
+    CdsG10 = "cds-g10"
+}
+export declare enum HdsModesDarkValues {
+    CdsG90 = "cds-g90",
+    CdsG100 = "cds-g100"
+}
+export type HdsThemes = `${HdsThemeValues}`;
+export type HdsModes = `${HdsModesBaseValues}` | `${HdsModesLightValues}` | `${HdsModesDarkValues}`;
+export type HdsModesLight = `${HdsModesLightValues}`;
+export type HdsModesDark = `${HdsModesDarkValues}`;
+type HdsThemingOptions = {
+    lightTheme: HdsModesLight;
+    darkTheme: HdsModesDark;
+};
+type SetThemeArgs = {
+    theme: HdsThemes | undefined;
+    options?: HdsThemingOptions;
+    onSetTheme?: HdsOnSetThemeCallback;
+};
+export type HdsOnSetThemeCallbackArgs = {
+    currentTheme: HdsThemes | undefined;
+    currentMode: HdsModes | undefined;
+};
+export type HdsOnSetThemeCallback = (args: HdsOnSetThemeCallbackArgs) => void;
+export declare const THEMES: HdsThemes[];
+export declare const MODES_LIGHT: HdsModesLight[];
+export declare const MODES_DARK: HdsModesDark[];
+export declare const MODES: HdsModes[];
+export declare const HDS_THEMING_LOCALSTORAGE_DATA = "hds-theming-data";
+export declare const DEFAULT_THEMING_OPTION_LIGHT_THEME = HdsModesLightValues.CdsG0;
+export declare const DEFAULT_THEMING_OPTION_DARK_THEME = HdsModesDarkValues.CdsG100;
+export default class HdsThemingService extends Service {
+    _currentTheme: HdsThemes | undefined;
+    _currentMode: HdsModes | undefined;
+    _currentLightTheme: HdsModesLight;
+    _currentDarkTheme: HdsModesDark;
+    globalOnSetTheme: HdsOnSetThemeCallback | undefined;
+    initializeTheme(): void;
+    setTheme({ theme, options, onSetTheme }: SetThemeArgs): void;
+    get currentTheme(): HdsThemes | undefined;
+    get currentMode(): HdsModes | undefined;
+    get currentLightTheme(): HdsModesLight;
+    get currentDarkTheme(): HdsModesDark;
+}
+export {};

package/declarations/services.d.ts

@@ -2,3 +2,4 @@
  * Copyright IBM Corp. 2021, 2025
  * SPDX-License-Identifier: MPL-2.0
  */
+export * from './services/hds-theming.ts';

package/declarations/template-registry.d.ts

@@ -217,6 +217,8 @@ import type HdsTagComponent from './components/hds/tag';
 import type HdsTooltipButtonComponent from './components/hds/tooltip-button';
 import type HdsToastComponent from './components/hds/toast';
 import type HdsTextCodeComponent from './components/hds/text/code';
+import type HdsThemeContextComponent from './components/hds/theme-context';
+import type HdsThemeSwitcherComponent from './components/hds/theme-switcher';
 import type HdsTimeComponent from './components/hds/time';
 import type HdsTimeSingleComponent from './components/hds/time/single';
 import type HdsTimeRangeComponent from './components/hds/time/range';
@@ -687,6 +689,10 @@ export default interface HdsComponentsRegistry {
     'hds/tooltip-button': typeof HdsTooltipButtonComponent;
     'Hds::Toast': typeof HdsToastComponent;
     'hds/toast': typeof HdsToastComponent;
+    'Hds::ThemeContext': typeof HdsThemeContextComponent;
+    'hds/theme-context': typeof HdsThemeContextComponent;
+    'Hds::ThemeSwitcher': typeof HdsThemeSwitcherComponent;
+    'hds/theme-switcher': typeof HdsThemeSwitcherComponent;
     'Hds::Time': typeof HdsTimeComponent;
     'hds/time': typeof HdsTimeComponent;
     'Hds::Time::Single': typeof HdsTimeSingleComponent;

package/declarations/utils/hds-resolve-link-to-external.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2021, 2025
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import { LinkTo } from '@ember/routing';
+/**
+ * Resolves the correct component to use for the `LinkTo`.
+ *
+ * @param isRouteExternal - If true, will return the `LinkToExternal` component. If `ember-engines` is not installed, an assertion will be thrown.
+ * @returns A promise resolving to the correct component to use for the `LinkTo`.
+ */
+export declare function hdsResolveLinkToExternal(isRouteExternal?: boolean): Promise<typeof LinkTo>;

package/dist/_app_/components/hds/theme-context.js

@@ -0,0 +1 @@
+export { default } from "@hashicorp/design-system-components/components/hds/theme-context/index";

package/dist/_app_/components/hds/theme-switcher.js

@@ -0,0 +1 @@
+export { default } from "@hashicorp/design-system-components/components/hds/theme-switcher/index";

package/dist/_app_/services/hds-theming.js

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

package/dist/components/hds/breadcrumb/item.js

@@ -1,8 +1,10 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { htmlSafe } from '@ember/template';
 import { assert } from '@ember/debug';
-import { getLinkToExternal } from '../../../utils/hds-link-to-external.js';
+import { hdsResolveLinkToExternal } from '../../../utils/hds-resolve-link-to-external.js';
 import { precompileTemplate } from '@ember/template-compilation';
+import { g, i } from 'decorator-transforms/runtime';
 import { setComponentTemplate } from '@ember/component';
 
 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>");
@@ -13,21 +15,22 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright IBM Corp. 2021, 2025\n  SPDX
  */
 
 class HdsBreadcrumbItem extends Component {
-  /**
-   *
-   * @param linkToExternal
-   * @type LinkTo | null
-   * @default null
-   */
-  get linkToExternal() {
-    const component = getLinkToExternal();
-    if (component === null) {
-      assert(`HdsBreadcrumbItem: You attempted to use an external link without configuring HDS with an external component. Please add this in your app.js file:
+  static {
+    g(this.prototype, "linkToExternal", [tracked], function () {
+      return null;
+    });
+  }
+  #linkToExternal = (i(this, "linkToExternal"), void 0);
+  constructor(owner, args) {
+    super(owner, args);
 
-import { setLinkToExternal } from '@hashicorp/design-system-components/utils/hds-link-to-external';
-setLinkToExternal(LinkToExternalComponent);`);
+    // we want to avoid resolving the component if it's not needed
+    if (args.isRouteExternal) {
+      void this.resolveLinkToExternal();
     }
-    return component;
+  }
+  async resolveLinkToExternal() {
+    this.linkToExternal = await hdsResolveLinkToExternal(this.args.isRouteExternal);
   }
 
   /**

package/dist/components/hds/breadcrumb/item.js.map

@@ -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';\nimport { getLinkToExternal } from '../../../utils/hds-link-to-external.ts';\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  /**\n   *\n   * @param linkToExternal\n   * @type LinkTo | null\n   * @default null\n   */\n  get linkToExternal(): LinkTo | null {\n    const component = getLinkToExternal();\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 { setLinkToExternal } from '@hashicorp/design-system-components/utils/hds-link-to-external';\nsetLinkToExternal(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","getLinkToExternal","assert","maxWidth","args","match","undefined","itemStyle","htmlSafe","classNames","classes","join","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;;AA4Be,MAAMA,iBAAiB,SAASC,SAAS,CAA6B;AACnF;AACF;AACA;AACA;AACA;AACA;EACE,IAAIC,cAAcA,GAAkB;AAClC,IAAA,MAAMC,SAAS,GAAGC,iBAAiB,EAAE;IACrC,IAAID,SAAS,KAAK,IAAI,EAAE;AACtBE,MAAAA,MAAM,CACJ,CAAA;;AAER;AACA,2CAAA,CACM,CAAC;AACH,IAAA;AACA,IAAA,OAAOF,SAAS;AAClB,EAAA;;AAEA;AACF;AACA;AACA;AACA;AACA;EACE,IAAIG,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,EAhEoBhB,iBAAiB,CAAA;;;;"}
+{"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;;;;"}

package/dist/components/hds/dropdown/index.js

@@ -6,7 +6,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { n } from 'decorator-transforms/runtime';
 import { setComponentTemplate } from '@ember/component';
 
-var TEMPLATE = precompileTemplate("{{!\n  Copyright IBM Corp. 2021, 2025\n  SPDX-License-Identifier: MPL-2.0\n}}\n<Hds::PopoverPrimitive @isOpen={{@isOpen}} @onClose={{@onClose}} @enableClickEvents={{true}} as |PP|>\n  <div class={{this.classNames}} ...attributes {{PP.setupPrimitiveContainer}}>\n    {{yield\n      (hash\n        ToggleButton=(component\n          \"hds/dropdown/toggle/button\" isOpen=PP.isOpen setupPrimitiveToggle=PP.setupPrimitiveToggle\n        )\n        ToggleIcon=(component \"hds/dropdown/toggle/icon\" isOpen=PP.isOpen setupPrimitiveToggle=PP.setupPrimitiveToggle)\n        close=PP.hidePopover\n      )\n    }}\n    <div\n      tabindex=\"-1\"\n      class={{this.classNamesContent}}\n      {{style width=@width max-height=@height}}\n      {{PP.setupPrimitivePopover anchoredPositionOptions=this.anchoredPositionOptions}}\n    >\n      {{#if (or PP.isOpen @preserveContentInDom)}}\n        {{yield (hash Header=(component \"hds/dropdown/header\") close=PP.hidePopover)}}\n        <ul class=\"hds-dropdown__list\" {{did-insert this.didInsertList}}>\n          {{yield\n            (hash\n              close=PP.hidePopover\n              Checkbox=(component \"hds/dropdown/list-item/checkbox\")\n              Checkmark=(component \"hds/dropdown/list-item/checkmark\")\n              CopyItem=(component \"hds/dropdown/list-item/copy-item\")\n              Description=(component \"hds/dropdown/list-item/description\")\n              Generic=(component \"hds/dropdown/list-item/generic\")\n              Interactive=(component \"hds/dropdown/list-item/interactive\")\n              Radio=(component \"hds/dropdown/list-item/radio\")\n              Separator=(component \"hds/dropdown/list-item/separator\")\n              Title=(component \"hds/dropdown/list-item/title\")\n            )\n          }}\n        </ul>\n        {{yield (hash close=PP.hidePopover Footer=(component \"hds/dropdown/footer\"))}}\n      {{/if}}\n    </div>\n  </div>\n</Hds::PopoverPrimitive>");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright IBM Corp. 2021, 2025\n  SPDX-License-Identifier: MPL-2.0\n}}\n<Hds::PopoverPrimitive\n  @isOpen={{@isOpen}}\n  @onClose={{@onClose}}\n  @boundary={{@boundary}}\n  @enableClickEvents={{true}}\n  as |PP|\n>\n  <div class={{this.classNames}} ...attributes {{PP.setupPrimitiveContainer}}>\n    {{yield\n      (hash\n        ToggleButton=(component\n          \"hds/dropdown/toggle/button\" isOpen=PP.isOpen setupPrimitiveToggle=PP.setupPrimitiveToggle\n        )\n        ToggleIcon=(component \"hds/dropdown/toggle/icon\" isOpen=PP.isOpen setupPrimitiveToggle=PP.setupPrimitiveToggle)\n        close=PP.hidePopover\n      )\n    }}\n    <div\n      tabindex=\"-1\"\n      class={{this.classNamesContent}}\n      {{style width=@width max-height=@height}}\n      {{PP.setupPrimitivePopover anchoredPositionOptions=this.anchoredPositionOptions}}\n    >\n      {{#if (or PP.isOpen @preserveContentInDom)}}\n        {{yield (hash Header=(component \"hds/dropdown/header\") close=PP.hidePopover)}}\n        <ul class=\"hds-dropdown__list\" {{did-insert this.didInsertList}}>\n          {{yield\n            (hash\n              close=PP.hidePopover\n              Checkbox=(component \"hds/dropdown/list-item/checkbox\")\n              Checkmark=(component \"hds/dropdown/list-item/checkmark\")\n              CopyItem=(component \"hds/dropdown/list-item/copy-item\")\n              Description=(component \"hds/dropdown/list-item/description\")\n              Generic=(component \"hds/dropdown/list-item/generic\")\n              Interactive=(component \"hds/dropdown/list-item/interactive\")\n              Radio=(component \"hds/dropdown/list-item/radio\")\n              Separator=(component \"hds/dropdown/list-item/separator\")\n              Title=(component \"hds/dropdown/list-item/title\")\n            )\n          }}\n        </ul>\n        {{yield (hash close=PP.hidePopover Footer=(component \"hds/dropdown/footer\"))}}\n      {{/if}}\n    </div>\n  </div>\n</Hds::PopoverPrimitive>");
 
 /**
  * Copyright IBM Corp. 2021, 2025
@@ -42,7 +42,8 @@ class HdsDropdown extends Component {
       placement: HdsDropdownPositionToPlacementValues[this.listPosition],
       offsetOptions: 4,
       enableCollisionDetection: this.enableCollisionDetection ? 'flip' : false,
-      matchToggleWidth: this.matchToggleWidth
+      matchToggleWidth: this.matchToggleWidth,
+      boundary: this.args.boundary
     };
   }
 

package/dist/components/hds/dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/hds/dropdown/index.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2021, 2025\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\nimport { assert } from '@ember/debug';\n\nimport {\n  // map Dropdown's `listPosition` values to PopoverPrimitive's `placement` values\n  HdsDropdownPositionToPlacementValues,\n  // Dropdown's `listPosition` values\n  HdsDropdownPositionValues,\n} from './types.ts';\n\nimport type { ComponentLike } from '@glint/template';\nimport type { HdsPopoverPrimitiveSignature } from '../popover-primitive/index.ts';\nimport type { HdsDropdownFooterSignature } from './footer';\nimport type { HdsDropdownHeaderSignature } from './header';\nimport type { HdsDropdownListItemCheckboxSignature } from './list-item/checkbox';\nimport type { HdsDropdownListItemCheckmarkSignature } from './list-item/checkmark';\nimport type { HdsDropdownListItemCopyItemSignature } from './list-item/copy-item';\nimport type { HdsDropdownListItemDescriptionSignature } from './list-item/description';\nimport type { HdsDropdownListItemGenericSignature } from './list-item/generic';\nimport type { HdsDropdownListItemInteractiveSignature } from './list-item/interactive';\nimport type { HdsDropdownListItemRadioSignature } from './list-item/radio';\nimport type { HdsDropdownListItemSeparatorSignature } from './list-item/separator';\nimport type { HdsDropdownListItemTitleSignature } from './list-item/title';\nimport type { HdsDropdownToggleButtonSignature } from './toggle/button';\nimport type { HdsDropdownToggleIconSignature } from './toggle/icon';\nimport type { HdsDropdownPositions } from './types';\n\nimport type { HdsAnchoredPositionOptions } from '../../../modifiers/hds-anchored-position.ts';\n\nexport const DEFAULT_POSITION = HdsDropdownPositionValues.BottomRight;\nexport const POSITIONS: HdsDropdownPositions[] = Object.values(\n  HdsDropdownPositionValues\n);\n\nexport interface HdsDropdownSignature {\n  Args: {\n    height?: string;\n    isInline?: boolean;\n    isOpen?: HdsPopoverPrimitiveSignature['Args']['isOpen'];\n    listPosition?: HdsDropdownPositions;\n    width?: string;\n    enableCollisionDetection?: HdsAnchoredPositionOptions['enableCollisionDetection'];\n    preserveContentInDom?: boolean;\n    matchToggleWidth?: boolean;\n    onClose?: HdsPopoverPrimitiveSignature['Args']['onClose'];\n  };\n  Blocks: {\n    default: [\n      {\n        Footer?: ComponentLike<HdsDropdownFooterSignature>;\n        Header?: ComponentLike<HdsDropdownHeaderSignature>;\n        Checkbox?: ComponentLike<HdsDropdownListItemCheckboxSignature>;\n        Checkmark?: ComponentLike<HdsDropdownListItemCheckmarkSignature>;\n        CopyItem?: ComponentLike<HdsDropdownListItemCopyItemSignature>;\n        Description?: ComponentLike<HdsDropdownListItemDescriptionSignature>;\n        Generic?: ComponentLike<HdsDropdownListItemGenericSignature>;\n        Interactive?: ComponentLike<HdsDropdownListItemInteractiveSignature>;\n        Radio?: ComponentLike<HdsDropdownListItemRadioSignature>;\n        Separator?: ComponentLike<HdsDropdownListItemSeparatorSignature>;\n        Title?: ComponentLike<HdsDropdownListItemTitleSignature>;\n        ToggleButton?: ComponentLike<HdsDropdownToggleButtonSignature>;\n        ToggleIcon?: ComponentLike<HdsDropdownToggleIconSignature>;\n        close: (event?: Event) => void;\n      },\n    ];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsDropdown extends Component<HdsDropdownSignature> {\n  /**\n   * @param listPosition\n   * @type {string}\n   * @default bottom-right\n   * @description Determines the position of the \"list\"\n   */\n  get listPosition(): HdsDropdownPositions {\n    const { listPosition = DEFAULT_POSITION } = this.args;\n\n    assert(\n      `@listPosition for \"Hds::Dropdown::Index\" must be one of the following: ${POSITIONS.join(\n        ', '\n      )}; received: ${listPosition}`,\n      POSITIONS.includes(listPosition)\n    );\n\n    return listPosition;\n  }\n\n  get enableCollisionDetection(): HdsAnchoredPositionOptions['enableCollisionDetection'] {\n    return this.args.enableCollisionDetection ?? false;\n  }\n\n  get matchToggleWidth(): HdsAnchoredPositionOptions['matchToggleWidth'] {\n    return this.args.matchToggleWidth ?? false;\n  }\n\n  get anchoredPositionOptions(): {\n    placement: HdsAnchoredPositionOptions['placement'];\n    offsetOptions: HdsAnchoredPositionOptions['offsetOptions'];\n    enableCollisionDetection: HdsAnchoredPositionOptions['enableCollisionDetection'];\n    matchToggleWidth: HdsAnchoredPositionOptions['matchToggleWidth'];\n  } {\n    // custom options specific for the `RichTooltip` component\n    // for details see the `hds-anchored-position` modifier\n    return {\n      placement: HdsDropdownPositionToPlacementValues[this.listPosition],\n      offsetOptions: 4,\n      enableCollisionDetection: this.enableCollisionDetection ? 'flip' : false,\n      matchToggleWidth: this.matchToggleWidth,\n    };\n  }\n\n  /**\n   * Get the class names to apply to the element\n   * @method classNames\n   * @return {string} The \"class\" attribute to apply to the root element\n   */\n  get classNames(): string {\n    const classes = ['hds-dropdown'];\n\n    // add a class based on the @isInline argument\n    if (this.args.isInline) {\n      classes.push('hds-dropdown--is-inline');\n    }\n\n    return classes.join(' ');\n  }\n\n  /**\n   * Get the class names to apply to the content\n   * @method classNamesContent\n   * @return {string} The \"class\" attribute to apply to the disclosed content\n   */\n  get classNamesContent(): string {\n    const classes = ['hds-dropdown__content'];\n\n    // add a class based on the @listPosition argument\n    // TODO: we preserved these classes to avoid introducing breaking changes for consumers who rely on these classes for tests, but we aim to remove them in the next major release\n    // context: https://github.com/hashicorp/design-system/pull/2309#discussion_r1706941892\n    classes.push(`hds-dropdown__content--position-${this.listPosition}`);\n\n    // add a class based on the @width or @matchToggleWidth arguments\n    if (this.args.width || this.args.matchToggleWidth) {\n      classes.push('hds-dropdown__content--fixed-width');\n    }\n\n    return classes.join(' ');\n  }\n\n  @action\n  didInsertList(element: HTMLUListElement): void {\n    const checkmarkItems = element.querySelectorAll(`[role=\"option\"]`);\n    if (checkmarkItems.length) {\n      const toggleButtonId = element\n        .closest('.hds-dropdown')\n        ?.querySelector('.hds-dropdown-toggle-button')\n        ?.getAttribute('id');\n\n      element.setAttribute('role', 'listbox');\n\n      if (toggleButtonId) {\n        element.setAttribute('aria-labelledby', toggleButtonId);\n      }\n    }\n  }\n}\n"],"names":["DEFAULT_POSITION","HdsDropdownPositionValues","BottomRight","POSITIONS","Object","values","HdsDropdown","Component","listPosition","args","assert","join","includes","enableCollisionDetection","matchToggleWidth","anchoredPositionOptions","placement","HdsDropdownPositionToPlacementValues","offsetOptions","classNames","classes","isInline","push","classNamesContent","width","didInsertList","element","checkmarkItems","querySelectorAll","length","toggleButtonId","closest","querySelector","getAttribute","setAttribute","n","prototype","action","setComponentTemplate","TEMPLATE"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/hds/dropdown/index.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2021, 2025\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\nimport { assert } from '@ember/debug';\n\nimport {\n  // map Dropdown's `listPosition` values to PopoverPrimitive's `placement` values\n  HdsDropdownPositionToPlacementValues,\n  // Dropdown's `listPosition` values\n  HdsDropdownPositionValues,\n} from './types.ts';\n\nimport type { ComponentLike } from '@glint/template';\nimport type { HdsPopoverPrimitiveSignature } from '../popover-primitive/index.ts';\nimport type { HdsDropdownFooterSignature } from './footer';\nimport type { HdsDropdownHeaderSignature } from './header';\nimport type { HdsDropdownListItemCheckboxSignature } from './list-item/checkbox';\nimport type { HdsDropdownListItemCheckmarkSignature } from './list-item/checkmark';\nimport type { HdsDropdownListItemCopyItemSignature } from './list-item/copy-item';\nimport type { HdsDropdownListItemDescriptionSignature } from './list-item/description';\nimport type { HdsDropdownListItemGenericSignature } from './list-item/generic';\nimport type { HdsDropdownListItemInteractiveSignature } from './list-item/interactive';\nimport type { HdsDropdownListItemRadioSignature } from './list-item/radio';\nimport type { HdsDropdownListItemSeparatorSignature } from './list-item/separator';\nimport type { HdsDropdownListItemTitleSignature } from './list-item/title';\nimport type { HdsDropdownToggleButtonSignature } from './toggle/button';\nimport type { HdsDropdownToggleIconSignature } from './toggle/icon';\nimport type { HdsDropdownPositions } from './types';\n\nimport type { HdsAnchoredPositionOptions } from '../../../modifiers/hds-anchored-position.ts';\n\nexport const DEFAULT_POSITION = HdsDropdownPositionValues.BottomRight;\nexport const POSITIONS: HdsDropdownPositions[] = Object.values(\n  HdsDropdownPositionValues\n);\n\nexport interface HdsDropdownSignature {\n  Args: {\n    height?: string;\n    isInline?: boolean;\n    isOpen?: HdsPopoverPrimitiveSignature['Args']['isOpen'];\n    listPosition?: HdsDropdownPositions;\n    width?: string;\n    enableCollisionDetection?: HdsAnchoredPositionOptions['enableCollisionDetection'];\n    preserveContentInDom?: boolean;\n    matchToggleWidth?: boolean;\n    onClose?: HdsPopoverPrimitiveSignature['Args']['onClose'];\n    boundary?: HdsAnchoredPositionOptions['boundary'];\n  };\n  Blocks: {\n    default: [\n      {\n        Footer?: ComponentLike<HdsDropdownFooterSignature>;\n        Header?: ComponentLike<HdsDropdownHeaderSignature>;\n        Checkbox?: ComponentLike<HdsDropdownListItemCheckboxSignature>;\n        Checkmark?: ComponentLike<HdsDropdownListItemCheckmarkSignature>;\n        CopyItem?: ComponentLike<HdsDropdownListItemCopyItemSignature>;\n        Description?: ComponentLike<HdsDropdownListItemDescriptionSignature>;\n        Generic?: ComponentLike<HdsDropdownListItemGenericSignature>;\n        Interactive?: ComponentLike<HdsDropdownListItemInteractiveSignature>;\n        Radio?: ComponentLike<HdsDropdownListItemRadioSignature>;\n        Separator?: ComponentLike<HdsDropdownListItemSeparatorSignature>;\n        Title?: ComponentLike<HdsDropdownListItemTitleSignature>;\n        ToggleButton?: ComponentLike<HdsDropdownToggleButtonSignature>;\n        ToggleIcon?: ComponentLike<HdsDropdownToggleIconSignature>;\n        close: (event?: Event) => void;\n      },\n    ];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsDropdown extends Component<HdsDropdownSignature> {\n  /**\n   * @param listPosition\n   * @type {string}\n   * @default bottom-right\n   * @description Determines the position of the \"list\"\n   */\n  get listPosition(): HdsDropdownPositions {\n    const { listPosition = DEFAULT_POSITION } = this.args;\n\n    assert(\n      `@listPosition for \"Hds::Dropdown::Index\" must be one of the following: ${POSITIONS.join(\n        ', '\n      )}; received: ${listPosition}`,\n      POSITIONS.includes(listPosition)\n    );\n\n    return listPosition;\n  }\n\n  get enableCollisionDetection(): HdsAnchoredPositionOptions['enableCollisionDetection'] {\n    return this.args.enableCollisionDetection ?? false;\n  }\n\n  get matchToggleWidth(): HdsAnchoredPositionOptions['matchToggleWidth'] {\n    return this.args.matchToggleWidth ?? false;\n  }\n\n  get anchoredPositionOptions(): {\n    placement: HdsAnchoredPositionOptions['placement'];\n    offsetOptions: HdsAnchoredPositionOptions['offsetOptions'];\n    enableCollisionDetection: HdsAnchoredPositionOptions['enableCollisionDetection'];\n    matchToggleWidth: HdsAnchoredPositionOptions['matchToggleWidth'];\n    boundary: HdsAnchoredPositionOptions['boundary'];\n  } {\n    // custom options specific for the `RichTooltip` component\n    // for details see the `hds-anchored-position` modifier\n    return {\n      placement: HdsDropdownPositionToPlacementValues[this.listPosition],\n      offsetOptions: 4,\n      enableCollisionDetection: this.enableCollisionDetection ? 'flip' : false,\n      matchToggleWidth: this.matchToggleWidth,\n      boundary: this.args.boundary,\n    };\n  }\n\n  /**\n   * Get the class names to apply to the element\n   * @method classNames\n   * @return {string} The \"class\" attribute to apply to the root element\n   */\n  get classNames(): string {\n    const classes = ['hds-dropdown'];\n\n    // add a class based on the @isInline argument\n    if (this.args.isInline) {\n      classes.push('hds-dropdown--is-inline');\n    }\n\n    return classes.join(' ');\n  }\n\n  /**\n   * Get the class names to apply to the content\n   * @method classNamesContent\n   * @return {string} The \"class\" attribute to apply to the disclosed content\n   */\n  get classNamesContent(): string {\n    const classes = ['hds-dropdown__content'];\n\n    // add a class based on the @listPosition argument\n    // TODO: we preserved these classes to avoid introducing breaking changes for consumers who rely on these classes for tests, but we aim to remove them in the next major release\n    // context: https://github.com/hashicorp/design-system/pull/2309#discussion_r1706941892\n    classes.push(`hds-dropdown__content--position-${this.listPosition}`);\n\n    // add a class based on the @width or @matchToggleWidth arguments\n    if (this.args.width || this.args.matchToggleWidth) {\n      classes.push('hds-dropdown__content--fixed-width');\n    }\n\n    return classes.join(' ');\n  }\n\n  @action\n  didInsertList(element: HTMLUListElement): void {\n    const checkmarkItems = element.querySelectorAll(`[role=\"option\"]`);\n    if (checkmarkItems.length) {\n      const toggleButtonId = element\n        .closest('.hds-dropdown')\n        ?.querySelector('.hds-dropdown-toggle-button')\n        ?.getAttribute('id');\n\n      element.setAttribute('role', 'listbox');\n\n      if (toggleButtonId) {\n        element.setAttribute('aria-labelledby', toggleButtonId);\n      }\n    }\n  }\n}\n"],"names":["DEFAULT_POSITION","HdsDropdownPositionValues","BottomRight","POSITIONS","Object","values","HdsDropdown","Component","listPosition","args","assert","join","includes","enableCollisionDetection","matchToggleWidth","anchoredPositionOptions","placement","HdsDropdownPositionToPlacementValues","offsetOptions","boundary","classNames","classes","isInline","push","classNamesContent","width","didInsertList","element","checkmarkItems","querySelectorAll","length","toggleButtonId","closest","querySelector","getAttribute","setAttribute","n","prototype","action","setComponentTemplate","TEMPLATE"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { assert } from '@ember/debug';
-import { getLinkToExternal } from '../../../utils/hds-link-to-external.js';
+import { hdsResolveLinkToExternal } from '../../../utils/hds-resolve-link-to-external.js';
 import { precompileTemplate } from '@ember/template-compilation';
-import { n } from 'decorator-transforms/runtime';
+import { g, i, n } from 'decorator-transforms/runtime';
 import { setComponentTemplate } from '@ember/component';
 
 var TEMPLATE = precompileTemplate("{{! IMPORTANT: we removed the newlines before/after the yield to reduce the issues with unexpected whitespaces (see https://github.com/hashicorp/design-system/pull/231#issuecomment-1123502499) }}\n{{! IMPORTANT: we need to add \"squishies\" here (~) because otherwise the whitespace added by Ember becomes visible in the link (being an inline element) - See https://handlebarsjs.com/guide/expressions.html#whitespace-control }}\n{{! NOTICE: we can\'t support the direct use of the \"href\" HTML attribute via ...attributes in the <a> elements, because we need to rely on the \"@href\" Ember argument to differentiate between different types of generated output }}\n{{~#if @route~}}\n  {{~#if this.isRouteExternal~}}\n    <this.linkToExternal\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      ...attributes\n    >{{yield}}</this.linkToExternal>\n  {{~else~}}\n    <LinkTo\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      ...attributes\n    >{{yield}}</LinkTo>\n  {{~/if~}}\n{{~else if @href~}}\n  {{~#if this.isHrefExternal~}}\n    <a target=\"_blank\" rel=\"noopener noreferrer\" ...attributes href={{@href}} {{on \"keyup\" this.onKeyUp}}>{{yield}}</a>\n  {{~else~}}\n    <a ...attributes href={{@href}} {{on \"keyup\" this.onKeyUp}}>{{yield}}</a>\n  {{~/if~}}\n{{~else~}}\n  <button type=\"button\" ...attributes>{{yield}}</button>\n{{~/if~}}");
@@ -14,24 +14,23 @@ var TEMPLATE = precompileTemplate("{{! IMPORTANT: we removed the newlines before
  */
 
 class HdsInteractive extends Component {
-  /**
-   * Determines if a @href value is "external" (it adds target="_blank" rel="noopener noreferrer")
-   *
-   * @param linkToExternal
-   * @type LinkTo | null
-   * @default null
-   */
-  get linkToExternal() {
-    const component = getLinkToExternal();
-    if (component === null) {
-      assert(`HdsInteractive: You attempted to use an external link without configuring HDS with an external component. Please add this in your app.js file:
+  static {
+    g(this.prototype, "linkToExternal", [tracked], function () {
+      return null;
+    });
+  }
+  #linkToExternal = (i(this, "linkToExternal"), void 0);
+  constructor(owner, args) {
+    super(owner, args);
 
-import { setLinkToExternal } from '@hashicorp/design-system-components/utils/hds-link-to-external';
-setLinkToExternal(LinkToExternalComponent);`);
+    // we want to avoid resolving the component if it's not needed
+    if (args.isRouteExternal) {
+      void this.resolveLinkToExternal();
     }
-    return component;
   }
-
+  async resolveLinkToExternal() {
+    this.linkToExternal = await hdsResolveLinkToExternal(this.args.isRouteExternal);
+  }
   /**
    * Determines if a @href value is "external" (it adds target="_blank" rel="noopener noreferrer")
    *

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/hds/interactive/index.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2021, 2025\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\nimport { assert } from '@ember/debug';\n\nimport type { LinkTo } from '@ember/routing';\nimport { getLinkToExternal } from '../../../utils/hds-link-to-external.ts';\n\nexport interface HdsInteractiveSignature {\n  Args: {\n    href?: string;\n    isHrefExternal?: boolean;\n    isRouteExternal?: boolean;\n    // the arguments and types below are mirroring the ones in LinkTo https://github.com/typed-ember/glint/blob/main/packages/environment-ember-loose/-private/intrinsics/link-to.d.ts#L9\n    // because they're not exported we're unable to import them directly from glint\n    route?: string;\n    models?: unknown[];\n    model?: unknown;\n    query?: Record<string, unknown>;\n    'current-when'?: string | boolean;\n    replace?: boolean;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLAnchorElement | HTMLButtonElement;\n}\n\nexport default class HdsInteractive extends Component<HdsInteractiveSignature> {\n  /**\n   * Determines if a @href value is \"external\" (it adds target=\"_blank\" rel=\"noopener noreferrer\")\n   *\n   * @param linkToExternal\n   * @type LinkTo | null\n   * @default null\n   */\n  get linkToExternal(): LinkTo | null {\n    const component = getLinkToExternal();\n    if (component === null) {\n      assert(\n        `HdsInteractive: You attempted to use an external link without configuring HDS with an external component. Please add this in your app.js file:\n\nimport { setLinkToExternal } from '@hashicorp/design-system-components/utils/hds-link-to-external';\nsetLinkToExternal(LinkToExternalComponent);`\n      );\n    }\n    return component;\n  }\n\n  /**\n   * Determines if a @href value is \"external\" (it adds target=\"_blank\" rel=\"noopener noreferrer\")\n   *\n   * @param isHrefExternal\n   * @type boolean\n   * @default true\n   */\n  get isHrefExternal(): boolean {\n    return this.args.isHrefExternal ?? true;\n  }\n\n  /**\n   * Determines if a @route value is \"external\" (uses the LinkToExternal component instead of LinkTo)\n   *\n   * @param isRouteExternal\n   * @type boolean\n   * @default false\n   */\n  get isRouteExternal(): boolean {\n    return this.args.isRouteExternal ?? false;\n  }\n\n  @action\n  onKeyUp(event: KeyboardEvent): void {\n    if (event.key === ' ' || event.code === 'Space') {\n      (event.target as HTMLElement).click();\n    }\n  }\n}\n"],"names":["HdsInteractive","Component","linkToExternal","component","getLinkToExternal","assert","isHrefExternal","args","isRouteExternal","onKeyUp","event","key","code","target","click","n","prototype","action","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;;AA6Be,MAAMA,cAAc,SAASC,SAAS,CAA0B;AAC7E;AACF;AACA;AACA;AACA;AACA;AACA;EACE,IAAIC,cAAcA,GAAkB;AAClC,IAAA,MAAMC,SAAS,GAAGC,iBAAiB,EAAE;IACrC,IAAID,SAAS,KAAK,IAAI,EAAE;AACtBE,MAAAA,MAAM,CACJ,CAAA;;AAER;AACA,2CAAA,CACM,CAAC;AACH,IAAA;AACA,IAAA,OAAOF,SAAS;AAClB,EAAA;;AAEA;AACF;AACA;AACA;AACA;AACA;AACA;EACE,IAAIG,cAAcA,GAAY;AAC5B,IAAA,OAAO,IAAI,CAACC,IAAI,CAACD,cAAc,IAAI,IAAI;AACzC,EAAA;;AAEA;AACF;AACA;AACA;AACA;AACA;AACA;EACE,IAAIE,eAAeA,GAAY;AAC7B,IAAA,OAAO,IAAI,CAACD,IAAI,CAACC,eAAe,IAAI,KAAK;AAC3C,EAAA;EAGAC,OAAOA,CAACC,KAAoB,EAAQ;IAClC,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,IAAID,KAAK,CAACE,IAAI,KAAK,OAAO,EAAE;AAC9CF,MAAAA,KAAK,CAACG,MAAM,CAAiBC,KAAK,EAAE;AACvC,IAAA;AACF,EAAA;AAAC,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CALAC,MAAM,CAAA,CAAA;AAAA;AAMT;AAACC,oBAAA,CAAAC,QAAA,EAjDoBnB,cAAc,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/hds/interactive/index.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 { action } from '@ember/object';\n\nimport { hdsResolveLinkToExternal } from '../../../utils/hds-resolve-link-to-external.ts';\n\nimport type Owner from '@ember/owner';\nimport type { LinkTo } from '@ember/routing';\n\nexport interface HdsInteractiveSignature {\n  Args: {\n    href?: string;\n    isHrefExternal?: boolean;\n    isRouteExternal?: boolean;\n    // the arguments and types below are mirroring the ones in LinkTo https://github.com/typed-ember/glint/blob/main/packages/environment-ember-loose/-private/intrinsics/link-to.d.ts#L9\n    // because they're not exported we're unable to import them directly from glint\n    route?: string;\n    models?: unknown[];\n    model?: unknown;\n    query?: Record<string, unknown>;\n    'current-when'?: string | boolean;\n    replace?: boolean;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLAnchorElement | HTMLButtonElement;\n}\n\nexport default class HdsInteractive extends Component<HdsInteractiveSignature> {\n  @tracked linkToExternal: LinkTo | null = null;\n\n  constructor(owner: Owner, args: HdsInteractiveSignature['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   * Determines if a @href value is \"external\" (it adds target=\"_blank\" rel=\"noopener noreferrer\")\n   *\n   * @param isHrefExternal\n   * @type boolean\n   * @default true\n   */\n  get isHrefExternal(): boolean {\n    return this.args.isHrefExternal ?? true;\n  }\n\n  /**\n   * Determines if a @route value is \"external\" (uses the LinkToExternal component instead of LinkTo)\n   *\n   * @param isRouteExternal\n   * @type boolean\n   * @default false\n   */\n  get isRouteExternal(): boolean {\n    return this.args.isRouteExternal ?? false;\n  }\n\n  @action\n  onKeyUp(event: KeyboardEvent): void {\n    if (event.key === ' ' || event.code === 'Space') {\n      (event.target as HTMLElement).click();\n    }\n  }\n}\n"],"names":["HdsInteractive","Component","g","prototype","tracked","i","void 0","constructor","owner","args","isRouteExternal","resolveLinkToExternal","linkToExternal","hdsResolveLinkToExternal","isHrefExternal","onKeyUp","event","key","code","target","click","n","action","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;;AA+Be,MAAMA,cAAc,SAASC,SAAS,CAA0B;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,gBAAA,EAAA,CAC5EC,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,IAAqC,EAAE;AAC/D,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;AACA;AACF;AACA;AACA;AACA;AACA;AACA;EACE,IAAII,cAAcA,GAAY;AAC5B,IAAA,OAAO,IAAI,CAACL,IAAI,CAACK,cAAc,IAAI,IAAI;AACzC,EAAA;;AAEA;AACF;AACA;AACA;AACA;AACA;AACA;EACE,IAAIJ,eAAeA,GAAY;AAC7B,IAAA,OAAO,IAAI,CAACD,IAAI,CAACC,eAAe,IAAI,KAAK;AAC3C,EAAA;EAGAK,OAAOA,CAACC,KAAoB,EAAQ;IAClC,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,IAAID,KAAK,CAACE,IAAI,KAAK,OAAO,EAAE;AAC9CF,MAAAA,KAAK,CAACG,MAAM,CAAiBC,KAAK,EAAE;AACvC,IAAA;AACF,EAAA;AAAC,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAlB,SAAA,EAAA,SAAA,EAAA,CALAmB,MAAM,CAAA,CAAA;AAAA;AAMT;AAACC,oBAAA,CAAAC,QAAA,EA7CoBxB,cAAc,CAAA;;;;"}