@vireo-ai/trellis-ui 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vireo-ai/trellis-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "Django-native UI toolkit for building realtime and interactive web apps.",
   "license": "MIT",
@@ -13,6 +13,8 @@
     "README.md",
     "types/**/*.d.ts",
     "src/theme.css",
+    "src/components.css",
+    "src/components/**/*.css",
     "trellis_ui/static/trellis_ui/css/styles.css",
     "trellis_ui/static/trellis_ui/js/index.js",
     "trellis_ui/static/trellis_ui/js/esm/**/*.js",
@@ -76,6 +78,7 @@
     "check": "pnpm run build:package && pnpm run typecheck && pnpm test && uv run pytest && pnpm run test:browser",
     "check:packages": "pnpm pack --dry-run && uv build --sdist --wheel",
     "check:release": "pnpm run check && pnpm run check:packages",
+    "release": "node scripts/release.mjs",
     "publish:npm": "pnpm run check:release && pnpm publish --access public",
     "publish:pypi": "pnpm run build:package && uv build --sdist --wheel && uv publish dist/django_trellis-${npm_package_version}.tar.gz dist/django_trellis-${npm_package_version}-py3-none-any.whl",
     "publish:all": "pnpm run check:release && pnpm publish --access public && uv publish dist/django_trellis-${npm_package_version}.tar.gz dist/django_trellis-${npm_package_version}-py3-none-any.whl",

package/src/components/accordion/styles.css

@@ -0,0 +1,16 @@
+@layer components {
+  [data-ui-accordion-trigger][data-state="open"] [data-ui-accordion-icon] {
+    transform: rotate(180deg);
+  }
+
+  [data-ui-accordion-trigger][data-icon-position="leading"] [data-ui-accordion-icon],
+  [data-ui-accordion][data-icon-position="leading"] [data-ui-accordion-trigger][data-icon-position="inherit"] [data-ui-accordion-icon] {
+    order: -1;
+    transform: rotate(-90deg);
+  }
+
+  [data-ui-accordion-trigger][data-icon-position="leading"][data-state="open"] [data-ui-accordion-icon],
+  [data-ui-accordion][data-icon-position="leading"] [data-ui-accordion-trigger][data-icon-position="inherit"][data-state="open"] [data-ui-accordion-icon] {
+    transform: rotate(0deg);
+  }
+}

package/src/components/brand/styles.css

@@ -0,0 +1,8 @@
+@layer components {
+  [data-ui-brand-logo] svg {
+    display: block;
+    flex-shrink: 0;
+    height: 100%;
+    width: 100%;
+  }
+}

package/src/components/button/styles.css

@@ -0,0 +1,157 @@
+@layer components {
+  [data-ui-button] {
+    isolation: isolate;
+    overflow: hidden;
+  }
+
+  [data-ui-button]::before {
+    background: var(--_ui-button-overlay, transparent);
+    border-radius: inherit;
+    content: "";
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    z-index: 0;
+  }
+
+  [data-ui-button]:hover:not(:disabled, [aria-disabled="true"], [data-ui-loading])::before {
+    opacity: 1;
+  }
+
+  [data-ui-button]:active:not(:disabled, [aria-disabled="true"], [data-ui-loading])::before {
+    background: var(--_ui-button-overlay-active, var(--_ui-button-overlay, transparent));
+    opacity: 1;
+  }
+
+  [data-ui-button] > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  [data-ui-button][data-variant="default"],
+  [data-ui-button][data-variant="outline"] {
+    --_ui-button-overlay: var(--color-base-a2);
+    --_ui-button-overlay-active: var(--color-base-a3);
+  }
+
+  [data-ui-button][data-variant="default"]:hover,
+  [data-ui-button][data-variant="default"]:active,
+  [data-ui-button][data-variant="outline"]:hover,
+  [data-ui-button][data-variant="outline"]:active {
+    background-color: var(--color-surface) !important;
+  }
+
+  [data-ui-button][data-variant="filled"][data-color="accent"] {
+    --_ui-button-overlay: rgb(255 255 255 / 0.10);
+    --_ui-button-overlay-active: rgb(255 255 255 / 0.16);
+    --_ui-button-highlight: rgb(255 255 255 / 0.22);
+    box-shadow:
+      inset 0 1px var(--_ui-button-highlight),
+      var(--shadow-1) !important;
+  }
+
+  [data-ui-button][data-variant="filled"][data-color="accent"]:hover,
+  [data-ui-button][data-variant="filled"][data-color="accent"]:active {
+    background-color: var(--color-accent-solid) !important;
+  }
+
+  [data-ui-button][data-variant="subtle"] {
+    --_ui-button-overlay: var(--color-base-a3);
+    --_ui-button-overlay-active: var(--color-base-a4);
+  }
+
+  [data-ui-button][data-variant="subtle"]:hover,
+  [data-ui-button][data-variant="subtle"]:active {
+    background-color: var(--color-base-a2) !important;
+  }
+
+  [data-ui-button][data-variant="filled"] {
+    --_ui-button-overlay: var(--color-base-a4);
+    --_ui-button-overlay-active: var(--color-base-a5);
+  }
+
+  [data-ui-button][data-variant="filled"]:hover,
+  [data-ui-button][data-variant="filled"]:active {
+    background-color: var(--color-base-a3) !important;
+  }
+
+  [data-ui-button][data-variant="ghost"] {
+    --_ui-button-overlay: var(--color-base-a3);
+    --_ui-button-overlay-active: var(--color-base-a4);
+  }
+
+  [data-ui-button][data-variant="ghost"]:hover,
+  [data-ui-button][data-variant="ghost"]:active {
+    background-color: transparent !important;
+  }
+
+  [data-ui-button][data-variant="filled"][data-color="danger"] {
+    --_ui-button-overlay: rgb(255 255 255 / 0.10);
+    --_ui-button-overlay-active: rgb(255 255 255 / 0.16);
+    --_ui-button-highlight: rgb(255 255 255 / 0.20);
+    box-shadow:
+      inset 0 1px var(--_ui-button-highlight),
+      var(--shadow-1) !important;
+  }
+
+  [data-ui-button][data-variant="filled"][data-color="danger"]:hover,
+  [data-ui-button][data-variant="filled"][data-color="danger"]:active {
+    background-color: var(--color-danger-solid) !important;
+  }
+
+  [data-ui-button][data-ui-loading] {
+    cursor: wait;
+  }
+
+  [data-ui-button]:disabled,
+  [data-ui-button][aria-disabled="true"] {
+    pointer-events: none;
+  }
+
+  [data-ui-button]:is(:disabled, [aria-disabled="true"]):not([data-ui-loading]) {
+    opacity: 0.5;
+  }
+
+  [data-ui-button] [data-ui-button-loading-indicator] {
+    opacity: 0;
+  }
+
+  [data-ui-button][data-ui-loading] [data-ui-button-content] {
+    opacity: 0;
+  }
+
+  [data-ui-button][data-ui-loading] [data-ui-button-loading-indicator] {
+    opacity: 1;
+  }
+
+  [data-ui-button-group] > [data-ui-button] {
+    position: relative;
+  }
+
+  [data-ui-button-group] > [data-ui-button]:hover {
+    z-index: 2;
+  }
+
+  [data-ui-button-group] > [data-ui-button]:focus-visible {
+    z-index: 3;
+  }
+
+  [data-ui-button-group] > [data-ui-button]:not(:first-child) {
+    margin-left: -1px;
+  }
+
+  [data-ui-button-group] > [data-ui-button]:first-child:not(:last-child) {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  [data-ui-button-group] > [data-ui-button]:not(:first-child):not(:last-child) {
+    border-radius: 0 !important;
+  }
+
+  [data-ui-button-group] > [data-ui-button]:last-child:not(:first-child) {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
+}

package/src/components/date-picker/styles.css

@@ -0,0 +1,404 @@
+@layer components {
+  [data-ui-date-picker] {
+    --ui-date-picker-selected-bg: var(--color-base-12);
+    --ui-date-picker-selected-bg-hover: var(--color-base-12);
+    --ui-date-picker-selected-fg: var(--color-surface);
+    --ui-date-picker-range-bg: var(--color-base-a3);
+    --ui-date-picker-range-bg-hover: var(--color-base-a4);
+    --ui-date-picker-month-heading-size: 1.75rem;
+    --ui-date-picker-month-min: 16.25rem;
+    --ui-date-picker-week-gap: 0.125rem;
+    --ui-date-picker-week-row-size: 2.125rem;
+  }
+
+  [data-ui-date-picker][data-color="accent"] {
+    --ui-date-picker-selected-bg: var(--color-accent-solid);
+    --ui-date-picker-selected-bg-hover: var(--color-accent-solid-hover);
+    --ui-date-picker-selected-fg: var(--color-accent-contrast);
+    --ui-date-picker-range-bg: var(--color-accent-surface);
+    --ui-date-picker-range-bg-hover: var(--color-accent-surface-hover);
+  }
+
+  [data-ui-date-picker-calendar] {
+    --color-accent: var(--ui-date-picker-selected-bg);
+    --color-text-on-accent: var(--ui-date-picker-selected-fg);
+    color: var(--color-foreground);
+    inline-size: max-content;
+    max-inline-size: none;
+  }
+
+  [data-ui-date-picker-panel] {
+    inline-size: max-content;
+    max-inline-size: calc(100vw - 2rem);
+  }
+
+  [data-ui-date-picker-panel]:not(:has([data-ui-date-picker-presets])) {
+    inline-size: max-content;
+    grid-template-columns: auto !important;
+  }
+
+  [data-ui-date-picker-panel]:not(:has([data-ui-date-picker-presets])):has([data-ui-date-picker-calendar][months="2"]) {
+    inline-size: max-content;
+  }
+
+  [data-ui-date-picker-panel]:not(:has([data-ui-date-picker-presets])):has([data-ui-date-picker-calendar][months="3"]) {
+    inline-size: max-content;
+  }
+
+  [data-ui-date-picker-panel]:has([data-ui-date-picker-presets]) {
+    inline-size: max-content;
+  }
+
+  [data-ui-date-picker-calendar-wrap] {
+    block-size: 100%;
+    inline-size: 100%;
+    max-inline-size: calc(100vw - 2rem);
+  }
+
+  [data-ui-date-picker-calendar-wrap]:not(:has([data-ui-date-picker-presets])) {
+    inline-size: 100%;
+  }
+
+  [data-ui-date-picker-calendar-today] {
+    align-items: center;
+    background-color: transparent;
+    border: 0;
+    border-radius: var(--radius-2);
+    color: var(--color-foreground-muted);
+    display: inline-flex;
+    block-size: 1.75rem;
+    inline-size: 1.75rem;
+    justify-content: center;
+    padding: 0;
+    position: absolute;
+    right: 5rem;
+    top: var(--ui-popover-padding);
+    z-index: 1;
+  }
+
+  [data-ui-date-picker-today-day] {
+    align-items: center;
+    color: var(--color-foreground);
+    display: flex;
+    font-size: 0.5625rem;
+    font-weight: var(--font-weight-semibold);
+    inset-block: 0.3125rem 0;
+    inset-inline: 0;
+    justify-content: center;
+    line-height: 1;
+    position: absolute;
+    text-align: center;
+  }
+
+  [data-ui-date-picker-today-icon] {
+    block-size: 1.125rem;
+    border: 1.5px solid currentColor;
+    border-radius: var(--radius-2);
+    display: block;
+    inline-size: 1.125rem;
+    overflow: hidden;
+    position: relative;
+  }
+
+  [data-ui-date-picker-today-icon]::before {
+    background-color: currentColor;
+    block-size: 0.1875rem;
+    content: "";
+    inset-block-start: 0;
+    inset-inline: 0;
+    position: absolute;
+  }
+
+  [data-ui-date-picker-today-icon]::after {
+    background:
+      linear-gradient(currentColor 0 0) 0.25rem 0 / 0.125rem 0.25rem no-repeat,
+      linear-gradient(currentColor 0 0) calc(100% - 0.25rem) 0 / 0.125rem 0.25rem no-repeat;
+    content: "";
+    inset: -0.1875rem 0 0;
+    position: absolute;
+  }
+
+  [data-ui-date-picker-calendar-today]:hover {
+    background-color: var(--color-base-a2);
+    color: var(--color-foreground);
+  }
+
+  [data-ui-date-picker-calendar-today]:focus-visible {
+    box-shadow: var(--shadow-focus);
+    outline: none;
+  }
+
+  [data-ui-date-picker-calendar]::part(container) {
+    display: grid;
+    gap: 0.625rem;
+  }
+
+  [data-ui-date-picker-calendar]::part(header) {
+    align-items: center;
+    display: grid;
+    column-gap: 0.25rem;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    min-block-size: 1.75rem;
+    min-width: 0;
+  }
+
+  [data-ui-date-picker-calendar]::part(heading) {
+    align-items: center;
+    color: var(--color-foreground);
+    display: flex;
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-semibold);
+    gap: 0.375rem;
+    line-height: var(--text-sm--line-height);
+    min-width: 0;
+    text-align: left;
+  }
+
+  [data-ui-date-picker-calendar]::part(button) {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-2);
+    color: var(--color-foreground-muted);
+    display: inline-flex;
+    block-size: 1.75rem;
+    inline-size: 1.75rem;
+    justify-content: center;
+    outline: none;
+    padding: 0;
+  }
+
+  [data-ui-date-picker-calendar]::part(previous) {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  [data-ui-date-picker-calendar]::part(next) {
+    grid-column: 3;
+    grid-row: 1;
+  }
+
+  [data-ui-date-picker-calendar]::part(button):hover {
+    background-color: var(--color-base-a2);
+    color: var(--color-foreground);
+  }
+
+  [data-ui-date-picker-calendar]::part(button):focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+
+  [data-ui-date-picker-calendar]::part(disabled) {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  [data-ui-date-picker-calendar]::part(months) {
+    align-items: start;
+    display: grid;
+    gap: 0.75rem;
+    grid-template-columns: repeat(var(--ui-date-picker-month-columns, 1), var(--ui-date-picker-month-min));
+    justify-content: center;
+    min-width: 0;
+  }
+
+  [data-ui-date-picker-calendar] [data-ui-date-picker-calendar-icon] {
+    color: var(--color-foreground-muted);
+    display: block;
+    pointer-events: none;
+  }
+
+  [data-ui-date-picker-calendar] calendar-month {
+    --color-accent: var(--ui-date-picker-selected-bg);
+    --color-text-on-accent: var(--ui-date-picker-selected-fg);
+    inline-size: var(--ui-date-picker-month-min);
+    min-inline-size: var(--ui-date-picker-month-min);
+  }
+
+  [data-ui-date-picker-calendar][data-fixed-weeks="true"] calendar-month {
+    min-block-size: calc(
+      var(--ui-date-picker-month-heading-size) +
+      (var(--ui-date-picker-week-row-size) * 7) +
+      (var(--ui-date-picker-week-gap) * 6) +
+      0.25rem
+    );
+  }
+
+  [data-ui-date-picker-calendar][data-hide-month-heading="true"][data-fixed-weeks="true"] calendar-month {
+    min-block-size: calc(
+      (var(--ui-date-picker-week-row-size) * 7) +
+      (var(--ui-date-picker-week-gap) * 6)
+    );
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(table) {
+    border-collapse: separate;
+    border-spacing: 0 0.125rem;
+    inline-size: var(--ui-date-picker-month-min);
+    max-inline-size: none;
+    min-inline-size: var(--ui-date-picker-month-min);
+    table-layout: fixed;
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(heading) {
+    color: var(--color-foreground);
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--text-sm--line-height);
+    min-block-size: var(--ui-date-picker-month-heading-size);
+    padding-block: 0.25rem;
+    text-align: center;
+  }
+
+  [data-ui-date-picker-calendar][data-hide-month-heading="true"] calendar-month::part(heading) {
+    display: none;
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(th),
+  [data-ui-date-picker-calendar] calendar-month::part(td) {
+    block-size: var(--ui-date-picker-week-row-size);
+    inline-size: calc(100% / 7);
+    max-inline-size: none;
+    min-inline-size: 0;
+    overflow: hidden;
+    padding: 0;
+    text-align: center;
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(weekday) {
+    align-items: center;
+    color: var(--color-foreground-subtle);
+    display: inline-flex;
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-medium);
+    inline-size: 100%;
+    justify-content: center;
+    line-height: var(--text-xs--line-height);
+    overflow: hidden;
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(button) {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-3);
+    color: var(--color-foreground);
+    display: inline-flex;
+    block-size: 2rem;
+    inline-size: 2rem;
+    font-size: var(--text-sm);
+    justify-content: center;
+    line-height: var(--text-sm--line-height);
+    margin-inline: auto;
+    outline: none;
+    padding: 0;
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(day) {
+    border-radius: var(--radius-3);
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(button):hover {
+    background-color: var(--color-base-a2);
+    color: var(--color-foreground);
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(button):focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(outside) {
+    color: var(--color-foreground-subtle);
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(today) {
+    background-image: radial-gradient(circle at 50% calc(100% - 0.1875rem), currentColor 0.125rem, transparent 0.15625rem);
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(selected),
+  [data-ui-date-picker-calendar] calendar-month::part(range-start),
+  [data-ui-date-picker-calendar] calendar-month::part(range-end) {
+    background-color: var(--ui-date-picker-selected-bg);
+    color: var(--ui-date-picker-selected-fg);
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(selected):hover,
+  [data-ui-date-picker-calendar] calendar-month::part(range-start):hover,
+  [data-ui-date-picker-calendar] calendar-month::part(range-end):hover {
+    background-color: var(--ui-date-picker-selected-bg-hover);
+    color: var(--ui-date-picker-selected-fg);
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(range-inner) {
+    background-color: var(--ui-date-picker-range-bg);
+    border-radius: 0;
+    color: var(--color-foreground);
+    inline-size: 100%;
+    margin-inline: 0;
+    width: 100%;
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(range-inner):hover {
+    background-color: var(--ui-date-picker-range-bg-hover);
+    color: var(--color-foreground);
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(range-start) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    inline-size: 100%;
+    margin-inline: 0;
+    width: 100%;
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(range-end) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    inline-size: 100%;
+    margin-inline: 0;
+    width: 100%;
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(range-start range-end) {
+    border-radius: var(--radius-3);
+  }
+
+  [data-ui-date-picker-calendar] calendar-select-month::part(label),
+  [data-ui-date-picker-calendar] calendar-select-year::part(label) {
+    display: none;
+  }
+
+  [data-ui-date-picker-calendar] calendar-select-month::part(select),
+  [data-ui-date-picker-calendar] calendar-select-year::part(select) {
+    appearance: auto;
+    background-color: var(--color-base-a2);
+    border: 1px solid transparent;
+    border-radius: var(--radius-3);
+    box-shadow: none;
+    block-size: var(--ui-control-height-md);
+    color: var(--color-foreground);
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--text-sm--line-height);
+    min-inline-size: 4.75rem;
+    outline: none;
+    padding-block: 0;
+    padding-inline: 0.5rem 0.25rem;
+  }
+
+  [data-ui-date-picker-calendar] calendar-select-month::part(select):hover,
+  [data-ui-date-picker-calendar] calendar-select-year::part(select):hover {
+    background-color: var(--color-base-a3);
+    border-color: transparent;
+  }
+
+  [data-ui-date-picker-calendar] calendar-select-month::part(select):focus-visible,
+  [data-ui-date-picker-calendar] calendar-select-year::part(select):focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+
+  @media (max-width: 40rem) {
+    [data-ui-date-picker-calendar]::part(months) {
+      grid-template-columns: minmax(var(--ui-date-picker-month-min), 1fr);
+    }
+  }
+}

package/src/components/field/styles.css

@@ -0,0 +1,12 @@
+@layer components {
+  [data-ui-field][data-layout="grid"] > [data-ui-field-label] {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  [data-ui-field][data-layout="grid"] > [data-ui-field-description],
+  [data-ui-field][data-layout="grid"] > [data-ui-field-error],
+  [data-ui-field][data-layout="grid"] > [data-ui-field-control] {
+    grid-column: 2;
+  }
+}

package/src/components/image/styles.css

@@ -0,0 +1,10 @@
+@layer components {
+  .ui-image-outline {
+    outline: 1px solid rgba(0, 0, 0, 0.1);
+    outline-offset: -1px;
+  }
+
+  .dark .ui-image-outline {
+    outline-color: rgba(255, 255, 255, 0.1);
+  }
+}

package/src/components/input/styles.css

@@ -0,0 +1,11 @@
+@layer components {
+  [data-ui-input-group] > [data-ui-input-root],
+  [data-ui-input-group] [data-ui-input-control] {
+    display: contents !important;
+  }
+
+  [data-ui-input-group] > :not([data-ui-input-root]):not([data-ui-input-control]) {
+    cursor: default;
+    user-select: none;
+  }
+}

package/src/components/radio/styles.css

@@ -0,0 +1,100 @@
+@layer components {
+  [data-ui-radio]:has([data-ui-radio-input]:focus-visible) {
+    box-shadow: var(--shadow-focus);
+  }
+
+  [data-ui-radio-group][data-variant="cards"] > [data-ui-radio],
+  [data-ui-radio][data-variant="cards"] {
+    align-items: center;
+    background-color: var(--color-surface);
+    border-radius: var(--radius-3);
+    box-shadow: var(--shadow-border);
+    min-height: var(--ui-control-height-xlg);
+    padding: 0.875rem 1rem;
+  }
+
+  [data-ui-radio-group][data-variant="cards"] > [data-ui-radio][data-invalid],
+  [data-ui-radio][data-variant="cards"][data-invalid] {
+    background-color: var(--color-danger-surface);
+    box-shadow: 0 0 0 1px var(--color-danger-border);
+  }
+
+  [data-ui-radio-group][data-variant="pills"] > [data-ui-radio],
+  [data-ui-radio][data-variant="pills"] {
+    align-items: center;
+    background-color: var(--color-surface);
+    border-radius: var(--radius-full);
+    box-shadow: var(--shadow-border);
+    min-height: var(--ui-control-height-md);
+    padding: 0.25rem 0.75rem;
+  }
+
+  [data-ui-radio-group][data-variant="pills"] > [data-ui-radio][data-checked],
+  [data-ui-radio][data-variant="pills"][data-checked] {
+    background-color: var(--color-accent-surface);
+    color: var(--color-foreground);
+    box-shadow: 0 0 0 1px var(--color-accent-border), var(--shadow-1);
+  }
+
+  [data-ui-radio-group][data-variant="pills"] > [data-ui-radio][data-checked]:hover:not([data-disabled]),
+  [data-ui-radio][data-variant="pills"][data-checked]:hover:not([data-disabled]) {
+    background-color: var(--color-accent-surface);
+    box-shadow: 0 0 0 1px var(--color-accent-border), var(--shadow-1);
+  }
+
+  [data-ui-radio-group][data-indicator="false"] [data-ui-radio-indicator],
+  [data-ui-radio][data-indicator="false"] [data-ui-radio-indicator] {
+    display: none !important;
+  }
+
+  [data-ui-radio-group][data-placement="trailing"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="trailing"] > [data-ui-radio-indicator] {
+    margin-left: auto;
+    order: 10;
+  }
+
+  [data-ui-radio-group][data-placement="center"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="center"] > [data-ui-radio-indicator] {
+    left: 50%;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  [data-ui-radio-group][data-placement="top-leading"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="top-leading"] > [data-ui-radio-indicator],
+  [data-ui-radio-group][data-placement="top-trailing"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="top-trailing"] > [data-ui-radio-indicator],
+  [data-ui-radio-group][data-placement="bottom-leading"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="bottom-leading"] > [data-ui-radio-indicator],
+  [data-ui-radio-group][data-placement="bottom-trailing"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="bottom-trailing"] > [data-ui-radio-indicator] {
+    margin: 0;
+    position: absolute;
+  }
+
+  [data-ui-radio-group][data-placement="top-leading"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="top-leading"] > [data-ui-radio-indicator] {
+    left: 0.75rem;
+    top: 0.75rem;
+  }
+
+  [data-ui-radio-group][data-placement="top-trailing"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="top-trailing"] > [data-ui-radio-indicator] {
+    right: 0.75rem;
+    top: 0.75rem;
+  }
+
+  [data-ui-radio-group][data-placement="bottom-leading"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="bottom-leading"] > [data-ui-radio-indicator] {
+    bottom: 0.75rem;
+    left: 0.75rem;
+  }
+
+  [data-ui-radio-group][data-placement="bottom-trailing"] [data-ui-radio-indicator],
+  [data-ui-radio][data-placement="bottom-trailing"] > [data-ui-radio-indicator] {
+    bottom: 0.75rem;
+    right: 0.75rem;
+  }
+}

package/src/components/scroll-area/styles.css

@@ -0,0 +1,27 @@
+@layer components {
+  [data-ui-scroll-area][data-size="md"] {
+    --ui-scrollbar-size: 0.5rem;
+  }
+
+  [data-ui-scroll-area-viewport] {
+    max-height: inherit;
+    max-width: inherit;
+  }
+
+  [data-ui-scroll-area-viewport][data-hide-native] {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  [data-ui-scroll-area-viewport][data-hide-native]::-webkit-scrollbar {
+    display: none;
+  }
+
+  [data-ui-scroll-area-scrollbar][data-orientation="vertical"] {
+    height: calc(100% - (var(--ui-scrollbar-inset) * 2));
+  }
+
+  [data-ui-scroll-area-scrollbar][data-orientation="horizontal"] {
+    width: calc(100% - (var(--ui-scrollbar-inset) * 2));
+  }
+}

package/src/components/select/styles.css

@@ -0,0 +1,10 @@
+@layer components {
+  [data-ui-select-native][aria-invalid="true"] {
+    border-color: var(--ui-control-border-invalid);
+  }
+
+  [data-ui-select-native][aria-invalid="true"]:focus {
+    border-color: var(--ui-control-border-invalid-focus);
+    box-shadow: var(--shadow-control), 0 0 0 3px var(--color-danger-a4);
+  }
+}

package/src/components/sidebar/styles.css

@@ -0,0 +1,10 @@
+@layer components {
+  [data-ui-sidebar-state-icon] [data-ui-sidebar-state-icon-when] {
+    display: none;
+  }
+
+  [data-ui-sidebar-state-icon][data-state="closed"] [data-ui-sidebar-state-icon-when="closed"],
+  [data-ui-sidebar-state-icon][data-state="open"] [data-ui-sidebar-state-icon-when="open"] {
+    display: block;
+  }
+}

package/src/components/theme/styles.css

@@ -0,0 +1,13 @@
+@layer components {
+  [data-ui-theme-icon] [data-ui-theme-icon-when],
+  [data-ui-theme-text] [data-ui-theme-text-when] {
+    display: none;
+  }
+
+  html:not(.dark) [data-ui-theme-icon] [data-ui-theme-icon-when="light"],
+  html.dark [data-ui-theme-icon] [data-ui-theme-icon-when="dark"],
+  html:not(.dark) [data-ui-theme-text] [data-ui-theme-text-when="light"],
+  html.dark [data-ui-theme-text] [data-ui-theme-text-when="dark"] {
+    display: block;
+  }
+}

package/src/components/toast/styles.css

@@ -0,0 +1,43 @@
+/*
+  Keep collapsed stack layout unlayered so these state selectors outrank the
+  outlet's generated utility classes without extra !important declarations.
+*/
+
+[data-ui-toast-outlet][data-stack="collapsed"] {
+  display: block;
+  height: var(--ui-toast-stack-height);
+}
+
+[data-ui-toast-outlet][data-stack="collapsed"][data-stack-expanded="true"] {
+  height: var(--ui-toast-stack-expanded-height);
+}
+
+[data-ui-toast-outlet][data-stack="collapsed"] > [data-ui-toast] {
+  inset-inline: 0;
+  position: absolute;
+  top: 0;
+  opacity: var(--ui-toast-stack-opacity, 1);
+  transform: translateY(var(--ui-toast-stack-offset, 0px)) scale(var(--ui-toast-stack-scale, 1));
+  transform-origin: top center;
+}
+
+[data-ui-toast-outlet][data-stack="collapsed"][data-position^="bottom"] > [data-ui-toast] {
+  bottom: 0;
+  top: auto;
+  transform-origin: bottom center;
+}
+
+[data-ui-toast-outlet][data-stack="collapsed"] > [data-ui-toast]:not(:first-child) {
+  height: var(--ui-toast-front-height);
+}
+
+[data-ui-toast-outlet][data-stack="collapsed"][data-stack-expanded="true"] > [data-ui-toast] {
+  height: auto;
+  opacity: 1;
+  position: relative;
+  transform: none;
+}
+
+[data-ui-toast-outlet][data-stack="collapsed"][data-stack-expanded="true"] > [data-ui-toast]:not(:first-child) {
+  margin-top: var(--spacing-2);
+}

package/src/components.css

@@ -0,0 +1,21 @@
+/*
+  Component CSS import point.
+
+  Add files here only when a component needs selectors or browser features that
+  TypeScript style recipes cannot express cleanly, such as pseudo-elements,
+  ::part(...), :has(...), native quirks, or child-order selectors.
+*/
+
+@import "./components/brand/styles.css";
+@import "./components/scroll-area/styles.css";
+@import "./components/select/styles.css";
+@import "./components/field/styles.css";
+@import "./components/radio/styles.css";
+@import "./components/date-picker/styles.css";
+@import "./components/button/styles.css";
+@import "./components/accordion/styles.css";
+@import "./components/toast/styles.css";
+@import "./components/input/styles.css";
+@import "./components/image/styles.css";
+@import "./components/sidebar/styles.css";
+@import "./components/theme/styles.css";