@hashicorp/design-system-components 4.18.2 → 4.19.0-rc-20250421170446

package/declarations/components/hds/form/super-select/multiple/base.d.ts

@@ -46,31 +46,8 @@ export default class HdsFormSuperSelectMultipleBase extends Component<HdsFormSup
     showSelected(): void;
     showAll(): void;
     clearSelected(): void;
-    /**
-     * Determine if `@afterOptionsComponent` gets displayed
-     * @param showAfterOptions
-     * @type {boolean}
-     * @default true
-     */
     get showAfterOptions(): boolean;
-    /**
-     * Get the search placeholder text
-     * @param searchPlaceholder
-     * @type {string}
-     * @default 'Search'
-     */
     get searchPlaceholder(): string;
-    /**
-     * Get the maxWidth to apply to the dropdown
-     * @param dropdownMaxWidth
-     * @type {string}
-     * @default 'none'
-     */
-    get dropdownMaxWidthStyle(): Record<string, string>;
-    /**
-     * Get the class names to apply to the component.
-     * @method classNames
-     * @return {string} The "class" attribute to apply to the component.
-     */
+    get styles(): Record<string, string>;
     get classNames(): string;
 }

package/declarations/modifiers/hds-code-editor/palettes/hds-dark-palette.d.ts

@@ -17,3 +17,5 @@ export declare const HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL = "#EF3016";
 export declare const HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY = "#0D0E12";
 export declare const HDS_CODE_EDITOR_COLOR_SURFACE_FAINT = "#15181e";
 export declare const HDS_CODE_EDITOR_COLOR_SURFACE_INTERACTIVE_ACTIVE = "#2B303C";
+export declare const HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_INTERNAL = "#9BC7FD";
+export declare const HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_EXTERNAL = "#0D69F2";

package/dist/components/hds/form/super-select/multiple/base.js

@@ -7,7 +7,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { g, i, n } from 'decorator-transforms/runtime';
 import { setComponentTemplate } from '@ember/component';
 
-var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n{{! Important: if an argument is added in base.hbs, it must also be added/processed in the Base component used in field.hbs }}\n<div class={{this.classNames}} {{style this.dropdownMaxWidthStyle}}>\n  <PowerSelectMultiple\n    @afterOptionsComponent={{if\n      this.showAfterOptions\n      (or\n        @afterOptionsComponent\n        (component\n          \"hds/form/super-select/after-options\"\n          content=@afterOptionsContent\n          resultCountMessage=this.resultCountMessage\n          showNoSelectedMessage=this._showNoSelectedMessage\n          showOnlySelected=this._showOnlySelected\n          showSelected=this.showSelected\n          showAll=this.showAll\n          clearSelected=this.clearSelected\n          selectedCount=this.selectedCount\n        )\n      )\n    }}\n    @ariaDescribedBy={{@ariaDescribedBy}}\n    @ariaInvalid={{@ariaInvalid}}\n    @ariaLabel={{@ariaLabel}}\n    @ariaLabelledBy={{@ariaLabelledBy}}\n    @beforeOptionsComponent={{@beforeOptionsComponent}}\n    @calculatePosition={{if @verticalPosition undefined this.calculatePosition}}\n    @closeOnSelect={{false}}\n    @disabled={{@disabled}}\n    @dropdownClass={{@dropdownClass}}\n    @extra={{@extra}}\n    @groupComponent={{component \"hds/form/super-select/option-group\"}}\n    @horizontalPosition={{@horizontalPosition}}\n    @initiallyOpened={{@initiallyOpened}}\n    @labelText={{@labelText}}\n    @loadingMessage={{@loadingMessage}}\n    @matcher={{@matcher}}\n    @matchTriggerWidth={{if @dropdownMaxWidth false @matchTriggerWidth}}\n    @noMatchesMessage={{@noMatchesMessage}}\n    @onBlur={{@onBlur}}\n    @onChange={{@onChange}}\n    @onClose={{@onClose}}\n    @onFocus={{@onFocus}}\n    @onInput={{@onInput}}\n    @onKeydown={{@onKeydown}}\n    @onOpen={{@onOpen}}\n    @options={{@options}}\n    @optionsComponent={{@optionsComponent}}\n    @placeholder={{@placeholder}}\n    @placeholderComponent={{@placeholderComponent}}\n    @preventScroll={{@preventScroll}}\n    @registerAPI={{this.setPowerSelectAPI}}\n    @renderInPlace={{true}}\n    @resultCountMessage={{@resultCountMessage}}\n    @scrollTo={{@scrollTo}}\n    @search={{@search}}\n    @searchEnabled={{@searchEnabled}}\n    @searchField={{@searchField}}\n    @searchFieldPosition=\"before-options\"\n    @searchMessage={{@searchMessage}}\n    @searchPlaceholder={{this.searchPlaceholder}}\n    @selected={{@selected}}\n    @selectedItemComponent={{@selectedItemComponent}}\n    @tabindex={{@tabindex}}\n    @triggerClass={{@triggerClass}}\n    @triggerComponent={{@triggerComponent}}\n    @triggerId={{@triggerId}}\n    @triggerRole={{@triggerRole}}\n    @typeAheadOptionMatcher={{@typeAheadOptionMatcher}}\n    @verticalPosition={{@verticalPosition}}\n    ...attributes\n    as |option select|\n  >\n    {{! even if technically what is yielded here are _a list_ of options, we\'ve decided to keep the `option` name for consistency with the existing `PowerSelect` API }}\n    {{yield option select}}\n  </PowerSelectMultiple>\n</div>");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n{{! Important: if an argument is added in base.hbs, it must also be added/processed in the Base component used in field.hbs }}\n<div class={{this.classNames}} {{style this.styles}}>\n  <PowerSelectMultiple\n    @afterOptionsComponent={{if\n      this.showAfterOptions\n      (or\n        @afterOptionsComponent\n        (component\n          \"hds/form/super-select/after-options\"\n          content=@afterOptionsContent\n          resultCountMessage=this.resultCountMessage\n          showNoSelectedMessage=this._showNoSelectedMessage\n          showOnlySelected=this._showOnlySelected\n          showSelected=this.showSelected\n          showAll=this.showAll\n          clearSelected=this.clearSelected\n          selectedCount=this.selectedCount\n        )\n      )\n    }}\n    @ariaDescribedBy={{@ariaDescribedBy}}\n    @ariaInvalid={{@ariaInvalid}}\n    @ariaLabel={{@ariaLabel}}\n    @ariaLabelledBy={{@ariaLabelledBy}}\n    @beforeOptionsComponent={{@beforeOptionsComponent}}\n    @calculatePosition={{if @verticalPosition undefined this.calculatePosition}}\n    @closeOnSelect={{false}}\n    @disabled={{@disabled}}\n    @dropdownClass={{@dropdownClass}}\n    @extra={{@extra}}\n    @groupComponent={{component \"hds/form/super-select/option-group\"}}\n    @horizontalPosition={{@horizontalPosition}}\n    @initiallyOpened={{@initiallyOpened}}\n    @labelText={{@labelText}}\n    @loadingMessage={{@loadingMessage}}\n    @matcher={{@matcher}}\n    @matchTriggerWidth={{if @dropdownMaxWidth false @matchTriggerWidth}}\n    @noMatchesMessage={{@noMatchesMessage}}\n    @onBlur={{@onBlur}}\n    @onChange={{@onChange}}\n    @onClose={{@onClose}}\n    @onFocus={{@onFocus}}\n    @onInput={{@onInput}}\n    @onKeydown={{@onKeydown}}\n    @onOpen={{@onOpen}}\n    @options={{@options}}\n    @optionsComponent={{@optionsComponent}}\n    @placeholder={{@placeholder}}\n    @placeholderComponent={{@placeholderComponent}}\n    @preventScroll={{@preventScroll}}\n    @registerAPI={{this.setPowerSelectAPI}}\n    @renderInPlace={{true}}\n    @resultCountMessage={{@resultCountMessage}}\n    @scrollTo={{@scrollTo}}\n    @search={{@search}}\n    @searchEnabled={{@searchEnabled}}\n    @searchField={{@searchField}}\n    @searchFieldPosition=\"before-options\"\n    @searchMessage={{@searchMessage}}\n    @searchPlaceholder={{this.searchPlaceholder}}\n    @selected={{@selected}}\n    @selectedItemComponent={{@selectedItemComponent}}\n    @tabindex={{@tabindex}}\n    @triggerClass={{@triggerClass}}\n    @triggerComponent={{@triggerComponent}}\n    @triggerId={{@triggerId}}\n    @triggerRole={{@triggerRole}}\n    @typeAheadOptionMatcher={{@typeAheadOptionMatcher}}\n    @verticalPosition={{@verticalPosition}}\n    ...attributes\n    as |option select|\n  >\n    {{! even if technically what is yielded here are _a list_ of options, we\'ve decided to keep the `option` name for consistency with the existing `PowerSelect` API }}\n    {{yield option select}}\n  </PowerSelectMultiple>\n</div>");
 
 /**
  * Copyright (c) HashiCorp, Inc.
@@ -47,7 +47,7 @@ class HdsFormSuperSelectMultipleBase extends Component {
     return this._powerSelectAPI?.resultsCount.toString() || '0';
   }
   get resultCountMessage() {
-    return this.args.resultCountMessage || `${this.selectedCount} selected of ${this.optionsCount} total`;
+    return this.args.resultCountMessage || `${this.optionsCount} total`;
   }
   calculatePosition(trigger, content) {
     // use `hds-anchored-position` to calculate and set position
@@ -108,13 +108,6 @@ class HdsFormSuperSelectMultipleBase extends Component {
     this._showNoSelectedMessage = false;
     this._showOnlySelected = false;
   }
-
-  /**
-   * Determine if `@afterOptionsComponent` gets displayed
-   * @param showAfterOptions
-   * @type {boolean}
-   * @default true
-   */
   static {
     n(this.prototype, "clearSelected", [action]);
   }
@@ -123,35 +116,22 @@ class HdsFormSuperSelectMultipleBase extends Component {
   }
 
   // NOTE: The searchPlaceholder doesn't currently work for the multiple select
-  /**
-   * Get the search placeholder text
-   * @param searchPlaceholder
-   * @type {string}
-   * @default 'Search'
-   */
   get searchPlaceholder() {
     return this.args.searchPlaceholder ?? 'Search';
   }
-
-  /**
-   * Get the maxWidth to apply to the dropdown
-   * @param dropdownMaxWidth
-   * @type {string}
-   * @default 'none'
-   */
-  get dropdownMaxWidthStyle() {
-    const maxWidthStyle = {};
+  get styles() {
+    const styles = {};
     if (this.args.dropdownMaxWidth) {
-      maxWidthStyle['--hds-form-super-select-dropdown-max-width'] = this.args.dropdownMaxWidth;
+      styles['--hds-form-super-select-dropdown-max-width'] = this.args.dropdownMaxWidth;
+    }
+    if (this.selectedCount === '0') {
+      styles['--hds-form-super-select-selected-text-display'] = 'none';
+    } else {
+      styles['--hds-form-super-select-selected-text-display'] = 'flex';
     }
-    return maxWidthStyle;
+    styles['--hds-form-super-select-selected-text'] = `'${this.selectedCount} selected'`;
+    return styles;
   }
-
-  /**
-   * Get the class names to apply to the component.
-   * @method classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
   get classNames() {
     const classes = ['hds-form-super-select', 'hds-form-super-select-multiple'];
 

package/dist/components/hds/form/super-select/multiple/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../src/components/hds/form/super-select/multiple/base.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport anchoredPositionModifier from '../../../../../modifiers/hds-anchored-position.ts';\n\nimport { action } from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\nimport {\n  HdsFormSuperSelectHorizontalPositionValues,\n  HdsFormSuperSelectHorizontalPositionToPlacementValues,\n} from '../types.ts';\n\nimport type { PowerSelectSignature } from 'ember-power-select/components/power-select';\nimport type { Select as PowerSelect } from 'ember-power-select/components/power-select';\nimport type { CalculatePositionResult } from 'ember-basic-dropdown/utils/calculate-position';\nimport type { HdsFormSuperSelectHorizontalPositions } from '../types.ts';\n\nexport const DEFAULT_HORIZONTAL_POSITION: string =\n  HdsFormSuperSelectHorizontalPositionValues.Left;\nexport const HORIZONTAL_POSITION_MAPPING =\n  HdsFormSuperSelectHorizontalPositionToPlacementValues;\n\nexport interface HdsFormSuperSelectMultipleBaseSignature {\n  Args: PowerSelectSignature['Args'] & {\n    showAfterOptions?: boolean;\n    afterOptionsContent?: string;\n    resultCountMessage?: string;\n    dropdownMaxWidth?: string;\n    matchTriggerWidth?: boolean;\n    isInvalid?: boolean;\n  };\n  Blocks: PowerSelectSignature['Blocks'];\n  Element: PowerSelectSignature['Element'];\n}\n\nexport default class HdsFormSuperSelectMultipleBase extends Component<HdsFormSuperSelectMultipleBaseSignature> {\n  @tracked private _powerSelectAPI?: PowerSelect;\n  @tracked private _showOnlySelected = false;\n  @tracked private _showNoSelectedMessage = false;\n\n  get horizontalPosition(): HdsFormSuperSelectHorizontalPositions {\n    const { horizontalPosition = DEFAULT_HORIZONTAL_POSITION } = this.args;\n    return horizontalPosition as HdsFormSuperSelectHorizontalPositions;\n  }\n\n  get selectedCount(): string {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access\n    return this._powerSelectAPI?.selected?.length || '0';\n  }\n\n  get optionsCount(): string {\n    return this._powerSelectAPI?.resultsCount.toString() || '0';\n  }\n\n  get resultCountMessage(): string {\n    return (\n      this.args.resultCountMessage ||\n      `${this.selectedCount} selected of ${this.optionsCount} total`\n    );\n  }\n\n  @action calculatePosition(\n    trigger: Element,\n    content: HTMLElement\n  ): CalculatePositionResult {\n    // use `hds-anchored-position` to calculate and set position\n    // @ts-expect-error: known issue with type of invocation\n    anchoredPositionModifier(content, [trigger], {\n      placement: HORIZONTAL_POSITION_MAPPING[this.horizontalPosition],\n      offsetOptions: 4,\n      enableCollisionDetection: true,\n    });\n    // prevent PowerSelect from setting position\n    return {\n      horizontalPosition: 'auto',\n      verticalPosition: 'auto',\n      style: {},\n    };\n  }\n\n  /**\n   * This action sets the powerSelectAPI property and optionally calls a registerAPI function.\n   *\n   * @param {Object} powerSelectAPI - The API object for the PowerSelect component.\n   *\n   * If a `registerAPI` function is passed in through the component's arguments,\n   * this function will be called with the `powerSelectAPI` as its argument.\n   * This allows parent components or controllers to have access to the PowerSelect API.\n   *\n   * The `powerSelectAPI` is also stored on the component instance and used in `clearSelected`\n   */\n  @action\n  setPowerSelectAPI(powerSelectAPI: PowerSelect): void {\n    if (typeof this.args.registerAPI === 'function') {\n      this.args.registerAPI(powerSelectAPI);\n    }\n    this._powerSelectAPI = powerSelectAPI;\n  }\n\n  @action showSelected(): void {\n    this._showNoSelectedMessage = this.selectedCount === '0';\n    this._showOnlySelected = true;\n  }\n\n  @action showAll(): void {\n    this._showNoSelectedMessage = false;\n    this._showOnlySelected = false;\n  }\n\n  @action clearSelected(): void {\n    this._powerSelectAPI?.actions.select(null);\n    // show all options after clearing all selection\n    this._showNoSelectedMessage = false;\n    this._showOnlySelected = false;\n  }\n\n  /**\n   * Determine if `@afterOptionsComponent` gets displayed\n   * @param showAfterOptions\n   * @type {boolean}\n   * @default true\n   */\n  get showAfterOptions(): boolean {\n    return this.args.showAfterOptions ?? true;\n  }\n\n  // NOTE: The searchPlaceholder doesn't currently work for the multiple select\n  /**\n   * Get the search placeholder text\n   * @param searchPlaceholder\n   * @type {string}\n   * @default 'Search'\n   */\n  get searchPlaceholder(): string {\n    return this.args.searchPlaceholder ?? 'Search';\n  }\n\n  /**\n   * Get the maxWidth to apply to the dropdown\n   * @param dropdownMaxWidth\n   * @type {string}\n   * @default 'none'\n   */\n  get dropdownMaxWidthStyle(): Record<string, string> {\n    const maxWidthStyle: { [key: string]: string } = {};\n    if (this.args.dropdownMaxWidth) {\n      maxWidthStyle['--hds-form-super-select-dropdown-max-width'] =\n        this.args.dropdownMaxWidth;\n    }\n    return maxWidthStyle;\n  }\n\n  /**\n   * Get the class names to apply to the component.\n   * @method classNames\n   * @return {string} The \"class\" attribute to apply to the component.\n   */\n  get classNames(): string {\n    const classes = ['hds-form-super-select', 'hds-form-super-select-multiple'];\n\n    // add a class based on the @matchTriggerWidth argument or whether dropdownMaxWidth is set\n    if (this.args.matchTriggerWidth === false || this.args.dropdownMaxWidth) {\n      classes.push('hds-form-super-select--dropdown-content-auto-width');\n    }\n\n    // add a class based on the @isInvalid argument\n    if (this.args.isInvalid) {\n      classes.push(`hds-form-super-select--is-invalid`);\n    }\n\n    // add a class based on the showOnlySelected\n    if (this._showOnlySelected) {\n      classes.push(`hds-form-super-select--show-only-selected`);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["DEFAULT_HORIZONTAL_POSITION","HdsFormSuperSelectHorizontalPositionValues","Left","HORIZONTAL_POSITION_MAPPING","HdsFormSuperSelectHorizontalPositionToPlacementValues","HdsFormSuperSelectMultipleBase","Component","g","prototype","tracked","i","void 0","horizontalPosition","args","selectedCount","_powerSelectAPI","selected","length","optionsCount","resultsCount","toString","resultCountMessage","calculatePosition","trigger","content","anchoredPositionModifier","placement","offsetOptions","enableCollisionDetection","verticalPosition","style","n","action","setPowerSelectAPI","powerSelectAPI","registerAPI","showSelected","_showNoSelectedMessage","_showOnlySelected","showAll","clearSelected","actions","select","showAfterOptions","searchPlaceholder","dropdownMaxWidthStyle","maxWidthStyle","dropdownMaxWidth","classNames","classes","matchTriggerWidth","push","isInvalid","join","setComponentTemplate","TEMPLATE"],"mappings":"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"}
+{"version":3,"file":"base.js","sources":["../../../../../../src/components/hds/form/super-select/multiple/base.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport anchoredPositionModifier from '../../../../../modifiers/hds-anchored-position.ts';\n\nimport { action } from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\nimport {\n  HdsFormSuperSelectHorizontalPositionValues,\n  HdsFormSuperSelectHorizontalPositionToPlacementValues,\n} from '../types.ts';\n\nimport type { PowerSelectSignature } from 'ember-power-select/components/power-select';\nimport type { Select as PowerSelect } from 'ember-power-select/components/power-select';\nimport type { CalculatePositionResult } from 'ember-basic-dropdown/utils/calculate-position';\nimport type { HdsFormSuperSelectHorizontalPositions } from '../types.ts';\n\nexport const DEFAULT_HORIZONTAL_POSITION: string =\n  HdsFormSuperSelectHorizontalPositionValues.Left;\nexport const HORIZONTAL_POSITION_MAPPING =\n  HdsFormSuperSelectHorizontalPositionToPlacementValues;\n\nexport interface HdsFormSuperSelectMultipleBaseSignature {\n  Args: PowerSelectSignature['Args'] & {\n    showAfterOptions?: boolean;\n    afterOptionsContent?: string;\n    resultCountMessage?: string;\n    dropdownMaxWidth?: string;\n    matchTriggerWidth?: boolean;\n    isInvalid?: boolean;\n  };\n  Blocks: PowerSelectSignature['Blocks'];\n  Element: PowerSelectSignature['Element'];\n}\n\nexport default class HdsFormSuperSelectMultipleBase extends Component<HdsFormSuperSelectMultipleBaseSignature> {\n  @tracked private _powerSelectAPI?: PowerSelect;\n  @tracked private _showOnlySelected = false;\n  @tracked private _showNoSelectedMessage = false;\n\n  get horizontalPosition(): HdsFormSuperSelectHorizontalPositions {\n    const { horizontalPosition = DEFAULT_HORIZONTAL_POSITION } = this.args;\n    return horizontalPosition as HdsFormSuperSelectHorizontalPositions;\n  }\n\n  get selectedCount(): string {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access\n    return this._powerSelectAPI?.selected?.length || '0';\n  }\n\n  get optionsCount(): string {\n    return this._powerSelectAPI?.resultsCount.toString() || '0';\n  }\n\n  get resultCountMessage(): string {\n    return this.args.resultCountMessage || `${this.optionsCount} total`;\n  }\n\n  @action calculatePosition(\n    trigger: Element,\n    content: HTMLElement\n  ): CalculatePositionResult {\n    // use `hds-anchored-position` to calculate and set position\n    // @ts-expect-error: known issue with type of invocation\n    anchoredPositionModifier(content, [trigger], {\n      placement: HORIZONTAL_POSITION_MAPPING[this.horizontalPosition],\n      offsetOptions: 4,\n      enableCollisionDetection: true,\n    });\n    // prevent PowerSelect from setting position\n    return {\n      horizontalPosition: 'auto',\n      verticalPosition: 'auto',\n      style: {},\n    };\n  }\n\n  /**\n   * This action sets the powerSelectAPI property and optionally calls a registerAPI function.\n   *\n   * @param {Object} powerSelectAPI - The API object for the PowerSelect component.\n   *\n   * If a `registerAPI` function is passed in through the component's arguments,\n   * this function will be called with the `powerSelectAPI` as its argument.\n   * This allows parent components or controllers to have access to the PowerSelect API.\n   *\n   * The `powerSelectAPI` is also stored on the component instance and used in `clearSelected`\n   */\n  @action\n  setPowerSelectAPI(powerSelectAPI: PowerSelect): void {\n    if (typeof this.args.registerAPI === 'function') {\n      this.args.registerAPI(powerSelectAPI);\n    }\n    this._powerSelectAPI = powerSelectAPI;\n  }\n\n  @action showSelected(): void {\n    this._showNoSelectedMessage = this.selectedCount === '0';\n    this._showOnlySelected = true;\n  }\n\n  @action showAll(): void {\n    this._showNoSelectedMessage = false;\n    this._showOnlySelected = false;\n  }\n\n  @action clearSelected(): void {\n    this._powerSelectAPI?.actions.select(null);\n    // show all options after clearing all selection\n    this._showNoSelectedMessage = false;\n    this._showOnlySelected = false;\n  }\n\n  get showAfterOptions(): boolean {\n    return this.args.showAfterOptions ?? true;\n  }\n\n  // NOTE: The searchPlaceholder doesn't currently work for the multiple select\n  get searchPlaceholder(): string {\n    return this.args.searchPlaceholder ?? 'Search';\n  }\n\n  get styles(): Record<string, string> {\n    const styles: { [key: string]: string } = {};\n\n    if (this.args.dropdownMaxWidth) {\n      styles['--hds-form-super-select-dropdown-max-width'] =\n        this.args.dropdownMaxWidth;\n    }\n\n    if (this.selectedCount === '0') {\n      styles['--hds-form-super-select-selected-text-display'] = 'none';\n    } else {\n      styles['--hds-form-super-select-selected-text-display'] = 'flex';\n    }\n\n    styles['--hds-form-super-select-selected-text'] =\n      `'${this.selectedCount} selected'`;\n\n    return styles;\n  }\n\n  get classNames(): string {\n    const classes = ['hds-form-super-select', 'hds-form-super-select-multiple'];\n\n    // add a class based on the @matchTriggerWidth argument or whether dropdownMaxWidth is set\n    if (this.args.matchTriggerWidth === false || this.args.dropdownMaxWidth) {\n      classes.push('hds-form-super-select--dropdown-content-auto-width');\n    }\n\n    // add a class based on the @isInvalid argument\n    if (this.args.isInvalid) {\n      classes.push(`hds-form-super-select--is-invalid`);\n    }\n\n    // add a class based on the showOnlySelected\n    if (this._showOnlySelected) {\n      classes.push(`hds-form-super-select--show-only-selected`);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["DEFAULT_HORIZONTAL_POSITION","HdsFormSuperSelectHorizontalPositionValues","Left","HORIZONTAL_POSITION_MAPPING","HdsFormSuperSelectHorizontalPositionToPlacementValues","HdsFormSuperSelectMultipleBase","Component","g","prototype","tracked","i","void 0","horizontalPosition","args","selectedCount","_powerSelectAPI","selected","length","optionsCount","resultsCount","toString","resultCountMessage","calculatePosition","trigger","content","anchoredPositionModifier","placement","offsetOptions","enableCollisionDetection","verticalPosition","style","n","action","setPowerSelectAPI","powerSelectAPI","registerAPI","showSelected","_showNoSelectedMessage","_showOnlySelected","showAll","clearSelected","actions","select","showAfterOptions","searchPlaceholder","styles","dropdownMaxWidth","classNames","classes","matchTriggerWidth","push","isInvalid","join","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/modifiers/hds-code-editor/palettes/hds-dark-palette.js

@@ -18,6 +18,8 @@ const HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL = '#EF3016';
 const HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY = '#0D0E12';
 const HDS_CODE_EDITOR_COLOR_SURFACE_FAINT = '#15181e';
 const HDS_CODE_EDITOR_COLOR_SURFACE_INTERACTIVE_ACTIVE = '#2B303C';
+const HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_INTERNAL = '#9BC7FD';
+const HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_EXTERNAL = '#0D69F2';
 
-export { HDS_CODE_BLOCK_BLUE, HDS_CODE_BLOCK_CYAN, HDS_CODE_BLOCK_GREEN, HDS_CODE_BLOCK_LINE_HIGHLIGHT, HDS_CODE_BLOCK_LINE_HIGHLIGHT_BORDER, HDS_CODE_BLOCK_ORANGE, HDS_CODE_BLOCK_PURPLE, HDS_CODE_BLOCK_RED, HDS_CODE_BLOCK_WHITE, HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL, HDS_CODE_EDITOR_COLOR_FOREGROUND_FAINT, HDS_CODE_EDITOR_COLOR_FOREGROUND_PRIMARY, HDS_CODE_EDITOR_COLOR_SURFACE_FAINT, HDS_CODE_EDITOR_COLOR_SURFACE_INTERACTIVE_ACTIVE, HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY };
+export { HDS_CODE_BLOCK_BLUE, HDS_CODE_BLOCK_CYAN, HDS_CODE_BLOCK_GREEN, HDS_CODE_BLOCK_LINE_HIGHLIGHT, HDS_CODE_BLOCK_LINE_HIGHLIGHT_BORDER, HDS_CODE_BLOCK_ORANGE, HDS_CODE_BLOCK_PURPLE, HDS_CODE_BLOCK_RED, HDS_CODE_BLOCK_WHITE, HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_EXTERNAL, HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_INTERNAL, HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL, HDS_CODE_EDITOR_COLOR_FOREGROUND_FAINT, HDS_CODE_EDITOR_COLOR_FOREGROUND_PRIMARY, HDS_CODE_EDITOR_COLOR_SURFACE_FAINT, HDS_CODE_EDITOR_COLOR_SURFACE_INTERACTIVE_ACTIVE, HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY };
 //# sourceMappingURL=hds-dark-palette.js.map

package/dist/modifiers/hds-code-editor/palettes/hds-dark-palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"hds-dark-palette.js","sources":["../../../../src/modifiers/hds-code-editor/palettes/hds-dark-palette.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nexport const HDS_CODE_BLOCK_WHITE = '#efeff1';\nexport const HDS_CODE_BLOCK_BLUE = '#2d8eff';\nexport const HDS_CODE_BLOCK_GREEN = '#86ff13';\nexport const HDS_CODE_BLOCK_ORANGE = '#ffa800';\nexport const HDS_CODE_BLOCK_PURPLE = '#c76cff';\nexport const HDS_CODE_BLOCK_RED = '#ff3b20';\nexport const HDS_CODE_BLOCK_CYAN = '#32fff7';\n\nexport const HDS_CODE_BLOCK_LINE_HIGHLIGHT = 'rgba(0, 74, 222, 0.2)';\nexport const HDS_CODE_BLOCK_LINE_HIGHLIGHT_BORDER = '#1b5fe5';\n\nexport const HDS_CODE_EDITOR_COLOR_FOREGROUND_PRIMARY = '#d5d7db';\nexport const HDS_CODE_EDITOR_COLOR_FOREGROUND_FAINT = '#878a8f';\nexport const HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL = '#EF3016';\n\nexport const HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY = '#0D0E12';\nexport const HDS_CODE_EDITOR_COLOR_SURFACE_FAINT = '#15181e';\nexport const HDS_CODE_EDITOR_COLOR_SURFACE_INTERACTIVE_ACTIVE = '#2B303C';\n"],"names":["HDS_CODE_BLOCK_WHITE","HDS_CODE_BLOCK_BLUE","HDS_CODE_BLOCK_GREEN","HDS_CODE_BLOCK_ORANGE","HDS_CODE_BLOCK_PURPLE","HDS_CODE_BLOCK_RED","HDS_CODE_BLOCK_CYAN","HDS_CODE_BLOCK_LINE_HIGHLIGHT","HDS_CODE_BLOCK_LINE_HIGHLIGHT_BORDER","HDS_CODE_EDITOR_COLOR_FOREGROUND_PRIMARY","HDS_CODE_EDITOR_COLOR_FOREGROUND_FAINT","HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL","HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY","HDS_CODE_EDITOR_COLOR_SURFACE_FAINT","HDS_CODE_EDITOR_COLOR_SURFACE_INTERACTIVE_ACTIVE"],"mappings":"AAAA;AACA;AACA;AACA;;AAEO,MAAMA,oBAAoB,GAAG;AAC7B,MAAMC,mBAAmB,GAAG;AAC5B,MAAMC,oBAAoB,GAAG;AAC7B,MAAMC,qBAAqB,GAAG;AAC9B,MAAMC,qBAAqB,GAAG;AAC9B,MAAMC,kBAAkB,GAAG;AAC3B,MAAMC,mBAAmB,GAAG;AAE5B,MAAMC,6BAA6B,GAAG;AACtC,MAAMC,oCAAoC,GAAG;AAE7C,MAAMC,wCAAwC,GAAG;AACjD,MAAMC,sCAAsC,GAAG;AAC/C,MAAMC,yCAAyC,GAAG;AAElD,MAAMC,qCAAqC,GAAG;AAC9C,MAAMC,mCAAmC,GAAG;AAC5C,MAAMC,gDAAgD,GAAG;;;;"}
+{"version":3,"file":"hds-dark-palette.js","sources":["../../../../src/modifiers/hds-code-editor/palettes/hds-dark-palette.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nexport const HDS_CODE_BLOCK_WHITE = '#efeff1';\nexport const HDS_CODE_BLOCK_BLUE = '#2d8eff';\nexport const HDS_CODE_BLOCK_GREEN = '#86ff13';\nexport const HDS_CODE_BLOCK_ORANGE = '#ffa800';\nexport const HDS_CODE_BLOCK_PURPLE = '#c76cff';\nexport const HDS_CODE_BLOCK_RED = '#ff3b20';\nexport const HDS_CODE_BLOCK_CYAN = '#32fff7';\n\nexport const HDS_CODE_BLOCK_LINE_HIGHLIGHT = 'rgba(0, 74, 222, 0.2)';\nexport const HDS_CODE_BLOCK_LINE_HIGHLIGHT_BORDER = '#1b5fe5';\n\nexport const HDS_CODE_EDITOR_COLOR_FOREGROUND_PRIMARY = '#d5d7db';\nexport const HDS_CODE_EDITOR_COLOR_FOREGROUND_FAINT = '#878a8f';\nexport const HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL = '#EF3016';\n\nexport const HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY = '#0D0E12';\nexport const HDS_CODE_EDITOR_COLOR_SURFACE_FAINT = '#15181e';\nexport const HDS_CODE_EDITOR_COLOR_SURFACE_INTERACTIVE_ACTIVE = '#2B303C';\nexport const HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_INTERNAL = '#9BC7FD';\nexport const HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_EXTERNAL = '#0D69F2';\n"],"names":["HDS_CODE_BLOCK_WHITE","HDS_CODE_BLOCK_BLUE","HDS_CODE_BLOCK_GREEN","HDS_CODE_BLOCK_ORANGE","HDS_CODE_BLOCK_PURPLE","HDS_CODE_BLOCK_RED","HDS_CODE_BLOCK_CYAN","HDS_CODE_BLOCK_LINE_HIGHLIGHT","HDS_CODE_BLOCK_LINE_HIGHLIGHT_BORDER","HDS_CODE_EDITOR_COLOR_FOREGROUND_PRIMARY","HDS_CODE_EDITOR_COLOR_FOREGROUND_FAINT","HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL","HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY","HDS_CODE_EDITOR_COLOR_SURFACE_FAINT","HDS_CODE_EDITOR_COLOR_SURFACE_INTERACTIVE_ACTIVE","HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_INTERNAL","HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_EXTERNAL"],"mappings":"AAAA;AACA;AACA;AACA;;AAEO,MAAMA,oBAAoB,GAAG;AAC7B,MAAMC,mBAAmB,GAAG;AAC5B,MAAMC,oBAAoB,GAAG;AAC7B,MAAMC,qBAAqB,GAAG;AAC9B,MAAMC,qBAAqB,GAAG;AAC9B,MAAMC,kBAAkB,GAAG;AAC3B,MAAMC,mBAAmB,GAAG;AAE5B,MAAMC,6BAA6B,GAAG;AACtC,MAAMC,oCAAoC,GAAG;AAE7C,MAAMC,wCAAwC,GAAG;AACjD,MAAMC,sCAAsC,GAAG;AAC/C,MAAMC,yCAAyC,GAAG;AAElD,MAAMC,qCAAqC,GAAG;AAC9C,MAAMC,mCAAmC,GAAG;AAC5C,MAAMC,gDAAgD,GAAG;AACzD,MAAMC,2CAA2C,GAAG;AACpD,MAAMC,2CAA2C,GAAG;;;;"}

package/dist/modifiers/hds-code-editor/themes/hds-dark-theme.js

@@ -1,5 +1,5 @@
 import { EditorView } from '@codemirror/view';
-import { HDS_CODE_EDITOR_COLOR_SURFACE_INTERACTIVE_ACTIVE, HDS_CODE_EDITOR_COLOR_SURFACE_FAINT, HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY, HDS_CODE_BLOCK_WHITE, HDS_CODE_BLOCK_LINE_HIGHLIGHT_BORDER, HDS_CODE_BLOCK_LINE_HIGHLIGHT, HDS_CODE_EDITOR_COLOR_FOREGROUND_FAINT, HDS_CODE_BLOCK_GREEN, HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL } from '../palettes/hds-dark-palette.js';
+import { HDS_CODE_EDITOR_COLOR_SURFACE_INTERACTIVE_ACTIVE, HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_INTERNAL, HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_EXTERNAL, HDS_CODE_EDITOR_COLOR_SURFACE_FAINT, HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY, HDS_CODE_BLOCK_WHITE, HDS_CODE_BLOCK_LINE_HIGHLIGHT_BORDER, HDS_CODE_BLOCK_LINE_HIGHLIGHT, HDS_CODE_EDITOR_COLOR_FOREGROUND_FAINT, HDS_CODE_BLOCK_GREEN, HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL } from '../palettes/hds-dark-palette.js';
 
 /**
  * Copyright (c) HashiCorp, Inc.
@@ -107,8 +107,8 @@ const hdsDark = EditorView.theme({
   '.cm-panel.cm-panel-lint ul:focus li.cm-diagnostic[aria-selected]': {
     background: 'none',
     backgroundColor: 'var(--token-color-palette-neutral-700)',
-    border: `4px solid var(--token-color-focus-critical-external)`,
-    boxShadow: `inset 0 0 0 1px var(--token-color-focus-critical-internal)`,
+    border: `4px solid ${HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_EXTERNAL}`,
+    boxShadow: `inset 0 0 0 1px ${HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_INTERNAL}`,
     color: 'var(--token-color-foreground-high-contrast)'
   },
   '.cm-panels-bottom .cm-panel.cm-panel-lint': {

package/dist/modifiers/hds-code-editor/themes/hds-dark-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"hds-dark-theme.js","sources":["../../../../src/modifiers/hds-code-editor/themes/hds-dark-theme.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport { EditorView } from '@codemirror/view';\nimport {\n  HDS_CODE_BLOCK_LINE_HIGHLIGHT,\n  HDS_CODE_BLOCK_LINE_HIGHLIGHT_BORDER,\n  HDS_CODE_BLOCK_GREEN,\n  HDS_CODE_BLOCK_WHITE,\n  HDS_CODE_EDITOR_COLOR_SURFACE_FAINT,\n  HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY,\n  HDS_CODE_EDITOR_COLOR_SURFACE_INTERACTIVE_ACTIVE,\n  HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL,\n  HDS_CODE_EDITOR_COLOR_FOREGROUND_FAINT,\n} from '../palettes/hds-dark-palette.ts';\n\nconst CLOSE_BUTTON_SELECTOR = '.cm-panel.cm-panel-lint button[name=\"close\"]';\nconst PANEL_DIAGNOSTIC_ITEM_SELECTOR =\n  '.cm-panel.cm-panel-lint ul li.cm-diagnostic';\n\nconst hdsDark = EditorView.theme(\n  {\n    '&': {\n      color: HDS_CODE_BLOCK_WHITE,\n      backgroundColor: HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY,\n      height: '100%',\n    },\n    '.cm-content': {\n      borderLeft: `1px solid var(--token-color-palette-neutral-500)`,\n      height: '100%',\n      padding: '16px 0',\n    },\n    '.cm-content ::selection': {\n      backgroundColor: HDS_CODE_BLOCK_GREEN,\n      color: HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY,\n    },\n    '.cm-gutters': {\n      backgroundColor: HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY,\n    },\n    '.cm-gutter:first-of-type .cm-gutterElement': {\n      borderLeft: '4px solid transparent',\n    },\n    '.cm-lineNumbers': {\n      color: HDS_CODE_EDITOR_COLOR_FOREGROUND_FAINT,\n    },\n    '.cm-lineNumbers .cm-gutterElement': {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'end',\n      padding: '0px 16px',\n    },\n    '.cm-gutterElement.cm-activeLineGutter': {\n      backgroundColor: HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY,\n    },\n    '&:not(.cm-hasSelection).cm-focused .cm-gutterElement.cm-activeLineGutter':\n      {\n        borderColor: HDS_CODE_BLOCK_LINE_HIGHLIGHT_BORDER,\n        backgroundColor: HDS_CODE_BLOCK_LINE_HIGHLIGHT,\n        color: 'var(--token-color-foreground-high-contrast)',\n        outline: `1px solid ${HDS_CODE_BLOCK_LINE_HIGHLIGHT_BORDER}`,\n      },\n    '.cm-line': {\n      padding: '4px 16px',\n    },\n    '.cm-activeLine': {\n      backgroundColor: HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY,\n    },\n    '&:not(.cm-hasSelection).cm-focused .cm-activeLine': {\n      backgroundColor: HDS_CODE_BLOCK_LINE_HIGHLIGHT,\n      outline: `1px solid ${HDS_CODE_BLOCK_LINE_HIGHLIGHT_BORDER}`,\n    },\n    '.cm-matchingBracket': {\n      outline: `1px solid ${HDS_CODE_BLOCK_WHITE}`,\n    },\n\n    // set a minimum height on the editor content when linting is enabled\n    '&.cm-lintingEnabled .cm-content': {\n      minHeight: '160px',\n    },\n\n    // replace the underline svg\n    '.cm-lintRange-error': {\n      backgroundImage: `url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"3\">%3Cpath%20d%3D%22m0%202.5%20l2%20-1.5%20l1%200%20l2%201.5%20l1%200%22%20stroke%3D%22${encodeURIComponent(HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL)}%22%20fill%3D%22none%22%20stroke-width%3D%22.7%22%2F%3E</svg>')`,\n    },\n\n    // linting gutter\n    '&.cm-lintingEnabled .cm-lineNumbers .cm-gutterElement': {\n      paddingLeft: '8px',\n    },\n    '.cm-gutter-lint': {\n      width: '28px',\n    },\n    '.cm-gutter-lint .cm-gutterElement': {\n      padding: '0',\n    },\n    '.cm-lint-marker-error': {\n      width: '24px',\n      height: '24px',\n      padding: '6px',\n      content: `url('data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.56912 0.752289C8.69045 -0.126408 7.26581 -0.126415 6.38713 0.752272L0.730298 6.40911C-0.148388 7.28779 -0.148379 8.71243 0.730316 9.5911L6.38715 15.2478C7.26583 16.1265 8.69044 16.1265 9.56911 15.2478L15.2258 9.59109C16.1045 8.71241 16.1045 7.2878 15.2258 6.40912L9.56912 0.752289ZM5.21967 5.21955C5.51256 4.92665 5.98744 4.92665 6.28033 5.21955L8 6.93922L9.71967 5.21955C10.0126 4.92665 10.4874 4.92665 10.7803 5.21955C11.0732 5.51244 11.0732 5.98731 10.7803 6.28021L9.06066 7.99988L10.7803 9.71955C11.0732 10.0124 11.0732 10.4873 10.7803 10.7802C10.4874 11.0731 10.0126 11.0731 9.71967 10.7802L8 9.06054L6.28033 10.7802C5.98744 11.0731 5.51256 11.0731 5.21967 10.7802C4.92678 10.4873 4.92678 10.0124 5.21967 9.71955L6.93934 7.99988L5.21967 6.28021C4.92678 5.98731 4.92678 5.51244 5.21967 5.21955Z\" fill=\"${encodeURIComponent(HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL)}\"/></svg>');`,\n    },\n\n    // linter diagnostics panel\n    '.cm-panel.cm-panel-lint ul': {\n      backgroundColor: 'var(--token-color-palette-neutral-500)',\n      maxHeight: '85px',\n    },\n    [`${PANEL_DIAGNOSTIC_ITEM_SELECTOR}`]: {\n      backgroundColor: HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY,\n      border: '4px solid transparent',\n      color: 'var(--token-color-foreground-high-contrast)',\n      fontFamily: 'var(--token-typography-body-100-font-family)',\n      fontSize: '13px',\n      marginBottom: '1px',\n      padding: '16px 12px',\n    },\n    [`${PANEL_DIAGNOSTIC_ITEM_SELECTOR}:last-of-type`]: {\n      marginBottom: '0',\n    },\n    [`${PANEL_DIAGNOSTIC_ITEM_SELECTOR}:hover`]: {\n      backgroundColor: HDS_CODE_EDITOR_COLOR_SURFACE_FAINT,\n    },\n    '.cm-panel.cm-panel-lint ul:focus li.cm-diagnostic[aria-selected]': {\n      background: 'none',\n      backgroundColor: 'var(--token-color-palette-neutral-700)',\n      border: `4px solid var(--token-color-focus-critical-external)`,\n      boxShadow: `inset 0 0 0 1px var(--token-color-focus-critical-internal)`,\n      color: 'var(--token-color-foreground-high-contrast)',\n    },\n    '.cm-panels-bottom .cm-panel.cm-panel-lint': {\n      borderTop: `3px solid var(--token-color-palette-neutral-500)`,\n    },\n    '.cm-diagnostic': {\n      borderLeft: 'none',\n    },\n    '.cm-diagnosticText-inner': {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '16px',\n    },\n    '.cm-diagnosticText-inner .cm-lint-marker-error': {\n      width: '16px',\n      height: '16px',\n      padding: '0',\n    },\n    // linter diagnostics panel close button\n    [`${CLOSE_BUTTON_SELECTOR}`]: {\n      alignItems: 'center',\n      borderRadius: 'var(--token-border-radius-small)',\n      color: 'var(--token-color-palette-neutral-300)',\n      cursor: 'pointer',\n      display: 'flex',\n      fontFamily: 'var(--token-typography-body-100-font-family)',\n      fontSize: '20px',\n      height: '20px',\n      lineHeight: '20px',\n      paddingBottom: '3px',\n      justifyContent: 'center',\n      right: '22px',\n      top: '6px',\n      width: '20px',\n    },\n    [`${CLOSE_BUTTON_SELECTOR}:hover, ${CLOSE_BUTTON_SELECTOR}:active, ${CLOSE_BUTTON_SELECTOR}:focus`]:\n      {\n        backgroundColor: HDS_CODE_EDITOR_COLOR_SURFACE_INTERACTIVE_ACTIVE,\n        border: '1px solid transparent',\n        color: 'var(--token-color-palette-neutral-400)',\n      },\n    [`${CLOSE_BUTTON_SELECTOR}:focus`]: {\n      borderColor: 'var(--token-color-focus-action-internal)',\n      outline: `3px solid var(--token-color-focus-action-external)`,\n    },\n\n    // tooltips\n    '.cm-tooltip': {\n      backgroundColor: 'var(--token-color-palette-neutral-600)',\n      borderRadius: 'var(--token-border-radius-small)',\n      color: 'var(--token-color-foreground-high-contrast)',\n      fontFamily: 'var(--token-typography-body-100-font-family)',\n      fontSize: '13px',\n      padding: '8px 12px',\n    },\n    '.cm-tooltip-above': {\n      transform: 'translateX(-4px) translateY(-6px)',\n    },\n    '.cm-tooltip-below': {\n      transform: 'translateX(-4px) translateY(6px)',\n    },\n    // tooltips arrow\n    '.cm-tooltip::before': {\n      borderLeft: '8px solid transparent',\n      borderRight: '8px solid transparent',\n      content: '\"\"',\n      left: '16px',\n      position: 'absolute',\n      transform: 'translateX(-50%)',\n    },\n    '.cm-tooltip-above::before': {\n      borderTop: `8px solid var(--token-color-palette-neutral-600)`,\n      bottom: '-8px',\n    },\n    '.cm-tooltip-below::before': {\n      borderBottom: `8px solid var(--token-color-palette-neutral-600)`,\n      top: '-8px',\n    },\n    // only show the marker within the diagnostics panel\n    '.cm-tooltip .cm-lint-marker-error': {\n      display: 'none',\n    },\n  },\n  { dark: true }\n);\n\nexport default hdsDark;\n"],"names":["CLOSE_BUTTON_SELECTOR","PANEL_DIAGNOSTIC_ITEM_SELECTOR","hdsDark","EditorView","theme","color","HDS_CODE_BLOCK_WHITE","backgroundColor","HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY","height","borderLeft","padding","HDS_CODE_BLOCK_GREEN","HDS_CODE_EDITOR_COLOR_FOREGROUND_FAINT","display","alignItems","justifyContent","borderColor","HDS_CODE_BLOCK_LINE_HIGHLIGHT_BORDER","HDS_CODE_BLOCK_LINE_HIGHLIGHT","outline","minHeight","backgroundImage","encodeURIComponent","HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL","paddingLeft","width","content","maxHeight","border","fontFamily","fontSize","marginBottom","HDS_CODE_EDITOR_COLOR_SURFACE_FAINT","background","boxShadow","borderTop","gap","borderRadius","cursor","lineHeight","paddingBottom","right","top","HDS_CODE_EDITOR_COLOR_SURFACE_INTERACTIVE_ACTIVE","transform","borderRight","left","position","bottom","borderBottom","dark"],"mappings":"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"}
+{"version":3,"file":"hds-dark-theme.js","sources":["../../../../src/modifiers/hds-code-editor/themes/hds-dark-theme.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport { EditorView } from '@codemirror/view';\nimport {\n  HDS_CODE_BLOCK_LINE_HIGHLIGHT,\n  HDS_CODE_BLOCK_LINE_HIGHLIGHT_BORDER,\n  HDS_CODE_BLOCK_GREEN,\n  HDS_CODE_BLOCK_WHITE,\n  HDS_CODE_EDITOR_COLOR_SURFACE_FAINT,\n  HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY,\n  HDS_CODE_EDITOR_COLOR_SURFACE_INTERACTIVE_ACTIVE,\n  HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL,\n  HDS_CODE_EDITOR_COLOR_FOREGROUND_FAINT,\n  HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_INTERNAL,\n  HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_EXTERNAL,\n} from '../palettes/hds-dark-palette.ts';\n\nconst CLOSE_BUTTON_SELECTOR = '.cm-panel.cm-panel-lint button[name=\"close\"]';\nconst PANEL_DIAGNOSTIC_ITEM_SELECTOR =\n  '.cm-panel.cm-panel-lint ul li.cm-diagnostic';\n\nconst hdsDark = EditorView.theme(\n  {\n    '&': {\n      color: HDS_CODE_BLOCK_WHITE,\n      backgroundColor: HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY,\n      height: '100%',\n    },\n    '.cm-content': {\n      borderLeft: `1px solid var(--token-color-palette-neutral-500)`,\n      height: '100%',\n      padding: '16px 0',\n    },\n    '.cm-content ::selection': {\n      backgroundColor: HDS_CODE_BLOCK_GREEN,\n      color: HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY,\n    },\n    '.cm-gutters': {\n      backgroundColor: HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY,\n    },\n    '.cm-gutter:first-of-type .cm-gutterElement': {\n      borderLeft: '4px solid transparent',\n    },\n    '.cm-lineNumbers': {\n      color: HDS_CODE_EDITOR_COLOR_FOREGROUND_FAINT,\n    },\n    '.cm-lineNumbers .cm-gutterElement': {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'end',\n      padding: '0px 16px',\n    },\n    '.cm-gutterElement.cm-activeLineGutter': {\n      backgroundColor: HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY,\n    },\n    '&:not(.cm-hasSelection).cm-focused .cm-gutterElement.cm-activeLineGutter':\n      {\n        borderColor: HDS_CODE_BLOCK_LINE_HIGHLIGHT_BORDER,\n        backgroundColor: HDS_CODE_BLOCK_LINE_HIGHLIGHT,\n        color: 'var(--token-color-foreground-high-contrast)',\n        outline: `1px solid ${HDS_CODE_BLOCK_LINE_HIGHLIGHT_BORDER}`,\n      },\n    '.cm-line': {\n      padding: '4px 16px',\n    },\n    '.cm-activeLine': {\n      backgroundColor: HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY,\n    },\n    '&:not(.cm-hasSelection).cm-focused .cm-activeLine': {\n      backgroundColor: HDS_CODE_BLOCK_LINE_HIGHLIGHT,\n      outline: `1px solid ${HDS_CODE_BLOCK_LINE_HIGHLIGHT_BORDER}`,\n    },\n    '.cm-matchingBracket': {\n      outline: `1px solid ${HDS_CODE_BLOCK_WHITE}`,\n    },\n\n    // set a minimum height on the editor content when linting is enabled\n    '&.cm-lintingEnabled .cm-content': {\n      minHeight: '160px',\n    },\n\n    // replace the underline svg\n    '.cm-lintRange-error': {\n      backgroundImage: `url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"3\">%3Cpath%20d%3D%22m0%202.5%20l2%20-1.5%20l1%200%20l2%201.5%20l1%200%22%20stroke%3D%22${encodeURIComponent(HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL)}%22%20fill%3D%22none%22%20stroke-width%3D%22.7%22%2F%3E</svg>')`,\n    },\n\n    // linting gutter\n    '&.cm-lintingEnabled .cm-lineNumbers .cm-gutterElement': {\n      paddingLeft: '8px',\n    },\n    '.cm-gutter-lint': {\n      width: '28px',\n    },\n    '.cm-gutter-lint .cm-gutterElement': {\n      padding: '0',\n    },\n    '.cm-lint-marker-error': {\n      width: '24px',\n      height: '24px',\n      padding: '6px',\n      content: `url('data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.56912 0.752289C8.69045 -0.126408 7.26581 -0.126415 6.38713 0.752272L0.730298 6.40911C-0.148388 7.28779 -0.148379 8.71243 0.730316 9.5911L6.38715 15.2478C7.26583 16.1265 8.69044 16.1265 9.56911 15.2478L15.2258 9.59109C16.1045 8.71241 16.1045 7.2878 15.2258 6.40912L9.56912 0.752289ZM5.21967 5.21955C5.51256 4.92665 5.98744 4.92665 6.28033 5.21955L8 6.93922L9.71967 5.21955C10.0126 4.92665 10.4874 4.92665 10.7803 5.21955C11.0732 5.51244 11.0732 5.98731 10.7803 6.28021L9.06066 7.99988L10.7803 9.71955C11.0732 10.0124 11.0732 10.4873 10.7803 10.7802C10.4874 11.0731 10.0126 11.0731 9.71967 10.7802L8 9.06054L6.28033 10.7802C5.98744 11.0731 5.51256 11.0731 5.21967 10.7802C4.92678 10.4873 4.92678 10.0124 5.21967 9.71955L6.93934 7.99988L5.21967 6.28021C4.92678 5.98731 4.92678 5.51244 5.21967 5.21955Z\" fill=\"${encodeURIComponent(HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL)}\"/></svg>');`,\n    },\n\n    // linter diagnostics panel\n    '.cm-panel.cm-panel-lint ul': {\n      backgroundColor: 'var(--token-color-palette-neutral-500)',\n      maxHeight: '85px',\n    },\n    [`${PANEL_DIAGNOSTIC_ITEM_SELECTOR}`]: {\n      backgroundColor: HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY,\n      border: '4px solid transparent',\n      color: 'var(--token-color-foreground-high-contrast)',\n      fontFamily: 'var(--token-typography-body-100-font-family)',\n      fontSize: '13px',\n      marginBottom: '1px',\n      padding: '16px 12px',\n    },\n    [`${PANEL_DIAGNOSTIC_ITEM_SELECTOR}:last-of-type`]: {\n      marginBottom: '0',\n    },\n    [`${PANEL_DIAGNOSTIC_ITEM_SELECTOR}:hover`]: {\n      backgroundColor: HDS_CODE_EDITOR_COLOR_SURFACE_FAINT,\n    },\n    '.cm-panel.cm-panel-lint ul:focus li.cm-diagnostic[aria-selected]': {\n      background: 'none',\n      backgroundColor: 'var(--token-color-palette-neutral-700)',\n      border: `4px solid ${HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_EXTERNAL}`,\n      boxShadow: `inset 0 0 0 1px ${HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_INTERNAL}`,\n      color: 'var(--token-color-foreground-high-contrast)',\n    },\n    '.cm-panels-bottom .cm-panel.cm-panel-lint': {\n      borderTop: `3px solid var(--token-color-palette-neutral-500)`,\n    },\n    '.cm-diagnostic': {\n      borderLeft: 'none',\n    },\n    '.cm-diagnosticText-inner': {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '16px',\n    },\n    '.cm-diagnosticText-inner .cm-lint-marker-error': {\n      width: '16px',\n      height: '16px',\n      padding: '0',\n    },\n    // linter diagnostics panel close button\n    [`${CLOSE_BUTTON_SELECTOR}`]: {\n      alignItems: 'center',\n      borderRadius: 'var(--token-border-radius-small)',\n      color: 'var(--token-color-palette-neutral-300)',\n      cursor: 'pointer',\n      display: 'flex',\n      fontFamily: 'var(--token-typography-body-100-font-family)',\n      fontSize: '20px',\n      height: '20px',\n      lineHeight: '20px',\n      paddingBottom: '3px',\n      justifyContent: 'center',\n      right: '22px',\n      top: '6px',\n      width: '20px',\n    },\n    [`${CLOSE_BUTTON_SELECTOR}:hover, ${CLOSE_BUTTON_SELECTOR}:active, ${CLOSE_BUTTON_SELECTOR}:focus`]:\n      {\n        backgroundColor: HDS_CODE_EDITOR_COLOR_SURFACE_INTERACTIVE_ACTIVE,\n        border: '1px solid transparent',\n        color: 'var(--token-color-palette-neutral-400)',\n      },\n    [`${CLOSE_BUTTON_SELECTOR}:focus`]: {\n      borderColor: 'var(--token-color-focus-action-internal)',\n      outline: `3px solid var(--token-color-focus-action-external)`,\n    },\n\n    // tooltips\n    '.cm-tooltip': {\n      backgroundColor: 'var(--token-color-palette-neutral-600)',\n      borderRadius: 'var(--token-border-radius-small)',\n      color: 'var(--token-color-foreground-high-contrast)',\n      fontFamily: 'var(--token-typography-body-100-font-family)',\n      fontSize: '13px',\n      padding: '8px 12px',\n    },\n    '.cm-tooltip-above': {\n      transform: 'translateX(-4px) translateY(-6px)',\n    },\n    '.cm-tooltip-below': {\n      transform: 'translateX(-4px) translateY(6px)',\n    },\n    // tooltips arrow\n    '.cm-tooltip::before': {\n      borderLeft: '8px solid transparent',\n      borderRight: '8px solid transparent',\n      content: '\"\"',\n      left: '16px',\n      position: 'absolute',\n      transform: 'translateX(-50%)',\n    },\n    '.cm-tooltip-above::before': {\n      borderTop: `8px solid var(--token-color-palette-neutral-600)`,\n      bottom: '-8px',\n    },\n    '.cm-tooltip-below::before': {\n      borderBottom: `8px solid var(--token-color-palette-neutral-600)`,\n      top: '-8px',\n    },\n    // only show the marker within the diagnostics panel\n    '.cm-tooltip .cm-lint-marker-error': {\n      display: 'none',\n    },\n  },\n  { dark: true }\n);\n\nexport default hdsDark;\n"],"names":["CLOSE_BUTTON_SELECTOR","PANEL_DIAGNOSTIC_ITEM_SELECTOR","hdsDark","EditorView","theme","color","HDS_CODE_BLOCK_WHITE","backgroundColor","HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY","height","borderLeft","padding","HDS_CODE_BLOCK_GREEN","HDS_CODE_EDITOR_COLOR_FOREGROUND_FAINT","display","alignItems","justifyContent","borderColor","HDS_CODE_BLOCK_LINE_HIGHLIGHT_BORDER","HDS_CODE_BLOCK_LINE_HIGHLIGHT","outline","minHeight","backgroundImage","encodeURIComponent","HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL","paddingLeft","width","content","maxHeight","border","fontFamily","fontSize","marginBottom","HDS_CODE_EDITOR_COLOR_SURFACE_FAINT","background","HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_EXTERNAL","boxShadow","HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_INTERNAL","borderTop","gap","borderRadius","cursor","lineHeight","paddingBottom","right","top","HDS_CODE_EDITOR_COLOR_SURFACE_INTERACTIVE_ACTIVE","transform","borderRight","left","position","bottom","borderBottom","dark"],"mappings":";;;AAAA;AACA;AACA;AACA;;AAiBA,MAAMA,qBAAqB,GAAG,8CAA8C;AAC5E,MAAMC,8BAA8B,GAClC,6CAA6C;AAE/C,MAAMC,OAAO,GAAGC,UAAU,CAACC,KAAK,CAC9B;AACE,EAAA,GAAG,EAAE;AACHC,IAAAA,KAAK,EAAEC,oBAAoB;AAC3BC,IAAAA,eAAe,EAAEC,qCAAqC;AACtDC,IAAAA,MAAM,EAAE;GACT;AACD,EAAA,aAAa,EAAE;AACbC,IAAAA,UAAU,EAAE,CAAkD,gDAAA,CAAA;AAC9DD,IAAAA,MAAM,EAAE,MAAM;AACdE,IAAAA,OAAO,EAAE;GACV;AACD,EAAA,yBAAyB,EAAE;AACzBJ,IAAAA,eAAe,EAAEK,oBAAoB;AACrCP,IAAAA,KAAK,EAAEG;GACR;AACD,EAAA,aAAa,EAAE;AACbD,IAAAA,eAAe,EAAEC;GAClB;AACD,EAAA,4CAA4C,EAAE;AAC5CE,IAAAA,UAAU,EAAE;GACb;AACD,EAAA,iBAAiB,EAAE;AACjBL,IAAAA,KAAK,EAAEQ;GACR;AACD,EAAA,mCAAmC,EAAE;AACnCC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,UAAU,EAAE,QAAQ;AACpBC,IAAAA,cAAc,EAAE,KAAK;AACrBL,IAAAA,OAAO,EAAE;GACV;AACD,EAAA,uCAAuC,EAAE;AACvCJ,IAAAA,eAAe,EAAEC;GAClB;AACD,EAAA,0EAA0E,EACxE;AACES,IAAAA,WAAW,EAAEC,oCAAoC;AACjDX,IAAAA,eAAe,EAAEY,6BAA6B;AAC9Cd,IAAAA,KAAK,EAAE,6CAA6C;IACpDe,OAAO,EAAE,aAAaF,oCAAoC,CAAA;GAC3D;AACH,EAAA,UAAU,EAAE;AACVP,IAAAA,OAAO,EAAE;GACV;AACD,EAAA,gBAAgB,EAAE;AAChBJ,IAAAA,eAAe,EAAEC;GAClB;AACD,EAAA,mDAAmD,EAAE;AACnDD,IAAAA,eAAe,EAAEY,6BAA6B;IAC9CC,OAAO,EAAE,aAAaF,oCAAoC,CAAA;GAC3D;AACD,EAAA,qBAAqB,EAAE;IACrBE,OAAO,EAAE,aAAad,oBAAoB,CAAA;GAC3C;AAED;AACA,EAAA,iCAAiC,EAAE;AACjCe,IAAAA,SAAS,EAAE;GACZ;AAED;AACA,EAAA,qBAAqB,EAAE;AACrBC,IAAAA,eAAe,EAAE,CAAA,yKAAA,EAA4KC,kBAAkB,CAACC,yCAAyC,CAAC,CAAA,+DAAA;GAC3P;AAED;AACA,EAAA,uDAAuD,EAAE;AACvDC,IAAAA,WAAW,EAAE;GACd;AACD,EAAA,iBAAiB,EAAE;AACjBC,IAAAA,KAAK,EAAE;GACR;AACD,EAAA,mCAAmC,EAAE;AACnCf,IAAAA,OAAO,EAAE;GACV;AACD,EAAA,uBAAuB,EAAE;AACvBe,IAAAA,KAAK,EAAE,MAAM;AACbjB,IAAAA,MAAM,EAAE,MAAM;AACdE,IAAAA,OAAO,EAAE,KAAK;AACdgB,IAAAA,OAAO,EAAE,CAAA,q8BAAA,EAAw8BJ,kBAAkB,CAACC,yCAAyC,CAAC,CAAA,YAAA;GAC/gC;AAED;AACA,EAAA,4BAA4B,EAAE;AAC5BjB,IAAAA,eAAe,EAAE,wCAAwC;AACzDqB,IAAAA,SAAS,EAAE;GACZ;EACD,CAAC,CAAA,EAAG3B,8BAA8B,CAAA,CAAE,GAAG;AACrCM,IAAAA,eAAe,EAAEC,qCAAqC;AACtDqB,IAAAA,MAAM,EAAE,uBAAuB;AAC/BxB,IAAAA,KAAK,EAAE,6CAA6C;AACpDyB,IAAAA,UAAU,EAAE,8CAA8C;AAC1DC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,YAAY,EAAE,KAAK;AACnBrB,IAAAA,OAAO,EAAE;GACV;EACD,CAAC,CAAA,EAAGV,8BAA8B,CAAA,aAAA,CAAe,GAAG;AAClD+B,IAAAA,YAAY,EAAE;GACf;EACD,CAAC,CAAA,EAAG/B,8BAA8B,CAAA,MAAA,CAAQ,GAAG;AAC3CM,IAAAA,eAAe,EAAE0B;GAClB;AACD,EAAA,kEAAkE,EAAE;AAClEC,IAAAA,UAAU,EAAE,MAAM;AAClB3B,IAAAA,eAAe,EAAE,wCAAwC;IACzDsB,MAAM,EAAE,CAAaM,UAAAA,EAAAA,2CAA2C,CAAE,CAAA;IAClEC,SAAS,EAAE,CAAmBC,gBAAAA,EAAAA,2CAA2C,CAAE,CAAA;AAC3EhC,IAAAA,KAAK,EAAE;GACR;AACD,EAAA,2CAA2C,EAAE;AAC3CiC,IAAAA,SAAS,EAAE,CAAA,gDAAA;GACZ;AACD,EAAA,gBAAgB,EAAE;AAChB5B,IAAAA,UAAU,EAAE;GACb;AACD,EAAA,0BAA0B,EAAE;AAC1BK,IAAAA,UAAU,EAAE,QAAQ;AACpBD,IAAAA,OAAO,EAAE,MAAM;AACfyB,IAAAA,GAAG,EAAE;GACN;AACD,EAAA,gDAAgD,EAAE;AAChDb,IAAAA,KAAK,EAAE,MAAM;AACbjB,IAAAA,MAAM,EAAE,MAAM;AACdE,IAAAA,OAAO,EAAE;GACV;AACD;EACA,CAAC,CAAA,EAAGX,qBAAqB,CAAA,CAAE,GAAG;AAC5Be,IAAAA,UAAU,EAAE,QAAQ;AACpByB,IAAAA,YAAY,EAAE,kCAAkC;AAChDnC,IAAAA,KAAK,EAAE,wCAAwC;AAC/CoC,IAAAA,MAAM,EAAE,SAAS;AACjB3B,IAAAA,OAAO,EAAE,MAAM;AACfgB,IAAAA,UAAU,EAAE,8CAA8C;AAC1DC,IAAAA,QAAQ,EAAE,MAAM;AAChBtB,IAAAA,MAAM,EAAE,MAAM;AACdiC,IAAAA,UAAU,EAAE,MAAM;AAClBC,IAAAA,aAAa,EAAE,KAAK;AACpB3B,IAAAA,cAAc,EAAE,QAAQ;AACxB4B,IAAAA,KAAK,EAAE,MAAM;AACbC,IAAAA,GAAG,EAAE,KAAK;AACVnB,IAAAA,KAAK,EAAE;GACR;AACD,EAAA,CAAC,GAAG1B,qBAAqB,CAAA,QAAA,EAAWA,qBAAqB,CAAYA,SAAAA,EAAAA,qBAAqB,QAAQ,GAChG;AACEO,IAAAA,eAAe,EAAEuC,gDAAgD;AACjEjB,IAAAA,MAAM,EAAE,uBAAuB;AAC/BxB,IAAAA,KAAK,EAAE;GACR;EACH,CAAC,CAAA,EAAGL,qBAAqB,CAAA,MAAA,CAAQ,GAAG;AAClCiB,IAAAA,WAAW,EAAE,0CAA0C;AACvDG,IAAAA,OAAO,EAAE,CAAA,kDAAA;GACV;AAED;AACA,EAAA,aAAa,EAAE;AACbb,IAAAA,eAAe,EAAE,wCAAwC;AACzDiC,IAAAA,YAAY,EAAE,kCAAkC;AAChDnC,IAAAA,KAAK,EAAE,6CAA6C;AACpDyB,IAAAA,UAAU,EAAE,8CAA8C;AAC1DC,IAAAA,QAAQ,EAAE,MAAM;AAChBpB,IAAAA,OAAO,EAAE;GACV;AACD,EAAA,mBAAmB,EAAE;AACnBoC,IAAAA,SAAS,EAAE;GACZ;AACD,EAAA,mBAAmB,EAAE;AACnBA,IAAAA,SAAS,EAAE;GACZ;AACD;AACA,EAAA,qBAAqB,EAAE;AACrBrC,IAAAA,UAAU,EAAE,uBAAuB;AACnCsC,IAAAA,WAAW,EAAE,uBAAuB;AACpCrB,IAAAA,OAAO,EAAE,IAAI;AACbsB,IAAAA,IAAI,EAAE,MAAM;AACZC,IAAAA,QAAQ,EAAE,UAAU;AACpBH,IAAAA,SAAS,EAAE;GACZ;AACD,EAAA,2BAA2B,EAAE;AAC3BT,IAAAA,SAAS,EAAE,CAAkD,gDAAA,CAAA;AAC7Da,IAAAA,MAAM,EAAE;GACT;AACD,EAAA,2BAA2B,EAAE;AAC3BC,IAAAA,YAAY,EAAE,CAAkD,gDAAA,CAAA;AAChEP,IAAAA,GAAG,EAAE;GACN;AACD;AACA,EAAA,mCAAmC,EAAE;AACnC/B,IAAAA,OAAO,EAAE;AACX;AACF,CAAC,EACD;AAAEuC,EAAAA,IAAI,EAAE;AAAK,CACf;;;;"}

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

@@ -2674,6 +2674,8 @@ button.hds-button[href]::after {
   --hds-code-block-color-surface-selection: #86ff13;
   --hds-code-block-color-line-highlight: rgba(0, 74, 222, 20%);
   --hds-code-block-color-line-highlight-border: #1555d4;
+  --hds-code-block-color-focus-action-internal: #9bc7fd;
+  --hds-code-block-color-focus-action-external: #0d69f2;
   --hds-code-block-color-token: var(--hds-code-block-color-foreground-primary);
   --hds-code-block-color-atrule: var(--hds-code-block-color-blue);
   --hds-code-block-color-code-block-attr-name: var(--hds-code-block-color-blue);
@@ -2984,6 +2986,10 @@ button.hds-button[href]::after {
 }
 .hds-code-block__copy-button:focus, .hds-code-block__copy-button.mock-focus, .hds-code-block__copy-button:focus-visible {
   background-color: var(--hds-code-block-color-surface-faint);
+  border-color: var(--hds-code-block-color-focus-action-internal);
+}
+.hds-code-block__copy-button:focus::before, .hds-code-block__copy-button.mock-focus::before, .hds-code-block__copy-button:focus-visible::before {
+  border-color: var(--hds-code-block-color-focus-action-external);
 }
 .hds-code-block__copy-button.hds-copy-button--status-success .hds-icon {
   color: var(--hds-code-block-color-foreground-success);
@@ -3068,6 +3074,8 @@ button.hds-button[href]::after {
   --hds-code-editor-color-surface-faint: #15181e;
   --hds-code-editor-color-surface-primary: #0d0e12;
   --hds-code-editor-color-surface-interactive-active: #2b303c;
+  --hds-code-editor-color-focus-action-internal: #9bc7fd;
+  --hds-code-editor-color-focus-action-external: #0d69f2;
 }
 
 .hds-code-editor {
@@ -3143,6 +3151,10 @@ button.hds-button[href]::after {
 }
 .hds-code-editor .hds-button:focus, .hds-code-editor .hds-button:hover {
   background-color: var(--hds-code-editor-color-surface-primary);
+  border-color: var(--hds-code-editor-color-focus-action-internal);
+}
+.hds-code-editor .hds-button:focus::before, .hds-code-editor .hds-button:hover::before {
+  border-color: var(--hds-code-editor-color-focus-action-external);
 }
 .hds-code-editor .hds-button:focus .hds-button__icon, .hds-code-editor .hds-button:hover .hds-button__icon {
   color: var(--hds-code-editor-color-foreground-primary);
@@ -4840,12 +4852,13 @@ button.hds-button[href]::after {
 
 .hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger,
 .hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto;
   align-items: center;
   max-width: 100%;
   min-height: 36px;
   padding-top: 4px;
-  padding-right: calc(var(--token-form-control-padding) + 24px);
+  padding-right: calc(var(--token-form-control-padding) + 21px);
   padding-bottom: 4px;
   padding-left: 11px;
   color: var(--token-form-control-base-foreground-value-color);
@@ -4907,6 +4920,20 @@ button.hds-button[href]::after {
 .hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger[aria-disabled=true] .ember-power-select-selected-item {
   opacity: inherit;
 }
+.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger::after,
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger::after {
+  display: var(--hds-form-super-select-selected-text-display);
+  flex-shrink: 0;
+  align-items: center;
+  align-self: stretch;
+  padding-left: 8px;
+  color: var(--token-color-foreground-faint);
+  font-size: var(--token-typography-body-100-font-size);
+  font-family: var(--token-typography-body-100-font-family);
+  line-height: var(--token-typography-body-100-line-height);
+  border-left: 1px solid var(--token-color-border-strong);
+  content: var(--hds-form-super-select-selected-text);
+}
 .hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-content {
   max-width: var(--hds-form-super-select-dropdown-max-width, none);
   margin: 0;
@@ -5037,15 +5064,16 @@ button.hds-button[href]::after {
 .hds-form-super-select .ember-basic-dropdown .ember-power-select-multiple-options {
   display: flex;
   flex-grow: 1;
-  flex-wrap: wrap;
-  gap: 4px;
+  flex-wrap: nowrap;
   min-width: 0;
+  overflow: hidden;
   list-style: none;
 }
 .hds-form-super-select .ember-basic-dropdown .ember-power-select-multiple-option {
+  flex-shrink: 0;
   float: none;
   min-width: 0;
-  margin: 0;
+  margin: 0 4px 0 0;
   padding: 3px 10px 5px 10px;
   font-size: var(--token-typography-body-100-font-size);
   font-family: var(--token-typography-body-100-font-family);
@@ -6747,6 +6775,14 @@ button.hds-button[href]::after {
   margin: 0;
 }
 
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
@@ -6764,6 +6800,9 @@ button.hds-button[href]::after {
   --hds-app-sidenav-animation-delay: var(--hds-app-sidenav-animation-duration);
   --hds-app-sidenav-animation-easing: cubic-bezier(0.65, 0, 0.35, 1);
   --hds-app-sidenav-toggle-button-width: 24px;
+  --hds-app-sidenav-color-focus-action-internal: #bcc7fd;
+  --hds-app-sidenav-color-focus-action-external: #0d69f2;
+  --hds-app-sidenav-focus-ring-action-box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2;
 }
 
 @media (prefers-reduced-motion) {
@@ -6885,10 +6924,6 @@ button.hds-button[href]::after {
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
  */
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
 .hds-side-nav-header {
   display: flex;
   align-items: center;
@@ -6910,6 +6945,7 @@ button.hds-button[href]::after {
 }
 
 .hds-side-nav__home-link {
+  --token-focus-ring-action-box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2;
   border: 1px solid transparent;
   cursor: pointer;
   color: var(--token-side-nav-color-foreground-strong);
@@ -6957,10 +6993,9 @@ button.hds-button[href]::after {
 .hds-side-nav__home-link:focus::before, .hds-side-nav__home-link.mock-focus::before {
   color: var(--token-color-foreground-high-contrast);
   border: none;
-  box-shadow: var(--token-focus-ring-action-box-shadow);
 }
 .hds-side-nav__home-link:focus:focus:not(:focus-visible)::before {
-  box-shadow: var(--token-focus-ring-action-box-shadow);
+  box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2;
 }
 .hds-side-nav__home-link:active, .hds-side-nav__home-link.mock-active {
   color: var(--token-side-nav-color-foreground-strong);
@@ -6986,6 +7021,7 @@ button.hds-button[href]::after {
 .hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *),
 .hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *),
 .hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *) {
+  --token-focus-ring-action-box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2;
   border: 1px solid transparent;
   cursor: pointer;
   border-color: var(--token-color-palette-neutral-500);
@@ -7037,7 +7073,7 @@ button.hds-button[href]::after {
   isolation: isolate;
   color: var(--token-color-foreground-high-contrast);
   background-color: var(--token-color-palette-neutral-700);
-  border-color: var(--token-color-focus-action-internal);
+  border-color: #bcc7fd;
 }
 .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before,
 .hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before,
@@ -7192,7 +7228,6 @@ button.hds-button[href]::after {
 .hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before {
   color: var(--token-color-foreground-high-contrast);
   border: none;
-  box-shadow: var(--token-focus-ring-action-box-shadow);
 }
 .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before,
 .hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before,
@@ -7203,7 +7238,7 @@ button.hds-button[href]::after {
 .hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before,
 .hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before,
 .hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before {
-  box-shadow: var(--token-focus-ring-action-box-shadow);
+  box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2;
 }
 .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active,
 .hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active,
@@ -7305,6 +7340,7 @@ button.hds-button[href]::after {
 }
 
 .hds-side-nav__icon-button {
+  --token-focus-ring-action-box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2;
   border: 1px solid transparent;
   cursor: pointer;
   border-color: var(--token-color-palette-neutral-500);
@@ -7330,7 +7366,7 @@ button.hds-button[href]::after {
   isolation: isolate;
   color: var(--token-color-foreground-high-contrast);
   background-color: var(--token-color-palette-neutral-700);
-  border-color: var(--token-color-focus-action-internal);
+  border-color: #bcc7fd;
 }
 .hds-side-nav__icon-button:focus::before, .hds-side-nav__icon-button.mock-focus::before {
   position: absolute;
@@ -7357,10 +7393,9 @@ button.hds-button[href]::after {
 .hds-side-nav__icon-button:focus::before, .hds-side-nav__icon-button.mock-focus::before {
   color: var(--token-color-foreground-high-contrast);
   border: none;
-  box-shadow: var(--token-focus-ring-action-box-shadow);
 }
 .hds-side-nav__icon-button:focus:focus:not(:focus-visible)::before {
-  box-shadow: var(--token-focus-ring-action-box-shadow);
+  box-shadow: inset 0 0 0 1px #bcc7fd, 0 0 0 3px #0d69f2;
 }
 .hds-side-nav__icon-button:active, .hds-side-nav__icon-button.mock-active {
   color: var(--token-color-foreground-high-contrast);
@@ -7424,6 +7459,7 @@ button.hds-button[href]::after {
 }
 
 .hds-side-nav__list-item-link {
+  --token-focus-ring-action-box-shadow: var(--hds-app-sidenav-focus-ring-action-box-shadow);
   display: flex;
   gap: var(--token-side-nav-body-list-item-content-spacing-horizontal);
   align-items: center;
@@ -7598,8 +7634,8 @@ button.hds-button[href]::after {
   box-shadow: 0 calc(var(--token-side-nav-toggle-button-border-radius) * -1) 0 var(--token-side-nav-color-surface-interactive-active);
 }
 .hds-side-nav__toggle-button:focus-visible, .hds-side-nav__toggle-button.mock-focus {
-  border-color: var(--token-color-focus-action-internal);
-  outline: 3px solid var(--token-color-focus-action-external);
+  border-color: var(--hds-app-sidenav-color-focus-action-internal);
+  outline: 3px solid var(--hds-app-sidenav-color-focus-action-external);
 }
 .hds-side-nav__toggle-button:focus-visible::before, .hds-side-nav__toggle-button:focus-visible::after, .hds-side-nav__toggle-button.mock-focus::before, .hds-side-nav__toggle-button.mock-focus::after {
   display: none;
@@ -8723,6 +8759,7 @@ button.hds-button[href]::after {
   flex: 1 0 0;
   max-width: 166px;
   padding: 3px 10px 5px 10px;
+  font: inherit;
   border-radius: inherit;
 }
 

package/dist/styles/components/code-block/index.scss

@@ -167,6 +167,11 @@ $hds-code-block-code-padding: 16px;
   &.mock-focus,
   &:focus-visible {
     background-color: var(--hds-code-block-color-surface-faint);
+    border-color: var(--hds-code-block-color-focus-action-internal);
+
+    &::before {
+      border-color: var(--hds-code-block-color-focus-action-external);
+    }
   }
 
   &.hds-copy-button--status-success {

package/dist/styles/components/code-block/theme.scss

@@ -47,6 +47,10 @@
   // lines of code - highlighted ----
   --hds-code-block-color-line-highlight: rgba(0, 74, 222, 20%);
   --hds-code-block-color-line-highlight-border: #1555d4;
+  // Copy Button
+  // TODO: Remove focus tokens once global tokens for dark themes are implemented
+  --hds-code-block-color-focus-action-internal: #9bc7fd;
+  --hds-code-block-color-focus-action-external: #0d69f2;
 
   // Syntax highlighting tokens:
   // general ----

package/dist/styles/components/code-editor/index.scss

@@ -96,6 +96,11 @@
     &:focus,
     &:hover {
       background-color: var(--hds-code-editor-color-surface-primary);
+      border-color: var(--hds-code-editor-color-focus-action-internal);
+
+      &::before {
+        border-color: var(--hds-code-editor-color-focus-action-external);
+      }
 
       .hds-button__icon {
         color: var(--hds-code-editor-color-foreground-primary);

package/dist/styles/components/code-editor/theme.scss

@@ -17,4 +17,7 @@
   --hds-code-editor-color-surface-faint: #15181e;
   --hds-code-editor-color-surface-primary: #0d0e12;
   --hds-code-editor-color-surface-interactive-active: #2b303c;
+  // TODO: Remove focus tokens once global tokens for dark themes are implemented
+  --hds-code-editor-color-focus-action-internal: #9bc7fd;
+  --hds-code-editor-color-focus-action-external: #0d69f2;
 }

package/dist/styles/components/form/super-select.scss

@@ -20,12 +20,13 @@ $hds-super-select-item-height: 36px;
   // TRIGGER
   .ember-basic-dropdown-trigger,
   .ember-power-select-trigger {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr auto;
     align-items: center;
     max-width: 100%;
     min-height: $hds-super-select-item-height;
     padding-top: 4px;
-    padding-right: calc(var(--token-form-control-padding) + 24px); // extra space for the icon
+    padding-right: calc(var(--token-form-control-padding) + 21px); // extra space for the icon
     padding-bottom: 4px;
     padding-left: 11px;
     color: var(--token-form-control-base-foreground-value-color);
@@ -94,6 +95,20 @@ $hds-super-select-item-height: 36px;
         opacity: inherit;
       }
     }
+
+    &::after {
+      display: var(--hds-form-super-select-selected-text-display);
+      flex-shrink: 0;
+      align-items: center;
+      align-self: stretch;
+      padding-left: 8px;
+      color: var(--token-color-foreground-faint);
+      font-size: var(--token-typography-body-100-font-size);
+      font-family: var(--token-typography-body-100-font-family);
+      line-height: var(--token-typography-body-100-line-height);
+      border-left: 1px solid var(--token-color-border-strong);
+      content: var(--hds-form-super-select-selected-text);
+    }
   }
 
   // DROPDOWN
@@ -278,17 +293,18 @@ $hds-super-select-item-height: 36px;
   .ember-power-select-multiple-options {
     display: flex;
     flex-grow: 1;
-    flex-wrap: wrap;
-    gap: 4px;
+    flex-wrap: nowrap;
     min-width: 0;
+    overflow: hidden;
     list-style: none;
   }
 
   // Tag item
   .ember-power-select-multiple-option {
+    flex-shrink: 0;
     float: none;
     min-width: 0;
-    margin: 0;
+    margin: 0 4px 0 0;
     padding: 3px 10px 5px 10px;
     font-size: var(--token-typography-body-100-font-size);
     font-family: var(--token-typography-body-100-font-family);

package/dist/styles/components/side-nav/content.scss

@@ -79,6 +79,8 @@
 
 // <a>/<button> element (via Hds::Interactive)
 .hds-side-nav__list-item-link {
+  // Override token used in focus ring mixin
+  --token-focus-ring-action-box-shadow: var(--hds-app-sidenav-focus-ring-action-box-shadow);
   display: flex;
   gap: var(--token-side-nav-body-list-item-content-spacing-horizontal);
   align-items: center;

package/dist/styles/components/side-nav/toggle-button.scss

@@ -93,8 +93,8 @@
 
   &:focus-visible,
   &.mock-focus {
-    border-color: var(--token-color-focus-action-internal);
-    outline: 3px solid var(--token-color-focus-action-external);
+    border-color: var(--hds-app-sidenav-color-focus-action-internal);
+    outline: 3px solid var(--hds-app-sidenav-color-focus-action-external);
 
     &::before,
     &::after {

package/dist/styles/components/side-nav/vars.scss

@@ -7,6 +7,8 @@
 // SIDE-NAV - VARS
 //
 
+@use "../../mixins/interactive-dark-theme" as *;
+
 // LOCAL VARIABLES
 // we use `hds-app` as prefix to distinguish them from the normal tokens
 // notice: they may be overwritten at consumer-level side if needed by re-defining the variables in a container element
@@ -24,6 +26,11 @@
   --hds-app-sidenav-animation-easing: cubic-bezier(0.65, 0, 0.35, 1);
   // toggle-button
   --hds-app-sidenav-toggle-button-width: 24px;
+  // focus ring
+  // TODO: Remove focus tokens once global tokens for dark themes are implemented
+  --hds-app-sidenav-color-focus-action-internal: #{$hds-interactive-dark-theme-color-focus-action-internal};
+  --hds-app-sidenav-color-focus-action-external: #{$hds-interactive-dark-theme-color-focus-action-external};
+  --hds-app-sidenav-focus-ring-action-box-shadow: #{$hds-interactive-dark-theme-focus-ring-action-box-shadow};
 }
 
 // reduced motion

package/dist/styles/components/tag.scss

@@ -45,6 +45,7 @@ $hds-tag-border-radius: 50px;
   flex: 1 0 0;
   max-width: 166px; // account for excess horizontal padding of text in non-dismissible variant
   padding: 3px 10px 5px 10px;
+  font: inherit;
   border-radius: inherit;
 }
 

package/dist/styles/mixins/_interactive-dark-theme.scss

@@ -6,8 +6,18 @@
 @use "../mixins/focus-ring" as *;
 @use "../mixins/button" as *;
 
+// TODO: Remove focus tokens once global tokens for dark themes are implemented
+$hds-interactive-dark-theme-color-focus-action-internal: #bcc7fd;
+$hds-interactive-dark-theme-color-focus-action-external: #0d69f2;
+$hds-interactive-dark-theme-focus-ring-action-box-shadow:
+  inset 0 0 0 1px #{$hds-interactive-dark-theme-color-focus-action-internal},
+  0 0 0 3px #{$hds-interactive-dark-theme-color-focus-action-external};
+
 // Used to apply dark theme to interactive elements such as Button & Dropdown
 @mixin hds-interactive-dark-theme($add-visible-border: true, $is-within-side-nav: false) {
+  // Override token used in focus ring mixin
+  --token-focus-ring-action-box-shadow: #{$hds-interactive-dark-theme-focus-ring-action-box-shadow};
+
   // Default:
   border: 1px solid transparent;
   cursor: pointer;
@@ -55,20 +65,19 @@
     background-color: var(--token-color-palette-neutral-700);
 
     @if ($add-visible-border) {
-      border-color: var(--token-color-focus-action-internal);
+      border-color: $hds-interactive-dark-theme-color-focus-action-internal;
     }
 
     // focus ring:
     &::before {
       color: var(--token-color-foreground-high-contrast);
       border: none;
-      box-shadow: var(--token-focus-ring-action-box-shadow);
     }
   }
 
   // override style removing the focus style
   &:focus:focus:not(:focus-visible)::before {
-    box-shadow: var(--token-focus-ring-action-box-shadow);
+    box-shadow: $hds-interactive-dark-theme-focus-ring-action-box-shadow;
   }
 
   // Active:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "4.18.2",
+  "version": "4.19.0-rc-20250421170446",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",