@clickhouse/click-ui 0.15.0-canary.gfae77ae0.0 → 0.15.0

package/dist/cjs/click-ui.css

@@ -1342,6 +1342,7 @@
   display: flex;
   position: relative;
   min-height: 32px;
+  flex-shrink: 0;
 }
 
 .dropdown-trigger__FUHvM {
@@ -10590,7 +10591,23 @@ body {
 }
 
 .table__header-content_interactive__7lV67 {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+  text-transform: inherit;
   cursor: pointer;
+  word-spacing: inherit;
+}
+
+.table__header-content_interactive__7lV67:focus-visible {
+  outline: 2px solid var(--click-global-color-outline-default);
+  outline-offset: 2px;
 }
 
 .table__resizer__m6w0b {

package/dist/cjs/components/Dropdown/Dropdown.css

@@ -10,6 +10,7 @@
   display: flex;
   position: relative;
   min-height: 32px;
+  flex-shrink: 0;
 }
 
 .dropdown-trigger__FUHvM {

package/dist/cjs/components/Dropdown/index.cjs

@@ -36,6 +36,7 @@ function _interopNamespace(e) {
 
 const DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
 
+const COLLISION_PADDING = 8;
 const Dropdown = (props) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Root, { ...props });
 const _DropdownMenuItem = ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   GenericMenu.GenericMenuItem,
@@ -116,7 +117,7 @@ const DropdownContent = ({
       sideOffset: 4,
       loop: true,
       avoidCollisions: responsivePositioning,
-      collisionPadding: responsivePositioning ? 100 : void 0,
+      collisionPadding: responsivePositioning ? COLLISION_PADDING : void 0,
       ...inputModalityProps,
       children: [
         showArrow && /* @__PURE__ */ jsxRuntime.jsx(
@@ -152,32 +153,29 @@ const DropdownSub = (props) => {
 };
 DropdownSub.displayName = "DropdownSub";
 Dropdown.Sub = DropdownSub;
-const DropdownItem = ({
-  icon,
-  iconDir,
-  type = "default",
-  tooltipProps,
-  ...props
-}) => {
-  const renderLabel = (label) => /* @__PURE__ */ jsxRuntime.jsx(
-    IconWrapper.IconWrapper,
-    {
-      icon,
-      iconDir,
-      tooltipProps: { side: "right", ...tooltipProps },
-      children: label
-    }
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenuItem,
-    {
-      as: DropdownMenu__namespace.Item,
-      type,
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { child: props.children, children: renderLabel })
-    }
-  );
-};
+const DropdownItem = react.forwardRef(
+  ({ icon, iconDir, type = "default", tooltipProps, ...props }, ref) => {
+    const renderLabel = (label) => /* @__PURE__ */ jsxRuntime.jsx(
+      IconWrapper.IconWrapper,
+      {
+        icon,
+        iconDir,
+        tooltipProps: { side: "right", ...tooltipProps },
+        children: label
+      }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenuItem,
+      {
+        ref,
+        as: DropdownMenu__namespace.Item,
+        type,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { child: props.children, children: renderLabel })
+      }
+    );
+  }
+);
 DropdownItem.displayName = "DropdownItem";
 Dropdown.Item = DropdownItem;
 

package/dist/cjs/components/Dropdown/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport { Slottable } from '@radix-ui/react-slot';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';\nimport { cn } from '@/lib/cva';\nimport { useInputModality } from '@/hooks/internal';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport type { IconWrapperProps } from '@/components/IconWrapper';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport type { ArrowProps, DropdownItemProps } from './Dropdown.types';\nimport styles from './Dropdown.module.css';\n\nexport const Dropdown = (props: DropdownMenu.DropdownMenuProps) => (\n  <DropdownMenu.Root {...props} />\n);\n\ntype DropdownMenuItemComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuItem<T>>\n) => ReactNode;\n\nconst _DropdownMenuItem = <T extends ElementType = 'div'>(\n  { className, ...props }: ComponentProps<typeof GenericMenuItem<T>>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuItem\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuItem>)}\n    className={cn(styles['dropdown-menu-item'], className)}\n  />\n);\n\nconst DropdownMenuItem: DropdownMenuItemComponent = forwardRef(_DropdownMenuItem);\n\n// `sub` alone discriminates the two shapes of Trigger and Content. The label\n// fields live separately so only the sub-trigger accepts them — Content spreads\n// what it does not read straight onto the Radix element, i.e. into the DOM.\ninterface SubDiscriminant {\n  sub?: true;\n}\n\ninterface SubTriggerFields {\n  icon?: IconName;\n  iconDir?: HorizontalDirection;\n  /**\n   * Positions the tooltip shown when the label is truncated. Defaults to\n   * `side: 'right'` so the tooltip does not cover the items above it.\n   */\n  tooltipProps?: IconWrapperProps['tooltipProps'];\n}\n\ninterface MainDropdownProps {\n  sub?: never;\n}\n\ntype DropdownSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps &\n  SubDiscriminant &\n  SubTriggerFields;\ntype DropdownTriggerProps = DropdownMenu.DropdownMenuTriggerProps & MainDropdownProps;\n\nconst DropdownTrigger = ({\n  sub,\n  children,\n  ...props\n}: DropdownSubTriggerProps | DropdownTriggerProps) => {\n  if (sub) {\n    const { icon, iconDir, tooltipProps, ...menuProps } =\n      props as DropdownSubTriggerProps;\n    return (\n      <DropdownMenuItem\n        as={DropdownMenu.SubTrigger}\n        {...menuProps}\n      >\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n          tooltipProps={{ side: 'right', ...tooltipProps }}\n        >\n          {children}\n        </IconWrapper>\n        <Icon name=\"chevron-right\" />\n      </DropdownMenuItem>\n    );\n  }\n\n  const { className, ...triggerProps } = props as DropdownTriggerProps;\n  return (\n    <DropdownMenu.Trigger\n      asChild\n      {...triggerProps}\n      className={cn(styles['dropdown-trigger'], className)}\n    >\n      <div>{children}</div>\n    </DropdownMenu.Trigger>\n  );\n};\n\nDropdownTrigger.displayName = 'DropdownTrigger';\nDropdown.Trigger = DropdownTrigger;\n\ninterface StyledDropdownContentProps extends DropdownMenu.DropdownMenuContentProps {\n  children?: ReactNode;\n  container?: HTMLElement | null;\n  responsivePositioning?: boolean;\n}\n\ninterface StyledDropdownSubContentProps extends DropdownMenu.DropdownMenuSubContentProps {\n  children?: ReactNode;\n  container?: HTMLElement | null;\n  responsivePositioning?: boolean;\n}\n\ntype DropdownContentProps = StyledDropdownContentProps & SubDiscriminant & ArrowProps;\ntype DropdownSubContentProps = StyledDropdownSubContentProps &\n  MainDropdownProps &\n  ArrowProps;\n\ntype DropdownMenuContentComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuPanel<T>>\n) => ReactNode;\n\nconst _DropdownMenuContent = <T extends ElementType = 'div'>(\n  { className, ...props }: ComponentProps<typeof GenericMenuPanel<T>>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuPanel\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuPanel>)}\n    className={cn(styles['dropdown-menu-content'], className)}\n  />\n);\n\nconst DropdownMenuContent: DropdownMenuContentComponent =\n  forwardRef(_DropdownMenuContent);\n\nconst DropdownContent = ({\n  sub,\n  children,\n  container,\n  showArrow,\n  responsivePositioning = true,\n  ...props\n}: DropdownContentProps | DropdownSubContentProps) => {\n  const ContentElement = sub ? DropdownMenu.SubContent : DropdownMenu.Content;\n  const inputModalityProps = useInputModality();\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <DropdownMenu.Portal container={portalContainer}>\n      <DropdownMenuContent\n        {...props}\n        type=\"dropdown-menu\"\n        showArrow={showArrow}\n        as={ContentElement}\n        sideOffset={4}\n        loop\n        avoidCollisions={responsivePositioning}\n        collisionPadding={responsivePositioning ? 100 : undefined}\n        {...inputModalityProps}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={DropdownMenu.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </DropdownMenuContent>\n    </DropdownMenu.Portal>\n  );\n};\n\nDropdownContent.displayName = 'DropdownContent';\nDropdown.Content = DropdownContent;\n\nconst DropdownGroup = ({ className, ...props }: DropdownMenu.DropdownMenuGroupProps) => {\n  return (\n    <DropdownMenu.Group\n      {...props}\n      className={cn(styles['dropdown-group'], className)}\n    />\n  );\n};\n\nDropdownGroup.displayName = 'DropdownGroup';\nDropdown.Group = DropdownGroup;\n\n// DropdownMenu.Sub renders no DOM node, so it takes only Radix's sub-menu props.\nconst DropdownSub = (props: DropdownMenu.DropdownMenuSubProps) => {\n  return <DropdownMenu.Sub {...props} />;\n};\n\nDropdownSub.displayName = 'DropdownSub';\nDropdown.Sub = DropdownSub;\n\nconst DropdownItem = ({\n  icon,\n  iconDir,\n  type = 'default',\n  tooltipProps,\n  ...props\n}: DropdownItemProps) => {\n  const renderLabel = (label: ReactNode) => (\n    <IconWrapper\n      icon={icon}\n      iconDir={iconDir}\n      tooltipProps={{ side: 'right', ...tooltipProps }}\n    >\n      {label}\n    </IconWrapper>\n  );\n\n  return (\n    <DropdownMenuItem\n      as={DropdownMenu.Item}\n      type={type}\n      {...props}\n    >\n      <Slottable child={props.children}>{renderLabel}</Slottable>\n    </DropdownMenuItem>\n  );\n};\n\nDropdownItem.displayName = 'DropdownItem';\nDropdown.Item = DropdownItem;\n\nexport default Dropdown;\n"],"names":["jsx","DropdownMenu","GenericMenuItem","cn","styles","forwardRef","jsxs","IconWrapper","Icon","GenericMenuPanel","useInputModality","useResolvedPortalContainer","Arrow","Popover_Arrow","Slottable"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport { Slottable } from '@radix-ui/react-slot';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ForwardedRef,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';\nimport { cn } from '@/lib/cva';\nimport { useInputModality } from '@/hooks/internal';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport type { IconWrapperProps } from '@/components/IconWrapper';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport type { ArrowProps, DropdownItemProps } from './Dropdown.types';\nimport styles from './Dropdown.module.css';\n\n// Radix takes the padding as a number of pixels, so it cannot come from a CSS token.\nconst COLLISION_PADDING = 8;\n\nexport const Dropdown = (props: DropdownMenu.DropdownMenuProps) => (\n  <DropdownMenu.Root {...props} />\n);\n\ntype DropdownMenuItemComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuItem<T>>\n) => ReactNode;\n\nconst _DropdownMenuItem = <T extends ElementType = 'div'>(\n  { className, ...props }: ComponentProps<typeof GenericMenuItem<T>>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuItem\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuItem>)}\n    className={cn(styles['dropdown-menu-item'], className)}\n  />\n);\n\nconst DropdownMenuItem: DropdownMenuItemComponent = forwardRef(_DropdownMenuItem);\n\n// `sub` alone discriminates the two shapes of Trigger and Content. The label\n// fields live separately so only the sub-trigger accepts them — Content spreads\n// what it does not read straight onto the Radix element, i.e. into the DOM.\ninterface SubDiscriminant {\n  sub?: true;\n}\n\ninterface SubTriggerFields {\n  icon?: IconName;\n  iconDir?: HorizontalDirection;\n  /**\n   * Positions the tooltip shown when the label is truncated. Defaults to\n   * `side: 'right'` so the tooltip does not cover the items above it.\n   */\n  tooltipProps?: IconWrapperProps['tooltipProps'];\n}\n\ninterface MainDropdownProps {\n  sub?: never;\n}\n\ntype DropdownSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps &\n  SubDiscriminant &\n  SubTriggerFields;\ntype DropdownTriggerProps = DropdownMenu.DropdownMenuTriggerProps & MainDropdownProps;\n\nconst DropdownTrigger = ({\n  sub,\n  children,\n  ...props\n}: DropdownSubTriggerProps | DropdownTriggerProps) => {\n  if (sub) {\n    const { icon, iconDir, tooltipProps, ...menuProps } =\n      props as DropdownSubTriggerProps;\n    return (\n      <DropdownMenuItem\n        as={DropdownMenu.SubTrigger}\n        {...menuProps}\n      >\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n          tooltipProps={{ side: 'right', ...tooltipProps }}\n        >\n          {children}\n        </IconWrapper>\n        <Icon name=\"chevron-right\" />\n      </DropdownMenuItem>\n    );\n  }\n\n  const { className, ...triggerProps } = props as DropdownTriggerProps;\n  return (\n    <DropdownMenu.Trigger\n      asChild\n      {...triggerProps}\n      className={cn(styles['dropdown-trigger'], className)}\n    >\n      <div>{children}</div>\n    </DropdownMenu.Trigger>\n  );\n};\n\nDropdownTrigger.displayName = 'DropdownTrigger';\nDropdown.Trigger = DropdownTrigger;\n\ninterface StyledDropdownContentProps extends DropdownMenu.DropdownMenuContentProps {\n  children?: ReactNode;\n  container?: HTMLElement | null;\n  responsivePositioning?: boolean;\n}\n\ninterface StyledDropdownSubContentProps extends DropdownMenu.DropdownMenuSubContentProps {\n  children?: ReactNode;\n  container?: HTMLElement | null;\n  responsivePositioning?: boolean;\n}\n\ntype DropdownContentProps = StyledDropdownContentProps & SubDiscriminant & ArrowProps;\ntype DropdownSubContentProps = StyledDropdownSubContentProps &\n  MainDropdownProps &\n  ArrowProps;\n\ntype DropdownMenuContentComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuPanel<T>>\n) => ReactNode;\n\nconst _DropdownMenuContent = <T extends ElementType = 'div'>(\n  { className, ...props }: ComponentProps<typeof GenericMenuPanel<T>>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuPanel\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuPanel>)}\n    className={cn(styles['dropdown-menu-content'], className)}\n  />\n);\n\nconst DropdownMenuContent: DropdownMenuContentComponent =\n  forwardRef(_DropdownMenuContent);\n\nconst DropdownContent = ({\n  sub,\n  children,\n  container,\n  showArrow,\n  responsivePositioning = true,\n  ...props\n}: DropdownContentProps | DropdownSubContentProps) => {\n  const ContentElement = sub ? DropdownMenu.SubContent : DropdownMenu.Content;\n  const inputModalityProps = useInputModality();\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <DropdownMenu.Portal container={portalContainer}>\n      <DropdownMenuContent\n        {...props}\n        type=\"dropdown-menu\"\n        showArrow={showArrow}\n        as={ContentElement}\n        sideOffset={4}\n        loop\n        avoidCollisions={responsivePositioning}\n        collisionPadding={responsivePositioning ? COLLISION_PADDING : undefined}\n        {...inputModalityProps}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={DropdownMenu.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </DropdownMenuContent>\n    </DropdownMenu.Portal>\n  );\n};\n\nDropdownContent.displayName = 'DropdownContent';\nDropdown.Content = DropdownContent;\n\nconst DropdownGroup = ({ className, ...props }: DropdownMenu.DropdownMenuGroupProps) => {\n  return (\n    <DropdownMenu.Group\n      {...props}\n      className={cn(styles['dropdown-group'], className)}\n    />\n  );\n};\n\nDropdownGroup.displayName = 'DropdownGroup';\nDropdown.Group = DropdownGroup;\n\n// DropdownMenu.Sub renders no DOM node, so it takes only Radix's sub-menu props.\nconst DropdownSub = (props: DropdownMenu.DropdownMenuSubProps) => {\n  return <DropdownMenu.Sub {...props} />;\n};\n\nDropdownSub.displayName = 'DropdownSub';\nDropdown.Sub = DropdownSub;\n\nconst DropdownItem = forwardRef<HTMLElement, DropdownItemProps>(\n  ({ icon, iconDir, type = 'default', tooltipProps, ...props }, ref) => {\n    const renderLabel = (label: ReactNode) => (\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n        tooltipProps={{ side: 'right', ...tooltipProps }}\n      >\n        {label}\n      </IconWrapper>\n    );\n\n    return (\n      <DropdownMenuItem\n        ref={ref as ForwardedRef<HTMLDivElement>}\n        as={DropdownMenu.Item}\n        type={type}\n        {...props}\n      >\n        <Slottable child={props.children}>{renderLabel}</Slottable>\n      </DropdownMenuItem>\n    );\n  }\n);\n\nDropdownItem.displayName = 'DropdownItem';\nDropdown.Item = DropdownItem;\n\nexport default Dropdown;\n"],"names":["jsx","DropdownMenu","GenericMenuItem","cn","styles","forwardRef","jsxs","IconWrapper","Icon","GenericMenuPanel","useInputModality","useResolvedPortalContainer","Arrow","Popover_Arrow","Slottable"],"mappings":"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"}

package/dist/cjs/components/Table/Table.css

@@ -82,7 +82,23 @@
 }
 
 .table__header-content_interactive__7lV67 {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+  text-transform: inherit;
   cursor: pointer;
+  word-spacing: inherit;
+}
+
+.table__header-content_interactive__7lV67:focus-visible {
+  outline: 2px solid var(--click-global-color-outline-default);
+  outline-offset: 2px;
 }
 
 .table__resizer__m6w0b {

package/dist/cjs/components/Table/index.cjs

@@ -15,6 +15,7 @@ const Text = require('../Text/index.cjs');
 const EllipsisContent = require('../EllipsisContent/index.cjs');
 const classVarianceAuthority = require('class-variance-authority');
 
+const MIN_COLUMN_WIDTH = 120;
 const headerVariants = classVarianceAuthority.cva(Table_module.default.table__header, {
   variants: {
     size: {
@@ -50,8 +51,12 @@ const TableHeader = ({
   showResizer,
   onResizeStart,
   onKeyboardResize,
+  columnWidth,
+  nextColumnWidth,
   overflowMode,
   className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   ...props
 }) => {
   if (overflowMode === "wrap" && resizable) {
@@ -91,42 +96,56 @@ const TableHeader = ({
         break;
     }
   };
+  const ariaSort = isSorted && isSortable ? sortDir === "asc" ? "ascending" : "descending" : void 0;
+  const isMeasured = columnWidth !== void 0;
+  const maxColumnWidth = isMeasured && nextColumnWidth !== void 0 ? Math.round(columnWidth + nextColumnWidth - MIN_COLUMN_WIDTH) : void 0;
+  const headerContentClassName = cva.cn(
+    Table_module.default["table__header-content"],
+    isInteractive && Table_module.default["table__header-content_interactive"]
+  );
+  const headerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isSorted && isSortable && sortPosition == "start" && /* @__PURE__ */ jsxRuntime.jsx(
+      Icon.Icon,
+      {
+        name: "arrow-down",
+        size: "sm",
+        "aria-hidden": "true",
+        className: cva.cn(sortIconVariants({ dir: sortDir }))
+      }
+    ),
+    label,
+    isSorted && isSortable && sortPosition == "end" && /* @__PURE__ */ jsxRuntime.jsx(
+      Icon.Icon,
+      {
+        name: "arrow-down",
+        size: "sm",
+        "aria-hidden": "true",
+        className: cva.cn(sortIconVariants({ dir: sortDir }))
+      }
+    )
+  ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "th",
     {
+      "aria-sort": ariaSort,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
       ...props,
       className: cva.cn(headerVariants({ size, resizable }), className),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+        isInteractive ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
           {
+            type: "button",
             onClick: onHeaderClick,
-            className: cva.cn(
-              Table_module.default["table__header-content"],
-              isInteractive && Table_module.default["table__header-content_interactive"]
-            ),
-            children: [
-              isSorted && isSortable && sortPosition == "start" && /* @__PURE__ */ jsxRuntime.jsx(
-                Icon.Icon,
-                {
-                  name: "arrow-down",
-                  size: "sm",
-                  className: cva.cn(sortIconVariants({ dir: sortDir }))
-                }
-              ),
-              label,
-              isSorted && isSortable && sortPosition == "end" && /* @__PURE__ */ jsxRuntime.jsx(
-                Icon.Icon,
-                {
-                  name: "arrow-down",
-                  size: "sm",
-                  className: cva.cn(sortIconVariants({ dir: sortDir }))
-                }
-              )
-            ]
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            className: headerContentClassName,
+            children: headerContent
           }
-        ),
-        showResizer && /* @__PURE__ */ jsxRuntime.jsx(
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headerContentClassName, children: headerContent }),
+        showResizer && // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a focusable separator is a widget (WAI-ARIA 1.2 window splitter); jsx-a11y models it as static
+        /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             ref: resizerRef,
@@ -134,7 +153,11 @@ const TableHeader = ({
             role: "separator",
             "aria-orientation": "vertical",
             "aria-label": `Resize ${typeof label === "string" ? label : "column"}`,
-            tabIndex: 0,
+            "aria-valuenow": isMeasured ? Math.round(columnWidth) : void 0,
+            "aria-valuemin": MIN_COLUMN_WIDTH,
+            "aria-valuemax": maxColumnWidth,
+            "aria-valuetext": isMeasured ? `${Math.round(columnWidth)} pixels` : void 0,
+            tabIndex: isMeasured ? 0 : void 0,
             onKeyDown: onResizerKeyDown,
             className: cva.cn(Table_module.default.table__resizer)
           }
@@ -155,13 +178,14 @@ const Thead = ({
   resizableColumns,
   onResizeStart,
   theadRef,
-  onKeyboardResize
+  onKeyboardResize,
+  columnWidths
 }) => {
-  const onSort = (header, headerIndex) => () => {
-    if (typeof onSortProp === "function" && header.isSortable) {
+  const onSort = typeof onSortProp === "function" ? (header, headerIndex) => () => {
+    if (header.isSortable) {
       onSortProp(header.sortDir === "asc" ? "desc" : "asc", header, headerIndex);
     }
-  };
+  } : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "thead",
     {
@@ -183,19 +207,26 @@ const Thead = ({
             )
           }
         ),
-        headers.map((headerProps, index) => /* @__PURE__ */ jsxRuntime.jsx(
-          TableHeader,
-          {
-            onSort: onSort(headerProps, index),
-            size,
-            resizable: resizableColumns,
-            showResizer: resizableColumns && index < headers.length - 1,
-            onResizeStart: onResizeStart?.(index),
-            onKeyboardResize: onKeyboardResize?.(index),
-            ...headerProps
-          },
-          `table-header-${index}`
-        )),
+        headers.map((headerProps, index) => {
+          const headerLabel = typeof headerProps.label === "string" ? headerProps.label : `__index_${index}`;
+          const nextHeader = headers[index + 1];
+          const nextHeaderLabel = typeof nextHeader?.label === "string" ? nextHeader.label : `__index_${index + 1}`;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            TableHeader,
+            {
+              onSort: onSort?.(headerProps, index),
+              size,
+              resizable: resizableColumns,
+              showResizer: resizableColumns && index < headers.length - 1,
+              onResizeStart: onResizeStart?.(index),
+              onKeyboardResize: onKeyboardResize?.(index),
+              columnWidth: columnWidths?.get(headerLabel),
+              nextColumnWidth: nextHeader ? columnWidths?.get(nextHeaderLabel) : void 0,
+              ...headerProps
+            },
+            `table-header-${index}`
+          );
+        }),
         actionsList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
           "th",
           {
@@ -409,7 +440,6 @@ const CustomTableRow = ({
     }
   ) });
 };
-const MIN_COLUMN_WIDTH = 120;
 const Table = react.forwardRef(
   ({
     headers,
@@ -649,7 +679,8 @@ const Table = react.forwardRef(
                     resizableColumns,
                     onResizeStart: resizableColumns ? handleResizeStart : void 0,
                     theadRef,
-                    onKeyboardResize: resizableColumns ? onKeyboardResize : void 0
+                    onKeyboardResize: resizableColumns ? onKeyboardResize : void 0,
+                    columnWidths: resizableColumns ? columnWidths : void 0
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsxs("tbody", { className: cva.cn(Table_module.default.table__tbody), children: [