@auronui/styles 1.0.0

package/components/checkbox.css

@@ -0,0 +1,268 @@
+/* ==========================================================================
+   Base checkbox styles
+   ========================================================================== */
+
+.checkbox {
+  @apply flex gap-3 outline-none no-highlight;
+
+  cursor: var(--cursor-interactive);
+
+  /* Align center when there's no description */
+  &:not(:has([data-slot="description"])) {
+    @apply items-center;
+  }
+
+  /* Align start when there's a description */
+  &:has([data-slot="description"]) {
+    @apply items-start;
+  }
+
+  [data-slot="label"] {
+    @apply select-none;
+  }
+
+  [data-slot="description"] {
+    @apply text-wrap select-none;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Indicator styles */
+  &[data-state="checked"],
+  &[data-state="indeterminate"] {
+    .checkbox__indicator {
+      border-color: var(--accent-foreground);
+      background: var(--accent-hover);
+    }
+  }
+
+  /* Checkmark SVG indicator */
+  [data-slot="checkbox-default-indicator--checkmark"] {
+    @apply size-2.5 stroke-[2.5px] text-accent-foreground;
+
+    /**
+     * Transitions
+     */
+    @apply transition-all duration-300 motion-reduce:transition-none;
+  }
+
+  &[data-state="checked"] [data-slot="checkbox-default-indicator--checkmark"] {
+    transition: stroke-dashoffset 300ms linear 300ms;
+  }
+
+  /* Invalid + Selected: checkmark icon color */
+  &[aria-invalid="true"][data-state="checked"] [data-slot="checkbox-default-indicator--checkmark"],
+  &[aria-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"],
+  &[aria-invalid="true"][data-state="checked"] [data-slot="checkbox-default-indicator--checkmark"],
+  &[aria-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"] {
+    @apply text-danger-foreground;
+  }
+
+  /* Indeterminate line indicator */
+  &[data-state="indeterminate"] {
+    [data-slot="checkbox-default-indicator--indeterminate"] {
+      @apply size-3;
+    }
+  }
+
+  /* Invalid + Indeterminate: indeterminate icon color */
+  &[data-state="indeterminate"][aria-invalid="true"]
+    [data-slot="checkbox-default-indicator--indeterminate"],
+  &[data-state="indeterminate"][aria-invalid="true"]
+    [data-slot="checkbox-default-indicator--indeterminate"] {
+    @apply text-danger-foreground;
+  }
+}
+
+/* ==========================================================================
+   Checkbox control (the square button)
+   ========================================================================== */
+
+.checkbox__control {
+  @apply relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border-secondary bg-field shadow-field outline-none no-highlight;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    background-color 300ms var(--ease-out),
+    transform 300ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  cursor: var(--cursor-interactive);
+
+  /* Add top margin when there's a description */
+  .checkbox:has([data-slot="description"]) & {
+    @apply mt-0.5;
+  }
+
+  /* Background indicator pseudo-element */
+  &::before {
+    @apply pointer-events-none absolute inset-0 z-0 origin-center scale-70 rounded-md bg-accent opacity-0 content-[''];
+
+    /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+    transition:
+      scale 300ms var(--ease-linear),
+      opacity 300ms var(--ease-linear),
+      background-color 300ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+  }
+
+  /* Interactive states */
+  /* Focus */
+  .checkbox:focus-visible &,
+  .checkbox:focus-visible & {
+    @apply status-focused;
+  }
+
+  /* Hover */
+  .checkbox:hover &,
+  .checkbox:hover & {
+    @apply border-field-border-hover;
+
+    &::before {
+      @apply bg-accent-hover;
+    }
+  }
+
+  /* Pressed */
+  .checkbox:active &,
+  .checkbox:active & {
+  }
+
+  /* Selection states */
+  /* Selected */
+  .checkbox[aria-checked="true"] &,
+  .checkbox[data-state="checked"] & {
+    @apply border-transparent text-accent-foreground border-0;
+
+    &::before {
+      @apply scale-100 opacity-100;
+    }
+  }
+
+  /* Indeterminate */
+  .checkbox[data-state="indeterminate"] & {
+    @apply bg-accent text-accent-foreground;
+  }
+
+  /* Indeterminate + Pressed */
+  .checkbox:active[data-state="indeterminate"] &,
+  .checkbox:active[data-state="indeterminate"] & {
+    @apply bg-accent-hover;
+  }
+
+  /* Validation states */
+  /* Invalid (only when not selected/indeterminate) */
+  .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-state="checked"]):not(
+      [data-state="indeterminate"]
+    )
+    &,
+  .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-state="checked"]):not(
+      [data-state="indeterminate"]
+    )
+    & {
+    @apply status-invalid-field;
+  }
+
+  /* Invalid + Selected */
+  .checkbox[aria-invalid="true"][aria-checked="true"] &,
+  .checkbox[aria-invalid="true"][data-state="checked"] &,
+  .checkbox[aria-invalid="true"][aria-checked="true"] &,
+  .checkbox[aria-invalid="true"][data-state="checked"] & {
+    @apply border-transparent bg-danger text-danger-foreground;
+
+    &::before {
+      @apply scale-100 bg-danger opacity-100;
+    }
+  }
+
+  /* Invalid + Indeterminate */
+  .checkbox[data-state="indeterminate"][aria-invalid="true"] &,
+  .checkbox[data-state="indeterminate"][aria-invalid="true"] & {
+    @apply bg-danger text-danger-foreground;
+  }
+}
+
+/* ==========================================================================
+   Checkbox indicator
+   ========================================================================== */
+
+.checkbox__indicator {
+  @apply relative z-10 flex size-3 items-center justify-center;
+
+  & svg {
+    @apply transform-gpu;
+  }
+}
+
+/* ==========================================================================
+   Checkbox content wrapper
+   ========================================================================== */
+
+.checkbox__content {
+  @apply flex flex-col gap-0;
+}
+
+/* ==========================================================================
+   Disabled modifier
+   ========================================================================== */
+
+.checkbox--disabled {
+  @apply status-disabled;
+}
+
+/* ==========================================================================
+   Variant property definitions
+   ========================================================================== */
+
+.checkbox--primary {
+  /* Default styles */
+}
+
+.checkbox--secondary .checkbox__control {
+  @apply shadow-none;
+  background-color: var(--checkbox-control-bg);
+
+  --checkbox-control-bg: var(--color-default);
+
+  /* Hover state */
+  .checkbox:hover &,
+  .checkbox:hover & {
+    @apply border-field-border-hover;
+  }
+}
+
+/* Unselected state background for secondary variant */
+.checkbox--secondary:not([aria-checked="true"]):not([data-state="checked"]):not(
+    [data-state="indeterminate"]
+  )
+  .checkbox__control {
+  background-color: var(--checkbox-control-bg);
+}
+
+/* Selected state on secondary variant */
+.checkbox--secondary[aria-checked="true"] .checkbox__control,
+.checkbox--secondary[data-state="checked"] .checkbox__control {
+  &::before {
+    @apply bg-accent;
+  }
+}
+
+/* Indeterminate state on secondary variant */
+.checkbox--secondary[data-state="indeterminate"] .checkbox__control {
+  @apply bg-accent;
+
+  &::before {
+    @apply bg-accent;
+  }
+}

package/components/chip.css

@@ -0,0 +1,227 @@
+/* ==========================================================================
+   Chip - Compact pill-shaped element for tags, statuses, filters, and labels.
+   ========================================================================== */
+
+/* Base styles */
+.chip {
+  @apply inline-flex shrink-0 items-center gap-1 rounded-full px-2.5 text-xs leading-none font-medium align-middle;
+
+  /* Default tokens */
+  --chip-bg: transparent;
+  --chip-fg: currentColor;
+  --chip-border: transparent;
+
+  height: 1.75rem; /* 28px — md default */
+  background-color: var(--chip-bg);
+  color: var(--chip-fg);
+  border: 1px solid var(--chip-border);
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.chip__label {
+  @apply inline-flex items-center px-0.5 leading-none;
+}
+
+.chip__start-content,
+.chip__end-content {
+  @apply inline-flex shrink-0 items-center justify-center;
+}
+
+.chip__start-content > svg,
+.chip__end-content > svg {
+  @apply h-3.5 w-3.5;
+}
+
+.chip__dot {
+  @apply inline-block shrink-0 rounded-full;
+  width: 0.5rem;
+  height: 0.5rem;
+  background-color: currentColor;
+}
+
+.chip__close-button {
+  @apply inline-flex shrink-0 items-center justify-center rounded-full cursor-pointer outline-none;
+  width: 1rem;
+  height: 1rem;
+  margin-inline-start: 0.125rem;
+  margin-inline-end: -0.25rem;
+  color: currentColor;
+  opacity: 0.7;
+  background-color: transparent;
+  border: none;
+  transition: opacity 0.15s ease, background-color 0.15s ease;
+}
+
+.chip__close-button:hover {
+  opacity: 1;
+  background-color: color-mix(in srgb, currentColor 15%, transparent);
+}
+
+.chip__close-button:focus-visible {
+  outline: 2px solid var(--color-focus, currentColor);
+  outline-offset: 1px;
+}
+
+.chip__close-button > svg {
+  @apply h-3 w-3;
+}
+
+/* ==========================================================================
+   Color variants - set foreground color
+   ========================================================================== */
+
+.chip--accent {
+  --chip-fg: var(--color-accent);
+}
+
+.chip--danger {
+  --chip-fg: var(--color-danger);
+}
+
+.chip--default {
+  --chip-fg: var(--color-default-foreground);
+}
+
+.chip--success {
+  --chip-fg: var(--color-success);
+}
+
+.chip--warning {
+  --chip-fg: var(--color-warning);
+}
+
+/* ==========================================================================
+   Variant styles
+   ========================================================================== */
+
+/* Solid: filled background using the color, contrasting foreground */
+.chip--solid {
+  /* Compound variants below set --chip-bg / --chip-fg per color */
+}
+
+/* Soft: muted/translucent background, colored foreground */
+.chip--soft {
+  /* Compound variants below set --chip-bg / --chip-fg per color */
+}
+
+/* Outlined: transparent background with a colored border */
+.chip--outlined {
+  --chip-bg: transparent;
+  --chip-border: color-mix(in srgb, currentColor 45%, transparent);
+}
+
+/* Text: no background, no border — just colored text */
+.chip--text {
+  --chip-bg: transparent;
+  --chip-border: transparent;
+  @apply px-1;
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.chip--sm {
+  @apply px-2 text-[11px];
+  height: 1.375rem; /* 22px */
+  gap: 0.1875rem;
+}
+
+.chip--sm.chip--text {
+  @apply px-1;
+}
+
+.chip--sm .chip__close-button {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.chip--sm .chip__dot {
+  width: 0.4375rem;
+  height: 0.4375rem;
+}
+
+.chip--md {
+  /* Defaults applied on .chip */
+}
+
+.chip--lg {
+  @apply px-3 text-sm;
+  height: 2rem; /* 32px */
+  gap: 0.375rem;
+}
+
+.chip--lg.chip--text {
+  @apply px-1.5;
+}
+
+.chip--lg .chip__close-button {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.chip--lg .chip__dot {
+  width: 0.5625rem;
+  height: 0.5625rem;
+}
+
+/* ==========================================================================
+   Compound variants - Solid (filled backgrounds)
+   ========================================================================== */
+
+.chip--solid.chip--default {
+  --chip-bg: var(--color-default);
+  --chip-fg: var(--color-default-foreground);
+}
+
+.chip--solid.chip--accent {
+  --chip-bg: var(--color-accent);
+  --chip-fg: var(--color-accent-foreground);
+}
+
+.chip--solid.chip--success {
+  --chip-bg: var(--color-success);
+  --chip-fg: var(--color-success-foreground);
+}
+
+.chip--solid.chip--warning {
+  --chip-bg: var(--color-warning);
+  --chip-fg: var(--color-warning-foreground);
+}
+
+.chip--solid.chip--danger {
+  --chip-bg: var(--color-danger);
+  --chip-fg: var(--color-danger-foreground);
+}
+
+/* ==========================================================================
+   Compound variants - Soft (muted backgrounds)
+   ========================================================================== */
+
+.chip--soft.chip--default {
+  --chip-bg: color-mix(in srgb, var(--color-default) 40%, transparent);
+  --chip-fg: var(--color-default-foreground);
+}
+
+.chip--soft.chip--accent {
+  --chip-bg: var(--color-accent-soft);
+  --chip-fg: var(--color-accent-soft-foreground);
+}
+
+.chip--soft.chip--success {
+  --chip-bg: var(--color-success-soft);
+  --chip-fg: var(--color-success-soft-foreground);
+}
+
+.chip--soft.chip--warning {
+  --chip-bg: var(--color-warning-soft);
+  --chip-fg: var(--color-warning-soft-foreground);
+}
+
+.chip--soft.chip--danger {
+  --chip-bg: var(--color-danger-soft);
+  --chip-fg: var(--color-danger-soft-foreground);
+}

package/components/close-button.css

@@ -0,0 +1,65 @@
+/* Close Button component styles */
+
+/* Base close button styles */
+.close-button {
+  @apply relative isolate inline-flex h-6 w-6 shrink-0 origin-center items-center justify-center rounded-xl p-1 select-none no-highlight;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    transform 300ms var(--ease-out-quart),
+    color 300ms var(--ease-out),
+    background-color 300ms var(--ease-out),
+    box-shadow 300ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+
+  /* Focus visible state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Pending state */
+  &[data-pending="true"] {
+    @apply status-pending;
+  }
+
+  /* SVG icon styling*/
+  & svg {
+    @apply pointer-events-none;
+    @apply size-4 shrink-0 self-center;
+    @apply -mx-0.5 my-0.5;
+  }
+}
+
+/* Variants */
+.close-button--default {
+  @apply bg-default text-muted;
+
+  &:active,
+  &[data-pressed="true"] {
+  }
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-default-hover;
+    }
+  }
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.93);
+  }
+}

package/components/collapsible-group.css

@@ -0,0 +1,7 @@
+/* Base collapsible-group styles */
+.collapsible-group {
+  @apply w-full;
+
+  /* Performance optimization - contain layout changes */
+  contain: layout style;
+}

package/components/collapsible.css

@@ -0,0 +1,74 @@
+/* Base collapsible styles */
+.collapsible {
+  @apply relative w-full;
+}
+
+.collapsible__trigger {
+  cursor: var(--cursor-interactive);
+  @apply flex w-full items-center text-left font-medium no-highlight rounded-lg px-4 py-3.5 text-sm;
+
+  transition:
+    background-color 200ms var(--ease-out),
+    color 200ms var(--ease-out),
+    opacity 300ms var(--ease-out),
+    box-shadow 300ms var(--ease-out),
+    transform 120ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Hover state — subtle surface lift */
+  @media (hover: hover) {
+    &:hover {
+      background-color: color-mix(in oklab, var(--color-foreground) 4%, transparent);
+    }
+  }
+
+  /* Pressed state — tactile feedback */
+  &:active:not([aria-disabled="true"]),
+  &[data-pressed="true"] {
+    transform: scale(0.995);
+    background-color: color-mix(in oklab, var(--color-foreground) 7%, transparent);
+  }
+
+  &[aria-expanded="true"] {
+    @apply text-foreground;
+  }
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+.collapsible__indicator {
+  @apply ml-auto size-4 shrink-0 text-muted;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  transition:
+    transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+    color 200ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Expanded state — rotate + color lift */
+  &[data-state="open"] {
+    @apply -rotate-180 text-foreground;
+  }
+}
+
+.collapsible__body {
+  @apply text-sm;
+
+  /* Height/opacity animation driven by motion-v in CollapsibleContent.vue */
+}
+
+.collapsible__body-inner {
+  @apply px-4 pt-1 pb-4 text-sm text-muted leading-relaxed;
+}