@ctrl-ui/react 0.9.4 → 0.9.6

package/dist/styles/index.css

@@ -2,37 +2,39 @@
 @import "./recipes/accordion.css";
 @import "./recipes/button.css";
 @import "./recipes/button-states.css";
+@import "./recipes/swap.css";
 @import "./recipes/action-bar.css";
 @import "./recipes/collapsible.css";
 @import "./effects.css";
 @import "./recipes/progressive-blur.css";
 @import "./recipes/scroll-area.css";
 @import "./recipes/activity.css";
-@import "./recipes/alert.css";
+@import "./recipes/badge.css";
+@import "./recipes/card.css";
 @import "./recipes/popup.css";
 @import "./recipes/popup-controls.css";
+@import "./recipes/popup-drawer.css";
 @import "./recipes/popup-lists.css";
 @import "./recipes/popup-motion.css";
-@import "./recipes/page-layout.css";
-@import "./recipes/popup-drawer.css";
 @import "./recipes/track-highlight.css";
 @import "./recipes/sidebar.css";
 @import "./recipes/sidebar-menu.css";
 @import "./recipes/sidebar-mobile.css";
 @import "./recipes/sidebar-parts.css";
+@import "./recipes/timeline.css";
+@import "./type-scale.css";
+@import "./recipes/alert.css";
+@import "./recipes/page-layout.css";
 @import "./recipes/app-shell-header.css";
 @import "./recipes/field.css";
 @import "./recipes/field-parts.css";
-@import "./type-scale.css";
 @import "./recipes/audio-device-select.css";
 @import "./recipes/audio-visualizer.css";
 @import "./recipes/audio-recorder.css";
 @import "./recipes/avatar.css";
-@import "./recipes/badge.css";
 @import "./recipes/breadcrumb.css";
 @import "./recipes/button-group.css";
 @import "./recipes/calendar.css";
-@import "./recipes/card.css";
 @import "./recipes/channel-strip.css";
 @import "./recipes/chart.css";
 @import "./recipes/chat-message.css";
@@ -53,10 +55,10 @@
 @import "./recipes/gradient-editor.css";
 @import "./recipes/empty.css";
 @import "./recipes/context.css";
+@import "./recipes/toolbar.css";
 @import "./recipes/infinite-canvas.css";
 @import "./recipes/resizable.css";
 @import "./recipes/separator.css";
-@import "./recipes/toolbar.css";
 @import "./recipes/kbd.css";
 @import "./recipes/markdown.css";
 @import "./recipes/label.css";
@@ -91,8 +93,8 @@
 @import "./recipes/table-of-contents.css";
 @import "./recipes/task-list.css";
 @import "./recipes/thread-rail.css";
-@import "./recipes/timeline.css";
 @import "./recipes/popup-toast.css";
+@import "./recipes/tool-approval.css";
 @import "./recipes/transcript-divider.css";
 @import "./recipes/tree.css";
 @import "./recipes/user-ask.css";

package/dist/styles/recipes/activity.css

@@ -72,6 +72,10 @@
     color: var(--destructive-text);
   }
 
+  :where([data-control-family="activity"][data-slot="root"][data-activity-state="waiting"] [data-slot="icon"]) {
+    color: var(--warning-text);
+  }
+
   :where([data-control-family="activity"][data-slot="title"]) {
     color: currentColor;
     font-size: var(--text-label);
@@ -87,6 +91,10 @@
     color: var(--destructive-text);
   }
 
+  :where([data-control-family="activity"][data-slot="status"][data-status="waiting"]) {
+    color: var(--warning-text);
+  }
+
   :where([data-control-family="activity"][data-slot="detail-label"]) {
     color: var(--muted-foreground);
     font-size: var(--text-micro);

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

@@ -44,30 +44,36 @@
 
   :where(
     [data-control-family="button-group"][data-orientation="horizontal"]
-      > :not([data-control-family="track-highlight"])
-      + :not([data-control-family="track-highlight"])
+      > :not([data-control-family="track-highlight"], [data-base-ui-focus-guard], span[aria-owns])
+      ~ :not([data-control-family="track-highlight"], [data-base-ui-focus-guard], span[aria-owns])
   ) {
     margin-inline-start: -1px;
     border-start-start-radius: 0;
     border-end-start-radius: 0;
   }
 
-  :where([data-control-family="button-group"][data-orientation="horizontal"] > :has(~ :not([data-control-family="track-highlight"]))) {
+  :where(
+    [data-control-family="button-group"][data-orientation="horizontal"]
+      > :has(~ :not([data-control-family="track-highlight"], [data-base-ui-focus-guard], span[aria-owns]))
+  ) {
     border-start-end-radius: 0;
     border-end-end-radius: 0;
   }
 
   :where(
     [data-control-family="button-group"][data-orientation="vertical"]
-      > :not([data-control-family="track-highlight"])
-      + :not([data-control-family="track-highlight"])
+      > :not([data-control-family="track-highlight"], [data-base-ui-focus-guard], span[aria-owns])
+      ~ :not([data-control-family="track-highlight"], [data-base-ui-focus-guard], span[aria-owns])
   ) {
     margin-block-start: -1px;
     border-start-start-radius: 0;
     border-start-end-radius: 0;
   }
 
-  :where([data-control-family="button-group"][data-orientation="vertical"] > :has(~ :not([data-control-family="track-highlight"]))) {
+  :where(
+    [data-control-family="button-group"][data-orientation="vertical"]
+      > :has(~ :not([data-control-family="track-highlight"], [data-base-ui-focus-guard], span[aria-owns]))
+  ) {
     border-end-start-radius: 0;
     border-end-end-radius: 0;
   }

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

@@ -63,4 +63,16 @@
     cursor: not-allowed;
     opacity: var(--disabled-opacity);
   }
+
+  @media (forced-colors: active) {
+    :where([data-control-family="button"][data-control="true"]:not(:focus-visible, :has(:focus-visible))) {
+      outline: 1px solid currentColor;
+      outline-offset: -1px;
+    }
+
+    :where([data-control-family="button"][data-control="true"][data-active="true"]:not(:focus-visible, :has(:focus-visible))) {
+      outline: var(--focus-ring-width) solid Highlight;
+      outline-offset: calc(var(--focus-ring-width) * -1);
+    }
+  }
 }

package/dist/styles/recipes/button.css

@@ -95,7 +95,12 @@
   :where(
     [data-control-family="button"][data-control="true"][data-size]:not([data-icon-only="true"]):has(
       > :is(svg, [data-slot="icon"]):first-child:not(:only-child),
-      > [data-slot="content"] > :is(svg, [data-slot="icon"]):first-child:not(:only-child)
+      > [data-slot="content"] > :is(svg, [data-slot="icon"]):first-child:not(:only-child),
+      > [data-control-family="swap"]:first-child > [data-state="active"] > :is(svg, [data-slot="icon"]):first-child:not(:only-child),
+      > [data-slot="content"]
+        > [data-control-family="swap"]:first-child
+        > [data-state="active"]
+        > :is(svg, [data-slot="icon"]):first-child:not(:only-child)
     )
   ) {
     padding-inline-start: var(--cui-button-icon-padding-inline);
@@ -104,7 +109,12 @@
   :where(
     [data-control-family="button"][data-control="true"][data-size]:not([data-icon-only="true"]):has(
       > :is(svg, [data-slot="icon"]):last-child:not(:only-child),
-      > [data-slot="content"] > :is(svg, [data-slot="icon"]):last-child:not(:only-child)
+      > [data-slot="content"] > :is(svg, [data-slot="icon"]):last-child:not(:only-child),
+      > [data-control-family="swap"]:last-child > [data-state="active"] > :is(svg, [data-slot="icon"]):last-child:not(:only-child),
+      > [data-slot="content"]
+        > [data-control-family="swap"]:last-child
+        > [data-state="active"]
+        > :is(svg, [data-slot="icon"]):last-child:not(:only-child)
     )
   ) {
     padding-inline-end: var(--cui-button-icon-padding-inline);
@@ -164,7 +174,7 @@
     --cui-button-shadow: inset 0 0 0 var(--control-rim-width) var(--control-rim), var(--shadow-sm);
     --cui-button-active-background: oklch(from var(--primary) l c h / 0.08);
     --cui-button-active-foreground: var(--primary-text);
-    --cui-button-active-shadow: inset 0 0 0 1px oklch(from var(--primary) l c h / 0.6), var(--shadow-sm);
+    --cui-button-active-shadow: inset 0 0 0 var(--control-rim-width) oklch(from var(--primary) l c h / 0.6), var(--shadow-sm);
     --cui-button-active-hover-background: oklch(from var(--primary) l c h / 0.1);
   }
 

package/dist/styles/recipes/chat-composer-attachment.css

@@ -25,6 +25,13 @@
     transition-timing-function: var(--ease-standard);
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="chat-composer-attachment"][data-slot="root"][data-variant]:not(:focus-visible, :has(:focus-visible))) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
+
   :where([data-control-family="chat-composer-attachment"][data-slot="list"]) {
     gap: calc(var(--spacing) * 2);
     padding: var(--cui-chat-composer-attachment-list-padding);

package/dist/styles/recipes/chat-message-edit.css

@@ -5,15 +5,9 @@
   }
 
   :where([data-control-family="chat-message"][data-slot="content"][data-editable]) {
+    --focus-ring-offset: calc(var(--focus-ring-width) * -1);
     position: relative;
     display: grid;
-    outline: var(--focus-ring-width) var(--focus-ring-style) transparent;
-    outline-offset: calc(var(--focus-ring-width) * -1);
-    transition: outline-color var(--duration-fast) var(--ease-standard);
-  }
-
-  :where([data-control-family="chat-message"][data-slot="content"][data-editable]:focus-within) {
-    outline-color: var(--focus-ring);
   }
 
   :where([data-control-family="chat-message"][data-slot="editable"] :is([data-slot="edit-value"], [data-slot="edit-sizer"])) {
@@ -63,7 +57,6 @@
     white-space: pre-wrap;
     overflow-wrap: anywhere;
     scrollbar-width: thin;
-    outline: none;
     visibility: hidden;
   }
 
@@ -75,21 +68,13 @@
     visibility: hidden;
   }
 
-  :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-toolbars"]) {
-    display: grid;
-  }
-
-  :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-toolbar"]) {
-    grid-area: 1 / 1;
-    min-inline-size: 0;
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity var(--duration-fast) var(--ease-standard);
+  :where([data-control-family="chat-message"][data-slot="editable"] :is([data-slot="read-actions"], [data-slot="edit-actions"])) {
+    contain: inline-size;
   }
 
-  :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-toolbar"][data-active]) {
-    visibility: visible;
-    opacity: 1;
+  :where([data-control-family="chat-message"][data-slot="editable"][data-editing] [data-slot="read-actions"]),
+  :where([data-control-family="chat-message"][data-slot="editable"]:not([data-editing]) [data-slot="edit-actions"]) {
+    display: none;
   }
 
   :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-error"]) {

package/dist/styles/recipes/color-picker-details.css

@@ -5,6 +5,13 @@
     box-shadow: var(--cui-color-picker-trigger-shadow);
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="color-picker"][data-slot="trigger-color"]) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
+
   :where([data-control-family="color-picker"][data-slot="trigger"]) {
     border-radius: var(--cui-color-picker-trigger-radius);
     transition-property: transform, translate, scale, rotate;

package/dist/styles/recipes/field.css

@@ -25,6 +25,13 @@
     backdrop-filter: var(--cui-field-backdrop-filter);
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="field"][data-control="true"]:not(:focus-visible, :has(:focus-visible))) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
+
   :where(
     [data-control-family="field"][data-control="true"]:not([data-control-family="field"][data-field-kind="autocomplete"]):not(
       [data-control-family="field"][data-field-kind="combobox"]

package/dist/styles/recipes/infinite-canvas.css

@@ -1,34 +1,31 @@
 @layer components {
   :where([data-control-family="infinite-canvas"][data-slot="root"]) {
+    --_infinite-canvas-controls-item-radius: min(var(--radius-sm), calc(var(--control-h-sm) / 2));
+    --_infinite-canvas-controls-radius: calc(
+      var(--_infinite-canvas-controls-item-radius) +
+      clamp(0px, calc(var(--_infinite-canvas-controls-item-radius) * 1000), var(--spacing))
+    );
     --cui-infinite-canvas-background: var(--canvas);
     --cui-infinite-canvas-grid-dot-color: var(--canvas-grid-dot);
     --cui-infinite-canvas-border-color: var(--border);
-    --cui-infinite-canvas-controls-item-radius: min(var(--radius-sm), calc(var(--control-h-sm) / 2));
-    --cui-infinite-canvas-controls-padding: calc(var(--spacing) * 1);
-    --cui-infinite-canvas-controls-radius: calc(
-      var(--cui-infinite-canvas-controls-item-radius) +
-      clamp(0px, calc(var(--cui-infinite-canvas-controls-item-radius) * 1000), var(--cui-infinite-canvas-controls-padding))
-    );
     --cui-infinite-canvas-radius: max(
       var(--radius-panel),
-      calc(
-        var(--cui-infinite-canvas-controls-radius) +
-        clamp(0px, calc(var(--cui-infinite-canvas-controls-radius) * 1000), var(--spacing) * 2)
-      )
+      calc(var(--_infinite-canvas-controls-radius) + clamp(0px, calc(var(--_infinite-canvas-controls-radius) * 1000), var(--spacing) * 2))
     );
     --cui-infinite-canvas-padding: max(
       calc(var(--spacing) * 2),
-      calc(var(--cui-infinite-canvas-radius) - var(--cui-infinite-canvas-controls-radius))
+      calc(var(--cui-infinite-canvas-radius) - var(--_infinite-canvas-controls-radius))
     );
-    --cui-infinite-canvas-controls-background: var(--card);
-    --cui-infinite-canvas-controls-border-color: var(--border);
-    --cui-infinite-canvas-controls-shadow: var(--shadow-sm);
     border-radius: var(--cui-infinite-canvas-radius);
     background-color: var(--cui-infinite-canvas-background);
     background-image: radial-gradient(circle at center, var(--cui-infinite-canvas-grid-dot-color) 1px, transparent 1px);
     box-shadow: 0 0 0 1px var(--cui-infinite-canvas-border-color);
   }
 
+  :where([data-control-family="infinite-canvas"][data-slot="root"]:focus-visible) {
+    --focus-ring-offset: calc(var(--focus-ring-width) * -1);
+  }
+
   :where([data-control-family="infinite-canvas"][data-slot="root"][data-easing]) {
     transition-property: background-position, background-size;
     transition-duration: var(--duration-base);
@@ -41,17 +38,15 @@
     transition: transform var(--duration-base) var(--ease-standard);
   }
 
+  :where(
+    [data-control-family="infinite-canvas"][data-slot="root"][data-moving] [data-control-family="infinite-canvas"][data-slot="content"]
+  ) {
+    will-change: transform;
+  }
+
   :where([data-control-family="infinite-canvas"][data-slot="controls"]) {
-    --nest-radius: var(--cui-infinite-canvas-controls-item-radius);
     inset-inline-end: var(--cui-infinite-canvas-padding);
     inset-block-end: var(--cui-infinite-canvas-padding);
-    gap: calc(var(--spacing) * 0.5);
-    padding: var(--cui-infinite-canvas-controls-padding);
-    border-radius: var(--cui-infinite-canvas-controls-radius);
-    background-color: var(--cui-infinite-canvas-controls-background);
-    box-shadow:
-      var(--cui-infinite-canvas-controls-shadow),
-      0 0 0 1px var(--cui-infinite-canvas-controls-border-color);
   }
 
   :where([data-control-family="infinite-canvas"][data-slot="content"]) {
@@ -88,38 +83,3 @@
   inherits: true;
   initial-value: 0px;
 }
-
-@property --cui-infinite-canvas-controls-item-radius {
-  syntax: "<length-percentage>";
-  inherits: true;
-  initial-value: 0px;
-}
-
-@property --cui-infinite-canvas-controls-padding {
-  syntax: "<length-percentage>";
-  inherits: true;
-  initial-value: 0px;
-}
-
-@property --cui-infinite-canvas-controls-radius {
-  syntax: "<length-percentage>";
-  inherits: true;
-  initial-value: 0px;
-}
-
-@property --cui-infinite-canvas-controls-background {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
-@property --cui-infinite-canvas-controls-border-color {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
-@property --cui-infinite-canvas-controls-shadow {
-  syntax: "*";
-  inherits: true;
-}

package/dist/styles/recipes/inline-attachment.css

@@ -52,6 +52,13 @@
     }
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="inline-attachment"][data-slot="root"]:not(:focus-visible)) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
+
   :where([data-control-family="inline-attachment"][data-slot="image"]) {
     border-radius: inherit;
   }

package/dist/styles/recipes/kbd.css

@@ -28,6 +28,13 @@
     --cui-kbd-shadow: 0 0 transparent;
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="kbd"][data-slot="root"]:not([data-variant="ghost"])) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
+
   :where([data-control-family="kbd"][data-slot="group"]) {
     gap: calc(var(--spacing) * 1);
   }

package/dist/styles/recipes/markdown-editor.css

@@ -41,6 +41,12 @@
     padding-inline: var(--cui-markdown-editor-padding);
     white-space: nowrap;
   }
+  :where([data-control-family="markdown-editor"][data-slot="bubble-menu"]) {
+    z-index: 1;
+    white-space: nowrap;
+    transform-origin: bottom center;
+    animation: cui-markdown-editor-bubble-enter var(--duration-fast) var(--ease-emphasized);
+  }
   :where([data-control-family="markdown-editor"] [data-markdown-drag-handle]) {
     position: absolute;
     inset-inline-start: calc(var(--cui-markdown-editor-padding) / 2);
@@ -170,6 +176,12 @@
     border: var(--cui-markdown-editor-border-width) solid var(--cui-markdown-editor-border-color);
     padding: var(--cui-markdown-editor-padding);
   }
+  @keyframes cui-markdown-editor-bubble-enter {
+    from {
+      opacity: 0;
+      scale: 0.96;
+    }
+  }
 }
 
 @property --cui-markdown-editor-background {

package/dist/styles/recipes/pagination.css

@@ -17,7 +17,7 @@
     border-radius: var(--cui-pagination-link-radius);
     background: var(--cui-pagination-link-background);
     box-shadow:
-      inset 0 0 0 1px var(--_pagination-link-border-color),
+      inset 0 0 0 var(--control-rim-width) var(--_pagination-link-border-color),
       var(--cui-pagination-link-shadow);
     color: var(--cui-pagination-link-foreground);
     font-variant-numeric: tabular-nums;
@@ -39,6 +39,13 @@
     opacity: var(--disabled-opacity);
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="pagination"][data-slot="link"][data-active="true"]:not(:focus-visible)) {
+      outline: var(--focus-ring-width) solid Highlight;
+      outline-offset: calc(var(--focus-ring-width) * -1);
+    }
+  }
+
   :where([data-control-family="pagination"][data-slot="link"]:has(> svg:first-child)) {
     padding-inline-start: calc(var(--spacing) * 2);
   }

package/dist/styles/recipes/scroll-area.css

@@ -39,14 +39,12 @@
   :where(
     [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"]
       > [data-slot="scrollbar"][data-orientation="vertical"]:not([data-has-overflow-y])
-      > [data-slot="thumb"]
   ),
   :where(
     [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"]
       > [data-slot="scrollbar"][data-orientation="horizontal"]:not([data-has-overflow-x])
-      > [data-slot="thumb"]
   ) {
-    display: none;
+    visibility: hidden;
   }
 
   @supports (corner-shape: squircle) {

package/dist/styles/recipes/swap.css

@@ -0,0 +1,143 @@
+@layer components {
+  :where([data-control-family="swap"][data-slot="root"]) {
+    --cui-swap-animation-duration: var(--duration-slow);
+    --cui-swap-easing: var(--ease-emphasized);
+    --cui-swap-label-inset: 60%;
+    --cui-swap-icon-scale: 0.5;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: inherit;
+    inline-size: var(--_swap-inline-size, auto);
+    transition: inline-size var(--cui-swap-animation-duration) var(--cui-swap-easing);
+  }
+
+  :where([data-control-family="swap"][data-slot="item"]) {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: inherit;
+    white-space: nowrap;
+  }
+
+  :where([data-control-family="swap"][data-slot="item"]:not([data-state="active"])) {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :where([data-control-family="swap"][data-slot="item"][data-state="inactive"]) {
+    visibility: hidden;
+  }
+
+  :where([data-control-family="swap"][data-slot="label"]) {
+    display: inline-block;
+  }
+
+  :where([data-control-family="swap"][data-swapped] > [data-slot="item"][data-state="active"]) {
+    animation: cui-swap-item-enter var(--cui-swap-animation-duration) var(--cui-swap-easing) both;
+  }
+
+  :where([data-control-family="swap"][data-swapped] > [data-slot="item"][data-state="exiting"]) {
+    animation: cui-swap-item-exit var(--cui-swap-animation-duration) var(--cui-swap-easing) both;
+  }
+
+  :where(
+    [data-control-family="swap"][data-swapped]
+      > [data-slot="item"][data-state="active"]
+      > :not(svg, [data-slot="icon"], [data-control-family="spinner"])
+  ) {
+    animation: cui-swap-label-enter var(--cui-swap-animation-duration) var(--cui-swap-easing) both;
+  }
+
+  :where(
+    [data-control-family="swap"][data-swapped]
+      > [data-slot="item"][data-state="exiting"]
+      > :not(svg, [data-slot="icon"], [data-control-family="spinner"])
+  ) {
+    animation: cui-swap-label-exit var(--cui-swap-animation-duration) var(--cui-swap-easing) both;
+  }
+
+  :where(
+    [data-control-family="swap"][data-swapped]
+      > [data-slot="item"][data-state="active"]
+      > :is(svg, [data-slot="icon"], [data-control-family="spinner"])
+  ) {
+    animation: cui-swap-icon-enter var(--cui-swap-animation-duration) var(--cui-swap-easing) both;
+  }
+
+  :where(
+    [data-control-family="swap"][data-swapped]
+      > [data-slot="item"][data-state="exiting"]
+      > :is(svg, [data-slot="icon"], [data-control-family="spinner"])
+  ) {
+    animation: cui-swap-icon-exit var(--cui-swap-animation-duration) var(--cui-swap-easing) both;
+  }
+}
+
+@keyframes cui-swap-item-enter {
+  from {
+    opacity: 0;
+    filter: blur(var(--blur-xs));
+  }
+}
+
+@keyframes cui-swap-item-exit {
+  from {
+    opacity: 1;
+    filter: blur(0);
+  }
+  to {
+    opacity: 0;
+    filter: blur(var(--blur-xs));
+  }
+}
+
+@keyframes cui-swap-label-enter {
+  from {
+    translate: 0 var(--cui-swap-label-inset);
+  }
+}
+
+@keyframes cui-swap-label-exit {
+  to {
+    translate: 0 calc(var(--cui-swap-label-inset) * -1);
+  }
+}
+
+@keyframes cui-swap-icon-enter {
+  from {
+    scale: var(--cui-swap-icon-scale);
+  }
+}
+
+@keyframes cui-swap-icon-exit {
+  to {
+    scale: var(--cui-swap-icon-scale);
+  }
+}
+
+@property --cui-swap-animation-duration {
+  syntax: "<time>";
+  inherits: true;
+  initial-value: 0s;
+}
+
+@property --cui-swap-easing {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-swap-label-inset {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-swap-icon-scale {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}

package/dist/styles/recipes/tabs.css

@@ -114,6 +114,18 @@
     opacity: var(--disabled-opacity);
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="tabs"][data-slot="list"]:not([data-variant="browser"], [data-single="true"])) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+
+    :where([data-control-family="tabs"][data-slot="list"]:not([data-variant="browser"]) [data-slot="indicator"]) {
+      outline: var(--focus-ring-width) solid Highlight;
+      outline-offset: calc(var(--focus-ring-width) * -1);
+    }
+  }
+
   :where([data-control-family="tabs"][data-slot="list"][data-variant="browser"]) {
     --_tabs-browser-corner-double: calc(var(--_tabs-trigger-radius-fit) + var(--_tabs-trigger-radius-fit));
     --_tabs-browser-inset: calc(var(--_tabs-trigger-radius-fit) + var(--cui-tabs-surface-radius));