@clickhouse/click-ui 0.0.139 → 0.0.141

package/dist/click-ui.es.js

@@ -3161,7 +3161,7 @@ const Button$2 = styled.button.withConfig({
     cursor: not-allowed;
   }
   `);
-const FormFieldLabel = styled.label.withConfig({
+const FormFieldLabel$1 = styled.label.withConfig({
   componentId: "sc-1gg29zb-0"
 })(["", ""], ({
   theme: theme2,
@@ -3192,7 +3192,34 @@ const Label$1 = ({
   error: error2,
   children,
   ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(FormFieldLabel, { disabled, $error: error2, ...props, children });
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx(FormFieldLabel$1, { disabled, $error: error2, ...props, children });
+const FormFieldLabel = styled.label.withConfig({
+  componentId: "sc-e2xmgs-0"
+})(["", ""], ({
+  theme: theme2,
+  disabled
+}) => `
+    ${disabled ? `
+    color: ${theme2.click.field.color.genericLabel.disabled};
+    font: ${theme2.click.field.typography.genericLabel.disabled};
+    ` : `
+    color: ${theme2.click.field.color.genericLabel.default};
+    font: ${theme2.click.field.typography.genericLabel.default};
+    &:hover {
+      color: ${theme2.click.field.color.genericLabel.hover};
+      font: ${theme2.click.field.typography.genericLabel.hover};
+    }
+    &:focus, &:focus-within {
+      color: ${theme2.click.field.color.genericLabel.active};
+      font: ${theme2.click.field.typography.genericLabel.active};
+    }
+    `};
+  `);
+const GenericLabel = ({
+  disabled,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx(FormFieldLabel, { disabled, ...props, children });
 function _extends$1() {
   _extends$1 = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -10693,7 +10720,7 @@ const $e698a72e93240346$export$be92b6f5f03c0fe9 = $e698a72e93240346$export$48513
 const $e698a72e93240346$export$adb584737d712b70 = $e698a72e93240346$export$59aad738f51d1c05;
 const Wrapper$6 = styled(FormRoot).withConfig({
   componentId: "sc-1sck1ja-0"
-})(["max-width:fit-content;"]);
+})(["align-items:center;max-width:fit-content;"]);
 const Checkbox = ({
   id,
   label,
@@ -10704,8 +10731,8 @@ const Checkbox = ({
 }) => {
   const defaultId = useId();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$6, { $orientation: orientation ?? "horizontal", $dir: dir ?? "end", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", disabled, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "check", size: "sm" }) }) }),
-    label && /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { htmlFor: id ?? defaultId, disabled, children: label })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", disabled, "aria-label": `${label}`, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "check", size: "sm" }) }) }),
+    label && /* @__PURE__ */ jsxRuntimeExports.jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
   ] });
 };
 const CheckInput = styled($e698a72e93240346$export$be92b6f5f03c0fe9).withConfig({
@@ -32656,7 +32683,7 @@ const Pagination = ({
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { gap: "xxs", fillWidth: false, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-left", type: "ghost", disabled: leftButtonDisabled, onClick: onPrevClick, "data-testid": "prev-btn" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { ref: inputRef, onChange, value: currentPage, loading: false, onKeyDown, min: 1, max: totalPages, onFocus: onPageNumberFocus, hideControls: true, onBlur: onPageNumberBlur, disabled: leftButtonDisabled && rightButtonDisabled }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { ref: inputRef, onChange, value: currentPage, loading: false, onKeyDown, "aria-label": currentPage.toString(), min: 1, max: totalPages, onFocus: onPageNumberFocus, hideControls: true, onBlur: onPageNumberBlur, disabled: leftButtonDisabled && rightButtonDisabled }) }),
       !!totalPages && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
         "of ",
         formatNumber(totalPages)
@@ -33019,8 +33046,8 @@ const RadioGroupItem = ({
 }) => {
   const defaultId = useId();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$1, { $orientation: "horizontal", $dir: "end", $addLabelPadding: false, ...props, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(RadioInput, { value, id: id ?? defaultId, disabled, required, children: /* @__PURE__ */ jsxRuntimeExports.jsx(RadioGroupIndicator, {}) }),
-    label && /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { htmlFor: id ?? defaultId, disabled, children: label })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(RadioInput, { value, id: id ?? defaultId, disabled, required, "aria-label": `${label}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(RadioGroupIndicator, {}) }),
+    label && /* @__PURE__ */ jsxRuntimeExports.jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
   ] });
 };
 RadioGroupItem.displayName = "RadioGroupItem";
@@ -37447,7 +37474,7 @@ const CollapsipleTrigger = ({
     }
     onOpenChange();
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(CollapsipleTriggerButton, { onClick, $indicatorDir: indicatorDir, ...props, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(CollapsipleTriggerButton, { onClick, $indicatorDir: indicatorDir, "aria-label": "trigger children", ...props, children: [
     indicatorDir === "start" && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { "data-trigger-icon": true, name: "chevron-right", "data-open": open2.toString(), size: "sm" }),
     children && /* @__PURE__ */ jsxRuntimeExports.jsx(IconWrapper, { icon, iconDir, children }),
     indicatorDir === "end" && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { "data-trigger-icon": true, name: "chevron-right", "data-open": open2.toString(), size: "sm" })
@@ -37816,7 +37843,7 @@ const $6be4966fd9bbc698$export$be92b6f5f03c0fe9 = $6be4966fd9bbc698$export$b5d5c
 const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07bf653ea69106;
 const Wrapper = styled(FormRoot).withConfig({
   componentId: "sc-egkkgl-0"
-})(["max-width:fit-content;"]);
+})(["align-items:center;max-width:fit-content;"]);
 const Switch = forwardRef(({
   checked,
   disabled,
@@ -37828,8 +37855,8 @@ const Switch = forwardRef(({
 }, ref) => {
   const defaultId = useId();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper, { $orientation: orientation, $dir: dir, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchRoot, { ref, id: id ?? defaultId, disabled, checked, ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchThumb, { $checked: checked }) }),
-    label && /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { htmlFor: id ?? defaultId, disabled, children: label })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchRoot, { ref, id: id ?? defaultId, disabled, "aria-label": `${label}`, checked, ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchThumb, { $checked: checked }) }),
+    label && /* @__PURE__ */ jsxRuntimeExports.jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
   ] });
 });
 const getRootVars = (theme2, disabled, checked) => {
@@ -38131,7 +38158,7 @@ const FileTabs = ({
       ref.current.scrollLeft += evt.deltaY;
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(TabContext.Provider, { value, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContainer, { ref, onWheel, onScroll: (e) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TabContext.Provider, { value, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContainer, { ref, onWheel, role: "tablist", onScroll: (e) => {
     e.preventDefault();
     e.stopPropagation();
   }, $count: (listProp ?? list).length, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TabsSortableContainer, { as: distExports.ReactSortable, direction: direction ?? "horizontal", group: group ?? "tabbar", list: listProp ?? list, setList: setListProp ?? setList, onEnd: (evt, sortable, store) => {
@@ -38145,7 +38172,7 @@ const FileTabs = ({
     if (typeof onEnd === "function") {
       onEnd(evt, sortable, store);
     }
-  }, revertOnSpill: true, ...props, children: Children.map(children, (child, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { tabIndex: index2, role: "tab", onClick: onSelect(index2), children: child }, `tab-element-${index2}`)) }) }) });
+  }, revertOnSpill: true, ...props, children: Children.map(children, (child, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { tabIndex: index2 + 1, role: "tab", onClick: onSelect(index2), children: child }, `tab-element-${index2}`)) }) }) });
 };
 const TabElement = styled.div.withConfig({
   componentId: "sc-137ymle-2"
@@ -38325,12 +38352,12 @@ const Thead = ({
       actionsList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("col", { width: (actionsList.length + 1) * 32 + 10 })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(StyledThead, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
-      isSelectable && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledHeader, { $size: size2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { onCheckedChange: onSelectAll, disabled: !hasRows }) }),
+      isSelectable && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledHeader, { $size: size2, "aria-label": "Select column", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { onCheckedChange: onSelectAll, disabled: !hasRows }) }),
       headers.map(({
         width,
         ...headerProps
       }, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableHeader, { onSort: onSort(headerProps, index2), size: size2, ...headerProps }, `table-header-${index2}-${width}`)),
-      actionsList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledHeader, { $size: size2 })
+      actionsList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledHeader, { "aria-label": "Actions", $size: size2 })
     ] }) })
   ] });
 };
@@ -41843,9 +41870,9 @@ const click$2 = {
   avatar: {
     color: {
       background: {
-        "default": "#696e79",
-        hover: "#53575f",
-        active: "#53575f"
+        "default": "#808691",
+        hover: "#b3b6bd",
+        active: "#b3b6bd"
       },
       text: {
         "default": "#1F1F1C",
@@ -42887,8 +42914,8 @@ const click$2 = {
       color: {
         background: {
           "default": "#1F1F1C",
-          hover: "#1F1F1C",
-          active: "lch(13.9 2.07 105)"
+          hover: "lch(15.8 0 0)",
+          active: "lch(17.9 0 0)"
         },
         stroke: {
           "default": "#323232"
@@ -48080,6 +48107,7 @@ export {
   Flyout,
   FormContainer,
   FullWidthTabs,
+  GenericLabel,
   Grid,
   GridContainer$1 as GridContainer,
   HoverCard,

package/dist/click-ui.umd.js

@@ -3178,7 +3178,7 @@ var __publicField = (obj, key, value) => {
     cursor: not-allowed;
   }
   `);
-  const FormFieldLabel = styled.label.withConfig({
+  const FormFieldLabel$1 = styled.label.withConfig({
     componentId: "sc-1gg29zb-0"
   })(["", ""], ({
     theme: theme2,
@@ -3209,7 +3209,34 @@ var __publicField = (obj, key, value) => {
     error: error2,
     children,
     ...props
-  }) => /* @__PURE__ */ jsxRuntimeExports.jsx(FormFieldLabel, { disabled, $error: error2, ...props, children });
+  }) => /* @__PURE__ */ jsxRuntimeExports.jsx(FormFieldLabel$1, { disabled, $error: error2, ...props, children });
+  const FormFieldLabel = styled.label.withConfig({
+    componentId: "sc-e2xmgs-0"
+  })(["", ""], ({
+    theme: theme2,
+    disabled
+  }) => `
+    ${disabled ? `
+    color: ${theme2.click.field.color.genericLabel.disabled};
+    font: ${theme2.click.field.typography.genericLabel.disabled};
+    ` : `
+    color: ${theme2.click.field.color.genericLabel.default};
+    font: ${theme2.click.field.typography.genericLabel.default};
+    &:hover {
+      color: ${theme2.click.field.color.genericLabel.hover};
+      font: ${theme2.click.field.typography.genericLabel.hover};
+    }
+    &:focus, &:focus-within {
+      color: ${theme2.click.field.color.genericLabel.active};
+      font: ${theme2.click.field.typography.genericLabel.active};
+    }
+    `};
+  `);
+  const GenericLabel = ({
+    disabled,
+    children,
+    ...props
+  }) => /* @__PURE__ */ jsxRuntimeExports.jsx(FormFieldLabel, { disabled, ...props, children });
   function _extends$1() {
     _extends$1 = Object.assign ? Object.assign.bind() : function(target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -10710,7 +10737,7 @@ var __publicField = (obj, key, value) => {
   const $e698a72e93240346$export$adb584737d712b70 = $e698a72e93240346$export$59aad738f51d1c05;
   const Wrapper$6 = styled(FormRoot).withConfig({
     componentId: "sc-1sck1ja-0"
-  })(["max-width:fit-content;"]);
+  })(["align-items:center;max-width:fit-content;"]);
   const Checkbox = ({
     id,
     label,
@@ -10721,8 +10748,8 @@ var __publicField = (obj, key, value) => {
   }) => {
     const defaultId = React.useId();
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$6, { $orientation: orientation ?? "horizontal", $dir: dir ?? "end", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", disabled, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "check", size: "sm" }) }) }),
-      label && /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { htmlFor: id ?? defaultId, disabled, children: label })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", disabled, "aria-label": `${label}`, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "check", size: "sm" }) }) }),
+      label && /* @__PURE__ */ jsxRuntimeExports.jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
     ] });
   };
   const CheckInput = styled($e698a72e93240346$export$be92b6f5f03c0fe9).withConfig({
@@ -32673,7 +32700,7 @@ var __publicField = (obj, key, value) => {
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { gap: "xxs", fillWidth: false, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-left", type: "ghost", disabled: leftButtonDisabled, onClick: onPrevClick, "data-testid": "prev-btn" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { ref: inputRef, onChange, value: currentPage, loading: false, onKeyDown, min: 1, max: totalPages, onFocus: onPageNumberFocus, hideControls: true, onBlur: onPageNumberBlur, disabled: leftButtonDisabled && rightButtonDisabled }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { ref: inputRef, onChange, value: currentPage, loading: false, onKeyDown, "aria-label": currentPage.toString(), min: 1, max: totalPages, onFocus: onPageNumberFocus, hideControls: true, onBlur: onPageNumberBlur, disabled: leftButtonDisabled && rightButtonDisabled }) }),
         !!totalPages && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
           "of ",
           formatNumber(totalPages)
@@ -33036,8 +33063,8 @@ var __publicField = (obj, key, value) => {
   }) => {
     const defaultId = React.useId();
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$1, { $orientation: "horizontal", $dir: "end", $addLabelPadding: false, ...props, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(RadioInput, { value, id: id ?? defaultId, disabled, required, children: /* @__PURE__ */ jsxRuntimeExports.jsx(RadioGroupIndicator, {}) }),
-      label && /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { htmlFor: id ?? defaultId, disabled, children: label })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(RadioInput, { value, id: id ?? defaultId, disabled, required, "aria-label": `${label}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(RadioGroupIndicator, {}) }),
+      label && /* @__PURE__ */ jsxRuntimeExports.jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
     ] });
   };
   RadioGroupItem.displayName = "RadioGroupItem";
@@ -37464,7 +37491,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       }
       onOpenChange();
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(CollapsipleTriggerButton, { onClick, $indicatorDir: indicatorDir, ...props, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(CollapsipleTriggerButton, { onClick, $indicatorDir: indicatorDir, "aria-label": "trigger children", ...props, children: [
       indicatorDir === "start" && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { "data-trigger-icon": true, name: "chevron-right", "data-open": open2.toString(), size: "sm" }),
       children && /* @__PURE__ */ jsxRuntimeExports.jsx(IconWrapper, { icon, iconDir, children }),
       indicatorDir === "end" && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { "data-trigger-icon": true, name: "chevron-right", "data-open": open2.toString(), size: "sm" })
@@ -37833,7 +37860,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07bf653ea69106;
   const Wrapper = styled(FormRoot).withConfig({
     componentId: "sc-egkkgl-0"
-  })(["max-width:fit-content;"]);
+  })(["align-items:center;max-width:fit-content;"]);
   const Switch = React.forwardRef(({
     checked,
     disabled,
@@ -37845,8 +37872,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   }, ref) => {
     const defaultId = React.useId();
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper, { $orientation: orientation, $dir: dir, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchRoot, { ref, id: id ?? defaultId, disabled, checked, ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchThumb, { $checked: checked }) }),
-      label && /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { htmlFor: id ?? defaultId, disabled, children: label })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchRoot, { ref, id: id ?? defaultId, disabled, "aria-label": `${label}`, checked, ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchThumb, { $checked: checked }) }),
+      label && /* @__PURE__ */ jsxRuntimeExports.jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
     ] });
   });
   const getRootVars = (theme2, disabled, checked) => {
@@ -38148,7 +38175,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         ref.current.scrollLeft += evt.deltaY;
       }
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(TabContext.Provider, { value, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContainer, { ref, onWheel, onScroll: (e) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(TabContext.Provider, { value, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContainer, { ref, onWheel, role: "tablist", onScroll: (e) => {
       e.preventDefault();
       e.stopPropagation();
     }, $count: (listProp ?? list).length, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TabsSortableContainer, { as: distExports.ReactSortable, direction: direction ?? "horizontal", group: group ?? "tabbar", list: listProp ?? list, setList: setListProp ?? setList, onEnd: (evt, sortable, store) => {
@@ -38162,7 +38189,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       if (typeof onEnd === "function") {
         onEnd(evt, sortable, store);
       }
-    }, revertOnSpill: true, ...props, children: React.Children.map(children, (child, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { tabIndex: index2, role: "tab", onClick: onSelect(index2), children: child }, `tab-element-${index2}`)) }) }) });
+    }, revertOnSpill: true, ...props, children: React.Children.map(children, (child, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { tabIndex: index2 + 1, role: "tab", onClick: onSelect(index2), children: child }, `tab-element-${index2}`)) }) }) });
   };
   const TabElement = styled.div.withConfig({
     componentId: "sc-137ymle-2"
@@ -38342,12 +38369,12 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         actionsList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("col", { width: (actionsList.length + 1) * 32 + 10 })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(StyledThead, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
-        isSelectable && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledHeader, { $size: size2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { onCheckedChange: onSelectAll, disabled: !hasRows }) }),
+        isSelectable && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledHeader, { $size: size2, "aria-label": "Select column", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { onCheckedChange: onSelectAll, disabled: !hasRows }) }),
         headers.map(({
           width,
           ...headerProps
         }, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableHeader, { onSort: onSort(headerProps, index2), size: size2, ...headerProps }, `table-header-${index2}-${width}`)),
-        actionsList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledHeader, { $size: size2 })
+        actionsList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledHeader, { "aria-label": "Actions", $size: size2 })
       ] }) })
     ] });
   };
@@ -41860,9 +41887,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     avatar: {
       color: {
         background: {
-          "default": "#696e79",
-          hover: "#53575f",
-          active: "#53575f"
+          "default": "#808691",
+          hover: "#b3b6bd",
+          active: "#b3b6bd"
         },
         text: {
           "default": "#1F1F1C",
@@ -42904,8 +42931,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         color: {
           background: {
             "default": "#1F1F1C",
-            hover: "#1F1F1C",
-            active: "lch(13.9 2.07 105)"
+            hover: "lch(15.8 0 0)",
+            active: "lch(17.9 0 0)"
           },
           stroke: {
             "default": "#323232"
@@ -48096,6 +48123,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.Flyout = Flyout;
   exports2.FormContainer = FormContainer;
   exports2.FullWidthTabs = FullWidthTabs;
+  exports2.GenericLabel = GenericLabel;
   exports2.Grid = Grid;
   exports2.GridContainer = GridContainer$1;
   exports2.HoverCard = HoverCard;

package/dist/components/GenericLabel/GenericLabel.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+
+export interface GenericLabelProps extends HTMLAttributes<HTMLLabelElement> {
+    disabled?: boolean;
+    htmlFor?: string;
+}
+export declare const GenericLabel: ({ disabled, children, ...props }: GenericLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './types';
 export { Icon } from './Icon/Icon';
 export { IconButton } from './IconButton/IconButton';
 export { Label } from './Label/Label';
+export { GenericLabel } from './GenericLabel/GenericLabel';
 export { Dropdown } from './Dropdown/Dropdown';
 export { Accordion } from './Accordion/Accordion';
 export { Alert, DangerAlert, InfoAlert, WarningAlert, SuccessAlert } from './Alert/Alert';

package/dist/components/types.d.ts

@@ -47,7 +47,7 @@ export type { VerticalStepperProps, VerticalStepProps, } from './VerticalStepper
 export type { CardHorizontalProps } from './CardHorizontal/CardHorizontal';
 export type { CardPromotionProps } from './CardPromotion/CardPromotion';
 export type { ProgressBarProps } from './ProgressBar/ProgressBar';
-export type { GridProps, CellProps, SelectedRegion, SelectionFocus, SelectionAction, GridContextMenuItemProps, Rectangle } from './Grid/types';
+export type { GridProps, CellProps, SelectedRegion, SelectionFocus, SelectionAction, GridContextMenuItemProps, Rectangle, } from './Grid/types';
 export type States = "default" | "active" | "disabled" | "error" | "hover";
 export type HorizontalDirection = "start" | "end";
 export type Orientation = "horizontal" | "vertical";
@@ -55,6 +55,7 @@ export type { FormContainerProps } from './FormContainer/FormContainer';
 export type { AutoCompleteProps, AutoCompleteOptionListItem, } from './AutoComplete/AutoComplete';
 export type { PaginationProps } from './Pagination/Pagination';
 export type { ContextMenuItemProps } from './ContextMenu/ContextMenu';
+export type { GenericLabelProps } from './GenericLabel/GenericLabel';
 export type { IconButtonProps };
 export type { AlertProps };
 export type { AvatarProps };

package/dist/styles/variables.dark.json.d.ts

@@ -67,9 +67,9 @@ declare const _default: {
     "avatar": {
       "color": {
         "background": {
-          "default": "#696e79",
-          "hover": "#53575f",
-          "active": "#53575f"
+          "default": "#808691",
+          "hover": "#b3b6bd",
+          "active": "#b3b6bd"
         },
         "text": {
           "default": "#1F1F1C",
@@ -1111,8 +1111,8 @@ declare const _default: {
         "color": {
           "background": {
             "default": "#1F1F1C",
-            "hover": "#1F1F1C",
-            "active": "lch(13.9 2.07 105)"
+            "hover": "lch(15.8 0 0)",
+            "active": "lch(17.9 0 0)"
           },
           "stroke": {
             "default": "#323232"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "v0.0.139",
+  "version": "0.0.141",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",