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

package/declarations/components/hds/stepper/task/indicator.d.ts

@@ -8,7 +8,7 @@ import type { HdsIconSignature } from '../../icon';
 import type { HdsStepperStatuses } from '../types.ts';
 export declare const DEFAULT_STATUS = HdsStepperStatusesValues.Incomplete;
 export declare const STATUSES: HdsStepperStatuses[];
-export declare const MAPPING_STATUS_TO_ICONS: Record<HdsStepperStatusesValues, "type" | "map" | "filter" | "code" | "link" | "menu" | "search" | "video" | "circle" | "image" | "path" | "tag" | "repeat" | "hash" | "queue" | "shuffle" | "chevron-up" | "chevron-down" | "unfold-open" | "unfold-close" | "arrow-down" | "arrow-up" | "swap-vertical" | "top" | "key" | "end" | "start" | "change" | "pause" | "play" | "x" | "bottom" | "caret" | "grid" | "outline" | "text-wrap" | "loading" | "loading-static" | "running" | "running-static" | "apple" | "apple-color" | "alibaba" | "alibaba-color" | "amazon-ecs" | "amazon-ecs-color" | "amazon-eks" | "amazon-eks-color" | "auth0" | "auth0-color" | "aws" | "aws-color" | "aws-cdk" | "aws-cdk-color" | "aws-cloudwatch" | "aws-cloudwatch-color" | "aws-ec2" | "aws-ec2-color" | "aws-lambda" | "aws-lambda-color" | "aws-s3" | "aws-s3-color" | "azure" | "azure-color" | "azure-aks" | "azure-aks-color" | "azure-blob-storage" | "azure-blob-storage-color" | "azure-devops" | "azure-devops-color" | "azure-vms" | "azure-vms-color" | "bitbucket" | "bitbucket-color" | "bridgecrew" | "bridgecrew-color" | "cisco" | "cisco-color" | "codepen" | "codepen-color" | "confluence" | "confluence-color" | "confluent" | "confluent-color" | "datadog" | "datadog-color" | "digital-ocean" | "digital-ocean-color" | "docker" | "docker-color" | "duo" | "duo-color" | "elastic-observability" | "elastic-observability-color" | "f5" | "f5-color" | "facebook" | "facebook-color" | "figma" | "figma-color" | "gcp" | "gcp-color" | "git" | "git-color" | "gitlab" | "gitlab-color" | "github" | "github-color" | "google" | "google-color" | "google-docs" | "google-docs-color" | "google-drive" | "google-drive-color" | "google-forms" | "google-forms-color" | "google-sheets" | "google-sheets-color" | "google-slides" | "google-slides-color" | "grafana" | "grafana-color" | "helm" | "helm-color" | "infracost" | "infracost-color" | "jfrog" | "jfrog-color" | "jira" | "jira-color" | "jwt" | "jwt-color" | "kubernetes" | "kubernetes-color" | "lightlytics" | "lightlytics-color" | "linkedin" | "linkedin-color" | "linode" | "linode-color" | "linux" | "linux-color" | "loom" | "loom-color" | "meetup" | "meetup-color" | "microsoft" | "microsoft-color" | "microsoft-teams" | "microsoft-teams-color" | "minio" | "minio-color" | "mongodb" | "mongodb-color" | "new-relic" | "new-relic-color" | "okta" | "okta-color" | "oracle" | "oracle-color" | "opa" | "opa-color" | "openid" | "openid-color" | "pack" | "pack-color" | "pager-duty" | "pager-duty-color" | "ping-identity " | "ping-identity-color" | "postgres" | "postgres-color" | "rabbitmq" | "rabbitmq-color" | "saml" | "saml-color" | "service-now" | "service-now-color" | "slack" | "slack-color" | "snyk" | "snyk-color" | "splunk" | "splunk-color" | "twilio" | "twilio-color" | "twitch" | "twitch-color" | "twitter" | "twitter-color" | "twitter-x" | "twitter-x-color" | "vantage" | "vantage-color" | "venafi" | "venafi-color" | "vercel" | "vercel-color" | "vmware" | "vmware-color" | "youtube" | "youtube-color" | "boundary" | "boundary-color" | "boundary-fill" | "boundary-fill-color" | "boundary-square" | "boundary-square-color" | "consul" | "consul-color" | "consul-fill" | "consul-fill-color" | "consul-square" | "consul-square-color" | "nomad" | "nomad-color" | "nomad-fill" | "nomad-fill-color" | "nomad-square" | "nomad-square-color" | "packer" | "packer-color" | "packer-fill" | "packer-fill-color" | "packer-square" | "packer-square-color" | "terraform" | "terraform-color" | "terraform-fill" | "terraform-fill-color" | "terraform-square" | "terraform-square-color" | "vagrant" | "vagrant-color" | "vagrant-fill" | "vagrant-fill-color" | "vagrant-square" | "vagrant-square-color" | "vault" | "vault-color" | "vault-fill" | "vault-fill-color" | "vault-square" | "vault-square-color" | "vault-radar" | "vault-radar-color" | "vault-radar-fill" | "vault-radar-fill-color" | "vault-radar-square" | "vault-radar-square-color" | "vault-secrets" | "vault-secrets-color" | "vault-secrets-fill" | "vault-secrets-fill-color" | "vault-secrets-square" | "vault-secrets-square-color" | "waypoint" | "waypoint-color" | "waypoint-fill" | "waypoint-fill-color" | "waypoint-square" | "waypoint-square-color" | "hashicorp" | "hashicorp-color" | "hashicorp-fill" | "hashicorp-fill-color" | "hashicorp-square" | "hashicorp-square-color" | "hcp" | "hcp-color" | "hcp-fill" | "hcp-fill-color" | "hcp-square" | "hcp-square-color" | "accessibility" | "folder-users" | "frown" | "identity-service" | "identity-user" | "meh" | "robot" | "smile" | "user" | "user-check" | "user-circle" | "user-circle-fill" | "user-minus" | "user-plus" | "user-x" | "users" | "ampersand" | "beaker" | "bucket" | "bulb" | "circle-dot" | "circle-fill" | "circle-half" | "diamond" | "diamond-fill" | "disc" | "dot" | "dot-half" | "droplet" | "flag" | "gift" | "government" | "handshake" | "hexagon" | "hexagon-fill" | "labyrinth" | "layers" | "moon" | "octagon" | "random" | "rocket" | "sparkle" | "square" | "square-fill" | "sun" | "triangle" | "triangle-fill" | "truck" | "wand" | "zap" | "zap-off" | "docs" | "docs-download" | "docs-link" | "guide" | "guide-link" | "help" | "info" | "info-fill" | "learn" | "learn-link" | "support" | "alert-circle" | "alert-circle-fill" | "alert-diamond" | "alert-diamond-fill" | "alert-octagon" | "alert-octagon-fill" | "alert-triangle" | "alert-triangle-fill" | "check" | "check-circle" | "check-circle-fill" | "check-diamond" | "check-diamond-fill" | "check-hexagon" | "check-hexagon-fill" | "check-square" | "check-square-fill" | "skip" | "x-circle" | "x-circle-fill" | "x-diamond" | "x-diamond-fill" | "x-hexagon" | "x-hexagon-fill" | "x-square" | "x-square-fill" | "bug" | "certificate" | "eye" | "eye-off" | "fingerprint" | "keychain" | "lock" | "lock-fill" | "lock-off" | "shield" | "shield-alert" | "shield-check" | "shield-off" | "shield-x" | "token" | "unlock" | "verified" | "wall" | "minus" | "minus-circle" | "minus-circle-fill" | "minus-plus" | "minus-plus-circle" | "minus-plus-square" | "minus-square" | "minus-square-fill" | "plus" | "plus-circle" | "plus-circle-fill" | "plus-square" | "camera" | "camera-off" | "cast" | "closed-caption" | "fast-forward" | "film" | "headphones" | "music" | "pause-circle" | "play-circle" | "radio" | "rewind" | "rss" | "skip-back" | "skip-forward" | "speaker" | "stop-circle" | "volume" | "volume-down" | "volume-2" | "volume-x" | "wifi" | "wifi-off" | "compass" | "crosshair" | "map-pin" | "navigation" | "navigation-alt" | "redirect" | "target" | "align-center" | "align-justify" | "align-left" | "align-right" | "battery" | "battery-charging" | "bookmark" | "bookmark-add" | "bookmark-add-fill" | "bookmark-fill" | "bookmark-remove" | "bookmark-remove-fill" | "command" | "crop" | "dashboard" | "delete" | "download" | "edit" | "entry-point" | "exit-point" | "external-link" | "filter-circle" | "filter-fill" | "grid-alt" | "home" | "jump-link" | "layout" | "list" | "maximize" | "maximize-alt" | "minimize" | "minimize-alt" | "more-horizontal" | "more-vertical" | "mouse-pointer" | "move-horizontal" | "paperclip" | "pen-tool" | "pencil-tool" | "pin" | "pin-off" | "power" | "printer" | "reload" | "resize-column" | "rotate-cw" | "rotate-ccw" | "share" | "sidebar" | "sidebar-hide" | "sidebar-show" | "sign-in" | "sign-out" | "slash" | "slash-square" | "sort-asc" | "sort-desc" | "switcher" | "sync" | "sync-alert" | "sync-reverse" | "toggle-left" | "toggle-right" | "trash" | "upload" | "zoom-in" | "zoom-out" | "archive" | "clipboard" | "clipboard-checked" | "clipboard-copy" | "clipboard-x" | "file" | "file-change" | "file-check" | "file-diff" | "file-minus" | "file-plus" | "file-source" | "file-text" | "file-x" | "files" | "folder" | "folder-fill" | "folder-minus" | "folder-minus-fill" | "folder-plus" | "folder-plus-fill" | "folder-star" | "inbox" | "api" | "auto-apply" | "build" | "change-circle" | "change-square" | "channel" | "cloud" | "cloud-check" | "cloud-download" | "cloud-lightning" | "cloud-lock" | "cloud-off" | "cloud-upload" | "cloud-x" | "connection" | "connection-gateway" | "cpu" | "duplicate" | "gateway" | "git-branch" | "git-commit" | "git-merge" | "git-pull-request" | "git-repo" | "hammer" | "key-values" | "mainframe" | "mesh" | "module" | "monitor" | "network" | "network-alt" | "node" | "pipeline" | "plug" | "replication-direct" | "replication-perf" | "scissors" | "server" | "server-cluster" | "serverless" | "service" | "settings" | "sliders" | "smartphone" | "socket" | "step" | "tablet" | "terminal" | "terminal-screen" | "test" | "tools" | "transform-data" | "tv" | "webhook" | "wrench" | "calendar" | "clock" | "clock-filled" | "delay" | "event" | "history" | "hourglass" | "watch" | "bar-chart" | "bar-chart-alt" | "box" | "collections" | "database" | "hard-drive" | "line-chart" | "line-chart-up" | "logs" | "package" | "pie-chart" | "save" | "trend-down" | "trend-up" | "activity" | "at-sign" | "award" | "bell" | "bell-active" | "bell-active-fill" | "bell-off" | "discussion-circle" | "discussion-square" | "heart" | "heart-fill" | "heart-off" | "mail" | "mail-open" | "message-circle" | "message-circle-fill" | "message-square" | "message-square-fill" | "mic" | "mic-off" | "newspaper" | "phone" | "phone-call" | "phone-off" | "send" | "star" | "star-circle" | "star-fill" | "star-off" | "thumbs-down" | "thumbs-up" | "video-off" | "bank-vault" | "briefcase" | "credit-card" | "dollar-sign" | "enterprise" | "globe" | "globe-private" | "org" | "provider" | "shopping-bag" | "shopping-cart" | "arrow-down-circle" | "arrow-down-left" | "arrow-down-right" | "arrow-left" | "arrow-left-circle" | "arrow-right" | "arrow-right-circle" | "arrow-up-circle" | "arrow-up-left" | "arrow-up-right" | "chevron-left" | "chevron-right" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "corner-down-left" | "corner-down-right" | "corner-left-down" | "corner-left-up" | "corner-right-down" | "corner-right-up" | "corner-up-left" | "corner-up-right" | "load-balancer" | "migrate" | "move" | "swap-horizontal">;
+export declare const MAPPING_STATUS_TO_ICONS: Record<HdsStepperStatusesValues, "type" | "map" | "filter" | "code" | "link" | "menu" | "search" | "video" | "circle" | "image" | "path" | "tag" | "repeat" | "hash" | "queue" | "shuffle" | "chevron-up" | "chevron-down" | "unfold-open" | "unfold-close" | "arrow-down" | "arrow-up" | "swap-vertical" | "top" | "key" | "move" | "change" | "pause" | "play" | "move-horizontal" | "loading" | "loading-static" | "running" | "running-static" | "apple" | "apple-color" | "alibaba" | "alibaba-color" | "amazon-ecs" | "amazon-ecs-color" | "amazon-eks" | "amazon-eks-color" | "auth0" | "auth0-color" | "aws" | "aws-color" | "aws-cdk" | "aws-cdk-color" | "aws-cloudwatch" | "aws-cloudwatch-color" | "aws-ec2" | "aws-ec2-color" | "aws-lambda" | "aws-lambda-color" | "aws-s3" | "aws-s3-color" | "azure" | "azure-color" | "azure-aks" | "azure-aks-color" | "azure-blob-storage" | "azure-blob-storage-color" | "azure-devops" | "azure-devops-color" | "azure-vms" | "azure-vms-color" | "bitbucket" | "bitbucket-color" | "bridgecrew" | "bridgecrew-color" | "cisco" | "cisco-color" | "codepen" | "codepen-color" | "confluence" | "confluence-color" | "confluent" | "confluent-color" | "datadog" | "datadog-color" | "digital-ocean" | "digital-ocean-color" | "docker" | "docker-color" | "duo" | "duo-color" | "elastic-observability" | "elastic-observability-color" | "f5" | "f5-color" | "facebook" | "facebook-color" | "figma" | "figma-color" | "gcp" | "gcp-color" | "git" | "git-color" | "gitlab" | "gitlab-color" | "github" | "github-color" | "google" | "google-color" | "google-docs" | "google-docs-color" | "google-drive" | "google-drive-color" | "google-forms" | "google-forms-color" | "google-sheets" | "google-sheets-color" | "google-slides" | "google-slides-color" | "grafana" | "grafana-color" | "helm" | "helm-color" | "infracost" | "infracost-color" | "jfrog" | "jfrog-color" | "jira" | "jira-color" | "jwt" | "jwt-color" | "kubernetes" | "kubernetes-color" | "lightlytics" | "lightlytics-color" | "linkedin" | "linkedin-color" | "linode" | "linode-color" | "linux" | "linux-color" | "loom" | "loom-color" | "meetup" | "meetup-color" | "microsoft" | "microsoft-color" | "microsoft-teams" | "microsoft-teams-color" | "minio" | "minio-color" | "mongodb" | "mongodb-color" | "new-relic" | "new-relic-color" | "okta" | "okta-color" | "oracle" | "oracle-color" | "opa" | "opa-color" | "openid" | "openid-color" | "pack" | "pack-color" | "pager-duty" | "pager-duty-color" | "ping-identity " | "ping-identity-color" | "postgres" | "postgres-color" | "rabbitmq" | "rabbitmq-color" | "saml" | "saml-color" | "service-now" | "service-now-color" | "slack" | "slack-color" | "snyk" | "snyk-color" | "splunk" | "splunk-color" | "twilio" | "twilio-color" | "twitch" | "twitch-color" | "twitter" | "twitter-color" | "twitter-x" | "twitter-x-color" | "vantage" | "vantage-color" | "venafi" | "venafi-color" | "vercel" | "vercel-color" | "vmware" | "vmware-color" | "youtube" | "youtube-color" | "boundary" | "boundary-color" | "boundary-fill" | "boundary-fill-color" | "boundary-square" | "boundary-square-color" | "consul" | "consul-color" | "consul-fill" | "consul-fill-color" | "consul-square" | "consul-square-color" | "nomad" | "nomad-color" | "nomad-fill" | "nomad-fill-color" | "nomad-square" | "nomad-square-color" | "packer" | "packer-color" | "packer-fill" | "packer-fill-color" | "packer-square" | "packer-square-color" | "terraform" | "terraform-color" | "terraform-fill" | "terraform-fill-color" | "terraform-square" | "terraform-square-color" | "vagrant" | "vagrant-color" | "vagrant-fill" | "vagrant-fill-color" | "vagrant-square" | "vagrant-square-color" | "vault" | "vault-color" | "vault-fill" | "vault-fill-color" | "vault-square" | "vault-square-color" | "vault-radar" | "vault-radar-color" | "vault-radar-fill" | "vault-radar-fill-color" | "vault-radar-square" | "vault-radar-square-color" | "vault-secrets" | "vault-secrets-color" | "vault-secrets-fill" | "vault-secrets-fill-color" | "vault-secrets-square" | "vault-secrets-square-color" | "waypoint" | "waypoint-color" | "waypoint-fill" | "waypoint-fill-color" | "waypoint-square" | "waypoint-square-color" | "hashicorp" | "hashicorp-color" | "hashicorp-fill" | "hashicorp-fill-color" | "hashicorp-square" | "hashicorp-square-color" | "hcp" | "hcp-color" | "hcp-fill" | "hcp-fill-color" | "hcp-square" | "hcp-square-color" | "accessibility" | "folder-users" | "frown" | "identity-service" | "identity-user" | "meh" | "robot" | "smile" | "user" | "user-check" | "user-circle" | "user-circle-fill" | "user-minus" | "user-plus" | "user-x" | "users" | "ampersand" | "beaker" | "bucket" | "bulb" | "circle-dot" | "circle-fill" | "circle-half" | "diamond" | "diamond-fill" | "disc" | "dot" | "dot-half" | "droplet" | "flag" | "gift" | "government" | "handshake" | "hexagon" | "hexagon-fill" | "labyrinth" | "layers" | "moon" | "octagon" | "outline" | "random" | "rocket" | "sparkle" | "square" | "square-fill" | "sun" | "triangle" | "triangle-fill" | "truck" | "wand" | "zap" | "zap-off" | "docs" | "docs-download" | "docs-link" | "guide" | "guide-link" | "help" | "info" | "info-fill" | "learn" | "learn-link" | "support" | "alert-circle" | "alert-circle-fill" | "alert-diamond" | "alert-diamond-fill" | "alert-octagon" | "alert-octagon-fill" | "alert-triangle" | "alert-triangle-fill" | "check" | "check-circle" | "check-circle-fill" | "check-diamond" | "check-diamond-fill" | "check-hexagon" | "check-hexagon-fill" | "check-square" | "check-square-fill" | "skip" | "x" | "x-circle" | "x-circle-fill" | "x-diamond" | "x-diamond-fill" | "x-hexagon" | "x-hexagon-fill" | "x-square" | "x-square-fill" | "bug" | "certificate" | "eye" | "eye-off" | "fingerprint" | "keychain" | "lock" | "lock-fill" | "lock-off" | "shield" | "shield-alert" | "shield-check" | "shield-off" | "shield-x" | "token" | "unlock" | "verified" | "wall" | "minus" | "minus-circle" | "minus-circle-fill" | "minus-plus" | "minus-plus-circle" | "minus-plus-square" | "minus-square" | "minus-square-fill" | "plus" | "plus-circle" | "plus-circle-fill" | "plus-square" | "camera" | "camera-off" | "cast" | "closed-caption" | "fast-forward" | "film" | "headphones" | "music" | "pause-circle" | "play-circle" | "radio" | "rewind" | "rss" | "skip-back" | "skip-forward" | "speaker" | "stop-circle" | "volume" | "volume-down" | "volume-2" | "volume-x" | "wifi" | "wifi-off" | "compass" | "crosshair" | "map-pin" | "navigation" | "navigation-alt" | "redirect" | "target" | "align-center" | "align-justify" | "align-left" | "align-right" | "battery" | "battery-charging" | "bookmark" | "bookmark-add" | "bookmark-add-fill" | "bookmark-fill" | "bookmark-remove" | "bookmark-remove-fill" | "bottom" | "start" | "end" | "command" | "crop" | "dashboard" | "delete" | "download" | "edit" | "entry-point" | "exit-point" | "external-link" | "filter-circle" | "filter-fill" | "grid" | "grid-alt" | "home" | "jump-link" | "layout" | "list" | "maximize" | "maximize-alt" | "minimize" | "minimize-alt" | "more-horizontal" | "more-vertical" | "mouse-pointer" | "paperclip" | "pen-tool" | "pencil-tool" | "pin" | "pin-off" | "power" | "printer" | "reload" | "resize-column" | "rotate-cw" | "rotate-ccw" | "share" | "sidebar" | "sidebar-hide" | "sidebar-show" | "sign-in" | "sign-out" | "slash" | "slash-square" | "sort-asc" | "sort-desc" | "switcher" | "sync" | "sync-alert" | "sync-reverse" | "toggle-left" | "toggle-right" | "trash" | "text-wrap" | "upload" | "zoom-in" | "zoom-out" | "archive" | "clipboard" | "clipboard-checked" | "clipboard-copy" | "clipboard-x" | "file" | "file-change" | "file-check" | "file-diff" | "file-minus" | "file-plus" | "file-source" | "file-text" | "file-x" | "files" | "folder" | "folder-fill" | "folder-minus" | "folder-minus-fill" | "folder-plus" | "folder-plus-fill" | "folder-star" | "inbox" | "api" | "auto-apply" | "build" | "change-circle" | "change-square" | "channel" | "cloud" | "cloud-check" | "cloud-download" | "cloud-lightning" | "cloud-lock" | "cloud-off" | "cloud-upload" | "cloud-x" | "connection" | "connection-gateway" | "cpu" | "duplicate" | "gateway" | "git-branch" | "git-commit" | "git-merge" | "git-pull-request" | "git-repo" | "hammer" | "key-values" | "mainframe" | "mesh" | "module" | "monitor" | "network" | "network-alt" | "node" | "pipeline" | "plug" | "replication-direct" | "replication-perf" | "scissors" | "server" | "server-cluster" | "serverless" | "service" | "settings" | "sliders" | "smartphone" | "socket" | "step" | "tablet" | "terminal" | "terminal-screen" | "test" | "tools" | "transform-data" | "tv" | "webhook" | "wrench" | "calendar" | "clock" | "clock-filled" | "delay" | "event" | "history" | "hourglass" | "watch" | "bar-chart" | "bar-chart-alt" | "box" | "collections" | "database" | "hard-drive" | "line-chart" | "line-chart-up" | "logs" | "package" | "pie-chart" | "save" | "trend-down" | "trend-up" | "activity" | "at-sign" | "award" | "bell" | "bell-active" | "bell-active-fill" | "bell-off" | "discussion-circle" | "discussion-square" | "heart" | "heart-fill" | "heart-off" | "mail" | "mail-open" | "message-circle" | "message-circle-fill" | "message-square" | "message-square-fill" | "mic" | "mic-off" | "newspaper" | "phone" | "phone-call" | "phone-off" | "send" | "star" | "star-circle" | "star-fill" | "star-off" | "thumbs-down" | "thumbs-up" | "video-off" | "bank-vault" | "briefcase" | "credit-card" | "dollar-sign" | "enterprise" | "globe" | "globe-private" | "org" | "provider" | "shopping-bag" | "shopping-cart" | "arrow-down-circle" | "arrow-down-left" | "arrow-down-right" | "arrow-left" | "arrow-left-circle" | "arrow-right" | "arrow-right-circle" | "arrow-up-circle" | "arrow-up-left" | "arrow-up-right" | "caret" | "chevron-left" | "chevron-right" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "corner-down-left" | "corner-down-right" | "corner-left-down" | "corner-left-up" | "corner-right-down" | "corner-right-up" | "corner-up-left" | "corner-up-right" | "load-balancer" | "migrate" | "swap-horizontal">;
 export interface HdsStepperTaskIndicatorSignature {
     Args: {
         status?: HdsStepperStatuses;

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

@@ -17,7 +17,7 @@ export declare const DENSITIES: HdsTableDensities[];
 export declare const DEFAULT_DENSITY = HdsTableDensityValues.Medium;
 export declare const VALIGNMENTS: HdsTableVerticalAlignment[];
 export declare const DEFAULT_VALIGN = HdsTableVerticalAlignmentValues.Top;
-export interface HdsTableSignature {
+export interface HdsTableSignature<T = HdsTableModel> {
     Args: {
         align?: HdsTableHorizontalAlignment;
         caption?: string;
@@ -27,7 +27,7 @@ export interface HdsTableSignature {
         isFixedLayout?: boolean;
         isSelectable?: boolean;
         isStriped?: boolean;
-        model?: HdsTableModel;
+        model?: T[];
         onSelectionChange?: (selection: HdsTableOnSelectionChangeSignature) => void;
         onSort?: (sortBy: string, sortOrder: HdsTableThSortOrder) => void;
         selectionAriaLabelSuffix?: string;
@@ -53,7 +53,7 @@ export interface HdsTableSignature {
                 Td?: ComponentLike<HdsTableTdSignature>;
                 Tr?: ComponentLike<HdsTableTrSignature>;
                 Th?: ComponentLike<HdsTableThSignature>;
-                data?: Record<string, unknown>;
+                data?: T;
                 rowIndex?: number;
                 sortBy?: string;
                 sortOrder?: HdsTableThSortOrder;
@@ -62,14 +62,14 @@ export interface HdsTableSignature {
     };
     Element: HTMLTableElement;
 }
-export default class HdsTable extends Component<HdsTableSignature> {
+export default class HdsTable<T = HdsTableModel> extends Component<HdsTableSignature<T>> {
     hdsIntl: HdsIntlService;
     sortBy: string | undefined;
     sortOrder: "desc" | "asc" | HdsTableThSortOrderValues;
     private _selectAllCheckbox?;
     private _selectableRows;
     private _isSelectAllCheckboxSelected?;
-    constructor(owner: Owner, args: HdsTableSignature['Args']);
+    constructor(owner: Owner, args: HdsTableSignature<T>['Args']);
     get getSortCriteria(): string | HdsTableSortingFunction<unknown>;
     get identityKey(): string | undefined;
     get sortedMessageText(): string;

package/declarations/components/hds/table/td.d.ts

@@ -5,7 +5,7 @@
 import Component from '@glimmer/component';
 import type { HdsTableHorizontalAlignment } from './types.ts';
 import { HdsTableHorizontalAlignmentValues } from './types.ts';
-export declare const ALIGNMENTS: string[];
+export declare const ALIGNMENTS: HdsTableHorizontalAlignment[];
 export declare const DEFAULT_ALIGN = HdsTableHorizontalAlignmentValues.Left;
 export interface HdsTableTdSignature {
     Args: {

package/declarations/components/hds/table/th-sort.d.ts

@@ -6,7 +6,7 @@ import Component from '@glimmer/component';
 import { HdsTableHorizontalAlignmentValues } from './types.ts';
 import type { HdsTableHorizontalAlignment, HdsTableThSortOrder, HdsTableThSortOrderLabels } from './types.ts';
 import type { HdsTableThButtonSortSignature } from './th-button-sort';
-export declare const ALIGNMENTS: string[];
+export declare const ALIGNMENTS: HdsTableHorizontalAlignment[];
 export declare const DEFAULT_ALIGN = HdsTableHorizontalAlignmentValues.Left;
 export interface HdsTableThSortSignature {
     Args: {

package/declarations/components/hds/table/th.d.ts

@@ -5,7 +5,7 @@
 import Component from '@glimmer/component';
 import type { HdsTableHorizontalAlignment, HdsTableScope } from './types.ts';
 import { HdsTableHorizontalAlignmentValues } from './types.ts';
-export declare const ALIGNMENTS: string[];
+export declare const ALIGNMENTS: HdsTableHorizontalAlignment[];
 export declare const DEFAULT_ALIGN = HdsTableHorizontalAlignmentValues.Left;
 export interface HdsTableThSignature {
     Args: {

package/declarations/template-registry.d.ts

@@ -12,6 +12,8 @@ import type HdsAdvancedTableThButtonSortComponent from './components/hds/advance
 import type HdsAdvancedTableThComponent from './components/hds/advanced-table/th';
 import type HdsAdvancedTableThButtonTooltipComponent from './components/hds/advanced-table/th-button-tooltip';
 import type HdsAdvancedTableThContextMenu from './components/hds/advanced-table/th-context-menu';
+import type HdsAdvancedTableThReorderDropTarget from './components/hds/advanced-table/th-reorder-drop-target';
+import type HdsAdvancedTableThReorderHandle from './components/hds/advanced-table/th-reorder-handle';
 import type HdsAdvancedTableThResizeHandle from './components/hds/advanced-table/th-resize-handle';
 import type HdsAdvancedTableThSortComponent from './components/hds/advanced-table/th-sort';
 import type HdsAdvancedTableThSelectableComponent from './components/hds/advanced-table/th-selectable';
@@ -261,6 +263,10 @@ export default interface HdsComponentsRegistry {
     'Hds::AdvancedTable::ThButtonTooltip': typeof HdsAdvancedTableThButtonTooltipComponent;
     'Hds::AdvancedTable::ThContextMenu': typeof HdsAdvancedTableThContextMenu;
     'hds/advanced-table/th-context-menu': typeof HdsAdvancedTableThContextMenu;
+    'Hds::AdvancedTable::ThReorderDropTarget': typeof HdsAdvancedTableThReorderDropTarget;
+    'hds/advanced-table/th-reorder-drop-target': typeof HdsAdvancedTableThReorderDropTarget;
+    'Hds::AdvancedTable::ThReorderHandle': typeof HdsAdvancedTableThReorderHandle;
+    'hds/advanced-table/th-reorder-handle': typeof HdsAdvancedTableThReorderHandle;
     'Hds::AdvancedTable::ThResizeHandle': typeof HdsAdvancedTableThResizeHandle;
     'hds/advanced-table/th-resize-handle': typeof HdsAdvancedTableThResizeHandle;
     'hds/advanced-table/th-button-tooltip': typeof HdsAdvancedTableThButtonTooltipComponent;

package/dist/_app_/components/hds/advanced-table/th-reorder-drop-target.js

@@ -0,0 +1 @@
+export { default } from "@hashicorp/design-system-components/components/hds/advanced-table/th-reorder-drop-target";

package/dist/_app_/components/hds/advanced-table/th-reorder-handle.js

@@ -0,0 +1 @@
+export { default } from "@hashicorp/design-system-components/components/hds/advanced-table/th-reorder-handle";

package/dist/_app_/components/hds/advanced-table/utils.js

@@ -0,0 +1 @@
+export { default } from "@hashicorp/design-system-components/components/hds/advanced-table/utils";

package/dist/components/hds/advanced-table/index.js

@@ -3,6 +3,7 @@ import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import { tracked } from '@glimmer/tracking';
 import { guidFor } from '@ember/object/internals';
+import { service } from '@ember/service';
 import { modifier } from 'ember-modifier';
 import HdsAdvancedTableTableModel from './models/table.js';
 import { HdsAdvancedTableDensityValues, HdsAdvancedTableVerticalAlignmentValues } from './types.js';
@@ -10,7 +11,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<div\n  class=\"hds-advanced-table__container\n    {{(if this.isStickyHeaderPinned \'hds-advanced-table__container--header-is-pinned\')}}\"\n  {{did-update this.setupTableModelData @columns @model @sortBy @sortOrder}}\n  ...attributes\n>\n  {{! Caption }}\n  <div id={{this._captionId}} class=\"sr-only hds-advanced-table__caption\" aria-live=\"polite\">\n    {{@caption}}\n    {{this.sortedMessageText}}\n  </div>\n\n  {{! Grid }}\n  <div\n    class={{this.classNames}}\n    role=\"grid\"\n    aria-describedby={{this._captionId}}\n    {{style\n      grid-template-columns=this.gridTemplateColumns\n      --hds-advanced-table-sticky-column-offset=this.stickyColumnOffset\n      max-height=@maxHeight\n    }}\n    {{this._registerGridElement}}\n    {{this._setUpScrollWrapper}}\n  >\n    {{! Header }}\n    <div class={{this.theadClassNames}} role=\"rowgroup\" {{this._setUpThead}}>\n      <Hds::AdvancedTable::Tr\n        @selectionScope=\"col\"\n        @onClickSortBySelected={{if @selectableColumnKey (fn this._tableModel.setSortBy @selectableColumnKey)}}\n        @sortBySelectedOrder={{if (eq this._tableModel.sortBy @selectableColumnKey) this._tableModel.sortOrder}}\n        @isSelectable={{this.isSelectable}}\n        @onSelectionChange={{this.onSelectionAllChange}}\n        @didInsert={{this.didInsertSelectAllCheckbox}}\n        @willDestroy={{this.willDestroySelectAllCheckbox}}\n        @selectionAriaLabelSuffix=\"all rows\"\n        @hasStickyColumn={{this.hasStickyFirstColumn}}\n        @isStickyColumnPinned={{this.isStickyColumnPinned}}\n      >\n        {{#each this._tableModel.columns as |column|}}\n          {{#if column.isSortable}}\n            <Hds::AdvancedTable::ThSort\n              @column={{column}}\n              @sortOrder={{if (eq column.key this._tableModel.sortBy) this._tableModel.sortOrder}}\n              @onClickSort={{if column.key (fn this._tableModel.setSortBy column.key)}}\n              @align={{column.align}}\n              @tooltip={{column.tooltip}}\n              @hasResizableColumns={{@hasResizableColumns}}\n              @isStickyColumn={{this._isStickyColumn column}}\n              @isStickyColumnPinned={{this.isStickyColumnPinned}}\n              @tableHeight={{this._tableHeight}}\n              @onColumnResize={{@onColumnResize}}\n              @onPinFirstColumn={{this._onPinFirstColumn}}\n              {{this._registerThElement column}}\n            >\n              {{column.label}}\n            </Hds::AdvancedTable::ThSort>\n          {{else}}\n            <Hds::AdvancedTable::Th\n              @align={{column.align}}\n              @column={{column}}\n              @hasExpandAllButton={{this._tableModel.hasRowsWithChildren}}\n              @hasResizableColumns={{@hasResizableColumns}}\n              @isExpanded={{this._tableModel.expandState}}\n              @isExpandable={{column.isExpandable}}\n              @isStickyColumn={{this._isStickyColumn column}}\n              @isStickyColumnPinned={{this.isStickyColumnPinned}}\n              @isVisuallyHidden={{column.isVisuallyHidden}}\n              @tableHeight={{this._tableHeight}}\n              @tooltip={{column.tooltip}}\n              @onClickToggle={{this._tableModel.toggleAll}}\n              @onColumnResize={{@onColumnResize}}\n              @onPinFirstColumn={{this._onPinFirstColumn}}\n              {{this._registerThElement column}}\n            >\n              {{column.label}}\n            </Hds::AdvancedTable::Th>\n          {{/if}}\n        {{/each}}\n      </Hds::AdvancedTable::Tr>\n    </div>\n\n    {{! Body }}\n    <div class=\"hds-advanced-table__tbody\" role=\"rowgroup\">\n      {{! ----------------------------------------------------------------------------------------\n        IMPORTANT: we loop on the `model` array and for each record\n        we yield the Tr/Td/Th elements _and_ the record itself as `data`\n        this means the consumer will *have to* use the `data` key to access it in their template\n      -------------------------------------------------------------------------------------------- }}\n      {{#each this._tableModel.sortedRows key=this.identityKey as |record index|}}\n        {{#if this._tableModel.hasRowsWithChildren}}\n          <Hds::AdvancedTable::ExpandableTrGroup\n            @record={{record}}\n            @rowIndex={{index}}\n            @onClickToggle={{record.onClickToggle}}\n            as |T|\n          >\n            {{yield\n              (hash\n                Tr=(component\n                  \"hds/advanced-table/tr\"\n                  isLastRow=(eq this._tableModel.lastVisibleRow.id T.data.id)\n                  isParentRow=T.isExpandable\n                  depth=T.depth\n                  displayRow=T.shouldDisplayChildRows\n                )\n                Th=(component\n                  \"hds/advanced-table/th\"\n                  depth=T.depth\n                  isExpandable=T.isExpandable\n                  isExpanded=T.isExpanded\n                  newLabel=T.id\n                  parentId=T.parentId\n                  scope=\"row\"\n                  onClickToggle=T.onClickToggle\n                )\n                Td=(component \"hds/advanced-table/td\" align=@align)\n                data=T.data\n                isOpen=T.isExpanded\n                rowIndex=T.rowIndex\n              )\n              to=\"body\"\n            }}\n          </Hds::AdvancedTable::ExpandableTrGroup>\n        {{else}}\n          {{yield\n            (hash\n              Tr=(component\n                \"hds/advanced-table/tr\"\n                selectionScope=\"row\"\n                isLastRow=(eq this._tableModel.lastVisibleRow.id record.id)\n                isSelectable=this.isSelectable\n                onSelectionChange=this.onSelectionRowChange\n                didInsert=this.didInsertRowCheckbox\n                willDestroy=this.willDestroyRowCheckbox\n                selectionAriaLabelSuffix=@selectionAriaLabelSuffix\n                hasStickyColumn=this.hasStickyFirstColumn\n                isStickyColumnPinned=this.isStickyColumnPinned\n              )\n              Th=(component\n                \"hds/advanced-table/th\"\n                scope=\"row\"\n                isStickyColumn=this.hasStickyFirstColumn\n                isStickyColumnPinned=this.isStickyColumnPinned\n              )\n              Td=(component \"hds/advanced-table/td\" align=@align)\n              data=record\n              rowIndex=index\n            )\n            to=\"body\"\n          }}\n        {{/if}}\n      {{/each}}\n    </div>\n  </div>\n\n  {{#if this.showScrollIndicatorLeft}}\n    <div\n      class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-left\"\n      {{style height=this.scrollIndicatorDimensions.height left=this.scrollIndicatorDimensions.left}}\n    />\n  {{/if}}\n\n  {{#if this.showScrollIndicatorRight}}\n    <div\n      class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-right\"\n      {{style height=this.scrollIndicatorDimensions.height right=this.scrollIndicatorDimensions.right}}\n    />\n  {{/if}}\n\n  {{#if this.showScrollIndicatorTop}}\n    <div\n      class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-top\"\n      {{style top=this.scrollIndicatorDimensions.top width=this.scrollIndicatorDimensions.width}}\n    />\n  {{/if}}\n\n  {{#if this.showScrollIndicatorBottom}}\n    <div\n      class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-bottom\"\n      {{style bottom=this.scrollIndicatorDimensions.bottom width=this.scrollIndicatorDimensions.width}}\n    />\n  {{/if}}\n</div>");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n<div\n  class=\"hds-advanced-table__container\n    {{(if this.isStickyHeaderPinned \'hds-advanced-table__container--header-is-pinned\')}}\"\n  {{did-update this.setupTableModelData @columns @model @sortBy @sortOrder}}\n  {{did-update this.updateTableModelColumnOrder @columnOrder}}\n  ...attributes\n>\n  {{! Caption }}\n  <div id={{this._captionId}} class=\"sr-only hds-advanced-table__caption\" aria-live=\"polite\">\n    {{@caption}}\n    {{this.sortedMessageText}}\n    {{this.reorderedMessageText}}\n  </div>\n\n  {{! Grid }}\n  <div\n    class={{this.classNames}}\n    role=\"grid\"\n    aria-describedby={{this._captionId}}\n    {{style\n      grid-template-columns=this.gridTemplateColumns\n      --hds-advanced-table-sticky-column-offset=this.stickyColumnOffset\n      max-height=@maxHeight\n    }}\n    {{this._registerGridElement}}\n    {{this._setUpScrollWrapper}}\n  >\n    {{! Header }}\n    <div\n      class={{this.theadClassNames}}\n      role=\"rowgroup\"\n      {{this._setUpThead}}\n      {{on \"dragleave\" (fn (mut this._tableModel.reorderHoveredColumn) null)}}\n    >\n      <Hds::AdvancedTable::Tr\n        @selectionScope=\"col\"\n        @onClickSortBySelected={{if @selectableColumnKey (fn this._tableModel.setSortBy @selectableColumnKey)}}\n        @sortBySelectedOrder={{if (eq this._tableModel.sortBy @selectableColumnKey) this._tableModel.sortOrder}}\n        @isSelectable={{this.isSelectable}}\n        @onSelectionChange={{this.onSelectionAllChange}}\n        @didInsert={{this.didInsertSelectAllCheckbox}}\n        @willDestroy={{this.willDestroySelectAllCheckbox}}\n        @selectionAriaLabelSuffix=\"all rows\"\n        @hasStickyColumn={{this.hasStickyFirstColumn}}\n        @isStickyColumnPinned={{this.isStickyColumnPinned}}\n      >\n        {{#each this._tableModel.orderedColumns as |column|}}\n          {{#if column.isSortable}}\n            <Hds::AdvancedTable::ThSort\n              @column={{column}}\n              @sortOrder={{if (eq column.key this._tableModel.sortBy) this._tableModel.sortOrder}}\n              @onClickSort={{if column.key (fn this._tableModel.setSortBy column.key)}}\n              @align={{column.align}}\n              @tooltip={{column.tooltip}}\n              @hasReorderableColumns={{@hasReorderableColumns}}\n              @hasResizableColumns={{@hasResizableColumns}}\n              @hasSelectableRows={{this.isSelectable}}\n              @isStickyColumn={{this._isStickyColumn column}}\n              @isStickyColumnPinned={{this.isStickyColumnPinned}}\n              @tableHeight={{this._tableHeight}}\n              @onColumnResize={{@onColumnResize}}\n              @onPinFirstColumn={{this._onPinFirstColumn}}\n              @onReorderDragEnd={{fn (mut this._tableModel.reorderDraggedColumn) null}}\n              @onReorderDragStart={{fn (mut this._tableModel.reorderDraggedColumn)}}\n              @onReorderDrop={{this._tableModel.moveColumnToDropTarget}}\n              {{this._registerThElement column}}\n            >\n              {{column.label}}\n            </Hds::AdvancedTable::ThSort>\n          {{else}}\n            <Hds::AdvancedTable::Th\n              @align={{column.align}}\n              @column={{column}}\n              @hasExpandAllButton={{this._tableModel.hasRowsWithChildren}}\n              @hasReorderableColumns={{@hasReorderableColumns}}\n              @hasResizableColumns={{@hasResizableColumns}}\n              @hasSelectableRows={{this.isSelectable}}\n              @isExpanded={{this._tableModel.expandState}}\n              @isExpandable={{column.isExpandable}}\n              @isStickyColumn={{this._isStickyColumn column}}\n              @isStickyColumnPinned={{this.isStickyColumnPinned}}\n              @isVisuallyHidden={{column.isVisuallyHidden}}\n              @tableHeight={{this._tableHeight}}\n              @tooltip={{column.tooltip}}\n              @onClickToggle={{this._tableModel.toggleAll}}\n              @onColumnResize={{@onColumnResize}}\n              @onPinFirstColumn={{this._onPinFirstColumn}}\n              @onReorderDragEnd={{fn (mut this._tableModel.reorderDraggedColumn) null}}\n              @onReorderDragStart={{fn (mut this._tableModel.reorderDraggedColumn)}}\n              @onReorderDrop={{this._tableModel.moveColumnToDropTarget}}\n              {{this._registerThElement column}}\n            >\n              {{column.label}}\n            </Hds::AdvancedTable::Th>\n          {{/if}}\n        {{/each}}\n      </Hds::AdvancedTable::Tr>\n\n      {{#if this.showScrollIndicatorTop}}\n        <div class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-top\" />\n      {{/if}}\n    </div>\n\n    {{! Body }}\n    <div class=\"hds-advanced-table__tbody\" role=\"rowgroup\">\n      {{! ----------------------------------------------------------------------------------------\n        IMPORTANT: we loop on the `model` array and for each record\n        we yield the Tr/Td/Th elements _and_ the record itself as `data`\n        this means the consumer will *have to* use the `data` key to access it in their template\n      -------------------------------------------------------------------------------------------- }}\n      {{#each this._tableModel.sortedRows key=this.identityKey as |record index|}}\n        {{#if this._tableModel.hasRowsWithChildren}}\n          <Hds::AdvancedTable::ExpandableTrGroup\n            @record={{record}}\n            @rowIndex={{index}}\n            @onClickToggle={{record.onClickToggle}}\n            as |T|\n          >\n            {{yield\n              (hash\n                Tr=(component\n                  \"hds/advanced-table/tr\"\n                  isLastRow=(eq this._tableModel.lastVisibleRow.id T.data.id)\n                  isParentRow=T.isExpandable\n                  depth=T.depth\n                  displayRow=T.shouldDisplayChildRows\n                  data=T.data\n                )\n                Th=(component\n                  \"hds/advanced-table/th\"\n                  depth=T.depth\n                  isExpandable=T.isExpandable\n                  isExpanded=T.isExpanded\n                  newLabel=T.id\n                  parentId=T.parentId\n                  scope=\"row\"\n                  onClickToggle=T.onClickToggle\n                )\n                Td=(component \"hds/advanced-table/td\" align=@align)\n                data=T.data\n                isOpen=T.isExpanded\n                rowIndex=T.rowIndex\n              )\n              to=\"body\"\n            }}\n          </Hds::AdvancedTable::ExpandableTrGroup>\n        {{else}}\n          {{yield\n            (hash\n              Tr=(component\n                \"hds/advanced-table/tr\"\n                selectionScope=\"row\"\n                isLastRow=(eq this._tableModel.lastVisibleRow.id record.id)\n                isSelectable=this.isSelectable\n                onSelectionChange=this.onSelectionRowChange\n                didInsert=this.didInsertRowCheckbox\n                willDestroy=this.willDestroyRowCheckbox\n                selectionAriaLabelSuffix=@selectionAriaLabelSuffix\n                hasStickyColumn=this.hasStickyFirstColumn\n                isStickyColumnPinned=this.isStickyColumnPinned\n                data=record\n              )\n              Th=(component\n                \"hds/advanced-table/th\"\n                scope=\"row\"\n                isStickyColumn=this.hasStickyFirstColumn\n                isStickyColumnPinned=this.isStickyColumnPinned\n              )\n              Td=(component \"hds/advanced-table/td\" align=@align)\n              data=record\n              rowIndex=index\n            )\n            to=\"body\"\n          }}\n        {{/if}}\n      {{/each}}\n    </div>\n  </div>\n\n  {{#if this.showScrollIndicatorLeft}}\n    <div\n      class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-left\"\n      {{style height=this.scrollIndicatorDimensions.height left=this.scrollIndicatorDimensions.left}}\n    />\n  {{/if}}\n\n  {{#if this.showScrollIndicatorRight}}\n    <div\n      class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-right\"\n      {{style height=this.scrollIndicatorDimensions.height right=this.scrollIndicatorDimensions.right}}\n    />\n  {{/if}}\n\n  {{#if this.showScrollIndicatorBottom}}\n    <div\n      class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-bottom\"\n      {{style bottom=this.scrollIndicatorDimensions.bottom width=this.scrollIndicatorDimensions.width}}\n    />\n  {{/if}}\n</div>");
 
 /**
  * Copyright (c) HashiCorp, Inc.
@@ -21,15 +22,15 @@ const DENSITIES = Object.values(HdsAdvancedTableDensityValues);
 const DEFAULT_DENSITY = HdsAdvancedTableDensityValues.Medium;
 const VALIGNMENTS = Object.values(HdsAdvancedTableVerticalAlignmentValues);
 const DEFAULT_VALIGN = HdsAdvancedTableVerticalAlignmentValues.Top;
+const BORDER_WIDTH = 1;
 const DEFAULT_SCROLL_DIMENSIONS = {
   bottom: '0px',
   height: '0px',
   left: '0px',
   right: '0px',
-  top: '0px',
   width: '0px'
 };
-const getScrollIndicatorDimensions = (scrollWrapper, theadElement, hasStickyHeader, hasStickyFirstColumn, hasFirstColumnPxWidth, isStickyColumnPinned) => {
+const getScrollIndicatorDimensions = (scrollWrapper, theadElement, hasStickyFirstColumn, hasFirstColumnPxWidth, isStickyColumnPinned) => {
   const horizontalScrollBarHeight = scrollWrapper.offsetHeight - scrollWrapper.clientHeight;
   const verticalScrollBarWidth = scrollWrapper.offsetWidth - scrollWrapper.clientWidth;
   let leftOffset = 0;
@@ -57,7 +58,6 @@ const getScrollIndicatorDimensions = (scrollWrapper, theadElement, hasStickyHead
     height: `${scrollWrapper.offsetHeight - horizontalScrollBarHeight}px`,
     left: `${leftOffset}px`,
     right: `${verticalScrollBarWidth}px`,
-    top: hasStickyHeader ? `${theadElement.offsetHeight}px` : '0px',
     width: `${scrollWrapper.offsetWidth - verticalScrollBarWidth}px`
   };
 };
@@ -74,6 +74,10 @@ const getStickyColumnLeftOffset = (theadElement, hasRowSelection, isStickyColumn
   return `${leftOffset}px`;
 };
 class HdsAdvancedTable extends Component {
+  static {
+    g(this.prototype, "hdsIntl", [service]);
+  }
+  #hdsIntl = (i(this, "hdsIntl"), void 0);
   static {
     g(this.prototype, "_selectAllCheckbox", [tracked], function () {
       return undefined;
@@ -123,6 +127,12 @@ class HdsAdvancedTable extends Component {
     });
   }
   #hasPinnedFirstColumn = (i(this, "hasPinnedFirstColumn"), void 0);
+  static {
+    g(this.prototype, "reorderedMessageText", [tracked], function () {
+      return '';
+    });
+  }
+  #reorderedMessageText = (i(this, "reorderedMessageText"), void 0);
   static {
     g(this.prototype, "showScrollIndicatorLeft", [tracked], function () {
       return false;
@@ -158,6 +168,7 @@ class HdsAdvancedTable extends Component {
     const {
       model,
       columns,
+      columnOrder,
       childrenKey,
       hasResizableColumns,
       sortBy,
@@ -168,19 +179,15 @@ class HdsAdvancedTable extends Component {
     this._tableModel = new HdsAdvancedTableTableModel({
       model,
       columns,
+      columnOrder,
       childrenKey,
       hasResizableColumns,
       sortBy,
       sortOrder,
+      onColumnReorder: this._onColumnReorder.bind(this),
       onSort
     });
-    if (this._tableModel.hasRowsWithChildren) {
-      const sortableColumns = columns.filter(column => column.isSortable);
-      const sortableColumnLabels = sortableColumns.map(column => column.label);
-      assert(`Cannot have sortable columns if there are nested rows. Sortable columns are ${sortableColumnLabels.toString()}`, sortableColumns.length === 0);
-      assert('Cannot have a sticky first column if there are nested rows.', !hasStickyFirstColumn);
-      assert(`Cannot have resizable columns if there are nested rows.`, !hasResizableColumns);
-    }
+    this._runAssertions();
     if (hasStickyFirstColumn) {
       this.hasPinnedFirstColumn = true;
     }
@@ -280,13 +287,13 @@ class HdsAdvancedTable extends Component {
       isSelectable
     } = this.args;
     const {
-      columns
+      orderedColumns
     } = this._tableModel;
 
     // if there is a select checkbox, the first column has a 'min-content' width to hug the checkbox content
     let style = isSelectable ? 'min-content ' : '';
-    for (let i = 0; i < columns.length; i++) {
-      style += ` ${columns[i].appliedWidth}`;
+    for (let i = 0; i < orderedColumns.length; i++) {
+      style += ` ${orderedColumns[i].appliedWidth}`;
     }
     return style;
   }
@@ -338,9 +345,9 @@ class HdsAdvancedTable extends Component {
     };
     element.addEventListener('scroll', this._scrollHandler);
     const updateMeasurements = () => {
-      this._tableHeight = element.clientHeight;
+      this._tableHeight = element.offsetHeight;
       const hasFirstColumnPxWidth = this._tableModel.columns[0]?.pxWidth !== undefined;
-      this.scrollIndicatorDimensions = getScrollIndicatorDimensions(element, this._theadElement, this.hasStickyHeader, this.hasStickyFirstColumn ? true : false, hasFirstColumnPxWidth, this.isStickyColumnPinned);
+      this.scrollIndicatorDimensions = getScrollIndicatorDimensions(element, this._theadElement, this.hasStickyFirstColumn ? true : false, hasFirstColumnPxWidth, this.isStickyColumnPinned);
       if (this.hasStickyFirstColumn) {
         this.stickyColumnOffset = getStickyColumnLeftOffset(this._theadElement, isSelectable, this.isStickyColumnPinned);
       }
@@ -369,9 +376,53 @@ class HdsAdvancedTable extends Component {
       this._resizeObserver.disconnect();
     };
   });
+  _runAssertions() {
+    const {
+      columns,
+      hasReorderableColumns,
+      hasResizableColumns,
+      hasStickyFirstColumn
+    } = this.args;
+    if (this._tableModel.hasRowsWithChildren) {
+      const sortableColumns = columns.filter(column => column.isSortable);
+      const sortableColumnLabels = sortableColumns.map(column => column.label);
+      assert('Cannot have reorderable columns if there are nested rows.', !hasReorderableColumns);
+      assert(`Cannot have sortable columns if there are nested rows. Sortable columns are ${sortableColumnLabels.toString()}`, sortableColumns.length === 0);
+      assert('Cannot have a sticky first column if there are nested rows.', hasStickyFirstColumn === undefined);
+      assert(`Cannot have resizable columns if there are nested rows.`, !hasResizableColumns);
+    }
+    if (hasReorderableColumns) {
+      assert('Cannot have both reorderable columns and a sticky first column.', hasStickyFirstColumn === undefined);
+    }
+  }
   _setUpThead = modifier(element => {
     this._theadElement = element;
   });
+  _onColumnReorder = ({
+    column,
+    newOrder,
+    insertedAt
+  }) => {
+    const {
+      reorderedMessageText
+    } = this.args;
+    if (reorderedMessageText !== undefined) {
+      this.reorderedMessageText = reorderedMessageText;
+    } else {
+      const newPosition = insertedAt + 1;
+      const translatedReorderedMessageText = this.hdsIntl.t('hds.advanced-table.reordered-message', {
+        default: `Moved ${column.label} column to position ${newPosition}`,
+        columnLabel: column.label,
+        newPosition
+      });
+      this.reorderedMessageText = translatedReorderedMessageText;
+    }
+    this.args.onColumnReorder?.({
+      column,
+      newOrder,
+      insertedAt
+    });
+  };
   onSelectionChangeCallback(checkbox, selectionKey) {
     const {
       onSelectionChange
@@ -412,6 +463,15 @@ class HdsAdvancedTable extends Component {
   static {
     n(this.prototype, "setupTableModelData", [action]);
   }
+  updateTableModelColumnOrder() {
+    if (this.args.columnOrder === undefined) {
+      return;
+    }
+    this._tableModel.columnOrder = this.args.columnOrder;
+  }
+  static {
+    n(this.prototype, "updateTableModelColumnOrder", [action]);
+  }
   onSelectionAllChange() {
     this._selectableRows.forEach(row => {
       row.checkbox.checked = this._selectAllCheckbox?.checked ?? false;
@@ -536,5 +596,5 @@ class HdsAdvancedTable extends Component {
 }
 setComponentTemplate(TEMPLATE, HdsAdvancedTable);
 
-export { DEFAULT_DENSITY, DEFAULT_VALIGN, DENSITIES, VALIGNMENTS, HdsAdvancedTable as default };
+export { BORDER_WIDTH, DEFAULT_DENSITY, DEFAULT_VALIGN, DENSITIES, VALIGNMENTS, HdsAdvancedTable as default };
 //# sourceMappingURL=index.js.map