@hashicorp/design-system-components 4.23.1 → 4.24.0-rc-20250923215537

package/dist/components/hds/table/th-sort.js.map

@@ -1 +1 @@
-{"version":3,"file":"th-sort.js","sources":["../../../../src/components/hds/table/th-sort.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { guidFor } from '@ember/object/internals';\nimport { assert } from '@ember/debug';\n\nimport {\n  HdsTableHorizontalAlignmentValues,\n  HdsTableThSortOrderValues,\n  HdsTableThSortOrderLabelValues,\n} from './types.ts';\nimport type {\n  HdsTableHorizontalAlignment,\n  HdsTableThSortOrder,\n  HdsTableThSortOrderLabels,\n} from './types.ts';\nimport type { HdsTableThButtonSortSignature } from './th-button-sort';\n\nexport const ALIGNMENTS: string[] = Object.values(\n  HdsTableHorizontalAlignmentValues\n);\nexport const DEFAULT_ALIGN = HdsTableHorizontalAlignmentValues.Left;\n\nexport interface HdsTableThSortSignature {\n  Args: {\n    align?: HdsTableHorizontalAlignment;\n    onClickSort?: HdsTableThButtonSortSignature['Args']['onClick'];\n    sortOrder?: HdsTableThSortOrder;\n    tooltip?: string;\n    width?: string;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsTableThSort extends Component<HdsTableThSortSignature> {\n  /**\n   * Generates a unique ID for the <span> element (\"label\")\n   *\n   * @param _labelId\n   */\n  private _labelId = guidFor(this);\n\n  /**\n   * @param ariaSort\n   * @type {HdsTableThSortOrderLabels}\n   * @private\n   * @default none\n   * @description Sets the aria-sort attribute based on the sort order defined; acceptable values are ascending, descending, none(default) and other. Authors SHOULD only apply this property to table headers or grid headers. If the property is not provided, there is no defined sort order. For each table or grid, authors SHOULD apply aria-sort to only one header at a time.\n   */\n  get ariaSort(): HdsTableThSortOrderLabels {\n    switch (this.args.sortOrder) {\n      case HdsTableThSortOrderValues.Asc:\n        return HdsTableThSortOrderLabelValues.Asc;\n      case HdsTableThSortOrderValues.Desc:\n        return HdsTableThSortOrderLabelValues.Desc;\n      default:\n        // none is the default per the spec.\n        return HdsTableThSortOrderLabelValues.None;\n    }\n  }\n\n  /**\n   * @param align\n   * @type {HdsTableHorizontalAlignment}\n   * @default left\n   * @description Determines the text alignment of the header or cell content. Options are: \"left\", \"center\", \"right\". If no align is defined, \"left\" is used.\n   */\n  get align(): HdsTableHorizontalAlignment {\n    const { align = DEFAULT_ALIGN } = this.args;\n\n    assert(\n      `@align for \"Hds::Table\" must be one of the following: ${ALIGNMENTS.join(\n        ', '\n      )}; received: ${align}`,\n      ALIGNMENTS.includes(align)\n    );\n    return align;\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-table__th', 'hds-table__th--sort'];\n\n    // add a class based on the @align argument\n    if (this.align) {\n      classes.push(`hds-table__th--align-${this.align}`);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["ALIGNMENTS","Object","values","HdsTableHorizontalAlignmentValues","DEFAULT_ALIGN","Left","HdsTableThSort","Component","_labelId","guidFor","ariaSort","args","sortOrder","HdsTableThSortOrderValues","Asc","HdsTableThSortOrderLabelValues","Desc","None","align","assert","join","includes","classNames","classes","push","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;;AAkBO,MAAMA,UAAoB,GAAGC,MAAM,CAACC,MAAM,CAC/CC,iCACF;AACO,MAAMC,aAAa,GAAGD,iCAAiC,CAACE;AAgBhD,MAAMC,cAAc,SAASC,SAAS,CAA0B;AAC7E;AACF;AACA;AACA;AACA;AACUC,EAAAA,QAAQ,GAAGC,OAAO,CAAC,IAAI,CAAC;;AAEhC;AACF;AACA;AACA;AACA;AACA;AACA;EACE,IAAIC,QAAQA,GAA8B;AACxC,IAAA,QAAQ,IAAI,CAACC,IAAI,CAACC,SAAS;MACzB,KAAKC,yBAAyB,CAACC,GAAG;QAChC,OAAOC,8BAA8B,CAACD,GAAG;MAC3C,KAAKD,yBAAyB,CAACG,IAAI;QACjC,OAAOD,8BAA8B,CAACC,IAAI;AAC5C,MAAA;AACE;QACA,OAAOD,8BAA8B,CAACE,IAAI;AAC9C;AACF,EAAA;;AAEA;AACF;AACA;AACA;AACA;AACA;EACE,IAAIC,KAAKA,GAAgC;IACvC,MAAM;AAAEA,MAAAA,KAAK,GAAGd;KAAe,GAAG,IAAI,CAACO,IAAI;AAE3CQ,IAAAA,MAAM,CACJ,CAAA,sDAAA,EAAyDnB,UAAU,CAACoB,IAAI,CACtE,IACF,CAAC,CAAA,YAAA,EAAeF,KAAK,CAAA,CAAE,EACvBlB,UAAU,CAACqB,QAAQ,CAACH,KAAK,CAC3B,CAAC;AACD,IAAA,OAAOA,KAAK;AACd,EAAA;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAII,UAAUA,GAAW;AACvB,IAAA,MAAMC,OAAO,GAAG,CAAC,eAAe,EAAE,qBAAqB,CAAC;;AAExD;IACA,IAAI,IAAI,CAACL,KAAK,EAAE;MACdK,OAAO,CAACC,IAAI,CAAC,CAAA,qBAAA,EAAwB,IAAI,CAACN,KAAK,EAAE,CAAC;AACpD,IAAA;AAEA,IAAA,OAAOK,OAAO,CAACH,IAAI,CAAC,GAAG,CAAC;AAC1B,EAAA;AACF;AAACK,oBAAA,CAAAC,QAAA,EA5DoBpB,cAAc,CAAA;;;;"}
+{"version":3,"file":"th-sort.js","sources":["../../../../src/components/hds/table/th-sort.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { guidFor } from '@ember/object/internals';\nimport { assert } from '@ember/debug';\n\nimport {\n  HdsTableHorizontalAlignmentValues,\n  HdsTableThSortOrderValues,\n  HdsTableThSortOrderLabelValues,\n} from './types.ts';\nimport type {\n  HdsTableHorizontalAlignment,\n  HdsTableThSortOrder,\n  HdsTableThSortOrderLabels,\n} from './types.ts';\nimport type { HdsTableThButtonSortSignature } from './th-button-sort';\n\nexport const ALIGNMENTS: HdsTableHorizontalAlignment[] = Object.values(\n  HdsTableHorizontalAlignmentValues\n);\nexport const DEFAULT_ALIGN = HdsTableHorizontalAlignmentValues.Left;\n\nexport interface HdsTableThSortSignature {\n  Args: {\n    align?: HdsTableHorizontalAlignment;\n    onClickSort?: HdsTableThButtonSortSignature['Args']['onClick'];\n    sortOrder?: HdsTableThSortOrder;\n    tooltip?: string;\n    width?: string;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsTableThSort extends Component<HdsTableThSortSignature> {\n  /**\n   * Generates a unique ID for the <span> element (\"label\")\n   *\n   * @param _labelId\n   */\n  private _labelId = guidFor(this);\n\n  /**\n   * @param ariaSort\n   * @type {HdsTableThSortOrderLabels}\n   * @private\n   * @default none\n   * @description Sets the aria-sort attribute based on the sort order defined; acceptable values are ascending, descending, none(default) and other. Authors SHOULD only apply this property to table headers or grid headers. If the property is not provided, there is no defined sort order. For each table or grid, authors SHOULD apply aria-sort to only one header at a time.\n   */\n  get ariaSort(): HdsTableThSortOrderLabels {\n    switch (this.args.sortOrder) {\n      case HdsTableThSortOrderValues.Asc:\n        return HdsTableThSortOrderLabelValues.Asc;\n      case HdsTableThSortOrderValues.Desc:\n        return HdsTableThSortOrderLabelValues.Desc;\n      default:\n        // none is the default per the spec.\n        return HdsTableThSortOrderLabelValues.None;\n    }\n  }\n\n  /**\n   * @param align\n   * @type {HdsTableHorizontalAlignment}\n   * @default left\n   * @description Determines the text alignment of the header or cell content. Options are: \"left\", \"center\", \"right\". If no align is defined, \"left\" is used.\n   */\n  get align(): HdsTableHorizontalAlignment {\n    const { align = DEFAULT_ALIGN } = this.args;\n\n    assert(\n      `@align for \"Hds::Table\" must be one of the following: ${ALIGNMENTS.join(\n        ', '\n      )}; received: ${align}`,\n      ALIGNMENTS.includes(align)\n    );\n    return align;\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-table__th', 'hds-table__th--sort'];\n\n    // add a class based on the @align argument\n    if (this.align) {\n      classes.push(`hds-table__th--align-${this.align}`);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["ALIGNMENTS","Object","values","HdsTableHorizontalAlignmentValues","DEFAULT_ALIGN","Left","HdsTableThSort","Component","_labelId","guidFor","ariaSort","args","sortOrder","HdsTableThSortOrderValues","Asc","HdsTableThSortOrderLabelValues","Desc","None","align","assert","join","includes","classNames","classes","push","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;;AAkBO,MAAMA,UAAyC,GAAGC,MAAM,CAACC,MAAM,CACpEC,iCACF;AACO,MAAMC,aAAa,GAAGD,iCAAiC,CAACE;AAgBhD,MAAMC,cAAc,SAASC,SAAS,CAA0B;AAC7E;AACF;AACA;AACA;AACA;AACUC,EAAAA,QAAQ,GAAGC,OAAO,CAAC,IAAI,CAAC;;AAEhC;AACF;AACA;AACA;AACA;AACA;AACA;EACE,IAAIC,QAAQA,GAA8B;AACxC,IAAA,QAAQ,IAAI,CAACC,IAAI,CAACC,SAAS;MACzB,KAAKC,yBAAyB,CAACC,GAAG;QAChC,OAAOC,8BAA8B,CAACD,GAAG;MAC3C,KAAKD,yBAAyB,CAACG,IAAI;QACjC,OAAOD,8BAA8B,CAACC,IAAI;AAC5C,MAAA;AACE;QACA,OAAOD,8BAA8B,CAACE,IAAI;AAC9C;AACF,EAAA;;AAEA;AACF;AACA;AACA;AACA;AACA;EACE,IAAIC,KAAKA,GAAgC;IACvC,MAAM;AAAEA,MAAAA,KAAK,GAAGd;KAAe,GAAG,IAAI,CAACO,IAAI;AAE3CQ,IAAAA,MAAM,CACJ,CAAA,sDAAA,EAAyDnB,UAAU,CAACoB,IAAI,CACtE,IACF,CAAC,CAAA,YAAA,EAAeF,KAAK,CAAA,CAAE,EACvBlB,UAAU,CAACqB,QAAQ,CAACH,KAAK,CAC3B,CAAC;AACD,IAAA,OAAOA,KAAK;AACd,EAAA;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAII,UAAUA,GAAW;AACvB,IAAA,MAAMC,OAAO,GAAG,CAAC,eAAe,EAAE,qBAAqB,CAAC;;AAExD;IACA,IAAI,IAAI,CAACL,KAAK,EAAE;MACdK,OAAO,CAACC,IAAI,CAAC,CAAA,qBAAA,EAAwB,IAAI,CAACN,KAAK,EAAE,CAAC;AACpD,IAAA;AAEA,IAAA,OAAOK,OAAO,CAACH,IAAI,CAAC,GAAG,CAAC;AAC1B,EAAA;AACF;AAACK,oBAAA,CAAAC,QAAA,EA5DoBpB,cAAc,CAAA;;;;"}

package/dist/components/hds/table/th.js.map

@@ -1 +1 @@
-{"version":3,"file":"th.js","sources":["../../../../src/components/hds/table/th.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { guidFor } from '@ember/object/internals';\nimport { assert } from '@ember/debug';\n\nimport type { HdsTableHorizontalAlignment, HdsTableScope } from './types.ts';\nimport { HdsTableHorizontalAlignmentValues } from './types.ts';\n\nexport const ALIGNMENTS: string[] = Object.values(\n  HdsTableHorizontalAlignmentValues\n);\nexport const DEFAULT_ALIGN = HdsTableHorizontalAlignmentValues.Left;\n\nexport interface HdsTableThSignature {\n  Args: {\n    align?: HdsTableHorizontalAlignment;\n    isVisuallyHidden?: boolean;\n    scope?: HdsTableScope;\n    tooltip?: string;\n    width?: string;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLTableCellElement;\n}\n\nexport default class HdsTableTh extends Component<HdsTableThSignature> {\n  /**\n   * Generates a unique ID for the <span> element (\"label\")\n   *\n   * @param _labelId\n   */\n  private _labelId = guidFor(this);\n\n  /**\n   * @param align\n   * @type {HdsTableHorizontalAlignment}\n   * @default left\n   * @description Determines the text alignment of the header or cell content. Options are: \"left\", \"center\", \"right\". If no align is defined, \"left\" is used.\n   */\n  get align(): HdsTableHorizontalAlignment {\n    const { align = DEFAULT_ALIGN } = this.args;\n\n    assert(\n      `@align for \"Hds::Table::Th\" must be one of the following: ${ALIGNMENTS.join(\n        ', '\n      )}; received: ${align}`,\n      ALIGNMENTS.includes(align)\n    );\n    return align;\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-table__th'];\n\n    // add a class based on the @align argument\n    if (this.align) {\n      classes.push(`hds-table__th--align-${this.align}`);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["ALIGNMENTS","Object","values","HdsTableHorizontalAlignmentValues","DEFAULT_ALIGN","Left","HdsTableTh","Component","_labelId","guidFor","align","args","assert","join","includes","classNames","classes","push","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;;AASO,MAAMA,UAAoB,GAAGC,MAAM,CAACC,MAAM,CAC/CC,iCACF;AACO,MAAMC,aAAa,GAAGD,iCAAiC,CAACE;AAgBhD,MAAMC,UAAU,SAASC,SAAS,CAAsB;AACrE;AACF;AACA;AACA;AACA;AACUC,EAAAA,QAAQ,GAAGC,OAAO,CAAC,IAAI,CAAC;;AAEhC;AACF;AACA;AACA;AACA;AACA;EACE,IAAIC,KAAKA,GAAgC;IACvC,MAAM;AAAEA,MAAAA,KAAK,GAAGN;KAAe,GAAG,IAAI,CAACO,IAAI;AAE3CC,IAAAA,MAAM,CACJ,CAAA,0DAAA,EAA6DZ,UAAU,CAACa,IAAI,CAC1E,IACF,CAAC,CAAA,YAAA,EAAeH,KAAK,CAAA,CAAE,EACvBV,UAAU,CAACc,QAAQ,CAACJ,KAAK,CAC3B,CAAC;AACD,IAAA,OAAOA,KAAK;AACd,EAAA;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIK,UAAUA,GAAW;AACvB,IAAA,MAAMC,OAAO,GAAG,CAAC,eAAe,CAAC;;AAEjC;IACA,IAAI,IAAI,CAACN,KAAK,EAAE;MACdM,OAAO,CAACC,IAAI,CAAC,CAAA,qBAAA,EAAwB,IAAI,CAACP,KAAK,EAAE,CAAC;AACpD,IAAA;AAEA,IAAA,OAAOM,OAAO,CAACH,IAAI,CAAC,GAAG,CAAC;AAC1B,EAAA;AACF;AAACK,oBAAA,CAAAC,QAAA,EAzCoBb,UAAU,CAAA;;;;"}
+{"version":3,"file":"th.js","sources":["../../../../src/components/hds/table/th.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { guidFor } from '@ember/object/internals';\nimport { assert } from '@ember/debug';\n\nimport type { HdsTableHorizontalAlignment, HdsTableScope } from './types.ts';\nimport { HdsTableHorizontalAlignmentValues } from './types.ts';\n\nexport const ALIGNMENTS: HdsTableHorizontalAlignment[] = Object.values(\n  HdsTableHorizontalAlignmentValues\n);\nexport const DEFAULT_ALIGN = HdsTableHorizontalAlignmentValues.Left;\n\nexport interface HdsTableThSignature {\n  Args: {\n    align?: HdsTableHorizontalAlignment;\n    isVisuallyHidden?: boolean;\n    scope?: HdsTableScope;\n    tooltip?: string;\n    width?: string;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLTableCellElement;\n}\n\nexport default class HdsTableTh extends Component<HdsTableThSignature> {\n  /**\n   * Generates a unique ID for the <span> element (\"label\")\n   *\n   * @param _labelId\n   */\n  private _labelId = guidFor(this);\n\n  /**\n   * @param align\n   * @type {HdsTableHorizontalAlignment}\n   * @default left\n   * @description Determines the text alignment of the header or cell content. Options are: \"left\", \"center\", \"right\". If no align is defined, \"left\" is used.\n   */\n  get align(): HdsTableHorizontalAlignment {\n    const { align = DEFAULT_ALIGN } = this.args;\n\n    assert(\n      `@align for \"Hds::Table::Th\" must be one of the following: ${ALIGNMENTS.join(\n        ', '\n      )}; received: ${align}`,\n      ALIGNMENTS.includes(align)\n    );\n    return align;\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-table__th'];\n\n    // add a class based on the @align argument\n    if (this.align) {\n      classes.push(`hds-table__th--align-${this.align}`);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["ALIGNMENTS","Object","values","HdsTableHorizontalAlignmentValues","DEFAULT_ALIGN","Left","HdsTableTh","Component","_labelId","guidFor","align","args","assert","join","includes","classNames","classes","push","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;;AASO,MAAMA,UAAyC,GAAGC,MAAM,CAACC,MAAM,CACpEC,iCACF;AACO,MAAMC,aAAa,GAAGD,iCAAiC,CAACE;AAgBhD,MAAMC,UAAU,SAASC,SAAS,CAAsB;AACrE;AACF;AACA;AACA;AACA;AACUC,EAAAA,QAAQ,GAAGC,OAAO,CAAC,IAAI,CAAC;;AAEhC;AACF;AACA;AACA;AACA;AACA;EACE,IAAIC,KAAKA,GAAgC;IACvC,MAAM;AAAEA,MAAAA,KAAK,GAAGN;KAAe,GAAG,IAAI,CAACO,IAAI;AAE3CC,IAAAA,MAAM,CACJ,CAAA,0DAAA,EAA6DZ,UAAU,CAACa,IAAI,CAC1E,IACF,CAAC,CAAA,YAAA,EAAeH,KAAK,CAAA,CAAE,EACvBV,UAAU,CAACc,QAAQ,CAACJ,KAAK,CAC3B,CAAC;AACD,IAAA,OAAOA,KAAK;AACd,EAAA;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIK,UAAUA,GAAW;AACvB,IAAA,MAAMC,OAAO,GAAG,CAAC,eAAe,CAAC;;AAEjC;IACA,IAAI,IAAI,CAACN,KAAK,EAAE;MACdM,OAAO,CAACC,IAAI,CAAC,CAAA,qBAAA,EAAwB,IAAI,CAACP,KAAK,EAAE,CAAC;AACpD,IAAA;AAEA,IAAA,OAAOM,OAAO,CAACH,IAAI,CAAC,GAAG,CAAC;AAC1B,EAAA;AACF;AAACK,oBAAA,CAAAC,QAAA,EAzCoBb,UAAU,CAAA;;;;"}

package/dist/components.js

@@ -11,7 +11,7 @@ export { default as HdsAdvancedTableThSort } from './components/hds/advanced-tab
 export { default as HdsAdvancedTableTr } from './components/hds/advanced-table/tr.js';
 export { default as HdsAdvancedTableThButtonExpand } from './components/hds/advanced-table/th-button-expand.js';
 export { default as HdsAdvancedTableExpandableTrGroup } from './components/hds/advanced-table/expandable-tr-group.js';
-export { HdsAdvancedTableDensityValues, HdsAdvancedTableHorizontalAlignmentValues, HdsAdvancedTableScopeValues, HdsAdvancedTableThExpandIconValues, HdsAdvancedTableThSortOrderIconValues, HdsAdvancedTableThSortOrderLabelValues, HdsAdvancedTableThSortOrderValues, HdsAdvancedTableVerticalAlignmentValues } from './components/hds/advanced-table/types.js';
+export { HdsAdvancedTableColumnReorderSideValues, HdsAdvancedTableDensityValues, HdsAdvancedTableHorizontalAlignmentValues, HdsAdvancedTableScopeValues, HdsAdvancedTableThExpandIconValues, HdsAdvancedTableThSortOrderIconValues, HdsAdvancedTableThSortOrderLabelValues, HdsAdvancedTableThSortOrderValues, HdsAdvancedTableVerticalAlignmentValues } from './components/hds/advanced-table/types.js';
 export { default as HdsAlert } from './components/hds/alert/index.js';
 export { default as HdsAlertDescription } from './components/hds/alert/description.js';
 export { default as HdsAlertTitle } from './components/hds/alert/title.js';

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

@@ -62,9 +62,9 @@
   --token-color-border-warning: #fbeabf;
   --token-color-border-critical: #fbd4d4;
   --token-color-focus-action-internal: #0c56e9;
-  --token-color-focus-action-external: #5990ff; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */
+  --token-color-focus-action-external: #5990ff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
   --token-color-focus-critical-internal: #c00005;
-  --token-color-focus-critical-external: #dd7578; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */
+  --token-color-focus-critical-external: #dd7578; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
   --token-color-foreground-strong: #0c0c0e;
   --token-color-foreground-primary: #3b3d45;
   --token-color-foreground-faint: #656a76;
@@ -106,7 +106,7 @@
   --token-color-boundary-border: #fbd7d8;
   --token-color-boundary-gradient-primary-start: #f97076;
   --token-color-boundary-gradient-primary-stop: #db363b;
-  --token-color-boundary-gradient-faint-start: #fffafa; /* this is the 'boundary-50' value at 25% opacity on white */
+  --token-color-boundary-gradient-faint-start: #fffafa; /** this is the 'boundary-50' value at 25% opacity on white */
   --token-color-boundary-gradient-faint-stop: #ffecec;
   --token-color-consul-brand: #e03875;
   --token-color-consul-foreground: #d01c5b;
@@ -114,7 +114,7 @@
   --token-color-consul-border: #ffcede;
   --token-color-consul-gradient-primary-start: #ff99be;
   --token-color-consul-gradient-primary-stop: #da306e;
-  --token-color-consul-gradient-faint-start: #fff9fb; /* this is the 'consul-50' value at 25% opacity on white */
+  --token-color-consul-gradient-faint-start: #fff9fb; /** this is the 'consul-50' value at 25% opacity on white */
   --token-color-consul-gradient-faint-stop: #ffe9f1;
   --token-color-hcp-brand: #000000;
   --token-color-nomad-brand: #06d092;
@@ -123,7 +123,7 @@
   --token-color-nomad-border: #bff3dd;
   --token-color-nomad-gradient-primary-start: #bff3dd;
   --token-color-nomad-gradient-primary-stop: #60dea9;
-  --token-color-nomad-gradient-faint-start: #f3fff9; /* this is the 'nomad-50' value at 25% opacity on white */
+  --token-color-nomad-gradient-faint-start: #f3fff9; /** this is the 'nomad-50' value at 25% opacity on white */
   --token-color-nomad-gradient-faint-stop: #d3fdeb;
   --token-color-packer-brand: #02a8ef;
   --token-color-packer-foreground: #007eb4;
@@ -131,16 +131,16 @@
   --token-color-packer-border: #b4e4ff;
   --token-color-packer-gradient-primary-start: #b4e4ff;
   --token-color-packer-gradient-primary-stop: #63d0ff;
-  --token-color-packer-gradient-faint-start: #f3fcff; /* this is the 'packer-50' value at 25% opacity on white */
+  --token-color-packer-gradient-faint-start: #f3fcff; /** this is the 'packer-50' value at 25% opacity on white */
   --token-color-packer-gradient-faint-stop: #d4f2ff;
   --token-color-terraform-brand: #7b42bc;
-  --token-color-terraform-brand-on-dark: #a067da; /* this is an alternative brand color meant to be used on dark backgrounds */
+  --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */
   --token-color-terraform-foreground: #773cb4;
   --token-color-terraform-surface: #f4ecff;
   --token-color-terraform-border: #ebdbfc;
   --token-color-terraform-gradient-primary-start: #bb8deb;
   --token-color-terraform-gradient-primary-stop: #844fba;
-  --token-color-terraform-gradient-faint-start: #fcfaff; /* this is the 'terraform-50' value at 25% opacity on white */
+  --token-color-terraform-gradient-faint-start: #fcfaff; /** this is the 'terraform-50' value at 25% opacity on white */
   --token-color-terraform-gradient-faint-stop: #f4ecff;
   --token-color-vagrant-brand: #1868f2;
   --token-color-vagrant-foreground: #1c61d8;
@@ -148,34 +148,34 @@
   --token-color-vagrant-border: #c7dbfc;
   --token-color-vagrant-gradient-primary-start: #639cff;
   --token-color-vagrant-gradient-primary-stop: #2e71e5;
-  --token-color-vagrant-gradient-faint-start: #f4faff; /* this is the 'vagrant-50' value at 25% opacity on white */
+  --token-color-vagrant-gradient-faint-start: #f4faff; /** this is the 'vagrant-50' value at 25% opacity on white */
   --token-color-vagrant-gradient-faint-stop: #d6ebff;
   --token-color-vault-radar-brand: #ffcf25;
-  --token-color-vault-radar-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work */
+  --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work */
   --token-color-vault-radar-foreground: #9a6f00;
   --token-color-vault-radar-surface: #fff9cf;
   --token-color-vault-radar-border: #feec7b;
   --token-color-vault-radar-gradient-primary-start: #feec7b;
   --token-color-vault-radar-gradient-primary-stop: #ffe543;
-  --token-color-vault-radar-gradient-faint-start: #fffdf2; /* this is the 'vault-radar-50' value at 25% opacity on white */
+  --token-color-vault-radar-gradient-faint-start: #fffdf2; /** this is the 'vault-radar-50' value at 25% opacity on white */
   --token-color-vault-radar-gradient-faint-stop: #fff9cf;
   --token-color-vault-secrets-brand: #ffcf25;
-  --token-color-vault-secrets-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */
+  --token-color-vault-secrets-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */
   --token-color-vault-secrets-foreground: #9a6f00;
   --token-color-vault-secrets-surface: #fff9cf;
   --token-color-vault-secrets-border: #feec7b;
   --token-color-vault-secrets-gradient-primary-start: #feec7b;
   --token-color-vault-secrets-gradient-primary-stop: #ffe543;
-  --token-color-vault-secrets-gradient-faint-start: #fffdf2; /* this is the 'vault-secrets-50' value at 25% opacity on white */
+  --token-color-vault-secrets-gradient-faint-start: #fffdf2; /** this is the 'vault-secrets-50' value at 25% opacity on white */
   --token-color-vault-secrets-gradient-faint-stop: #fff9cf;
   --token-color-vault-brand: #ffcf25;
-  --token-color-vault-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */
+  --token-color-vault-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */
   --token-color-vault-foreground: #9a6f00;
   --token-color-vault-surface: #fff9cf;
   --token-color-vault-border: #feec7b;
   --token-color-vault-gradient-primary-start: #feec7b;
   --token-color-vault-gradient-primary-stop: #ffe543;
-  --token-color-vault-gradient-faint-start: #fffdf2; /* this is the 'vault-50' value at 25% opacity on white */
+  --token-color-vault-gradient-faint-start: #fffdf2; /** this is the 'vault-50' value at 25% opacity on white */
   --token-color-vault-gradient-faint-stop: #fff9cf;
   --token-color-waypoint-brand: #14c6cb;
   --token-color-waypoint-foreground: #008196;
@@ -183,7 +183,7 @@
   --token-color-waypoint-border: #cbf1f3;
   --token-color-waypoint-gradient-primary-start: #cbf1f3;
   --token-color-waypoint-gradient-primary-stop: #62d4dc;
-  --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */
+  --token-color-waypoint-gradient-faint-start: #f6feff; /** this is the 'waypoint-50' value at 25% opacity on white */
   --token-color-waypoint-gradient-faint-stop: #e0fcff;
   --token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a;
   --token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
@@ -237,10 +237,10 @@
   --token-form-checkbox-border-radius: 3px;
   --token-form-checkbox-border-width: 1px;
   --token-form-checkbox-background-image-size: 12px;
-  --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
-  --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
-  --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
-  --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */
   --token-form-control-base-foreground-value-color: #0c0c0e;
   --token-form-control-base-foreground-placeholder-color: #656a76;
   --token-form-control-base-surface-color-default: #ffffff;
@@ -260,14 +260,14 @@
   --token-form-control-disabled-foreground-color: #8c909c;
   --token-form-control-disabled-surface-color: #fafafa;
   --token-form-control-disabled-border-color: #656a7633;
-  --token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */
+  --token-form-control-padding: 7px; /** Notice: we have to take in account the border, so it's 1px less than in Figma. */
   --token-form-control-border-radius: 5px;
   --token-form-control-border-width: 1px;
   --token-form-radio-size: 16px;
   --token-form-radio-border-width: 1px;
   --token-form-radio-background-image-size: 12px;
-  --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */
-  --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */
+  --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */
+  --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */
   --token-form-radiocard-group-gap: 16px;
   --token-form-radiocard-border-width: 1px;
   --token-form-radiocard-border-radius: 6px;
@@ -277,24 +277,24 @@
   --token-form-select-background-image-size: 16px;
   --token-form-select-background-image-position-right-x: 7px;
   --token-form-select-background-image-position-top-y: 9px;
-  --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */
-  --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */
+  --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */
+  --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */
   --token-form-text-input-background-image-size: 16px;
   --token-form-text-input-background-image-position-x: 7px;
-  --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */
-  --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */
-  --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */
-  --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */
-  --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color and animation are hardcoded here! */
+  --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */
+  --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */
+  --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */
+  --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */
+  --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color and animation are hardcoded here! */
   --token-form-toggle-width: 32px;
   --token-form-toggle-height: 16px;
-  --token-form-toggle-base-surface-color-default: #f1f2f3; /* the toggle has a different base surface color, compared to the other controls */
+  --token-form-toggle-base-surface-color-default: #f1f2f3; /** the toggle has a different base surface color, compared to the other controls */
   --token-form-toggle-border-radius: 3px;
   --token-form-toggle-border-width: 1px;
   --token-form-toggle-background-image-size: 12px;
   --token-form-toggle-background-image-position-x: 2px;
-  --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
-  --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
+  --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */
+  --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */
   --token-form-toggle-transition-duration: 0.2s;
   --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15);
   --token-form-toggle-thumb-size: 16px;
@@ -358,40 +358,40 @@
   --token-typography-font-weight-semibold: 600;
   --token-typography-font-weight-bold: 700;
   --token-typography-display-500-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  --token-typography-display-500-font-size: 1.875rem; /* 30px/1.875rem */
-  --token-typography-display-500-line-height: 1.2666; /* 38px */
+  --token-typography-display-500-font-size: 1.875rem; /** 30px/1.875rem */
+  --token-typography-display-500-line-height: 1.2666; /** 38px */
   --token-typography-display-400-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  --token-typography-display-400-font-size: 1.5rem; /* 24px/1.5rem */
-  --token-typography-display-400-line-height: 1.3333; /* 32px */
+  --token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */
+  --token-typography-display-400-line-height: 1.3333; /** 32px */
   --token-typography-display-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  --token-typography-display-300-font-size: 1.125rem; /* 18px/1.125rem */
-  --token-typography-display-300-line-height: 1.3333; /* 24px */
-  --token-typography-display-300-letter-spacing: -0.5px; /* this is `tracking` */
+  --token-typography-display-300-font-size: 1.125rem; /** 18px/1.125rem */
+  --token-typography-display-300-line-height: 1.3333; /** 24px */
+  --token-typography-display-300-letter-spacing: -0.5px; /** this is `tracking` */
   --token-typography-display-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  --token-typography-display-200-font-size: 1rem; /* 16px/1rem */
-  --token-typography-display-200-line-height: 1.5; /* 24px */
-  --token-typography-display-200-letter-spacing: -0.5px; /* this is `tracking` */
+  --token-typography-display-200-font-size: 1rem; /** 16px/1rem */
+  --token-typography-display-200-line-height: 1.5; /** 24px */
+  --token-typography-display-200-letter-spacing: -0.5px; /** this is `tracking` */
   --token-typography-display-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  --token-typography-display-100-font-size: 0.8125rem; /* 13px/0.8125rem */
-  --token-typography-display-100-line-height: 1.3846; /* 18px */
+  --token-typography-display-100-font-size: 0.8125rem; /** 13px/0.8125rem */
+  --token-typography-display-100-line-height: 1.3846; /** 18px */
   --token-typography-body-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  --token-typography-body-300-font-size: 1rem; /* 16px/1rem */
-  --token-typography-body-300-line-height: 1.5; /* 24px */
+  --token-typography-body-300-font-size: 1rem; /** 16px/1rem */
+  --token-typography-body-300-line-height: 1.5; /** 24px */
   --token-typography-body-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  --token-typography-body-200-font-size: 0.875rem; /* 14px/0.875rem */
-  --token-typography-body-200-line-height: 1.4286; /* 20px */
+  --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */
+  --token-typography-body-200-line-height: 1.4286; /** 20px */
   --token-typography-body-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  --token-typography-body-100-font-size: 0.8125rem; /* 13px/0.8125rem */
-  --token-typography-body-100-line-height: 1.3846; /* 18px */
+  --token-typography-body-100-font-size: 0.8125rem; /** 13px/0.8125rem */
+  --token-typography-body-100-line-height: 1.3846; /** 18px */
   --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace;
-  --token-typography-code-100-font-size: 0.8125rem; /* 13px/0.8125rem */
-  --token-typography-code-100-line-height: 1.23; /* 16px */
+  --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */
+  --token-typography-code-100-line-height: 1.23; /** 16px */
   --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace;
-  --token-typography-code-200-font-size: 0.875rem; /* 14px/0.875rem */
-  --token-typography-code-200-line-height: 1.125; /* 18px */
+  --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */
+  --token-typography-code-200-line-height: 1.125; /** 18px */
   --token-typography-code-300-font-family: ui-monospace, Menlo, Consolas, monospace;
-  --token-typography-code-300-font-size: 1rem; /* 16px/1rem */
-  --token-typography-code-300-line-height: 1.25; /* 20px */
+  --token-typography-code-300-font-size: 1rem; /** 16px/1rem */
+  --token-typography-code-300-line-height: 1.25; /** 20px */
 }
 
 /**
@@ -1081,6 +1081,56 @@
 .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:focus:focus:active::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:focus.mock-focus.mock-active::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.mock-focus:focus:active::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.mock-focus.mock-focus.mock-active::before {
   box-shadow: none;
 }
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:hover .hds-advanced-table__th-reorder-handle, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.mock-hover .hds-advanced-table__th-reorder-handle, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:focus-within .hds-advanced-table__th-reorder-handle {
+  visibility: visible;
+  opacity: 1;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.hds-advanced-table__th--is-being-dragged .hds-advanced-table__th-reorder-handle {
+  opacity: 0;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-reorder-drop-target {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-reorder-drop-target--is-being-dragged {
+  background-color: var(--token-color-surface-primary);
+  opacity: 0.5;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-reorder-drop-target--is-dragging-over {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-reorder-drop-target--is-dragging-over::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background-color: var(--token-color-palette-blue-300);
+  content: "";
+  pointer-events: none;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-reorder-drop-target--is-dragging-over--left::after {
+  left: 0;
+  transform: translateX(-3px);
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-reorder-drop-target--is-dragging-over--left.hds-advanced-table__th-reorder-drop-target--is-first::after {
+  border-radius: calc(var(--token-border-radius-medium) - 1px) 0 0 calc(var(--token-border-radius-medium) - 1px);
+  transform: translateX(0);
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-reorder-drop-target--is-dragging-over--right::after {
+  right: 0;
+  transform: translateX(3px);
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-reorder-drop-target--is-dragging-over--right.hds-advanced-table__th-reorder-drop-target--is-last::after {
+  border-radius: 0 calc(var(--token-border-radius-medium) - 1px) calc(var(--token-border-radius-medium) - 1px) 0;
+  transform: translateX(0);
+}
 .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle {
   position: absolute;
   outline-style: solid;
@@ -1173,6 +1223,12 @@
 .hds-advanced-table__thead .hds-advanced-table__tr:first-of-type .hds-advanced-table__th:last-child {
   border-top-right-radius: calc(var(--token-border-radius-medium) - 1px);
 }
+.hds-advanced-table__thead .hds-advanced-table__scroll-indicator-top {
+  top: 0;
+  width: 100%;
+  height: 8px;
+  background: linear-gradient(to top, rgba(59, 61, 69, 0) 0%, rgba(59, 61, 69, 0.08) 100%);
+}
 .hds-advanced-table__thead.hds-advanced-table__thead--has-resizable-columns .hds-advanced-table__th .hds-advanced-table__th-content-text {
   display: block;
   min-width: 30px;
@@ -1187,6 +1243,10 @@
   background-color: var(--token-color-surface-strong);
   border-bottom: calc(3px - 1px / 2) solid var(--token-color-border-primary);
 }
+.hds-advanced-table__thead.hds-advanced-table__thead--sticky .hds-advanced-table__scroll-indicator-top {
+  top: unset;
+  bottom: -11px;
+}
 .hds-advanced-table__thead.hds-advanced-table__thead--is-pinned {
   background-color: var(--token-color-surface-strong);
   border-top: calc(1px / 2 + 1px) solid var(--token-color-border-primary);
@@ -1209,6 +1269,75 @@
   min-width: 0;
 }
 
+.hds-advanced-table__th-reorder-handle {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  transform: translateX(-50%) translateY(50%);
+  visibility: hidden;
+  opacity: 0;
+}
+.hds-advanced-table__th-reorder-handle .hds-advanced-table__th-reorder-handle__inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 16px;
+  color: var(--token-color-foreground-faint);
+  background-color: var(--token-color-surface-interactive);
+  border: 1px solid var(--token-color-border-primary);
+  border-radius: var(--token-border-radius-small);
+  box-shadow: var(--token-elevation-low-box-shadow);
+}
+.hds-advanced-table__th-reorder-handle .hds-icon {
+  width: 12px;
+  height: 12px;
+}
+.hds-advanced-table__th-reorder-handle:hover, .hds-advanced-table__th-reorder-handle.mock-hover {
+  cursor: grab;
+}
+.hds-advanced-table__th-reorder-handle:hover .hds-advanced-table__th-reorder-handle__inner, .hds-advanced-table__th-reorder-handle.mock-hover .hds-advanced-table__th-reorder-handle__inner {
+  background-color: var(--token-color-surface-interactive-hover);
+}
+.hds-advanced-table__th-reorder-handle:active, .hds-advanced-table__th-reorder-handle.mock-active {
+  cursor: grabbing;
+}
+.hds-advanced-table__th-reorder-handle:active .hds-advanced-table__th-reorder-handle__inner, .hds-advanced-table__th-reorder-handle.mock-active .hds-advanced-table__th-reorder-handle__inner {
+  background-color: var(--token-color-surface-interactive-hover);
+}
+.hds-advanced-table__th-reorder-handle:focus, .hds-advanced-table__th-reorder-handle.mock-focus {
+  position: absolute;
+  outline-style: solid;
+  outline-color: transparent;
+  isolation: isolate;
+}
+.hds-advanced-table__th-reorder-handle:focus::before, .hds-advanced-table__th-reorder-handle.mock-focus::before {
+  position: absolute;
+  top: 3px;
+  right: 0;
+  bottom: 3px;
+  left: 0;
+  z-index: -1;
+  border-radius: 5px;
+  content: "";
+}
+.hds-advanced-table__th-reorder-handle:focus:focus::before, .hds-advanced-table__th-reorder-handle:focus.mock-focus::before, .hds-advanced-table__th-reorder-handle.mock-focus:focus::before, .hds-advanced-table__th-reorder-handle.mock-focus.mock-focus::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-advanced-table__th-reorder-handle:focus:focus:active::before, .hds-advanced-table__th-reorder-handle:focus.mock-focus.mock-active::before, .hds-advanced-table__th-reorder-handle.mock-focus:focus:active::before, .hds-advanced-table__th-reorder-handle.mock-focus.mock-focus.mock-active::before {
+  box-shadow: none;
+}
+.hds-advanced-table__th-reorder-handle:focus .hds-advanced-table__th-reorder-handle__inner, .hds-advanced-table__th-reorder-handle.mock-focus .hds-advanced-table__th-reorder-handle__inner {
+  background-color: var(--token-color-surface-interactive);
+}
+
 .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon {
   width: 24px;
   height: 24px;
@@ -1500,16 +1629,21 @@
   background: linear-gradient(to right, rgba(59, 61, 69, 0) 0%, rgba(59, 61, 69, 0.08) 100%);
 }
 
-.hds-advanced-table__scroll-indicator-top {
-  height: 8px;
-  background: linear-gradient(to top, rgba(59, 61, 69, 0) 0%, rgba(59, 61, 69, 0.08) 100%);
-}
-
 .hds-advanced-table__scroll-indicator-bottom {
   height: 8px;
   background: linear-gradient(to bottom, rgba(59, 61, 69, 0) 0%, rgba(59, 61, 69, 0.08) 100%);
 }
 
+.hds-advanced-table__th-reorder-drag-preview {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  background-color: rgba(204, 227, 254, 0.3);
+  border: 5px solid var(--token-color-focus-action-external);
+  border-radius: var(--token-border-radius-medium);
+  box-shadow: var(--token-elevation-mid-box-shadow);
+}
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0