@aviala-design/spiral 2.6.2 → 2.7.0

package/dist/props.json

@@ -5171,7 +5171,15 @@
   "Table": {
     "displayName": "Table",
     "description": "",
-    "props": [],
+    "props": [
+      {
+        "name": "stickyHeader",
+        "type": "boolean",
+        "defaultValue": "false",
+        "required": false,
+        "description": "Freeze header row while the table body scrolls"
+      }
+    ],
     "parts": [
       {
         "displayName": "TableRow",
@@ -5186,6 +5194,24 @@
           }
         ]
       },
+      {
+        "displayName": "TableHead",
+        "description": "",
+        "props": [
+          {
+            "name": "actions",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Header trailing button area (Figma Table Head Default)"
+          },
+          {
+            "name": "checkboxProps",
+            "type": "Omit<Omit<CheckboxProps & RefAttributes<HTMLButtonElement>, \"ref\"> & { round?: boolean; size?: CheckboxSize; } & RefAttributes<...>, \"ref\">",
+            "required": false,
+            "description": "Select-all / indeterminate / unchecked via Checkbox props"
+          }
+        ]
+      },
       {
         "displayName": "TableCell",
         "description": "",
@@ -5196,12 +5222,24 @@
             "required": false,
             "description": ""
           },
+          {
+            "name": "iconPlace",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Shaped icon place (Figma `icon place+text`)"
+          },
           {
             "name": "text",
             "type": "ReactNode",
             "required": false,
             "description": ""
           },
+          {
+            "name": "caption",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Secondary caption under primary text (Figma Typeface pair)"
+          },
           {
             "name": "people",
             "type": "ReactNode",
@@ -5230,7 +5268,13 @@
             "name": "actions",
             "type": "ReactNode",
             "required": false,
-            "description": ""
+            "description": "Trailing button area — supported on text / icon / people / badge / action"
+          },
+          {
+            "name": "grabber",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Optional leading grabber control"
           },
           {
             "name": "checkboxProps",

package/dist/styles.css

@@ -140,7 +140,7 @@
 
   /* Shared elevation — BasicShadow-Level4WithLine */
   --aviala-shadow-level4-with-line:
-    0 0 1px 0 rgba(0, 0, 0, 0.45),
+    0 0 1px 0 rgb(0 0 0 / 18%),
     0 6px 18px 0 rgba(0, 0, 0, 0.08);
 
   /* Shared interaction surfaces — Figma Components 1909:28593 matrix */
@@ -512,6 +512,7 @@
   --link-fg-custom: var(--text-text-normal-text-black, var(--button-default-custom-fg));
 
   --segmentator-bg: var(--control-control-normal-lightbackground-1, #f0efef);
+  --segmentator-bg-hover: var(--aviala-interaction-filled-hover, #e5e4e3);
   --segmentator-selected-bg: var(--control-control-normal-background-whiteonly, #ffffff);
   --segmentator-selected-fg: var(--text-text-theme-primary-black, var(--button-no-bg-fg));
   --segmentator-fg: var(--text-text-normal-text-black, var(--button-default-custom-fg));
@@ -550,15 +551,16 @@
   --tag-radius: var(--border-radius-extra-small-2, 6px);
   --tag-disabled-opacity: var(--transparency-disable, 0.55);
 
+  /* Progress — Figma 589:55818 (bar 6/8px, track lightBackground-1, ring 16/24) */
   --progress-gap: var(--gap-inside-space, 6px);
   --progress-bar-width: 80px;
-  --progress-bar-height: 4px;
-  --progress-bar-height-big: 6px;
+  --progress-bar-height: 6px;
+  --progress-bar-height-big: 8px;
   --progress-label-width: 22px;
   --progress-label-fg: var(--text-text-normal-text-caption-black, #616060);
-  --progress-track-bg: var(--box-box-normal-background-whiteonly, #ffffff);
-  --progress-track-border: var(--border-border-normal-1, #f0efef);
+  --progress-track-bg: var(--control-control-normal-lightbackground-1, #f0efef);
   --progress-ring-size: 16px;
+  --progress-ring-stroke: 2px;
 
   --scroll-size: 10px;
   --scroll-size-small: 8px;
@@ -568,18 +570,23 @@
   --scroll-thumb-inset: 2px;
   --scroll-thumb-inset-small: 1px;
 
-  --table-bg: var(--box-box-normal-lightbackground-white, #f9f8f8);
+  --table-bg: var(--box-box-normal-background-whiteonly, #ffffff);
+  --table-head-bg: var(--box-box-normal-lightbackground-white, #f9f8f8);
   --table-border: var(--border-border-normal-1, #f0efef);
   --table-radius: var(--border-radius-middle, 10px);
   --table-head-height: 38px;
   --table-cell-height: 50px;
   --table-cell-px: var(--padding-big, 14px);
+  --table-cell-px-end: var(--padding-middle, 10px);
   --table-cell-py: var(--padding-default, 8px);
+  --table-head-py: var(--padding-middle, 10px);
   --table-cell-gap: var(--gap-component-space, 8px);
   --table-checkbox-col-width: 40px;
   --table-cell-icon-size: var(--icon-size-text-bigger, 1rem);
-  --table-head-fg: var(--text-text-normal-text-caption-black, #616060);
+  --table-icon-place-size: 36px;
+  --table-head-fg: var(--text-text-normal-text-black, #262525);
   --table-cell-fg: var(--text-text-normal-text-black, #262525);
+  --table-cell-caption-fg: var(--text-text-normal-text-caption-black, #616060);
 
   --color-picker-panel-width: 370px;
   --color-picker-area-height: 160px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aviala-design/spiral",
-  "version": "2.6.2",
+  "version": "2.7.0",
   "description": "Spiral 2 ? Aviala Design React component library",
   "license": "MIT",
   "repository": {
@@ -44,8 +44,8 @@
     "clsx": "^2.1.1",
     "colord": "^2.9.3",
     "tailwind-merge": "^3.3.1",
-    "@aviala-design/icons": "2.2.0",
-    "@aviala-design/tokens": "2.5.1"
+    "@aviala-design/tokens": "2.5.2",
+    "@aviala-design/icons": "2.2.0"
   },
   "peerDependencies": {
     "react": ">=18",