@auronui/styles 1.0.20 → 1.0.22

package/components/button-group.css

@@ -47,11 +47,11 @@
    Outline variant — group owns the single outer border
    ========================================================================== */
 
-.button-group:has(.button--outline) {
+.button-group:has(.button--bordered) {
   @apply border border-border;
 }
 
-.button-group .button--outline {
+.button-group .button--bordered {
   @apply border-0;
 }
 

package/components/button.css

@@ -135,7 +135,7 @@
 }
 
 /* outline: same press logic as ghost */
-.button--outline {
+.button--bordered {
   --button-bg: transparent;
   --button-bg-hover: var(--btn-tint-bg, var(--color-default));
   --button-bg-pressed: var(--btn-tint-bg-hover, var(--color-default-hover));

package/components/chip.css

@@ -108,7 +108,7 @@
 }
 
 /* Outlined: transparent background with a colored border */
-.chip--outlined {
+.chip--bordered {
   --chip-bg: transparent;
   --chip-border: color-mix(in srgb, currentColor 45%, transparent);
 }

package/components/color-slider.css

@@ -53,17 +53,9 @@
   }
 
   .color-slider__track {
-    @apply relative rounded-full;
+    @apply relative;
 
     grid-area: track;
-    /* Edge cap pseudo-elements */
-    &::before,
-    &::after {
-      content: "";
-      position: absolute;
-      z-index: 0;
-      pointer-events: none;
-    }
   }
 
   .color-slider__thumb {
@@ -118,44 +110,12 @@
     flex-direction: column;
 
     .color-slider__track {
-      @apply h-5 justify-self-center rounded-none;
-      width: calc(100% - 1.25rem);
+      @apply h-5 w-full;
 
       /* Default border for visibility against similar backgrounds */
       box-shadow:
         inset 0 1px 0 0 rgba(0, 0, 0, 0.1),
         inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-
-      /* Edge caps for horizontal orientation */
-      &::before,
-      &::after {
-        @apply top-0 h-full;
-        width: 0.625rem; /* Half thumb width + 2px gap */
-      }
-
-      &::before {
-        left: -0.625rem;
-        border-top-left-radius: 999px;
-        border-bottom-left-radius: 999px;
-        box-shadow:
-          inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
-          inset 0 1px 0 0 rgba(0, 0, 0, 0.1),
-          inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-        background:
-          linear-gradient(var(--track-start-color, transparent)),
-          repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
-      }
-
-      &::after {
-        right: -0.625rem;
-        border-top-right-radius: 999px;
-        border-bottom-right-radius: 999px;
-        box-shadow:
-          inset -1px 0 0 0 rgba(0, 0, 0, 0.1),
-          inset 0 1px 0 0 rgba(0, 0, 0, 0.1),
-          inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-        background-color: var(--track-end-color, transparent);
-      }
     }
 
     .color-slider__thumb {
@@ -213,46 +173,12 @@
     }
 
     .color-slider__track {
-      @apply w-5 justify-self-center rounded-none;
-      height: calc(100% - 1.25rem);
+      @apply w-5 h-full justify-self-center;
 
       /* Left and right borders for vertical track */
       box-shadow:
         inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
         inset -1px 0 0 0 rgba(0, 0, 0, 0.1);
-
-      /* Edge caps for vertical orientation */
-      &::before,
-      &::after {
-        @apply left-0 w-full;
-        height: 0.625rem; /* Half thumb height + 2px gap */
-      }
-
-      &::before {
-        bottom: -0.625rem;
-        border-bottom-left-radius: 999px;
-        border-bottom-right-radius: 999px;
-        /* Left, right, and bottom borders for bottom cap */
-        box-shadow:
-          inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
-          inset -1px 0 0 0 rgba(0, 0, 0, 0.1),
-          inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-        background:
-          linear-gradient(var(--track-start-color, transparent)),
-          repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
-      }
-
-      &::after {
-        top: -0.625rem;
-        border-top-left-radius: 999px;
-        border-top-right-radius: 999px;
-        /* Left, right, and top borders for top cap */
-        box-shadow:
-          inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
-          inset -1px 0 0 0 rgba(0, 0, 0, 0.1),
-          inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
-        background-color: var(--track-end-color, transparent);
-      }
     }
 
     .color-slider__thumb {

package/components/drawer.css

@@ -159,6 +159,129 @@
   &[data-state="closed"] { animation: drawer-slide-out-bottom 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
 }
 
+/**
+ * Modifier: dialog--inline
+ * Overrides fixed positioning to absolute so the panel is scoped to the nearest
+ * positioned ancestor instead of the viewport. The container must have
+ * position:relative and overflow:hidden set by the consumer.
+ */
+.drawer__dialog--inline {
+  position: absolute;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Dock mode — panel shifts content in the DOM rather than overlaying it
+ * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * Container: dock-container
+ * The Drawer root element in dock mode. Wrap both DrawerMain and DrawerContent.
+ */
+.drawer__dock-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.drawer__dock-container--right,
+.drawer__dock-container--left {
+  flex-direction: row;
+}
+
+.drawer__dock-container--top,
+.drawer__dock-container--bottom {
+  flex-direction: column;
+}
+
+/**
+ * Element: main
+ * The main content area inside a dock Drawer. Fills remaining flex space.
+ */
+.drawer__main {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+/**
+ * Modifier: dialog--dock
+ * The drawer panel in dock mode. Renders as a flex item alongside DrawerMain.
+ * Overrides the fixed/absolute positioning from the base dialog class.
+ */
+.drawer__dialog--dock {
+  position: relative;
+  flex-shrink: 0;
+}
+
+/* Reset viewport-anchored positioning from placement modifiers */
+.drawer__dialog--dock.drawer__dialog--right,
+.drawer__dialog--dock.drawer__dialog--left {
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  max-width: none;
+}
+
+.drawer__dialog--dock.drawer__dialog--right {
+  order: 1; /* appears after main content */
+}
+
+.drawer__dialog--dock.drawer__dialog--left {
+  order: -1; /* appears before main content */
+}
+
+.drawer__dialog--dock.drawer__dialog--top,
+.drawer__dialog--dock.drawer__dialog--bottom {
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  width: 100%;
+  max-height: none;
+  border-radius: 0;
+}
+
+.drawer__dialog--dock.drawer__dialog--top {
+  order: -1; /* appears above main content */
+}
+
+.drawer__dialog--dock.drawer__dialog--bottom {
+  order: 1; /* appears below main content */
+}
+
+/**
+ * Vue Transition: drawer-dock-h — horizontal slide (left / right placement)
+ */
+.drawer-dock-h-enter-active,
+.drawer-dock-h-leave-active {
+  transition: width 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+  overflow: hidden !important;
+  @apply motion-reduce:transition-none;
+}
+
+.drawer-dock-h-enter-from,
+.drawer-dock-h-leave-to {
+  width: 0 !important;
+}
+
+/**
+ * Vue Transition: drawer-dock-v — vertical slide (top / bottom placement)
+ */
+.drawer-dock-v-enter-active,
+.drawer-dock-v-leave-active {
+  transition: height 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+  overflow: hidden !important;
+  @apply motion-reduce:transition-none;
+}
+
+.drawer-dock-v-enter-from,
+.drawer-dock-v-leave-to {
+  height: 0 !important;
+}
+
 /**
  * Element: header
  */

package/components/progress-bar.css

@@ -35,8 +35,10 @@
   }
 
   .progress-bar__fill {
-    @apply absolute top-0 left-0 h-full rounded-full w-full;
+    @apply absolute top-0 left-0 h-full rounded-full;
 
+    /* Width is driven by the CSS custom property set from JS */
+    width: var(--progress-bar-value, 0%);
     background-color: var(--progress-bar-fill);
 
     /**
@@ -47,9 +49,10 @@
     @apply motion-reduce:transition-none;
   }
 
-  /* Indeterminate state - when no aria-valuenow is set */
-  .progress-bar__fill[data-state="indeterminate"] {
-    @apply w-2/5;
+  /* Indeterminate state — Reka sets data-state="indeterminate" when modelValue is null */
+  .progress-bar__fill[data-state="indeterminate"],
+  .progress-bar__fill--indeterminate {
+    width: 40%;
 
     animation: progress-bar-indeterminate 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
 
@@ -109,6 +112,14 @@
   --progress-bar-fill: var(--color-default-foreground);
 }
 
+.progress-bar--primary {
+  --progress-bar-fill: var(--color-primary);
+}
+
+.progress-bar--secondary {
+  --progress-bar-fill: var(--color-secondary);
+}
+
 .progress-bar--accent {
   --progress-bar-fill: var(--color-accent);
 }

package/components/slider.css

@@ -27,7 +27,7 @@
   }
 
   .slider__fill {
-    @apply pointer-events-none absolute rounded-full bg-accent;
+    @apply pointer-events-none absolute bg-accent;
   }
 
   .slider__thumb {
@@ -91,7 +91,8 @@
     flex-direction: column;
 
     .slider__track {
-      @apply h-5 w-full overflow-visible;
+      /* overflow-hidden clips the fill to the rounded track shape; thumb is a sibling so it is unaffected */
+      @apply h-5 w-full overflow-hidden;
     }
 
     .slider__fill {
@@ -132,7 +133,7 @@
     }
 
     .slider__track {
-      @apply h-full w-5 overflow-visible;
+      @apply h-full w-5 overflow-hidden;
       justify-self: center;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auronui/styles",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "Auron core styles — adapted for Reka UI",
   "type": "module",
   "license": "MIT",

package/src/components/button/__tests__/button.styles.test.ts

@@ -15,32 +15,32 @@ describe('buttonVariants (slots)', () => {
     expect(buttonVariants({}).base()).toContain('button')
   })
 
-  it('primary variant (default)', () => {
-    expect(buttonVariants({ variant: 'primary' }).base()).toContain('button--primary')
+  it('primary variant (legacy alias → solid)', () => {
+    expect(buttonVariants({ variant: 'primary' }).base()).toContain('button--solid')
   })
 
-  it('success variant', () => {
-    expect(buttonVariants({ variant: 'success' }).base()).toContain('button--success')
+  it('success variant (legacy alias → solid)', () => {
+    expect(buttonVariants({ variant: 'success' }).base()).toContain('button--solid')
   })
 
-  it('success-soft variant', () => {
-    expect(buttonVariants({ variant: 'success-soft' }).base()).toContain('button--success-soft')
+  it('success-soft variant (legacy alias → soft)', () => {
+    expect(buttonVariants({ variant: 'success-soft' }).base()).toContain('button--soft')
   })
 
-  it('warning variant', () => {
-    expect(buttonVariants({ variant: 'warning' }).base()).toContain('button--warning')
+  it('warning variant (legacy alias → solid)', () => {
+    expect(buttonVariants({ variant: 'warning' }).base()).toContain('button--solid')
   })
 
-  it('warning-soft variant', () => {
-    expect(buttonVariants({ variant: 'warning-soft' }).base()).toContain('button--warning-soft')
+  it('warning-soft variant (legacy alias → soft)', () => {
+    expect(buttonVariants({ variant: 'warning-soft' }).base()).toContain('button--soft')
   })
 
-  it('danger variant', () => {
-    expect(buttonVariants({ variant: 'danger' }).base()).toContain('button--danger')
+  it('danger variant (legacy alias → solid)', () => {
+    expect(buttonVariants({ variant: 'danger' }).base()).toContain('button--solid')
   })
 
-  it('danger-soft variant', () => {
-    expect(buttonVariants({ variant: 'danger-soft' }).base()).toContain('button--danger-soft')
+  it('danger-soft variant (legacy alias → soft)', () => {
+    expect(buttonVariants({ variant: 'danger-soft' }).base()).toContain('button--soft')
   })
 
   it('isLoading=true adds button--loading to base', () => {

package/src/components/button/button.styles.ts

@@ -51,7 +51,7 @@ export const buttonVariants = tv({
       // Current API
       solid: { base: "button--solid" },
       default: { base: "button--default" },
-      outline: { base: "button--outline" },
+      bordered: { base: "button--bordered" },
       ghost: { base: "button--ghost" },
       soft: { base: "button--soft" },
       // Legacy aliases — resolved to new variant+color in Button.vue

package/src/components/chip/chip.styles.ts

@@ -52,8 +52,8 @@ export const chipVariants = tv({
       soft: {
         base: "chip--soft",
       },
-      outlined: {
-        base: "chip--outlined",
+      bordered: {
+        base: "chip--bordered",
       },
       text: {
         base: "chip--text",

package/src/components/drawer/drawer.styles.ts

@@ -18,24 +18,40 @@ export const drawerVariants = tv({
     header: "drawer__header",
     heading: "drawer__heading",
     trigger: "drawer__trigger",
+    dockContainer: "drawer__dock-container",
+    main: "drawer__main",
   },
   variants: {
+    inline: {
+      true: {
+        dialog: "drawer__dialog--inline",
+      },
+    },
+    dock: {
+      true: {
+        dialog: "drawer__dialog--dock",
+      },
+    },
     placement: {
       bottom: {
         content: "drawer__content--bottom",
         dialog: "drawer__dialog--bottom",
+        dockContainer: "drawer__dock-container--bottom",
       },
       left: {
         content: "drawer__content--left",
         dialog: "drawer__dialog--left",
+        dockContainer: "drawer__dock-container--left",
       },
       right: {
         content: "drawer__content--right",
         dialog: "drawer__dialog--right",
+        dockContainer: "drawer__dock-container--right",
       },
       top: {
         content: "drawer__content--top",
         dialog: "drawer__dialog--top",
+        dockContainer: "drawer__dock-container--top",
       },
     },
     variant: {

package/src/components/progress-bar/progress-bar.styles.ts

@@ -17,30 +17,30 @@ export const progressBarVariants = tv({
     label: "progress-bar__label text-sm font-medium text-foreground",
     value: "progress-bar__value text-sm font-medium text-foreground",
     track: "progress-bar__track",
-    indicator: "progress-bar__indicator transition-transform duration-300 ease-out",
+    indicator: "progress-bar__fill",
   },
   variants: {
     color: {
       default: {
-        indicator: "bg-default-400 progress-bar--default",
+        base: "progress-bar--default",
       },
       primary: {
-        indicator: "bg-primary progress-bar--primary",
+        base: "progress-bar--primary",
       },
       secondary: {
-        indicator: "bg-secondary progress-bar--secondary",
+        base: "progress-bar--secondary",
       },
       success: {
-        indicator: "bg-success progress-bar--success",
+        base: "progress-bar--success",
       },
       warning: {
-        indicator: "bg-warning progress-bar--warning",
+        base: "progress-bar--warning",
       },
       danger: {
-        indicator: "bg-danger progress-bar--danger",
+        base: "progress-bar--danger",
       },
       accent: {
-        indicator: "bg-primary progress-bar--accent",
+        base: "progress-bar--accent",
       },
     },
     size: {
@@ -78,12 +78,13 @@ export const progressBarVariants = tv({
     },
     isStriped: {
       true: {
-        indicator: "progress-bar__indicator--striped",
+        indicator: "progress-bar__fill--striped",
       },
     },
     isIndeterminate: {
       true: {
-        indicator: "progress-bar__indicator--indeterminate animate-indeterminate",
+        // data-state="indeterminate" (set by Reka) drives the CSS animation
+        indicator: "progress-bar__fill--indeterminate",
       },
     },
     isDisabled: {

package/themes/default/variables.css

@@ -61,6 +61,12 @@
     --default: oklch(94% 0.001 286.375);
     --default-foreground: var(--eclipse);
 
+    --primary: oklch(0.55 0.2 262);
+    --primary-foreground: var(--snow);
+
+    --secondary: oklch(0.55 0.22 305);
+    --secondary-foreground: var(--snow);
+
     --accent: oklch(0.6204 0.195 253.83);
     --accent-foreground: var(--snow);
 

package/themes/shared/theme.css

@@ -17,6 +17,12 @@
 
   --color-muted: var(--muted);
 
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);