@aviala-design/spiral 0.2.0 → 2.0.0

package/dist/props.json

@@ -186,6 +186,13 @@
         "required": false,
         "description": ""
       },
+      {
+        "name": "equalWidth",
+        "type": "boolean",
+        "defaultValue": "false",
+        "required": false,
+        "description": "When true, the group fills its container and items split the width equally."
+      },
       {
         "name": "disabled",
         "type": "boolean",
@@ -456,13 +463,6 @@
         "required": false,
         "description": ""
       },
-      {
-        "name": "placeholder",
-        "type": "string",
-        "defaultValue": "YYYY/MM/DD",
-        "required": false,
-        "description": ""
-      },
       {
         "name": "rangePlaceholder",
         "type": "string",
@@ -484,6 +484,13 @@
         "required": false,
         "description": ""
       },
+      {
+        "name": "editable",
+        "type": "boolean",
+        "defaultValue": "true",
+        "required": false,
+        "description": "When false, shows a read-only value instead of an editable input. Default true."
+      },
       {
         "name": "contentClassName",
         "type": "string",
@@ -757,7 +764,7 @@
         "name": "showController",
         "type": "boolean",
         "required": false,
-        "description": "Figma `Controller` — character counter + resize affordance"
+        "description": "Figma `Controller` — character counter + SymbolResize drag handle"
       },
       {
         "name": "error",
@@ -1174,7 +1181,7 @@
     "props": [
       {
         "name": "label",
-        "type": "string",
+        "type": "ReactNode",
         "required": false,
         "description": ""
       },
@@ -1192,15 +1199,34 @@
       },
       {
         "name": "error",
-        "type": "string",
+        "type": "ReactNode",
         "required": false,
         "description": ""
       },
+      {
+        "name": "info",
+        "type": "ReactNode",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "alert",
+        "type": "ReactNode",
+        "required": false,
+        "description": "Optional Alert / Feedback under the control"
+      },
       {
         "name": "required",
         "type": "boolean",
         "required": false,
         "description": ""
+      },
+      {
+        "name": "direction",
+        "type": "enum",
+        "defaultValue": "vertical",
+        "required": false,
+        "description": "Figma `Direction` — vertical stacks label above control; horizontal places label beside"
       }
     ]
   },

package/dist/styles.css

@@ -131,7 +131,7 @@
   --text-text-normal-text-black: #343333;
   --text-text-normal-text-caption-black: #858484;
   --text-text-normal-text-white: #fefcfc;
-  --text-text-normal-text-caption-white: #a8a8a8;
+  --text-text-normal-text-caption-white: #fefcfc;
 
   /* shadcn semantic aliases — default typography/surfaces use neutral tokens, not theme tint */
   --background: var(--normal-background-theme, #faf8f8);
@@ -159,7 +159,7 @@
 [data-mode="dark"] {
   --background: #1a1a1a;
   --foreground: var(--text-text-normal-text-white, #e8e8e8);
-  --muted-foreground: var(--text-text-normal-text-caption-white, #a8a8a8);
+  --muted-foreground: var(--text-text-normal-text-caption-black, #a8a8a8);
   --secondary-foreground: var(--text-text-normal-text-white, #e8e8e8);
   --accent-foreground: var(--text-text-normal-text-white, #e8e8e8);
   --card: #242424;
@@ -459,11 +459,12 @@
   --segmentator-shadow-tiled: inset 0 -0.5px 0
     var(--special-effort-se-lineshadow-bottom, rgba(0, 0, 0, 0.04));
   --segmentator-item-hover-bg: var(--aviala-neutral-neutral-6, #edebeb);
-  --segmentator-press-scale: 0.96;
-  --segmentator-press-transition-duration: var(--segmentator-transition-duration, 0.3s);
+  --segmentator-press-scale: 0.98;
+  --segmentator-press-height-scale: 0.88;
+  --segmentator-press-transition-duration: var(--segmentator-transition-duration, 0.52s);
   --segmentator-press-transition-easing: var(
     --segmentator-transition-easing,
-    cubic-bezier(0.33, 1, 0.68, 1)
+    cubic-bezier(0.22, 1.1, 0.36, 1)
   );
   --segmentator-haptic-press-ms: 20;
   --segmentator-haptic-select-ms: 16;
@@ -564,15 +565,21 @@
     var(--padding-min, 2px) * 2 + var(--line-height-line-height-regular, 1.125rem)
   );
   --datepicker-header-height: calc(
-    var(--padding-tiny, 4px) * 4 + var(--icon-size-text-bigger, var(--size-middle, 1rem))
+    var(--padding-tiny, 4px) * 3 +
+      var(--typography-subtitle-line-height, var(--line-height-middle, 1.375rem))
   );
   --datepicker-grid-height: calc(
     var(--datepicker-grid-rows) * var(--datepicker-day-height) +
       (var(--datepicker-grid-rows) - 1) * var(--datepicker-row-gap)
   );
+  /* Date grid content (weekdays + grid) — bottom padding applied on view-viewport */
+  --datepicker-view-height: calc(
+    var(--datepicker-weekday-height) + var(--datepicker-panel-gap) +
+      var(--datepicker-grid-height)
+  );
   --datepicker-panel-body-height: calc(
     var(--datepicker-header-height) + var(--datepicker-panel-gap) +
-      var(--datepicker-weekday-height) + var(--datepicker-panel-gap) + var(--datepicker-grid-height)
+      var(--datepicker-view-height) + var(--padding-tiny, 4px)
   );
   --datepicker-time-wheel-item-height: 36px;
   --datepicker-time-wheel-visible-count: 5;
@@ -793,15 +800,19 @@
   /* Slider — Figma Information Collect → Slider (384:21584) */
   --slider-width: 70px;
   --slider-track-height: 4px;
-  --slider-track-height-big: 6px;
+  --slider-track-height-big: 8px;
   --slider-thumb-size: 8px;
-  --slider-thumb-size-big: 12px;
+  --slider-thumb-size-big: 10px;
+  --slider-pad-y: var(--padding-tinyer, 3px);
   --slider-track-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
   --slider-track-border: var(--border-border-normal-primary, #e2e0e0);
   --slider-range-bg: var(--box-box-theme-primarybackground, #ff5532);
   --slider-thumb-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
   --slider-thumb-border: var(--border-border-theme-primary, #ff5532);
-  --slider-disabled-opacity: var(--transparency-disable, 0.55);
+  /* Availability Status=OFF — secondary fill, not whole-control opacity */
+  --slider-track-bg-disabled: var(--control-control-normal-lightbackground-deep, #fdfbfb);
+  --slider-range-bg-disabled: var(--box-box-theme-secondarybackground, #ffdad2);
+  --slider-thumb-border-disabled: var(--box-box-theme-secondarybackground, #ffdad2);
 
   /* Upload — Figma Information Collect → Upload (527:56238 / 527:56237) */
   --upload-radius: var(--border-radius-small, 8px);
@@ -1016,11 +1027,13 @@
   --typography-caption-fg: var(--text-text-normal-text-caption-black, #858484);
   --typography-caption-fg-white: var(--text-text-normal-text-caption-white, #fefcfc);
 
-  --typeface-gap: var(--gap-inside, 4px);
+  --typeface-gap: var(--gap-none, 0);
 }
 
 /* Keyboard focus ring - opt-in via `.aviala-focus-ring`.
-   Uses :focus-visible (no JS gate). Animated box-shadow: 12px to 3px, 250ms. */
+   Requires `html[data-aviala-kbd]` (set by initKeyboardFocus) so rings do not
+   appear when menus programmatically focus items after a pointer open.
+   Animated box-shadow: 12px → 3px, 250ms. */
 
 :root {
   --focus-ring-width-start: var(--size-small, 12px);
@@ -1030,13 +1043,15 @@
   --focus-transition-easing: ease;
 }
 
-/* Suppress native outline; custom ring only on .aviala-focus-ring:focus-visible */
-.aviala-focus-ring:focus {
+/* Suppress native outline always; custom ring only for keyboard modality */
+.aviala-focus-ring:focus,
+.aviala-focus-ring:focus-visible,
+.aviala-focus-ring:has(:focus-visible) {
   outline: none;
 }
 
-.aviala-focus-ring:focus-visible {
-  outline: none;
+html[data-aviala-kbd] .aviala-focus-ring:focus-visible,
+html[data-aviala-kbd] .aviala-focus-ring:has(:focus-visible) {
   animation: aviala-focus-ring-settle var(--focus-transition-duration)
     var(--focus-transition-easing) forwards;
 }
@@ -1051,7 +1066,19 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .aviala-focus-ring:focus-visible {
+  html[data-aviala-kbd] .aviala-focus-ring:focus-visible,
+  html[data-aviala-kbd] .aviala-focus-ring:has(:focus-visible) {
+    animation: none;
+    box-shadow: 0 0 0 var(--focus-ring-width-end) var(--focus-ring-color);
+  }
+
+  /* Wheel selected-item proxy rings (overflow clips the listbox ring) */
+  html[data-aviala-kbd]
+    .aviala-datepicker-time__wheel-scroll:focus-visible
+    .aviala-datepicker-time__wheel-option[data-selected="true"],
+  html[data-aviala-kbd]
+    .aviala-scroll-picker-column__scroll:focus-visible
+    .aviala-scroll-picker-item[data-selected="true"] {
     animation: none;
     box-shadow: 0 0 0 var(--focus-ring-width-end) var(--focus-ring-color);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aviala-design/spiral",
-  "version": "0.2.0",
+  "version": "2.0.0",
   "description": "Spiral 2 ? Aviala Design React component library",
   "license": "MIT",
   "repository": {
@@ -43,8 +43,8 @@
     "clsx": "^2.1.1",
     "colord": "^2.9.3",
     "tailwind-merge": "^3.3.1",
-    "@aviala-design/tokens": "0.0.4",
-    "@aviala-design/icons": "2.0.1"
+    "@aviala-design/icons": "2.0.2",
+    "@aviala-design/tokens": "2.0.0"
   },
   "peerDependencies": {
     "react": ">=18",