@ctrl-ui/react 0.9.5 → 0.9.8

package/dist/skin.d.ts

@@ -40,6 +40,8 @@ export type ControlUiSkin = {
   scrollAreaBlur?: boolean;
   scrollAreaScrollbarVisibility?: "scroll" | "hover" | "always";
   scrollAreaScrollbarGutter?: "auto" | "stable";
+  selectAlignItemWithTrigger?: boolean;
+  calendarShowOutsideDays?: boolean;
   indicators?: SkinIndicators;
   effects?: ControlEffect[];
   adornments?: { [Scope in SkinAdornmentScope]?: { [Part in SkinAdornmentPart<Scope>]?: AdornmentEntry<SkinAdornmentContexts[Scope][Part]>; }; };

package/dist/styles/index.css

@@ -2,37 +2,38 @@
 @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 "./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";
@@ -47,22 +48,22 @@
 @import "./code.css";
 @import "./recipes/code.css";
 @import "./recipes/code-diff.css";
+@import "./recipes/separator.css";
+@import "./recipes/item.css";
 @import "./recipes/color-picker.css";
 @import "./recipes/color-picker-details.css";
 @import "./recipes/color-picker-values.css";
 @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";
 @import "./recipes/markdown-editor.css";
 @import "./recipes/dockable-panel.css";
-@import "./recipes/item.css";
 @import "./recipes/dropzone.css";
 @import "./recipes/dynamic-notification.css";
 @import "./recipes/dynamic-notification-input.css";
@@ -91,8 +92,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);
@@ -101,6 +109,10 @@
     font-family: var(--font-mono);
   }
 
+  :where([data-control-family="activity"][data-slot="detail-content"][data-tone="destructive"]) {
+    color: var(--destructive-text);
+  }
+
   :where([data-control-family="activity"][data-slot="detail-content"][data-format="code"]) {
     padding-inline: calc(var(--spacing) * 2);
     padding-block: calc(var(--spacing) * 1.5);

package/dist/styles/recipes/avatar.css

@@ -8,6 +8,7 @@
     --cui-avatar-badge-foreground: var(--primary-foreground);
     inline-size: calc(var(--spacing) * 9);
     block-size: calc(var(--spacing) * 9);
+    font-size: var(--text-caption);
   }
 
   :where([data-control-family="avatar"][data-slot="root"]),
@@ -79,7 +80,6 @@
     border-radius: inherit;
     background: var(--cui-avatar-fallback-background);
     color: var(--cui-avatar-fallback-foreground);
-    font-size: var(--text-caption);
     font-weight: var(--font-weight-medium);
   }
 }

package/dist/styles/recipes/badge.css

@@ -6,17 +6,22 @@
     --cui-badge-background: var(--_badge-color-background);
     --cui-badge-foreground: var(--_badge-color-foreground);
     --cui-badge-border-color: transparent;
+    --cui-badge-border-width: 1px;
     --cui-badge-font-size: var(--text-caption);
+    --cui-badge-font-weight: var(--font-weight-medium);
     --_badge-color-background: var(--badge-neutral);
     --_badge-color-foreground: var(--badge-neutral-foreground);
     --_badge-color-border: var(--badge-neutral-border);
     --_badge-color-background-hover: var(--badge-neutral-hover);
     --_badge-hover-background: var(--_badge-color-background-hover);
+    border-style: solid;
+    border-width: var(--cui-badge-border-width);
     border-color: var(--cui-badge-border-color);
     border-radius: var(--cui-badge-radius);
     background: var(--cui-badge-background);
     color: var(--cui-badge-foreground);
     font-size: var(--cui-badge-font-size);
+    font-weight: var(--cui-badge-font-weight);
     font-variant-numeric: tabular-nums;
   }
 
@@ -113,8 +118,20 @@
   initial-value: transparent;
 }
 
+@property --cui-badge-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-badge-font-size {
   syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
+
+@property --cui-badge-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}

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.css

@@ -31,6 +31,7 @@
     --cui-button-padding-inline: var(--padding-x);
     --cui-button-icon-padding-inline: max(0px, calc(var(--cui-button-padding-inline) - var(--spacing) * 0.5));
     --cui-button-font-size: var(--text-body);
+    --cui-button-font-weight: var(--font-weight-medium);
     --cui-button-background: transparent;
     --cui-button-background-image: none;
     --cui-button-foreground: var(--muted-foreground);
@@ -55,7 +56,7 @@
     box-shadow: var(--cui-button-shadow);
     color: var(--cui-button-foreground);
     cursor: pointer;
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--cui-button-font-weight);
     transition-property: scale, translate;
     transition-timing-function: var(--ease-standard);
     transition-duration: var(--duration-fast);
@@ -95,7 +96,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 +110,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);
@@ -247,6 +258,12 @@
   initial-value: 0px;
 }
 
+@property --cui-button-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}
+
 @property --cui-button-background {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/calendar.css

@@ -6,12 +6,20 @@
     --cui-calendar-selected-background: var(--primary);
     --cui-calendar-selected-foreground: var(--primary-foreground);
     --cui-calendar-range-background: var(--accent);
+    --cui-calendar-day-size: calc(var(--spacing) * 9);
+    --cui-calendar-cell-padding: 0px;
+    --cui-calendar-today-shadow: none;
+    --cui-calendar-weekend-foreground: var(--foreground);
+    --cui-calendar-weekend-background: transparent;
+    --cui-calendar-caption-font-size: var(--text-body);
+    --cui-calendar-caption-font-weight: var(--font-weight-medium);
+    --cui-calendar-weekday-font-size: var(--text-caption);
   }
 
   :where([data-control-family="calendar"][data-slot="caption-label"]) {
     color: var(--foreground);
-    font-size: var(--text-body);
-    font-weight: var(--font-weight-medium);
+    font-size: var(--cui-calendar-caption-font-size);
+    font-weight: var(--cui-calendar-caption-font-weight);
     line-height: 1.4;
   }
 
@@ -31,7 +39,7 @@
   :where([data-control-family="calendar"][data-slot="weekday"]) {
     padding-block-end: calc(var(--spacing) * 1.5);
     color: var(--muted-foreground);
-    font-size: var(--text-caption);
+    font-size: var(--cui-calendar-weekday-font-size);
     font-weight: var(--font-weight-normal);
   }
 
@@ -54,8 +62,8 @@
   }
 
   :where([data-control-family="calendar"][data-slot="day"]) {
-    block-size: calc(var(--spacing) * 9);
-    min-inline-size: calc(var(--spacing) * 9);
+    block-size: var(--cui-calendar-day-size);
+    min-inline-size: var(--cui-calendar-day-size);
     border-radius: var(--cui-calendar-day-radius);
     color: var(--foreground);
     font-size: var(--text-body);
@@ -64,6 +72,10 @@
     font-variant-numeric: tabular-nums;
   }
 
+  :where([data-control-family="calendar"][data-slot="day-cell"][data-weekend] > [data-slot="day"]) {
+    color: var(--cui-calendar-weekend-foreground);
+  }
+
   @media (hover: hover) {
     :where([data-control-family="calendar"][data-slot="day"]:hover:not(:disabled, [aria-disabled="true"])) {
       background-color: var(--accent);
@@ -74,6 +86,7 @@
   :where([data-control-family="calendar"][data-slot="day"][data-today]) {
     background-color: var(--cui-calendar-today-background);
     color: var(--accent-foreground);
+    box-shadow: var(--cui-calendar-today-shadow);
     font-weight: var(--font-weight-medium);
   }
 
@@ -101,12 +114,28 @@
   }
 
   :where([data-control-family="calendar"][data-slot="day-cell"]) {
+    padding: var(--cui-calendar-cell-padding);
     text-align: center;
   }
 
+  :where([data-control-family="calendar"][data-slot="day-cell"][data-weekend]) {
+    background-color: var(--cui-calendar-weekend-background);
+  }
+
+  :where([data-control-family="calendar"][data-slot="month-grid"] > tbody > tr:first-child > [data-slot="day-cell"][data-weekend]) {
+    border-start-start-radius: calc(var(--cui-calendar-cell-padding) * 2);
+    border-start-end-radius: calc(var(--cui-calendar-cell-padding) * 2);
+  }
+
+  :where([data-control-family="calendar"][data-slot="month-grid"] > tbody > tr:last-child > [data-slot="day-cell"][data-weekend]) {
+    border-end-start-radius: calc(var(--cui-calendar-cell-padding) * 2);
+    border-end-end-radius: calc(var(--cui-calendar-cell-padding) * 2);
+  }
+
   :where([data-control-family="calendar"][data-slot="month-grid"]) {
     margin-block-start: calc(var(--spacing) * 1);
-    border-collapse: collapse;
+    border-collapse: separate;
+    border-spacing: 0;
   }
 
   @media (pointer: coarse) {
@@ -159,3 +188,50 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-calendar-day-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-calendar-cell-padding {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-calendar-today-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-calendar-weekend-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-calendar-weekend-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-calendar-caption-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-calendar-caption-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}
+
+@property --cui-calendar-weekday-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/card.css

@@ -6,6 +6,10 @@
     --cui-card-border-width: var(--control-rim-width);
     --cui-card-shadow: var(--shadow-sm);
     --cui-card-backdrop-filter: none;
+    --cui-card-padding-block: calc(var(--spacing) * 6);
+    --cui-card-padding-inline: calc(var(--spacing) * 6);
+    --cui-card-gap: calc(var(--spacing) * 6);
+    --cui-card-title-font-size: 1em;
     border: var(--cui-card-border-width) solid var(--cui-card-border-color);
     border-radius: var(--cui-card-radius);
     background: var(--cui-card-background);
@@ -13,21 +17,27 @@
     box-shadow: var(--cui-card-shadow);
     -webkit-backdrop-filter: var(--cui-card-backdrop-filter);
     backdrop-filter: var(--cui-card-backdrop-filter);
-    gap: calc(var(--spacing) * 6);
-    padding-block: calc(var(--spacing) * 6);
+    gap: var(--cui-card-gap);
+    padding-block: var(--cui-card-padding-block);
   }
 
   :where([data-control-family="card"][data-slot="header"]) {
     gap: calc(var(--spacing) * 1.5);
-    padding-inline: calc(var(--spacing) * 6);
+    padding-inline: var(--cui-card-padding-inline);
   }
 
   :where([data-control-family="card"][data-slot="content"]) {
-    padding-inline: calc(var(--spacing) * 6);
+    padding-inline: var(--cui-card-padding-inline);
   }
 
   :where([data-control-family="card"][data-slot="footer"]) {
-    padding-inline: calc(var(--spacing) * 6);
+    padding-inline: var(--cui-card-padding-inline);
+  }
+
+  :where([data-control-family="card"][data-slot="root"][data-size="sm"]) {
+    --cui-card-padding-block: calc(var(--spacing) * 3);
+    --cui-card-padding-inline: calc(var(--spacing) * 4);
+    --cui-card-gap: calc(var(--spacing) * 3);
   }
 
   :where([data-control-family="card"][data-slot="root"][data-variant="sectioned"]) {
@@ -46,6 +56,7 @@
   }
 
   :where([data-control-family="card"][data-slot="title"]) {
+    font-size: var(--cui-card-title-font-size);
     font-weight: var(--font-weight-semibold);
     line-height: var(--leading-tight);
     text-wrap: balance;
@@ -91,3 +102,27 @@
   syntax: "*";
   inherits: true;
 }
+
+@property --cui-card-padding-block {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-card-padding-inline {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-card-gap {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-card-title-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

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/choice.css

@@ -1,8 +1,9 @@
 @layer components {
   :where([data-control-family="choice"][data-choice-kind="checkbox"][data-slot="root"]),
   :where([data-control-family="choice"][data-choice-kind="radio-group"][data-slot="item"]) {
-    inline-size: calc(var(--spacing) * 4);
-    block-size: calc(var(--spacing) * 4);
+    --cui-choice-size: calc(var(--spacing) * 4);
+    inline-size: var(--cui-choice-size);
+    block-size: var(--cui-choice-size);
     --cui-choice-radius: var(--radius-sm);
     --cui-choice-shadow: inset 0 0 0 var(--cui-choice-border-width) var(--cui-choice-border-color), var(--shadow-sm);
     --cui-choice-border-color: var(--control-boundary);
@@ -95,6 +96,12 @@
   }
 }
 
+@property --cui-choice-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-choice-radius {
   syntax: "<length-percentage>";
   inherits: true;

package/dist/styles/recipes/collapsible.css

@@ -2,6 +2,7 @@
   :where([data-control-family="collapsible"][data-slot="root"]) {
     --cui-collapsible-trigger-radius: var(--radius-control);
     --cui-collapsible-trigger-hover-background: var(--hover-fill);
+    --cui-collapsible-trigger-padding-inline: calc(var(--spacing) * 2);
   }
 
   :where([data-control-family="collapsible"][data-slot="trigger"]) {
@@ -11,7 +12,7 @@
     align-items: center;
     gap: calc(var(--spacing) * 2);
     border-radius: var(--cui-collapsible-trigger-radius);
-    padding-inline: calc(var(--spacing) * 2);
+    padding-inline: var(--cui-collapsible-trigger-padding-inline);
     color: var(--foreground);
     font-size: var(--text-label);
     font-weight: var(--font-weight-medium);
@@ -79,3 +80,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-collapsible-trigger-padding-inline {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

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

@@ -1,4 +1,8 @@
 @layer components {
+  :where([data-control-family="color-picker"][data-slot="output"]) {
+    gap: calc(var(--spacing) * 2);
+  }
+
   :where([data-control-family="color-picker"][data-slot="output-value"]) {
     font-family: var(--font-mono);
     font-size: var(--text-caption);