@auronui/styles 1.0.19 → 1.0.21

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auronui/styles",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "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: {