@aortl/admin-css 0.16.1 → 0.17.0

package/src/components/button.css

@@ -10,16 +10,12 @@
            disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none;
   }
 
-  /* Keep leading/trailing icons at their intrinsic size — a flex item defaults
-     to `flex-shrink: 1`, so a narrow flex container would otherwise squish the
-     glyph horizontally before wrapping or truncating the label. */
+  /* Don't let a narrow container squish the glyph before the label wraps. */
   .btn > :is(i, svg) {
     flex-shrink: 0;
   }
 
-  /* Variants — the bare `.btn` (no modifier) is the low-emphasis default, so
-     most admin buttons need no variant class. The colored variants reset the
-     border to transparent since the base now carries a visible one. */
+  /* Variants — bare `.btn` is the low-emphasis default; most buttons need no variant class. */
   .btn-primary {
     @apply bg-primary text-primary-content border-transparent hover:bg-primary-hover;
   }
@@ -28,11 +24,7 @@
     @apply bg-transparent text-text border-transparent hover:bg-surface-muted;
   }
 
-  /* Muted — fills with the page background (`surface`) so it sits flush
-     instead of reading as a raised control, mirroring `card-muted`. The
-     default `.btn` is one step up (`surface-muted`); hover lifts the muted
-     button to that resting fill. For de-emphasised actions that should
-     recede into the page. */
+  /* Fills with the page background so it sits flush instead of raised — mirrors `card-muted`. */
   .btn-muted {
     @apply bg-surface hover:bg-surface-muted;
   }
@@ -50,14 +42,11 @@
     @apply text-base px-5 py-2.5 gap-2.5;
   }
 
-  /* Modifiers */
   .btn-full-width {
     @apply w-full;
   }
 
-  /* Icon-only — equalises padding so the button reads as a square. The React
-     wrapper adds this automatically when `.btn` has an icon but no text
-     children; vanilla callers add it themselves. Pair with `aria-label`. */
+  /* Icon-only — equalises padding so the button reads as a square. Pair with `aria-label`. */
   .btn-square {
     @apply px-2;
   }
@@ -70,11 +59,8 @@
     @apply px-2.5;
   }
 
-  /* Loading state — paints a spinner via ::before, so no extra markup is
-     required. Sized in `em` so it tracks btn-sm / btn-lg. Pair with the
-     `disabled` attribute (or the React wrapper, which sets it for you) for
-     keyboard a11y; the visual disable lives here so vanilla still feels right
-     without it. */
+  /* Spinner via ::before, `em`-sized so it tracks btn-sm / btn-lg. Pair with
+     the `disabled` attribute for keyboard a11y. */
   .btn-loading {
     @apply opacity-50 cursor-not-allowed pointer-events-none;
   }
@@ -91,9 +77,7 @@
     animation: spinner-spin 0.6s linear infinite;
   }
 
-  /* Suppress a leading icon while loading so we don't show two glyphs.
-     Trailing icons stay visible — they may convey structural meaning
-     (e.g. a dropdown chevron on a split-button trigger). */
+  /* Hide the leading icon while loading; trailing icons (e.g. a dropdown chevron) stay. */
   .btn-loading > :is(i, svg):first-child {
     display: none;
   }

package/src/components/card.css

@@ -5,10 +5,7 @@
            border border-border
            rounded-xl
            shadow-xs;
-    /* Let long unbreakable tokens (IDs, URLs, file paths) break instead of
-       overflowing the body, and let the card shrink inside a flex/grid track
-       rather than forcing it wide. Inherited by title/description/body.
-       Mirrors `.alert`. */
+    /* min-width: 0 lets the card shrink inside a flex/grid track instead of forcing it wide. */
     overflow-wrap: break-word;
     min-width: 0;
   }
@@ -19,28 +16,22 @@
 
   .card-title {
     @apply flex items-center gap-2 text-lg font-semibold leading-tight;
-    /* Flex item — let it shrink so a long title wraps rather than widening the
-       card. `overflow-wrap` is inherited from `.card`. */
+    /* Let a long title wrap instead of widening the card. */
     min-width: 0;
   }
 
-  /* Header row: title on the left, toolbar pushed to the trailing edge. */
   .card-header {
     @apply flex items-center gap-2;
   }
 
-  /* Trailing cluster of header controls (close, edit, …). The title's bold,
-     descender-less type sits visually high in its line box, so geometric
-     centering reads slightly low — nudge the controls up to the optical centre.
-     `card-title` is always `text-lg`, so this offset is constant. */
+  /* -mt-0.5 nudges the controls up to the optical centre — the bold title type
+     sits high in its line box. */
   .card-toolbar {
     @apply flex items-center gap-1 ml-auto -mt-0.5;
   }
 
-  /* Toolbar buttons run small (usually `btn-sm`, whose icons inherit `text-xs`);
-     bump the glyph to 1rem so the controls stay easy to scan and hit. Both
-     bundles size icons off `font-size` — the Tabler webfont (`<i>`) and React's
-     `size="1em"` SVG — so this single rule enlarges both identically. */
+  /* font-size enlarges both icon flavours identically — the Tabler webfont and
+     React's `size="1em"` SVG. */
   .card-toolbar :is(i, svg) {
     font-size: 1.25rem;
   }
@@ -53,7 +44,6 @@
     @apply flex flex-wrap items-center gap-2 mt-auto pt-2;
   }
 
-  /* Modifiers */
   .card-compact .card-body {
     @apply p-3 gap-2;
   }
@@ -62,17 +52,12 @@
     @apply shadow-none border-border-strong;
   }
 
-  /* Neutral variant — sits flush with the page (`--color-surface`, the same
-     fill as `html`/`.app-shell`) instead of the raised `surface-muted` of a
-     default card. For de-emphasised or grouped panels that shouldn't pop off
-     the background. No accent, no status meaning. */
+  /* Fills with the page background so the panel sits flush instead of raised. */
   .card-muted {
     @apply bg-surface;
   }
 
-  /* Color variants — tinted surface + matching border, mirroring Alert. The
-     title (and any leading icon, via `currentColor`) picks up the accent for
-     fast scanning. */
+  /* Color variants — tinted surface + accent title, mirroring Alert. */
   .card-primary {
     @apply bg-primary-muted border-primary-muted;
   }
@@ -109,7 +94,44 @@
     @apply text-danger;
   }
 
-  /* `card-warning` keeps its title at `text-text`: the warning accent is
-     yellow-400 in both modes and fails AA contrast on the muted yellow
-     surface. The tinted bg still carries the warning signal. */
+  /* No `.card-warning .card-title` rule — the yellow-400 accent fails AA on
+     the muted yellow surface. */
+
+  /* Full-bleed media. Sibling of .card-body; first/last placement picks up the
+     card's corner rounding without overflow on the root. */
+  .card-media {
+    @apply block w-full shrink-0 overflow-hidden;
+  }
+  .card-media:first-child {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+  .card-media:last-child {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+  .card-media > :is(img, video) {
+    @apply block w-full h-full object-cover;
+  }
+
+  /* Scroll region — header/actions pin, body scrolls; consumer sets the height.
+     Direct-child header/actions gain padding + a divider since inside
+     .card-body they carry none. */
+  .card-scroll > .card-header {
+    @apply shrink-0 px-5 py-3 border-b border-border;
+  }
+  .card-scroll > .card-body {
+    @apply flex-1 min-h-0 overflow-y-auto;
+  }
+  .card-scroll > .card-body:last-child {
+    /* Keep the scrollbar inside the rounded corners when there's no footer. */
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+  .card-scroll > .card-actions {
+    @apply shrink-0 px-5 py-3 border-t border-border;
+  }
+  .card-compact.card-scroll > :is(.card-header, .card-actions) {
+    @apply px-3 py-2;
+  }
 }

package/src/components/chart.css

@@ -1,30 +1,14 @@
 @layer components {
   /*
-   * Charts — three pure-CSS primitives driven entirely by inline custom
-   * properties (never data-* attributes: CSS can't read an attribute as a
-   * number for calc() cross-browser yet). No JS, no axes/ticks/gridlines.
-   * They serve two altitudes: dense inline micro-viz (a swatch in a table
-   * cell) and compact dashboard cards.
-   *
-   * Data contract:
-   *   - bars:  container `--chart-max` (default 100), each bar `--value`;
-   *            the fill sizes to `var(--value) / var(--chart-max) * 100%`.
-   *   - stack: each segment `--value`, sized by `flex` (no max — the ratios
-   *            are intrinsic to the flex grow factors).
-   *   - donut: one pre-built cumulative conic-gradient stop string in
-   *            `--donut-segments` (CSS can't sum a variable-length sibling
-   *            list, so the string arrives whole).
-   *
-   * Colour: single-series follows `currentColor` (default `--color-info`,
-   * recoloured by the `.chart-success`/etc. variants like `.progress`).
-   * Multi-series colours are set inline per bar/segment (`--bar-color` /
-   * `--segment-color` / legend `--legend-color`); there is no chart token
-   * layer. role="img" + aria-label carries the semantics; a native `title`
-   * on each bar/segment gives a hover read-out.
+   * Pure-CSS charts driven by inline custom properties — not data-*
+   * attributes (CSS can't read an attribute as a number for calc()).
+   * Contract: bars — container `--chart-max` (default 100), each bar
+   * `--value`; stack — each segment `--value` (flex-grow ratios, no max);
+   * donut — `--donut-segments` holds a pre-built cumulative conic-gradient
+   * stop string (CSS can't sum a variable-length sibling list).
+   * Single-series colour rides currentColor; multi-series is set inline via
+   * `--bar-color` / `--segment-color` / `--legend-color`.
    */
-
-  /* Shared base — sizing knobs + the single-series fill colour. Any chart
-     type reads these; size modifiers below just remap them. */
   .chart {
     --chart-max: 100;
     --chart-height: 8rem; /* bar track cross-axis size (md) */
@@ -33,9 +17,7 @@
     color: var(--color-info);
   }
 
-  /* Single-series semantic variants — recolour currentColor, like progress.
-     `info` is the base colour (`.chart` above), so it needs no class — the
-     default `variant="info"` simply emits no modifier. */
+  /* `info` is the base colour (`.chart`), so the default variant emits no class. */
   .chart-success {
     color: var(--color-success);
   }
@@ -46,16 +28,9 @@
     color: var(--color-danger);
   }
 
-  /* --------------------------------------------------------------------- *
-   * BAR CHART — horizontal (default)                                      *
-   * --------------------------------------------------------------------- *
-   * Three-column grid: [label | track (1fr) | value]. Each `.chart-bar` is
-   * a `subgrid` spanning all three, so the label gutter and the value column
-   * stay aligned across every row. The fill lives in the `1fr` track — a
-   * definite width once the grid resolves, which is exactly what lets its
-   * `inline-size: %` transition (see the transition note). Values sit in the
-   * trailing column, so a short bar never clips its number and a full bar
-   * never overflows. */
+  /* Bar chart (horizontal) — grid [label | track (1fr) | value]; each bar is
+     a subgrid row so columns align across rows. The 1fr track gives the fill
+     a definite width, which is what lets its % inline-size transition. */
   .chart-bars {
     display: grid;
     grid-template-columns: auto 1fr auto;
@@ -71,8 +46,7 @@
     align-items: center;
   }
 
-  /* Category label — only emitted when the datum carries one. The empty
-     `auto` column collapses to 0 when no bar has a label. */
+  /* The auto column collapses to 0 when no bar has a label. */
   .chart-bar-label {
     @apply text-xs text-text-muted;
     grid-column: 1;
@@ -91,15 +65,13 @@
     inline-size: calc(var(--value) / var(--chart-max) * 100%);
     background: var(--bar-color, currentColor);
     border-radius: 2px;
-    /* Transition the resolved length (NOT --value, which isn't registered):
-       a percentage length transitions because the track has a definite size.
-       Both axes are listed so the vertical fill animates too. */
+    /* Transition the resolved length, not --value (unregistered — won't
+       animate); both axes so the vertical fill animates too. */
     transition:
       inline-size 200ms ease,
       block-size 200ms ease;
   }
 
-  /* Value label — trailing aligned column. Opt-in via `.chart-values`. */
   .chart-bar-value {
     @apply text-xs text-text-muted tabular-nums;
     grid-column: 3;
@@ -111,13 +83,9 @@
     display: none;
   }
 
-  /* --------------------------------------------------------------------- *
-   * BAR CHART — vertical modifier                                         *
-   * --------------------------------------------------------------------- *
-   * Flex row of equal columns inside a fixed-height box. Each column is a
-   * flex column [value | track | label]; the track (`flex: 1`) gets a
-   * definite block-size so the fill's `block-size: %` resolves and animates.
-   * Bars grow up from the floor (`justify-content: end`). */
+  /* Bar chart (vertical) — flex row of columns in a fixed-height box; the
+     flex:1 track gets a definite block-size so the fill's % block-size
+     resolves and animates. */
   .chart-bars-vertical {
     display: flex;
     flex-direction: row;
@@ -163,12 +131,7 @@
     padding: 0;
   }
 
-  /* --------------------------------------------------------------------- *
-   * STACKED / PROPORTION BAR                                              *
-   * --------------------------------------------------------------------- *
-   * A single rounded track partitioned by `flex: var(--value)`. No max
-   * needed — proportions are the flex-grow ratios. A hairline in the
-   * surface colour separates adjacent segments. */
+  /* Stacked / proportion bar */
   .chart-stack {
     display: flex;
     flex-direction: row;
@@ -189,18 +152,10 @@
     box-shadow: -1px 0 0 0 var(--color-surface);
   }
 
-  /* --------------------------------------------------------------------- *
-   * DONUT / PIE                                                           *
-   * --------------------------------------------------------------------- *
-   * A conic-gradient circle with the centre punched out by a radial-gradient
-   * mask. `--donut-thickness` is the ring width as a % of the diameter; the
-   * hole's inner radius is `50% - thickness`, so thickness=50% leaves no hole
-   * (a solid pie). The same stop position twice gives a crisp ring edge.
-   *
-   * The centre label must NOT be a child of the ring — `mask` clips the whole
-   * subtree, so a child sitting in the hole would be invisible. It's a sibling
-   * overlay: the figure is an inline-grid and both the ring and the label
-   * occupy the same cell. */
+  /* Donut / pie — conic-gradient ring, centre punched out by a radial-gradient
+     mask. `--donut-thickness` is the ring width as a % of the diameter (50% =
+     solid pie). The centre label must be a sibling overlay, never a child —
+     `mask` clips the whole subtree. */
   .chart-donut-figure {
     position: relative;
     inline-size: var(--chart-size);
@@ -232,7 +187,6 @@
     inline-size: 100%;
   }
 
-  /* Solid pie — no hole. */
   .chart-donut-pie {
     --donut-thickness: 50%;
   }
@@ -244,9 +198,7 @@
     pointer-events: none;
   }
 
-  /* --------------------------------------------------------------------- *
-   * LEGEND (donut + stack)                                                *
-   * --------------------------------------------------------------------- */
+  /* Legend (donut + stack) */
   .chart-legend {
     @apply flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-text-muted;
     list-style: none;
@@ -266,9 +218,7 @@
     flex-shrink: 0;
   }
 
-  /* --------------------------------------------------------------------- *
-   * SIZES — remap the cross-axis / diameter knobs                         *
-   * --------------------------------------------------------------------- */
+  /* Sizes */
   .chart-sm {
     --chart-height: 4rem;
     --chart-size: 4rem;
@@ -278,11 +228,7 @@
     --chart-size: 12rem;
   }
 
-  /* --------------------------------------------------------------------- *
-   * INLINE — micro-viz that sits in running text / a table cell           *
-   * --------------------------------------------------------------------- *
-   * Inline-flex, baseline-nudged, and em-relative so the swatch tracks the
-   * surrounding font size. */
+  /* Inline micro-viz — em-relative so it tracks the surrounding font size. */
   .chart-inline {
     display: inline-flex;
     vertical-align: middle;
@@ -298,9 +244,6 @@
     inline-size: 6em;
   }
 
-  /* --------------------------------------------------------------------- *
-   * REDUCED MOTION                                                        *
-   * --------------------------------------------------------------------- */
   @media (prefers-reduced-motion: reduce) {
     .chart-bar-fill,
     .chart-segment {

package/src/components/checkbox.css

@@ -25,11 +25,8 @@
     @apply inline-flex items-center justify-center size-3 text-primary-content;
   }
 
-  /* Native input variant: state is driven by :checked / :indeterminate, the
-     glyph is masked onto ::after. Mirrors the Base UI button variant above so a
-     vanilla <input class="checkbox"> renders identically (indeterminate reads
-     the same as checked, matching the data-* rule). The mask is the same
-     checkmark polyline the React indicator draws. */
+  /* Native input variant — must render identically to the Base UI button rules
+     above (same checkmark polyline; indeterminate reads as checked). */
   input.checkbox {
     @apply appearance-none border-border-strong hover:border-text-muted;
     --checkbox-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
@@ -49,12 +46,9 @@
     mask: var(--checkbox-check) center / contain no-repeat;
   }
 
-  /* A <label> wrapping a checkbox + text lays out inline with a small gap.
-     Covers both the vanilla input.checkbox and Base UI's button.checkbox. */
   label:has(> .checkbox) {
     @apply inline-flex items-center gap-2 cursor-pointer;
-    /* Let a long label break and shrink beside the `shrink-0` box instead of
-       overflowing a narrow form column. The box stays put; the text wraps. */
+    /* Long labels wrap beside the shrink-0 box instead of overflowing. */
     overflow-wrap: break-word;
     min-width: 0;
   }

package/src/components/code-block.css

@@ -9,10 +9,8 @@
     overflow: auto;
   }
 
-  /* Opt out of wrapping for log-style content where long lines should
-     scroll horizontally instead of breaking. Pair with an inline
-     `max-height` to clamp vertical growth — `overflow: auto` above
-     turns into a scrollbar automatically. */
+  /* Long lines scroll horizontally instead of breaking; pair with an inline
+     `max-height` to clamp vertical growth. */
   .code-block-nowrap {
     white-space: pre;
     word-wrap: normal;

package/src/components/container.css

@@ -1,8 +1,6 @@
 @layer components {
-  /* Page content region — a centered, max-width column that also owns the
-     vertical rhythm between stacked page sections. Drop it inside the bare
-     `.app-shell-main` (which has no padding of its own). Width presets just
-     set `--container-max`; override the var per-instance to deviate. */
+  /* Goes inside the bare `.app-shell-main` (no padding of its own); override
+     `--container-max` per-instance to deviate from the presets. */
   .container {
     @apply flex flex-col gap-6 w-full mx-auto px-6 py-6;
     max-width: var(--container-max, 90rem);
@@ -16,17 +14,15 @@
     --container-max: 115rem;
   }
 
-  /* Full-bleed: edge-to-edge within `main`, padding retained. */
   .container-fluid {
     --container-max: none;
   }
 
-  /* Denser vertical rhythm + tighter block padding for packed screens. */
   .container-compact {
     @apply gap-4 py-4;
   }
 
-  /* Less horizontal padding on small viewports — reuses the shell breakpoint. */
+  /* Reuses the shell breakpoint. */
   @media (max-width: 48rem) {
     .container {
       @apply px-4;

package/src/components/dialog.css

@@ -9,9 +9,8 @@
     width: calc(100% - 2rem);
     max-width: 32rem;
     max-height: calc(100dvh - 2rem);
-    /* Long titles/descriptions (filenames, IDs) break instead of pushing past
-       the fixed max-width. Inherited by title + description; `.dialog-title`
-       additionally needs `min-width: 0` below since it's a flex item. */
+    /* Long tokens (filenames, IDs) break instead of pushing past max-width;
+       inherited by title + description. */
     overflow-wrap: break-word;
     opacity: 1;
     transform: translateY(0) scale(1);
@@ -22,9 +21,8 @@
       transform 150ms ease-out;
   }
 
-  /* `display: flex` only when open — without this gate, our flex rule would
-     override the UA `dialog:not([open]) { display: none }` and the dialog
-     would render in-flow before showModal() was ever called. */
+  /* Gate on [open] — an unconditional flex would override the UA's
+     `dialog:not([open]) { display: none }` and render the dialog in-flow. */
   .dialog[open] {
     display: flex;
   }
@@ -37,7 +35,6 @@
       background 150ms ease-out;
   }
 
-  /* Entry — animate from these values up to the open state. */
   @starting-style {
     .dialog[open] {
       opacity: 0;
@@ -64,8 +61,7 @@
 
   .dialog-title {
     @apply flex-1 flex items-center gap-2 text-lg font-semibold leading-tight m-0;
-    /* `flex-1` flex item — let it shrink so a long title wraps rather than
-       blowing the header past the dialog's max-width. */
+    /* Let a long title shrink and wrap rather than widen the header. */
     min-width: 0;
   }
 
@@ -73,16 +69,14 @@
     @apply px-5 -mt-2 mb-3 text-sm text-text-muted;
   }
 
-  /* `flex-1 min-h-0` lets the body fill the remaining height and shrink below
-     its content (a flex item's default `min-height: auto` would refuse to), so
-     tall content scrolls here while the header/footer stay pinned. */
+  /* min-h-0 beats the flex default `min-height: auto` so tall content scrolls
+     here while the header/footer stay pinned. */
   .dialog-body {
     @apply flex-1 min-h-0 px-5 py-3 overflow-y-auto flex flex-col gap-3;
   }
 
-  /* When the body is wrapped in a `<form>` (the form-dialog pattern), the form
-     becomes the dialog's sole flex child — make it the flex column so the body's
-     `flex-1 min-h-0` still resolves and scrolls. */
+  /* In the form-dialog pattern the form is the sole flex child; it must carry
+     the flex column so the body's `flex-1 min-h-0` still scrolls. */
   .dialog > form {
     @apply flex flex-col min-h-0 flex-1;
   }
@@ -92,9 +86,8 @@
            px-5 py-3
            border-t border-border
            bg-surface-muted;
-    /* Inherits the dialog's bottom-corner radius so the muted background
-       doesn't square off past the parent's rounded corners — previously
-       handled by `overflow: hidden` on `.dialog`, which clipped popups. */
+    /* Keep the muted background inside the parent's rounded corners — don't
+       use `overflow: hidden` on `.dialog` for this; it clips popups. */
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
   }

package/src/components/field.css

@@ -1,14 +1,11 @@
 @layer components {
   .field {
     @apply flex flex-col gap-1.5;
-    /* Label/description/error are often operator- or validation-supplied — let
-       long tokens break instead of overflowing a narrow form column. Inherited
-       by all three. Mirrors `.alert`. */
+    /* Long operator-/validation-supplied tokens break instead of overflowing;
+       inherited by label, description, and error. */
     overflow-wrap: break-word;
   }
 
-  /* Horizontal layout — pairs a control (typically a switch) with its label
-     on one row. Use when the label belongs beside the control, not above it. */
   .field-row {
     @apply flex-row items-center gap-3;
   }
@@ -34,8 +31,7 @@
     @apply text-xs text-danger leading-relaxed;
   }
 
-  /* When the field is in an invalid state, tint the contained control.
-     Base UI applies data-invalid on the Field root once validation fails. */
+  /* Base UI sets data-invalid on the Field root when validation fails. */
   .field[data-invalid] .input,
   .field[data-invalid] .textarea,
   .field[data-invalid] .select,

package/src/components/footer.css

@@ -1,7 +1,6 @@
 @layer components {
-  /* 2px top stripe mirrors the navbar's bottom stripe — both default to
-     a neutral gray via `--color-system-accent` and brand-shift together
-     when the consuming app overrides that variable at :root. */
+  /* The top stripe mirrors the navbar's bottom stripe; both brand-shift
+     together when the app overrides `--color-system-accent` at :root. */
   .footer {
     @apply flex flex-wrap items-center justify-between gap-3 px-4 py-3
            bg-surface-muted text-text-muted

package/src/components/index.css

@@ -4,6 +4,7 @@
 @import "./container.css";
 @import "./badge.css";
 @import "./brand-tile.css";
+@import "./avatar.css";
 @import "./kbd.css";
 @import "./indicator.css";
 @import "./spinner.css";
@@ -11,11 +12,13 @@
 @import "./breadcrumbs.css";
 @import "./pagination.css";
 @import "./property-list.css";
+@import "./separator.css";
 @import "./button.css";
 @import "./button-group.css";
 @import "./link.css";
 @import "./input.css";
 @import "./input-group.css";
+@import "./input-icon.css";
 @import "./textarea.css";
 @import "./checkbox.css";
 @import "./radio.css";