@ctrl-ui/react 0.8.7 → 0.8.9

package/dist/styles/recipes/accordion.css

@@ -1,7 +1,7 @@
 @layer components {
   :where([data-control-family="accordion"][data-slot="root"]) {
     --cui-accordion-item-border-color: var(--border);
-    --cui-accordion-item-border-width: 1px;
+    --cui-accordion-item-border-width: var(--control-rim-width);
     --cui-accordion-trigger-foreground: var(--foreground);
     --cui-accordion-trigger-hover-foreground: oklch(from var(--foreground) l c h / 0.8);
     --cui-accordion-icon-foreground: var(--muted-foreground);
@@ -19,18 +19,20 @@
     padding-block: calc(var(--spacing) * 3);
     color: var(--cui-accordion-trigger-foreground);
     font-size: var(--text-body);
-    outline: none;
-    text-align: left;
+    text-align: start;
+    text-wrap: balance;
     font-weight: var(--font-weight-medium);
   }
 
-  :where([data-control-family="accordion"][data-slot="trigger"]:hover) {
-    color: var(--cui-accordion-trigger-hover-foreground);
+  @media (hover: hover) {
+    :where([data-control-family="accordion"][data-slot="trigger"]:not([data-disabled]):hover) {
+      color: var(--cui-accordion-trigger-hover-foreground);
+    }
   }
 
   :where([data-control-family="accordion"][data-slot="trigger"][data-disabled]) {
     cursor: not-allowed;
-    opacity: 0.5;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="accordion"][data-slot="icon"]) {
@@ -51,6 +53,7 @@
   :where([data-control-family="accordion"][data-slot="panel"]) {
     color: var(--muted-foreground);
     font-size: var(--text-body);
+    text-wrap: pretty;
     height: var(--accordion-panel-height);
     overflow: hidden;
     transition: height var(--duration-base) var(--ease-emphasized);

package/dist/styles/recipes/action-bar.css

@@ -24,21 +24,6 @@
   :where([data-control-family="chat-layout"][data-slot="turn"]:focus-within [data-control-family="action-bar"][data-slot="root"]) {
     opacity: var(--cui-action-bar-visible-opacity);
   }
-
-  @media (pointer: coarse) {
-    :where([data-control-family="action-bar"][data-slot="root"] [data-control-family="button"]) {
-      position: relative;
-    }
-
-    :where([data-control-family="action-bar"][data-slot="root"] [data-control-family="button"])::after {
-      content: "";
-      position: absolute;
-      inset: 50% 50%;
-      translate: -50% -50%;
-      inline-size: 100%;
-      block-size: max(100%, 44px);
-    }
-  }
 }
 
 @property --cui-action-bar-hidden-opacity {

package/dist/styles/recipes/activity.css

@@ -65,7 +65,7 @@
   }
 
   :where([data-control-family="activity"][data-slot="root"][data-activity-state="running"] [data-slot="icon"][data-status-icon] svg) {
-    animation: activity-spin calc(var(--duration-slow) * 2) linear infinite;
+    animation: cui-spin var(--duration-loop) linear infinite;
   }
 
   :where([data-control-family="activity"][data-slot="root"][data-activity-state="error"] [data-slot="icon"]) {
@@ -117,20 +117,14 @@
     :where([data-control-family="activity"][data-slot="trigger"])::after {
       content: "";
       position: absolute;
-      inset: 50% 50%;
-      translate: -50% -50%;
-      inline-size: 100%;
-      block-size: max(100%, 44px);
+      inset-inline: 0;
+      inset-block-start: 50%;
+      translate: 0 -50%;
+      block-size: max(100%, var(--touch-target));
     }
   }
 }
 
-@keyframes activity-spin {
-  to {
-    rotate: 360deg;
-  }
-}
-
 @property --cui-activity-row-foreground {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/alert.css

@@ -6,13 +6,13 @@
     --cui-alert-shadow: none;
     --cui-alert-foreground: var(--card-foreground);
     --cui-alert-description-foreground: var(--muted-foreground);
-    --cui-alert-border-width: 1px;
+    --cui-alert-border-width: var(--control-rim-width);
     --cui-alert-padding: calc(var(--spacing) * 3);
     --cui-alert-padding-inline: calc(var(--spacing) * 4);
     --cui-alert-gap: calc(var(--spacing) * 0.5);
     --cui-alert-icon-gap: calc(var(--spacing) * 3);
     --cui-alert-icon-size: calc(var(--spacing) * 4);
-    --cui-alert-font-size: var(--text-sm);
+    --cui-alert-font-size: var(--text-body);
     --cui-alert-title-font-weight: var(--font-weight-medium);
     --cui-alert-description-gap: var(--spacing);
     grid-template-columns: 0 minmax(0, 1fr);
@@ -24,7 +24,7 @@
     box-shadow: var(--cui-alert-shadow);
     color: var(--cui-alert-foreground);
     font-size: var(--cui-alert-font-size);
-    line-height: var(--text-sm--line-height);
+    line-height: var(--leading-normal);
     overflow-wrap: anywhere;
   }
 
@@ -43,7 +43,7 @@
     gap: var(--cui-alert-description-gap);
     color: var(--cui-alert-description-foreground);
     font-size: var(--cui-alert-font-size);
-    line-height: var(--text-sm--line-height);
+    line-height: var(--leading-normal);
     text-wrap: pretty;
   }
 

package/dist/styles/recipes/audio-recorder.css

@@ -4,6 +4,7 @@
     --cui-audio-recorder-foreground: var(--muted-foreground);
     --cui-audio-recorder-recording-ring-color: oklch(from var(--destructive) l c h / 0.25);
     --cui-audio-recorder-error-foreground: var(--destructive-text);
+    --cui-audio-recorder-meta-foreground: var(--muted-foreground);
     min-block-size: calc(var(--spacing) * 8);
     gap: calc(var(--spacing) * 2);
     padding-inline-end: calc(var(--spacing) * 1);
@@ -36,7 +37,8 @@
     --_audio-recorder-content-visible-scale: 100%;
     opacity: 0;
     filter: blur(var(--blur-xs));
-    translate: calc(var(--spacing) * 1) 0;
+    --_audio-recorder-inline-sign: 1;
+    translate: calc(var(--spacing) * var(--_audio-recorder-inline-sign)) 0;
     scale: var(--_audio-recorder-content-hidden-scale);
     visibility: hidden;
     transition-property: opacity, filter, translate, scale, visibility;
@@ -45,6 +47,10 @@
     transition-behavior: allow-discrete;
   }
 
+  :where([data-control-ui="audio-recorder"]:dir(rtl)) {
+    --_audio-recorder-inline-sign: -1;
+  }
+
   :where([data-control-ui="audio-recorder"]:is([data-slot="cancel"], [data-slot="submit"])) {
     --_audio-recorder-content-hidden-scale: 95%;
   }
@@ -62,7 +68,7 @@
   }
 
   :where([data-control-ui="audio-recorder"]:is([data-slot="status"], [data-slot="duration"])) {
-    color: var(--muted-foreground);
+    color: var(--cui-audio-recorder-meta-foreground);
     font-size: var(--text-caption);
   }
 
@@ -72,7 +78,7 @@
 
   :where([data-control-ui="audio-recorder"][data-slot="duration"]) {
     inline-size: calc(var(--spacing) * 10);
-    text-align: right;
+    text-align: end;
     font-variant-numeric: tabular-nums;
   }
 }
@@ -100,3 +106,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-audio-recorder-meta-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/audio-visualizer.css

@@ -5,6 +5,11 @@
     --cui-audio-visualizer-bar-radius: var(--radius-control);
     --cui-audio-visualizer-line-fill: oklch(from var(--primary) l c h / 0.18);
     --cui-audio-visualizer-line-stroke: oklch(from var(--primary) l c h / 0.8);
+    --cui-audio-visualizer-baseline-stroke: oklch(from var(--border) l c h / 0.55);
+    --_audio-visualizer-inline-sign: 1;
+  }
+  :where([data-control-family="audio-visualizer"][data-variant]:dir(rtl)) {
+    --_audio-visualizer-inline-sign: -1;
   }
   :where([data-control-family="audio-visualizer"][data-slot="root"][data-variant]) {
     block-size: calc(var(--spacing) * 7);
@@ -42,7 +47,7 @@
       opacity: 0;
       --_audio-visualizer-bar-track-filter: blur(var(--blur-xs));
       filter: var(--_audio-visualizer-bar-track-filter);
-      translate: var(--spacing) 0;
+      translate: calc(var(--spacing) * var(--_audio-visualizer-inline-sign)) 0;
     }
   }
 
@@ -56,7 +61,7 @@
   }
 
   :where([data-control-family="audio-visualizer"][data-slot="baseline"]) {
-    stroke: oklch(from var(--border) l c h / 0.55);
+    stroke: var(--cui-audio-visualizer-baseline-stroke);
   }
 
   :where([data-control-family="audio-visualizer"][data-slot="waveform"]) {
@@ -95,3 +100,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-audio-visualizer-baseline-stroke {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/avatar.css

@@ -1,6 +1,11 @@
 @layer components {
   :where([data-control-family="avatar"][data-slot="root"]) {
-    --cui-avatar-image-outline-color: oklch(from var(--foreground) l c h / 0.1);
+    --cui-avatar-image-outline-color: var(--image-outline);
+    --cui-avatar-badge-size: max(0.5rem, 30%);
+    --cui-avatar-badge-ring-size: 2px;
+    --cui-avatar-badge-ring-color: var(--background);
+    --cui-avatar-badge-background: var(--primary);
+    --cui-avatar-badge-foreground: var(--primary-foreground);
     inline-size: calc(var(--spacing) * 9);
     block-size: calc(var(--spacing) * 9);
   }
@@ -28,6 +33,48 @@
     box-shadow: 0 0 0 2px var(--cui-avatar-group-ring-color);
   }
 
+  :where([data-control-family="avatar"][data-slot="image"]) {
+    border-radius: inherit;
+  }
+
+  :where([data-control-family="avatar"][data-slot="badge"]) {
+    z-index: 1;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    inline-size: var(--cui-avatar-badge-size);
+    aspect-ratio: 1;
+    border-radius: 9999px;
+    background: var(--cui-avatar-badge-background);
+    color: var(--cui-avatar-badge-foreground);
+    box-shadow: 0 0 0 var(--cui-avatar-badge-ring-size) var(--cui-avatar-badge-ring-color);
+    font-size: 0.5rem;
+    font-weight: var(--font-weight-medium);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="avatar"][data-slot="badge"] > svg) {
+    inline-size: 70%;
+    block-size: 70%;
+  }
+
+  :where([data-control-family="avatar"][data-slot="badge"][data-status="online"]) {
+    --cui-avatar-badge-background: var(--success-text);
+  }
+
+  :where([data-control-family="avatar"][data-slot="badge"][data-status="away"]) {
+    --cui-avatar-badge-background: var(--warning-text);
+  }
+
+  :where([data-control-family="avatar"][data-slot="badge"][data-status="busy"]) {
+    --cui-avatar-badge-background: var(--destructive);
+  }
+
+  :where([data-control-family="avatar"][data-slot="badge"][data-status="offline"]) {
+    --cui-avatar-badge-background: oklch(from var(--muted-foreground) l c h / 0.6);
+  }
+
   :where([data-control-family="avatar"][data-slot="fallback"]) {
     border-radius: inherit;
     background: var(--cui-avatar-fallback-background);
@@ -66,3 +113,33 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-avatar-badge-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-avatar-badge-ring-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-avatar-badge-ring-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-avatar-badge-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-avatar-badge-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/badge.css

@@ -6,6 +6,7 @@
     --cui-badge-background: var(--_badge-color-background);
     --cui-badge-foreground: var(--_badge-color-foreground);
     --cui-badge-border-color: transparent;
+    --cui-badge-font-size: var(--text-caption);
     --_badge-color-background: var(--badge-neutral);
     --_badge-color-foreground: var(--badge-neutral-foreground);
     --_badge-color-border: var(--badge-neutral-border);
@@ -15,10 +16,11 @@
     border-radius: var(--cui-badge-radius);
     background: var(--cui-badge-background);
     color: var(--cui-badge-foreground);
-    outline: none;
+    font-size: var(--cui-badge-font-size);
   }
 
   :where([data-control-family="badge"][data-slot="root"][data-size="sm"]) {
+    --cui-badge-font-size: var(--text-micro);
     block-size: calc(var(--spacing) * 4);
     padding: 0 calc(var(--spacing) * 1.5);
   }
@@ -29,9 +31,11 @@
     --_badge-hover-background: var(--_badge-color-background);
   }
 
-  :where(a[data-control-family="badge"][data-slot="root"]:hover),
-  :where(button[data-control-family="badge"][data-slot="root"]:hover) {
-    background: var(--_badge-hover-background);
+  @media (hover: hover) {
+    :where(a[data-control-family="badge"][data-slot="root"]:hover),
+    :where(button[data-control-family="badge"][data-slot="root"]:not(:disabled):hover) {
+      background: var(--_badge-hover-background);
+    }
   }
 
   :where([data-control-family="badge"][data-slot="root"][data-color="red"]) {
@@ -107,3 +111,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-badge-font-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/breadcrumb.css

@@ -0,0 +1,77 @@
+@layer components {
+  :where([data-control-family="breadcrumb"][data-slot="root"]) {
+    --cui-breadcrumb-list-foreground: var(--muted-foreground);
+    --cui-breadcrumb-page-foreground: var(--foreground);
+    --cui-breadcrumb-link-hover-foreground: var(--foreground);
+  }
+
+  :where([data-control-family="breadcrumb"][data-slot="page"]) {
+    font-weight: var(--font-weight-normal);
+    color: var(--cui-breadcrumb-page-foreground);
+  }
+
+  :where([data-control-family="breadcrumb"][data-slot="list"]) {
+    gap: calc(var(--spacing) * 1.5);
+    font-size: var(--text-body);
+    line-height: calc(var(--spacing) * 5);
+    color: var(--cui-breadcrumb-list-foreground);
+  }
+
+  @media (width >= 40rem) {
+    :where([data-control-family="breadcrumb"][data-slot="list"]) {
+      gap: calc(var(--spacing) * 2.5);
+    }
+  }
+
+  :where([data-control-family="breadcrumb"][data-slot="item"]) {
+    gap: calc(var(--spacing) * 1.5);
+  }
+
+  :where([data-control-family="breadcrumb"][data-slot="link"]) {
+    transition: color var(--duration-fast) var(--ease-standard);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="breadcrumb"][data-slot="link"]:hover:not([aria-disabled="true"])) {
+      color: var(--cui-breadcrumb-link-hover-foreground);
+    }
+  }
+
+  :where([data-control-family="breadcrumb"][data-slot="ellipsis"]) {
+    inline-size: calc(var(--spacing) * 9);
+    block-size: calc(var(--spacing) * 9);
+  }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="breadcrumb"][data-slot="link"]) {
+      position: relative;
+    }
+
+    :where([data-control-family="breadcrumb"][data-slot="link"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% 50%;
+      translate: -50% -50%;
+      inline-size: 100%;
+      block-size: max(100%, var(--touch-target));
+    }
+  }
+}
+
+@property --cui-breadcrumb-list-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-breadcrumb-page-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-breadcrumb-link-hover-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/button-group.css

@@ -8,7 +8,7 @@
 
   :where([data-control-family="button-group"][data-slot="text"]) {
     block-size: var(--control-h-md);
-    border: 1px solid var(--border);
+    border: var(--control-rim-width) solid var(--control-rim);
     border-radius: var(--cui-button-group-text-radius);
     background: var(--cui-button-group-text-background);
     box-shadow: var(--shadow-sm);
@@ -84,12 +84,10 @@
     z-index: 3;
   }
 
-  @media (pointer: coarse) {
-    :where(
-        [data-control-family="button-group"][data-slot="root"][data-orientation="vertical"] [data-control-family="button"][data-size="xs"]
-      )::after {
-      block-size: 100%;
-    }
+  :where(
+    [data-control-family="button-group"][data-slot="root"][data-orientation="vertical"] [data-control-family="button"][data-size="xs"]
+  )::after {
+    block-size: 100%;
   }
 }
 

package/dist/styles/recipes/button-states.css

@@ -0,0 +1,66 @@
+@layer components {
+  @media (hover: hover) {
+    :where([data-control-family="button"][data-control="true"]:hover:not(:disabled, [data-disabled], [aria-disabled="true"])) {
+      background-color: var(--cui-button-hover-background);
+      background-image: var(--cui-button-hover-background-image);
+      box-shadow: var(--cui-button-hover-shadow);
+      color: var(--cui-button-hover-foreground);
+    }
+  }
+
+  :where([data-control-family="button"][data-popup-open]) {
+    background-color: var(--cui-button-open-background);
+    color: var(--cui-button-open-foreground);
+    box-shadow: var(--cui-button-open-shadow);
+  }
+
+  :where([data-control-family="button"][data-active="true"]) {
+    background-color: var(--cui-button-active-background);
+    box-shadow: var(--cui-button-active-shadow);
+    color: var(--cui-button-active-foreground);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="button"][data-active="true"]:hover:not(:disabled, [data-disabled], [aria-disabled="true"])) {
+      background-color: var(--cui-button-active-hover-background);
+      color: var(--cui-button-active-foreground);
+    }
+  }
+
+  @scope ([data-track="hover"]) to ([data-track]) {
+    @media (hover: hover) {
+      :where(
+          [data-track="hover"] [data-control-family="button"][data-track-item]:hover:not([data-active="true"], [data-popup-open], :active)
+        ) {
+        background-color: var(--cui-button-background);
+        background-image: var(--cui-button-background-image);
+        box-shadow: var(--cui-button-shadow);
+      }
+
+      :where(
+          [data-track="hover"] [data-control-family="button"][data-track-item][data-active="true"]:hover:not([data-popup-open], :active)
+        ) {
+        background-color: var(--cui-button-active-background);
+      }
+    }
+  }
+
+  @scope ([data-track="slide"]) to ([data-track]) {
+    :where([data-track="slide"] [data-control-family="button"][data-track-item]:not([data-popup-open], :active)) {
+      background-color: var(--cui-button-background);
+      background-image: var(--cui-button-background-image);
+      box-shadow: var(--cui-button-shadow);
+    }
+  }
+
+  :where([data-control-family="button"][data-control="true"]:active:not(:disabled, [data-disabled], [aria-disabled="true"])) {
+    background-color: var(--cui-button-press-background);
+    box-shadow: var(--cui-button-press-shadow);
+    scale: var(--cui-button-press-scale);
+  }
+
+  :where([data-control-family="button"]:is(:disabled, [data-disabled], [aria-disabled="true"])) {
+    cursor: not-allowed;
+    opacity: var(--disabled-opacity);
+  }
+}