@auronui/styles 1.0.0

package/components/link.css

@@ -0,0 +1,144 @@
+/* Base link styles */
+.link {
+  @apply relative inline-flex h-fit w-fit items-center rounded-xl text-sm font-medium text-link underline decoration-separator-tertiary decoration-[1.5px] underline-offset-4 no-highlight;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    color 300ms var(--ease-smooth),
+    text-decoration-color 300ms var(--ease-out),
+    background-color 300ms var(--ease-smooth),
+    box-shadow 300ms var(--ease-out),
+    opacity 300ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply decoration-muted;
+
+      .link__icon {
+        @apply opacity-100;
+      }
+    }
+  }
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+
+    .link__icon {
+      @apply opacity-100;
+    }
+  }
+
+  /* Disabled state */
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  .link__icon {
+    @apply pointer-events-none inline-flex size-2 shrink-0 items-center justify-center text-current opacity-60;
+
+    /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+    transition: opacity 300ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+
+    & svg {
+      @apply transform-gpu;
+    }
+  }
+
+  .link__icon[data-default-icon="true"] {
+    @apply ml-1 pb-1.5;
+  }
+
+  /* Handle Link with Button Variants */
+  &.button {
+    @apply gap-0 no-underline;
+  }
+}
+
+/* ====================== */
+/* = Color variants     = */
+/* ====================== */
+
+.link--color-default {
+  color: var(--color-default-foreground);
+}
+
+.link--color-primary {
+  color: var(--color-accent);
+}
+
+.link--color-success {
+  color: var(--color-success);
+}
+
+.link--color-warning {
+  color: var(--color-warning);
+}
+
+.link--color-danger {
+  color: var(--color-danger);
+}
+
+.link--color-foreground {
+  color: var(--color-foreground);
+}
+
+/* ========================= */
+/* = Underline variants    = */
+/* ========================= */
+
+/* none: never underlined */
+.link--underline-none {
+  @apply no-underline;
+}
+
+/* hover: underline only on hover */
+.link--underline-hover {
+  @apply no-underline;
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply underline decoration-current;
+    }
+  }
+}
+
+/* always: always underlined (default base already underlines, this is explicit) */
+.link--underline-always {
+  @apply underline decoration-current;
+}
+
+/* active: underline only while pressed */
+.link--underline-active {
+  @apply no-underline;
+
+  &:active,
+  &[data-pressed="true"] {
+    @apply underline decoration-current;
+  }
+}
+
+/* focus: underline only when focused */
+.link--underline-focus {
+  @apply no-underline;
+
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply underline decoration-current;
+  }
+}

package/components/list-box-item.css

@@ -0,0 +1,29 @@
+/* ==========================================================================
+   List-box item
+   ========================================================================== */
+
+.list-box-item {
+  @apply list-item min-h-8 gap-2 rounded-lg text-sm;
+
+  &:has(.list-box-item__indicator) {
+    @apply pr-7;
+  }
+
+  &[aria-selected="true"],
+  &[data-state="checked"] {
+    @apply bg-default font-medium text-foreground;
+  }
+}
+
+.list-box-item__indicator {
+  @apply list-item-indicator right-2 text-foreground;
+
+  [data-slot="list-box-item-indicator--checkmark"] {
+    @apply size-3;
+  }
+}
+
+.list-box-item--danger {
+  .list-box-item__indicator { @apply text-danger; }
+  [data-slot="label"] { @apply text-danger; }
+}

package/components/list-box-section.css

@@ -0,0 +1,13 @@
+/* ==========================================================================
+   List-box section
+   ========================================================================== */
+
+.list-box-section {
+  @apply list-section;
+}
+.list-box-section__label {
+  @apply list-section-label;
+}
+.list-box-section__separator {
+  @apply list-section-separator;
+}

package/components/list-box.css

@@ -0,0 +1,11 @@
+/* ==========================================================================
+   List-box container
+   ========================================================================== */
+
+.list-box {
+  @apply list-container gap-0.5 text-sm text-foreground surface-card;
+
+  [data-slot="separator"][data-orientation="horizontal"] {
+    @apply mx-1 my-0.5 h-px bg-separator;
+  }
+}

package/components/menu-item.css

@@ -0,0 +1,68 @@
+/* ==========================================================================
+   Menu item
+   ========================================================================== */
+
+.menu-item {
+  @apply list-item min-h-9 gap-3 rounded-lg text-sm;
+
+  [data-slot="submenu-indicator"] svg {
+    @apply size-3.5;
+  }
+
+  &:has(.menu-item__indicator) {
+    @apply pl-7;
+  }
+
+  &[data-has-submenu="true"]:has(.menu-item__indicator) {
+    @apply pr-7 pl-2;
+  }
+
+  &[aria-checked="true"],
+  &[aria-selected="true"],
+  &[data-state="checked"] {
+    @apply bg-default font-medium text-foreground;
+
+    [data-slot="menu-item-indicator--checkmark"] {
+      transition: stroke-dashoffset 300ms linear;
+      @apply motion-reduce:transition-none;
+    }
+
+    [data-slot="menu-item-indicator--dot"] {
+      @apply scale-100 opacity-100;
+    }
+  }
+}
+
+.menu-item__indicator {
+  @apply list-item-indicator left-2 text-muted;
+
+  .menu-item[data-has-submenu="true"] & {
+    @apply right-2 left-auto;
+  }
+
+  [data-slot="menu-item-indicator--checkmark"] {
+    @apply size-2.5;
+
+    .menu-item[data-selection-mode="multiple"] & {
+      @apply transition-all duration-300 motion-reduce:transition-none;
+    }
+  }
+
+  [data-slot="menu-item-indicator--dot"] {
+    @apply size-2 scale-70 opacity-0;
+
+    .menu-item[data-selection-mode="multiple"] & {
+      @apply transition-all duration-300 motion-reduce:transition-none;
+    }
+  }
+}
+
+.menu-item__indicator--submenu {
+  @apply text-muted;
+  svg { @apply size-3; }
+}
+
+.menu-item--danger {
+  .menu-item__indicator { @apply text-danger; }
+  [data-slot="label"] { @apply text-danger; }
+}

package/components/menu-section.css

@@ -0,0 +1,18 @@
+/* ==========================================================================
+   Menu section
+   ========================================================================== */
+
+.menu-section {
+  @apply list-section py-1;
+
+  /* & + .menu-section {
+    @apply mt-0.5 border-t border-border pt-1.5;
+  } */
+}
+
+.menu-section__label {
+  @apply list-section-label;
+}
+.menu-section__separator {
+  @apply list-section-separator;
+}

package/components/menu.css

@@ -0,0 +1,7 @@
+/* ==========================================================================
+   Menu container
+   ========================================================================== */
+
+.menu, .dropdown__menu {
+  @apply list-container relative gap-1 overflow-clip surface-card;
+}

package/components/meter.css

@@ -0,0 +1,104 @@
+/* ==========================================================================
+   Meter - A quantity indicator within a known range
+   ========================================================================== */
+
+/* Base styles */
+.meter {
+  @apply grid w-full gap-1;
+  grid-template-areas:
+    "label output"
+    "track track";
+  grid-template-columns: 1fr auto;
+
+  /* Default color tokens (accent) */
+  --meter-fill: var(--color-accent);
+
+  [data-slot="label"] {
+    @apply w-fit text-sm font-medium;
+
+    grid-area: label;
+  }
+
+  .meter__output {
+    @apply text-sm font-medium tabular-nums;
+
+    grid-area: output;
+  }
+
+  .meter__track {
+    @apply relative overflow-hidden rounded-full bg-default;
+
+    grid-area: track;
+
+    /* Default height (matches --md) */
+    @apply h-2;
+  }
+
+  .meter__fill {
+    @apply absolute top-0 left-0 h-full rounded-full;
+
+    background-color: var(--meter-fill);
+
+    /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+    transition: width 300ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+
+    [data-slot="label"] {
+      @apply opacity-100;
+    }
+  }
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.meter--sm {
+  .meter__track {
+    @apply h-1;
+  }
+}
+
+.meter--md {
+  /* No styles as this is the default size */
+}
+
+.meter--lg {
+  .meter__track {
+    @apply h-3;
+  }
+}
+
+/* ==========================================================================
+   Color variants
+   ========================================================================== */
+
+.meter--default {
+  --meter-fill: var(--color-default-foreground);
+}
+
+.meter--accent {
+  --meter-fill: var(--color-accent);
+}
+
+.meter--success {
+  --meter-fill: var(--color-success);
+}
+
+.meter--warning {
+  --meter-fill: var(--color-warning);
+}
+
+.meter--danger {
+  --meter-fill: var(--color-danger);
+}