@aviala-design/spiral 2.8.1 → 3.0.0

package/dist/styles.css

@@ -115,7 +115,10 @@
 :root {
   /* ALD semantic colors → runtime aviala palette steps (set by generateTheme / applyTheme) */
   --control-control-theme-background: var(--aviala-primary-primary-8, #ff5532);
-  --control-control-theme-lightbackground: var(--aviala-primary-primary-2, #ffe9e3);
+  --control-control-theme-lightbackground: var(
+    --aviala-primary-primary-2,
+    #ffe9e3
+  );
   --box-box-theme-secondarybackground: var(--aviala-primary-primary-4, #ffc6b6);
   --box-box-theme-lightbackground: var(--aviala-primary-primary-2, #ffe9e3);
   --text-text-theme-primary-black: var(--aviala-primary-primary-10, #cd3923);
@@ -144,8 +147,10 @@
 
   /* Shared elevation — BasicShadow-Level4WithLine */
   --aviala-shadow-level4-with-line:
-    0 0 1px 0 rgb(0 0 0 / 18%),
-    0 6px 18px 0 rgba(0, 0, 0, 0.08);
+    0 0 1px 0 rgb(0 0 0 / 18%), 0 6px 18px 0 rgba(0, 0, 0, 0.08);
+
+  /* Shared elevation — BasicShadow-Level5 */
+  --aviala-shadow-level5: 0 8px 24px 2px rgba(0, 0, 0, 0.06);
 
   /* Shared interaction surfaces — Figma Components 1909:28593 matrix */
   --aviala-interaction-ghost-hover: var(
@@ -283,28 +288,40 @@
   --button-tiny-padding-y: var(--padding-min, 2px);
   --button-tiny-radius: var(--border-radius-extra-small-2, 6px);
   --button-tiny-line-height: var(--line-height-small, 1rem);
-  --button-tiny-icon-size: var(--icon-size-caption-bigger, var(--size-regular, 0.875rem));
+  --button-tiny-icon-size: var(
+    --icon-size-caption-bigger,
+    var(--size-regular, 0.875rem)
+  );
   --button-tiny-icon-slot-height: var(--line-height-small, 1rem);
 
   --button-small-padding-x: var(--padding-small, 6px);
   --button-small-padding-y: var(--padding-min, 2px);
   --button-small-radius: var(--border-radius-extra-small-2, 6px);
   --button-small-line-height: var(--line-height-regular, 1.125rem);
-  --button-small-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
+  --button-small-icon-size: var(
+    --icon-size-text-bigger,
+    var(--size-middle, 1rem)
+  );
   --button-small-icon-slot-height: var(--line-height-regular, 1.125rem);
 
   --button-regular-padding-x: var(--padding-middle, 10px);
   --button-regular-padding-y: var(--padding-small, 6px);
   --button-regular-radius: var(--border-radius-small, 8px);
   --button-regular-line-height: var(--line-height-regular, 1.125rem);
-  --button-regular-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
+  --button-regular-icon-size: var(
+    --icon-size-text-bigger,
+    var(--size-middle, 1rem)
+  );
   --button-regular-icon-slot-height: var(--line-height-regular, 1.125rem);
 
   --button-big-padding-x: var(--padding-big, 14px);
   --button-big-padding-y: var(--padding-default, 8px);
   --button-big-radius: var(--border-radius-small, 8px);
   --button-big-line-height: var(--line-height-regular, 1.125rem);
-  --button-big-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
+  --button-big-icon-size: var(
+    --icon-size-text-bigger,
+    var(--size-middle, 1rem)
+  );
   --button-big-icon-slot-height: var(--line-height-regular, 1.125rem);
 
   /* Segmentator — padding / line-height (height is content-driven) */
@@ -339,7 +356,10 @@
 
   --input-bg-default: var(--aviala-interaction-filled-default, #f0efef);
   --input-bg-hover: var(--aviala-interaction-filled-hover, #e5e4e3);
-  --input-bg-activated: var(--control-control-normal-background-whiteonly, #ffffff);
+  --input-bg-activated: var(
+    --control-control-normal-background-whiteonly,
+    #ffffff
+  );
   --input-border-activated: var(--border-border-theme-primary, var(--primary));
   --input-fg: var(--text-text-normal-text-black, var(--foreground));
   --input-placeholder-opacity: var(--transparency-placeholder, 0.6);
@@ -360,21 +380,36 @@
   --input-font-size: var(--typography-text-size);
   --input-line-height: var(--typography-text-line-height);
   --input-icon-slot-height: var(--input-line-height);
-  --input-slot-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
+  --input-slot-icon-size: var(
+    --icon-size-text-bigger,
+    var(--size-middle, 1rem)
+  );
 
   --textarea-min-height-regular: 70px;
   --textarea-min-height-big: 70px;
   --textarea-min-width: var(--button-min-width, 46px);
   --textarea-radius: var(--border-radius-small, 8px);
-  --textarea-controller-bg: var(--control-control-normal-lightbackground-1, #f0efef);
+  --textarea-controller-bg: var(
+    --control-control-normal-lightbackground-1,
+    #f0efef
+  );
   --textarea-counter-fg: var(--text-text-normal-text-caption-black, #616060);
 
   --radio-size: var(--size-big, 1.25rem);
   --radio-indicator-size: 0.5rem;
-  --radio-bg-unchecked: var(--control-control-normal-background-whiteonly, #ffffff);
+  --radio-bg-unchecked: var(
+    --control-control-normal-background-whiteonly,
+    #ffffff
+  );
   --radio-border-unchecked: var(--border-border-normal-1, #e8e6e6);
-  --radio-checked-bg: var(--control-control-theme-background, var(--button-primary-bg));
-  --radio-indicator-bg: var(--control-control-normal-background-whiteonly, #ffffff);
+  --radio-checked-bg: var(
+    --control-control-theme-background,
+    var(--button-primary-bg)
+  );
+  --radio-indicator-bg: var(
+    --control-control-normal-background-whiteonly,
+    #ffffff
+  );
   --radio-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.06);
   --radio-input-gap: var(--gap-component-space, 8px);
   --radio-group-gap: var(--gap-content-space, 10px);
@@ -409,7 +444,10 @@
   --select-item-gap: var(--gap-component-space, 8px);
   --select-item-px: var(--padding-default, 8px);
   --select-item-py: var(--padding-tiny, 4px);
-  --select-item-function-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
+  --select-item-function-icon-size: var(
+    --icon-size-text-bigger,
+    var(--size-middle, 1rem)
+  );
   --select-item-function-height: var(--line-height-regular, 1.125rem);
   --select-label-font-size: var(--typography-caption-size);
   --select-label-line-height: var(--typography-caption-line-height);
@@ -475,12 +513,27 @@
   --checkbox-check-duration: 300ms;
   --checkbox-check-easing: cubic-bezier(0.873, 0, 0, 1);
   --checkbox-surface-easing: ease;
-  --checkbox-bg-unchecked: var(--control-control-normal-background-whiteonly, #ffffff);
+  --checkbox-bg-unchecked: var(
+    --control-control-normal-background-whiteonly,
+    #ffffff
+  );
   --checkbox-border-unchecked: var(--border-border-normal-3, #d6d5d4);
-  --checkbox-checked-bg: var(--control-control-theme-background, var(--button-primary-bg));
-  --checkbox-checked-icon: var(--control-control-normal-background-whiteonly, #ffffff);
-  --checkbox-indeterminate-bg: var(--box-box-theme-secondarybackground, #ffdad2);
-  --checkbox-indeterminate-mark-bg: var(--box-box-theme-primarybackground, #ff5532);
+  --checkbox-checked-bg: var(
+    --control-control-theme-background,
+    var(--button-primary-bg)
+  );
+  --checkbox-checked-icon: var(
+    --control-control-normal-background-whiteonly,
+    #ffffff
+  );
+  --checkbox-indeterminate-bg: var(
+    --box-box-theme-secondarybackground,
+    #ffdad2
+  );
+  --checkbox-indeterminate-mark-bg: var(
+    --box-box-theme-primarybackground,
+    #ff5532
+  );
   --checkbox-input-gap: var(--gap-component-space, 8px);
   --checkbox-group-gap: var(--gap-content-space, 10px);
   --checkbox-label-fg: var(--text-text-normal-text-black, #262525);
@@ -492,24 +545,35 @@
   --switch-track-bg: var(--control-control-normal-background-3, #d6d5d4);
   --switch-hover-bg: var(--aviala-neutral-neutral-7, #c4c2c2);
   --switch-press-bg: var(--aviala-neutral-neutral-8, #afadad);
-  --switch-checked-bg: var(--control-control-theme-background, var(--button-primary-bg));
+  --switch-checked-bg: var(
+    --control-control-theme-background,
+    var(--button-primary-bg)
+  );
   --switch-checked-bg-hover: var(--button-primary-bg-hover);
   --switch-checked-bg-active: var(--button-primary-bg-active);
-  --switch-thumb-bg: var(--control-control-normal-background-whiteonly, #ffffff);
+  --switch-thumb-bg: var(
+    --control-control-normal-background-whiteonly,
+    #ffffff
+  );
   --switch-thumb-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.06);
   --switch-thumb-size-regular: 18px;
   --switch-thumb-size-small: 16px;
   --switch-padding: var(--padding-min, 2px);
   --switch-thumb-travel-regular: calc(
-    var(--switch-width) - 2 * var(--switch-padding) - var(--switch-thumb-size-regular)
+    var(--switch-width) - 2 * var(--switch-padding) -
+      var(--switch-thumb-size-regular)
   );
   --switch-thumb-travel-small: calc(
-    var(--switch-width) - 2 * var(--switch-padding) - var(--switch-thumb-size-small)
+    var(--switch-width) - 2 * var(--switch-padding) -
+      var(--switch-thumb-size-small)
   );
   --switch-transition-duration: 0.26s;
   --switch-thumb-lead-ease: cubic-bezier(0.16, 1, 0.3, 1);
   --switch-thumb-trail-ease: cubic-bezier(0.35, 0, 0.15, 1);
-  --switch-transition-easing: var(--switch-thumb-lead-ease, cubic-bezier(0.16, 1, 0.3, 1));
+  --switch-transition-easing: var(
+    --switch-thumb-lead-ease,
+    cubic-bezier(0.16, 1, 0.3, 1)
+  );
   --switch-press-transition-duration: 0.12s;
   --switch-press-transition-easing: cubic-bezier(0.2, 0, 0.2, 1);
   --switch-track-transition-duration: 0.22s;
@@ -517,22 +581,43 @@
   --switch-disabled-opacity: 0.55;
 
   --link-fg-theme: var(--text-text-theme-primary-black, var(--button-no-bg-fg));
-  --link-fg-custom: var(--text-text-normal-text-black, var(--button-default-custom-fg));
+  --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));
-  --segmentator-tiled-bg: var(--box-box-theme-secondarybackground, var(--button-second-bg));
+  --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)
+  );
+  --segmentator-tiled-bg: var(
+    --box-box-theme-secondarybackground,
+    var(--button-second-bg)
+  );
   --segmentator-shadow-selected: 0 4px 8px rgba(0, 0, 0, 0.06);
   --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-interaction-filled-hover, #e5e4e3);
-  --segmentator-item-active-bg: var(--aviala-interaction-filled-active, #d6d5d4);
+  --segmentator-item-active-bg: var(
+    --aviala-interaction-filled-active,
+    #d6d5d4
+  );
   --segmentator-press-scale: 0.98;
   --segmentator-press-height-scale: 0.88;
-  --segmentator-press-transition-duration: var(--segmentator-transition-duration, 0.52s);
+  --segmentator-press-transition-duration: var(
+    --segmentator-transition-duration,
+    0.52s
+  );
   --segmentator-press-transition-easing: var(
     --segmentator-transition-easing,
     cubic-bezier(0.22, 1.1, 0.36, 1)
@@ -630,19 +715,29 @@
   --datepicker-row-gap: 2px;
   --datepicker-day-radius: var(--border-radius-small, 8px);
   --datepicker-day-fg: var(--select-item-fg);
-  --datepicker-day-fg-selected: var(--text-text-theme-primary-black, var(--select-item-selected-fg));
+  --datepicker-day-fg-selected: var(
+    --text-text-theme-primary-black,
+    var(--select-item-selected-fg)
+  );
   --datepicker-day-bg-hover: var(--select-item-highlight-bg);
   --datepicker-day-bg-in-range: var(--control-theme-lightbackground, #ffdad2);
   --datepicker-day-bg-selected: var(--control-theme-lightbackground, #ffdad2);
   --datepicker-day-today-dot: var(--text-text-theme-primary-black, #bf2300);
-  --datepicker-footer-bg: var(--control-control-normal-lightbackground-1, #f0efef);
+  --datepicker-footer-bg: var(
+    --control-control-normal-lightbackground-1,
+    #f0efef
+  );
   --datepicker-grid-rows: 6;
   --datepicker-day-height: calc(
-    var(--padding-min, 2px) * 2 + var(--line-height-line-height-regular, 1.125rem)
+    var(--padding-min, 2px) * 2 +
+      var(--line-height-line-height-regular, 1.125rem)
   );
   --datepicker-header-height: calc(
     var(--padding-tiny, 4px) * 3 +
-      var(--typography-subtitle-line-height, var(--line-height-middle, 1.375rem))
+      var(
+        --typography-subtitle-line-height,
+        var(--line-height-middle, 1.375rem)
+      )
   );
   --datepicker-grid-height: calc(
     var(--datepicker-grid-rows) * var(--datepicker-day-height) +
@@ -660,9 +755,12 @@
   --datepicker-time-wheel-item-height: 36px;
   --datepicker-time-wheel-visible-count: 5;
   --datepicker-time-wheel-height: calc(
-    var(--datepicker-time-wheel-item-height) * var(--datepicker-time-wheel-visible-count)
+    var(--datepicker-time-wheel-item-height) *
+      var(--datepicker-time-wheel-visible-count)
+  );
+  --datepicker-time-wheel-fade-height: calc(
+    var(--datepicker-time-wheel-item-height) * 1.5
   );
-  --datepicker-time-wheel-fade-height: calc(var(--datepicker-time-wheel-item-height) * 1.5);
 
   --popover-content-bg: var(--popover, var(--select-menu-bg));
   --popover-content-fg: var(--popover-foreground, var(--select-item-fg));
@@ -705,7 +803,40 @@
   --modal-close-fg: var(--text-text-normal-text-caption-black, #616060);
   --modal-description-fg: var(--text-text-normal-text-caption-black, #616060);
 
-  --tooltip-content-bg: var(--text-text-normal-text-black, var(--aviala-neutral-neutral-10, #262525));
+  /* Drawer — Figma Components → Drawer (2051:26823) */
+  --drawer-overlay-bg: rgba(0, 0, 0, 0.4);
+  --drawer-inset: var(--padding-large, 18px);
+  --drawer-content-width: 310px;
+  --drawer-content-max-width: calc(100vw - 36px);
+  --drawer-content-max-height-edge: 400px;
+  --drawer-content-bg: var(--box-box-normal-background-whiteonly, #ffffff);
+  --drawer-content-fg: var(--text-text-normal-text-black, #262525);
+  --drawer-content-border: var(--border-border-normal-1, #f0efef);
+  --drawer-content-radius: var(--border-radius-big, 12px);
+  --drawer-content-shadow: var(--aviala-shadow-level5);
+  --drawer-header-bg: var(--drawer-content-bg);
+  --drawer-header-pl: var(--padding-big, 14px);
+  --drawer-header-pr: var(--padding-small, 6px);
+  --drawer-header-py: var(--gap-none, 0);
+  --drawer-header-main-py: var(--padding-middle, 10px);
+  --drawer-header-gap: var(--gap-content-space, 10px);
+  --drawer-section-padding: var(--padding-big, 14px);
+  --drawer-section-border: var(--border-border-normal-1, #f0efef);
+  --drawer-body-bg: var(--drawer-content-bg);
+  --drawer-footer-bg: var(--drawer-content-bg);
+  --drawer-footer-actions-gap: var(--gap-component-space, 8px);
+  --drawer-icon-size: var(--size-semilarge, 1.375rem);
+  --drawer-icon-slot-size: var(--size-semilarge, 1.375rem);
+  --drawer-icon-py: var(--padding-min, 2px);
+  --drawer-icon-fg: var(--text-text-normal-text-black, #262525);
+  --drawer-close-icon-size: var(--size-middle, 1rem);
+  --drawer-close-fg: var(--text-text-normal-text-caption-black, #616060);
+  --drawer-description-fg: var(--text-text-normal-text-caption-black, #616060);
+
+  --tooltip-content-bg: var(
+    --text-text-normal-text-black,
+    var(--aviala-neutral-neutral-10, #262525)
+  );
   --tooltip-content-fg: var(
     --control-control-normal-background-whiteonly,
     var(--aviala-neutral-neutral-2, #ffffff)
@@ -810,12 +941,17 @@
   /* Snappy ease-out: most travel happens early, then settles hard. */
   --navigation-transition-easing: cubic-bezier(0.16, 1, 0.3, 1);
   --navigation-icon-box: var(--line-height-regular, 1.125rem);
-  --navigation-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
+  --navigation-icon-size: var(
+    --icon-size-text-bigger,
+    var(--size-middle, 1rem)
+  );
   --navigation-item-hover-bg: var(--button-no-bg-custom-hover);
   --navigation-actions-slot-gap: 2px;
 
   /* Loading Icon — Figma 30×30 artboard uses 2px ring (r15 − r13) */
   --loading-ring-stroke: 2px;
+  /* Mask luminance channel, not a theme color: white keeps the ring revealed. */
+  --loading-mask-reveal: #ffffff;
   --loading-fg-theme: var(
     --control-control-theme-background,
     var(--button-primary-bg)
@@ -825,7 +961,10 @@
     var(--button-no-bg-fg)
   );
   --loading-fg-black: var(--text-text-normal-text-black, #262525);
-  --loading-fg-white: var(--control-control-normal-background-whiteonly, #ffffff);
+  --loading-fg-white: var(
+    --control-control-normal-background-whiteonly,
+    #ffffff
+  );
 
   /* Feedback — Figma Response And Feedback → Feedback (553:58620) */
   --feedback-shadow: var(--aviala-shadow-level4-with-line);
@@ -840,31 +979,67 @@
   --feedback-close-icon-size-primary: var(--size-regular, 0.875rem);
   --feedback-content-max-width: 480px;
   --feedback-title-fg-default: var(--text-text-normal-text-black, #262525);
-  --feedback-description-fg-default: var(--text-text-normal-text-caption-black, #616060);
+  --feedback-description-fg-default: var(
+    --text-text-normal-text-caption-black,
+    #616060
+  );
   --feedback-title-fg-primary: var(--text-text-normal-text-white, #ffffff);
-  --feedback-description-fg-primary: var(--text-text-normal-text-caption-white, #ffffff);
+  --feedback-description-fg-primary: var(
+    --text-text-normal-text-caption-white,
+    #ffffff
+  );
   --feedback-close-fg: var(--text-text-normal-text-caption-black, #616060);
   --feedback-close-fg-on-primary: var(--text-text-normal-text-white, #ffffff);
   --feedback-icon-fg-primary: var(--text-text-normal-text-white, #ffffff);
-  --feedback-information-bg-default: var(--box-box-infomation-lightbackground, #fafbff);
-  --feedback-information-bg-primary: var(--box-box-infomation-primarybackground, #66b6fa);
-  --feedback-information-border: var(--border-border-infomation-primary, #66b6fa);
-  --feedback-warning-bg-default: var(--box-box-warning-lightbackground, #fff8f5);
-  --feedback-warning-bg-primary: var(--box-box-warning-primarybackground, #ec8b09);
+  --feedback-information-bg-default: var(
+    --box-box-infomation-lightbackground,
+    #fafbff
+  );
+  --feedback-information-bg-primary: var(
+    --box-box-infomation-primarybackground,
+    #66b6fa
+  );
+  --feedback-information-border: var(
+    --border-border-infomation-primary,
+    #66b6fa
+  );
+  --feedback-warning-bg-default: var(
+    --box-box-warning-lightbackground,
+    #fff8f5
+  );
+  --feedback-warning-bg-primary: var(
+    --box-box-warning-primarybackground,
+    #ec8b09
+  );
   --feedback-warning-border: var(--border-border-warning-primary, #ec8b09);
   --feedback-wrong-bg-default: var(--box-box-fail-lightbackground, #fff4f3);
   --feedback-wrong-bg-primary: var(--box-box-fail-primarybackground, #f41544);
   --feedback-wrong-border: var(--border-border-fail-primary, #f41544);
-  --feedback-success-bg-default: var(--box-box-success-lightbackground, #f4fde9);
-  --feedback-success-bg-primary: var(--box-box-success-primarybackground, #70b450);
+  --feedback-success-bg-default: var(
+    --box-box-success-lightbackground,
+    #f4fde9
+  );
+  --feedback-success-bg-primary: var(
+    --box-box-success-primarybackground,
+    #70b450
+  );
   --feedback-success-border: var(--border-border-success-primary, #70b450);
-  --feedback-normal-bg-default: var(--box-box-normal-background-whiteonly, #ffffff);
+  --feedback-normal-bg-default: var(
+    --box-box-normal-background-whiteonly,
+    #ffffff
+  );
   --feedback-normal-border: var(--border-border-normal-1, #f0efef);
-  --feedback-information-icon-fg: var(--text-text-infomation-primary-black, #3489c8);
+  --feedback-information-icon-fg: var(
+    --text-text-infomation-primary-black,
+    #3489c8
+  );
   --feedback-warning-icon-fg: var(--text-text-warning-primary-black, #ab6200);
   --feedback-wrong-icon-fg: var(--text-text-fail-primary-black, #960024);
   --feedback-success-icon-fg: var(--text-text-success-primary-black, #47842b);
-  --feedback-normal-icon-fg: var(--text-text-normal-text-caption-black, #616060);
+  --feedback-normal-icon-fg: var(
+    --text-text-normal-text-caption-black,
+    #616060
+  );
 
   /* Alert — Figma Response And Feedback → Alert (527:56855) */
   --alert-radius: var(--border-radius-small, 8px);
@@ -876,7 +1051,10 @@
   --alert-title-fg: var(--text-text-normal-text-black, #262525);
   --alert-description-fg: var(--text-text-normal-text-caption-black, #616060);
   --alert-close-fg: var(--text-text-normal-text-caption-black, #616060);
-  --alert-secondary-action-fg: var(--text-text-normal-text-caption-black, #616060);
+  --alert-secondary-action-fg: var(
+    --text-text-normal-text-caption-black,
+    #616060
+  );
   --alert-actions-gap: var(--gap-component-space, 8px);
   --alert-actions-pl: 30px;
   --alert-actions-pr: var(--gap-content-space, 10px);
@@ -893,8 +1071,14 @@
   --alert-success-bg-default: var(--box-box-success-lightbackground, #f4fde9);
   --alert-success-bg-light: var(--box-box-success-secondarybackground, #dff6ce);
   --alert-success-border: var(--border-border-success-primary, #70b450);
-  --alert-neutral-bg-default: var(--box-box-normal-background-whiteonly, #ffffff);
-  --alert-neutral-bg-light: var(--box-box-normal-lightbackground-white, #f9f8f8);
+  --alert-neutral-bg-default: var(
+    --box-box-normal-background-whiteonly,
+    #ffffff
+  );
+  --alert-neutral-bg-light: var(
+    --box-box-normal-lightbackground-white,
+    #f9f8f8
+  );
   --alert-neutral-border: var(--border-border-normal-1, #f0efef);
   --alert-info-icon-fg: var(--text-text-infomation-primary-black, #3489c8);
   --alert-warning-icon-fg: var(--text-text-warning-primary-black, #ab6200);
@@ -931,8 +1115,7 @@
   --slider-thumb-bg: var(--box-box-normal-background-whiteonly, #ffffff);
   --slider-thumb-core: var(--box-box-theme-primarybackground, #ff5532);
   /* BasicShadow / BasicShadow-Level4WithLIne */
-  --slider-thumb-shadow:
-    var(--aviala-shadow-level4-with-line);
+  --slider-thumb-shadow: var(--aviala-shadow-level4-with-line);
   /* Availability Status=OFF */
   --slider-track-bg-disabled: var(--border-border-normal-1, #f0efef);
   --slider-range-bg-disabled: var(--box-box-theme-secondarybackground, #ffdad2);
@@ -949,7 +1132,10 @@
   --upload-large-py: var(--padding-default, 8px);
   --upload-large-bg: var(--control-control-normal-lightbackground-1, #f0efef);
   --upload-large-fg: var(--text-text-normal-text-black, #262525);
-  --upload-large-caption-fg: var(--text-text-normal-text-caption-black, #616060);
+  --upload-large-caption-fg: var(
+    --text-text-normal-text-caption-black,
+    #616060
+  );
   --upload-drag-border: var(--border-border-theme-primary, #ff5532);
   --upload-drag-bg: var(--box-box-theme-secondarybackground, #ffdad2);
   --upload-disabled-opacity: var(--transparency-disable, 0.55);
@@ -968,8 +1154,14 @@
   --scroll-picker-item-py: var(--padding-tiny, 4px);
   --scroll-picker-item-radius: var(--border-radius-extra-small-2, 6px);
   --scroll-picker-item-fg: var(--text-text-normal-text-black, #262525);
-  --scroll-picker-item-fg-selected: var(--text-text-theme-primary-black, #bf2300);
-  --scroll-picker-item-bg-selected: var(--control-control-theme-lightbackground, #ffdad2);
+  --scroll-picker-item-fg-selected: var(
+    --text-text-theme-primary-black,
+    #bf2300
+  );
+  --scroll-picker-item-bg-selected: var(
+    --control-control-theme-lightbackground,
+    #ffdad2
+  );
   --scroll-picker-item-opacity: var(--transparency-placeholder, 0.6);
   --scroll-picker-visible-count: 9;
 
@@ -1014,7 +1206,10 @@
   --steps-waiting-fg: var(--text-text-infomation-primary-black, #3489c8);
   --steps-in-progress-bg: var(--box-box-theme-primarybackground, #ff5532);
   --steps-in-progress-fg: var(--text-text-theme-primary-black, #bf2300);
-  --steps-in-progress-icon-fg: var(--text-text-normal-text-caption-white, #ffffff);
+  --steps-in-progress-icon-fg: var(
+    --text-text-normal-text-caption-white,
+    #ffffff
+  );
   --steps-default-bg: var(--box-box-normal-background-whiteonly, #ffffff);
   --steps-default-border: var(--border-border-normal-1, #f0efef);
   --steps-default-fg: var(--text-text-normal-text-caption-black, #616060);
@@ -1029,7 +1224,10 @@
   --pagination-page-active-py: var(--padding-small, 6px);
   --pagination-page-radius: var(--border-radius-small, 8px);
   --pagination-page-fg: var(--text-text-normal-text-black, #262525);
-  --pagination-page-active-bg: var(--box-box-theme-secondarybackground, #ffdad2);
+  --pagination-page-active-bg: var(
+    --box-box-theme-secondarybackground,
+    #ffdad2
+  );
   --pagination-page-active-fg: var(--text-text-theme-primary-black, #bf2300);
   --pagination-jump-gap: 4px;
   --pagination-jump-input-width: 65px;
@@ -1053,7 +1251,10 @@
   --video-width: 800px;
   --video-height: 450px;
   --video-radius: var(--border-radius-big, 12px);
-  --video-bg: var(--normal-background-theme, var(--box-box-normal-lightbackground-white, #f9f8f8));
+  --video-bg: var(
+    --normal-background-theme,
+    var(--box-box-normal-lightbackground-white, #f9f8f8)
+  );
   --video-border: var(--border-border-normal-1, #f9f8f8);
   --video-bar-height: 46px;
   --video-bar-padding: var(--padding-default, 8px);
@@ -1068,7 +1269,11 @@
   --video-bar-light-blur: 24px;
   --video-bar-light-bg: color-mix(
     in srgb,
-    var(--video-bar-bg, var(--control-control-normal-lightbackground-1, #f0efef)) 72%,
+    var(
+        --video-bar-bg,
+        var(--control-control-normal-lightbackground-1, #f0efef)
+      )
+      72%,
     transparent
   );
   --video-settings-width: 200px;
@@ -1186,7 +1391,10 @@
   --typography-body-fg: var(--text-text-normal-text-black, #262525);
   --typography-body-fg-white: var(--text-text-normal-text-white, #ffffff);
   --typography-caption-fg: var(--text-text-normal-text-caption-black, #616060);
-  --typography-caption-fg-white: var(--text-text-normal-text-caption-white, #ffffff);
+  --typography-caption-fg-white: var(
+    --text-text-normal-text-caption-white,
+    #ffffff
+  );
 
   --typeface-gap: var(--gap-none, 0);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aviala-design/spiral",
-  "version": "2.8.1",
-  "description": "Spiral 2 ? Aviala Design React component library",
+  "version": "3.0.0",
+  "description": "Spiral 2 — Aviala Design React component library",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,6 +22,12 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./form": {
+      "development": "./src/form.ts",
+      "types": "./dist/form.d.ts",
+      "import": "./dist/form.js",
+      "require": "./dist/form.cjs"
+    },
     "./styles.css": "./dist/styles.css",
     "./props.json": "./dist/props.json",
     "./component-changelogs.json": "./dist/component-changelogs.json"
@@ -36,7 +42,7 @@
     "@radix-ui/react-popover": "^1.1.18",
     "@radix-ui/react-radio-group": "^1.3.7",
     "@radix-ui/react-select": "^2.2.5",
-    "@radix-ui/react-slider": "^1.4.4",
+    "@radix-ui/react-slider": "1.4.4",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tooltip": "^1.2.7",
@@ -45,13 +51,18 @@
     "colord": "^2.9.3",
     "tailwind-merge": "^3.3.1",
     "@aviala-design/icons": "2.4.0",
-    "@aviala-design/tokens": "2.5.4"
+    "@aviala-design/tokens": "2.6.0"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
     "react-hook-form": ">=7.50"
   },
+  "peerDependenciesMeta": {
+    "react-hook-form": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@hookform/resolvers": "^5.2.1",
     "@types/react": "^19.1.8",
@@ -68,8 +79,10 @@
     "build": "tsup && node scripts/copy-css.mjs && node scripts/generate-props.mjs && node scripts/aggregate-changelogs.mjs",
     "build:styles": "node scripts/copy-css.mjs",
     "changelog:aggregate": "node scripts/aggregate-changelogs.mjs",
+    "changelog:check": "node scripts/check-changelog-pairing.mjs",
     "changelog:stamp": "node scripts/stamp-unreleased.mjs",
     "dev": "tsup --watch",
+    "lint": "eslint .",
     "test": "vitest run",
     "typecheck": "tsc --noEmit",
     "clean": "rimraf dist"