@ctrl-ui/react 0.8.0

package/dist/styles/recipes/popup.css

@@ -0,0 +1,396 @@
+@layer components {
+  :where([data-control-family="popup"][data-popup-part="surface"]),
+  :where([data-control-family="popup"][data-popup-part="list-surface"]),
+  :where([data-control-family="popup"][data-popup-part="bar"]) {
+    --cui-popup-radius: var(--radius-popover);
+    --cui-popup-background: var(--popover);
+    --cui-popup-foreground: var(--popover-foreground);
+    --cui-popup-border-color: var(--control-rim);
+    --cui-popup-border-width: var(--control-rim-width);
+    --cui-popup-shadow: var(--shadow-pop);
+    --cui-popup-backdrop-filter: blur(var(--backdrop-blur-popover));
+    --cui-popup-item-radius: var(--radius-popup-item);
+    --cui-popup-item-foreground: var(--foreground);
+    --cui-popup-item-highlight-background: var(--hover-fill);
+    --cui-popup-item-highlight-foreground: var(--cui-popup-item-foreground);
+    --cui-popup-item-highlight-muted-foreground: var(--muted-foreground);
+    --cui-popup-item-disabled-opacity: 0.4;
+    --cui-popup-separator-color: var(--border);
+    --cui-popup-shortcut-foreground: var(--muted-foreground);
+    --_popup-transform-origin: var(--transform-origin);
+    border-radius: var(--cui-popup-radius);
+    background-color: var(--cui-popup-background);
+    box-shadow:
+      inset 0 0 0 var(--cui-popup-border-width) var(--cui-popup-border-color),
+      var(--cui-popup-shadow);
+    color: var(--cui-popup-foreground);
+    outline: none;
+    -webkit-backdrop-filter: var(--cui-popup-backdrop-filter, none);
+    backdrop-filter: var(--cui-popup-backdrop-filter, none);
+    transform-origin: var(--_popup-transform-origin);
+  }
+  :where([data-control-family="popup"][data-popup-part="surface"]:not([data-popup-static]):not([data-slot="viewport"])),
+  :where([data-control-family="popup"][data-popup-part="list-surface"]) {
+    transition-property: opacity, scale;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-emphasized);
+    transition-behavior: allow-discrete;
+  }
+  :where(
+    [data-control-family="popup"][data-popup-part="surface"]:not(
+      :is([data-popup-kind="sheet"], [data-popup-kind="drawer"], [data-popup-kind="toast"])
+    ):not([data-slot="viewport"]):where([data-starting-style], [data-ending-style])
+  ),
+  :where([data-control-family="popup"][data-popup-part="list-surface"]:where([data-starting-style], [data-ending-style])) {
+    scale: 0.95;
+    opacity: 0;
+  }
+  @starting-style {
+    :where(
+        [data-control-family="popup"][data-popup-part="surface"]:not(
+          :is([data-popup-kind="sheet"], [data-popup-kind="drawer"], [data-popup-kind="toast"])
+        ):not([data-slot="viewport"])
+      ),
+    :where([data-control-family="popup"][data-popup-part="list-surface"]) {
+      scale: 0.95;
+      opacity: 0;
+    }
+  }
+  :where([data-control-family="popup"][data-popup-part="backdrop"]) {
+    --cui-popup-backdrop-background: oklch(from var(--foreground) l c h / var(--overlay-opacity));
+    background-color: var(--cui-popup-backdrop-background);
+    -webkit-backdrop-filter: blur(var(--backdrop-blur-overlay));
+    backdrop-filter: blur(var(--backdrop-blur-overlay));
+    transition: opacity var(--duration-base) var(--ease-standard);
+  }
+  :where(.dark [data-control-family="popup"][data-popup-part="backdrop"]) {
+    --cui-popup-backdrop-background: oklch(from var(--background) l c h / var(--overlay-opacity));
+  }
+  :where([data-control-family="popup"][data-popup-part="backdrop"]:is([data-starting-style], [data-ending-style])) {
+    opacity: 0;
+  }
+  :where([data-control-family="popup"][data-popup-part="list-surface"]) {
+    padding: var(--popover-padding);
+  }
+  :where([data-control-family="popup"][data-popup-part="bar"]) {
+    --cui-popup-radius: var(--radius-control);
+    --cui-popup-background: var(--card);
+    --cui-popup-shadow: var(--shadow-xs);
+  }
+  :where([data-control-family="popup"][data-popup-part="surface"][data-surface="modal"]) {
+    --cui-popup-radius: var(--radius-panel);
+    --cui-popup-shadow: var(--shadow-modal);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-popup-part="surface"]) {
+    --cui-popup-radius: var(--radius-control);
+    --cui-popup-background: var(--foreground);
+    --cui-popup-foreground: var(--background);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-popup-part="surface"]) {
+    --cui-popup-radius: 0px;
+    --cui-popup-shadow: var(--shadow-modal);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="title"]),
+  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="title"]) {
+    font-size: var(--text-heading-3);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1;
+    letter-spacing: -0.025em;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="description"]),
+  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="description"]) {
+    color: var(--muted-foreground);
+    font-size: var(--text-body);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="title"]) {
+    font-weight: var(--font-weight-semibold);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="description"]) {
+    color: var(--muted-foreground);
+    font-size: var(--text-body);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="arrow"]) {
+    color: var(--cui-popup-background);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="content"]) {
+    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="content"]),
+  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="content"]),
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="content"]) {
+    gap: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="header"]),
+  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="header"]) {
+    gap: calc(var(--spacing) * 1.5);
+    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4) 0;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="footer"]),
+  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="footer"]) {
+    gap: calc(var(--spacing) * 2);
+    padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="header"]) {
+    gap: calc(var(--spacing) * 1.5);
+    padding: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="header"]) {
+    gap: calc(var(--spacing) * 1.5);
+    padding-block-end: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="popover"][data-popup-part="surface"][data-padding="default"]),
+  :where([data-control-family="popup"][data-popup-kind="hover-card"][data-popup-part="surface"]) {
+    padding: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-part="item"]) {
+    gap: calc(var(--spacing) * 2);
+    min-block-size: var(--control-h-xs);
+  }
+
+  :where([data-control-family="popup"][data-popup-part="item"]),
+  :where([data-control-family="popup"][data-popup-part="navigation-link"]) {
+    cursor: pointer;
+    border-radius: var(--cui-popup-item-radius);
+    color: var(--cui-popup-item-foreground);
+    font-size: var(--text-body);
+    outline: none;
+    padding-block: calc(var(--spacing) * 1);
+    padding-inline: calc(var(--padding-x) * 0.5);
+  }
+
+  :where([data-control-family="popup"][data-popup-part="navigation-link"]) {
+    font-size: var(--text-body);
+    transition-property: color, background-color, box-shadow, translate;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="popup"][data-popup-part="navigation-link"][data-variant="compact"]) {
+    color: var(--muted-foreground);
+    font-size: var(--text-label);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="popup"][data-popup-part="navigation-link"]:where(:hover, :focus-visible, [data-active])) {
+    background-color: var(--cui-popup-item-highlight-background);
+    color: var(--foreground);
+  }
+
+  :where(
+    [data-control-family="popup"][data-popup-part="item"]:where(
+      [data-highlighted],
+      [data-selected]:not([data-selected="false"]),
+      [data-popup-open]
+    )
+  ) {
+    --cui-popup-shortcut-foreground: var(--cui-popup-item-highlight-foreground);
+    --muted-foreground: var(--cui-popup-item-highlight-muted-foreground);
+    background-color: var(--cui-popup-item-highlight-background);
+    color: var(--cui-popup-item-highlight-foreground);
+  }
+
+  :where([data-control-family="popup"][data-popup-part="item"]:is([data-disabled]:not([data-disabled="false"]), [data-disabled="true"])) {
+    cursor: not-allowed;
+    opacity: var(--cui-popup-item-disabled-opacity);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="select"][data-slot="icon"]),
+  :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="icon"]) {
+    color: var(--muted-foreground);
+    transition-property: rotate;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-emphasized);
+  }
+
+  :where(
+    [data-control-family="button"][data-popup-kind="select"][data-slot="trigger"][data-popup-open]
+      [data-control-family="popup"][data-popup-kind="select"][data-slot="icon"]
+  ),
+  :where(
+    [data-control-family="button"][data-popup-kind="navigation-menu"][data-slot="trigger"][data-popup-open]
+      :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="icon"])
+  ) {
+    rotate: 180deg;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="select"][data-slot="item-indicator"]) {
+    color: inherit;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="context-menu"][data-slot="radio-indicator"]) {
+    border-radius: 9999px;
+    background-color: currentColor;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="title"]) {
+    font-size: var(--text-body);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1;
+    letter-spacing: -0.01em;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="description"]) {
+    color: var(--muted-foreground);
+    font-size: var(--text-body);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="positioner"]) {
+    transition-property: inset-block-start, inset-inline-start, inset-block-end, inset-inline-end;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-emphasized);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="popup"]) {
+    outline: none;
+    --_popup-transform-origin: var(--transform-origin);
+    transform-origin: var(--_popup-transform-origin);
+    transition-property: opacity, inline-size, block-size, scale;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-emphasized);
+  }
+
+  :where(
+    [data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="popup"]:is([data-starting-style], [data-ending-style])
+  ) {
+    scale: 0.95;
+    opacity: 0;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="content"]) {
+    transition-property: opacity, translate;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-emphasized);
+  }
+
+  :where(
+    [data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="content"]:is([data-starting-style], [data-ending-style])
+  ) {
+    opacity: 0;
+  }
+
+  :where(
+    [data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="content"][data-starting-style][data-activation-direction="left"]
+  ),
+  :where(
+    [data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="content"][data-ending-style][data-activation-direction="right"]
+  ) {
+    translate: calc(var(--spacing) * -3) 0;
+  }
+
+  :where(
+    [data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="content"][data-starting-style][data-activation-direction="right"]
+  ),
+  :where(
+    [data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="content"][data-ending-style][data-activation-direction="left"]
+  ) {
+    translate: calc(var(--spacing) * 3) 0;
+  }
+}
+
+@property --cui-popup-radius {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-popup-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-popup-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-popup-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-popup-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-popup-backdrop-filter {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-popup-backdrop-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-popup-item-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-item-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-popup-item-highlight-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-popup-item-highlight-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-popup-item-highlight-muted-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-popup-item-disabled-opacity {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+
+@property --cui-popup-separator-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-popup-shortcut-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/range.css

@@ -0,0 +1,259 @@
+@layer components {
+  :where([data-control-family="range"][data-slot="root"]) {
+    --cui-range-track-radius: 9999px;
+    --cui-range-track-background: var(--muted);
+    --cui-range-indicator-radius: 9999px;
+    --cui-range-indicator-background: var(--primary);
+    --cui-range-thumb-radius: 9999px;
+    --cui-range-thumb-background: var(--background);
+    --cui-range-thumb-border-color: var(--control-rim);
+    --cui-range-thumb-shadow: var(--shadow-sm);
+    --_range-thumb-border-width: var(--control-rim-width);
+  }
+
+  :where([data-control-family="range"][data-range-kind="progress"][data-slot="root"]),
+  :where([data-control-family="range"][data-range-kind="meter"][data-slot="root"]) {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="range"][data-range-kind="progress"][data-slot="track"]),
+  :where([data-control-family="range"][data-range-kind="meter"][data-slot="track"]) {
+    block-size: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="label-overlay"]) {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="track"]),
+  :where([data-control-family="range"][data-range-kind="progress"][data-slot="track"]),
+  :where([data-control-family="range"][data-range-kind="meter"][data-slot="track"]) {
+    border-radius: var(--cui-range-track-radius);
+    background: var(--cui-range-track-background);
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="track"]) {
+    block-size: calc(var(--spacing) * 1.5);
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="root"][data-variant="plain"]) {
+    --cui-range-track-radius: 3px;
+    --cui-range-track-background: var(--hover-fill);
+    --cui-range-indicator-radius: 0px;
+    --cui-range-indicator-background: oklch(from var(--foreground) l c h / 0.14);
+    --cui-range-thumb-radius: 1px;
+    --cui-range-thumb-background: oklch(from var(--foreground) l c h / 0.3);
+    --cui-range-thumb-shadow: none;
+    --_range-thumb-border-width: 0px;
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="track"][data-dragging]) {
+    background: oklch(from var(--foreground) l c h / 0.1);
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="indicator"]),
+  :where([data-control-family="range"][data-range-kind="progress"][data-slot="indicator"]),
+  :where([data-control-family="range"][data-range-kind="meter"][data-slot="indicator"]) {
+    height: 100%;
+    border-radius: var(--cui-range-indicator-radius);
+    background: var(--cui-range-indicator-background);
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="indicator"]) {
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="indicator"][data-dragging]) {
+    --cui-range-indicator-background: var(--primary);
+    background: var(--cui-range-indicator-background);
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="control"]) {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="control"][data-labeled]) {
+    block-size: calc(var(--spacing) * 7.5);
+    padding-block: 0;
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="track"][data-labeled]) {
+    block-size: 100%;
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"][data-variant="default"]) {
+    inline-size: calc(var(--spacing) * 3.5);
+    block-size: calc(var(--spacing) * 3.5);
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"]) {
+    position: relative;
+    border: var(--_range-thumb-border-width) solid var(--cui-range-thumb-border-color);
+    border-radius: var(--cui-range-thumb-radius);
+    background: var(--cui-range-thumb-background);
+    box-shadow: var(--cui-range-thumb-shadow);
+    outline: none;
+    transition-property: scale, background-color, box-shadow, height, width;
+    transition-duration: var(--duration-fast);
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"]:focus-visible) {
+    --cui-range-thumb-shadow: var(--shadow-sm);
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"]:where(:hover, [data-dragging])) {
+    scale: 1.1;
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"][data-dragging]) {
+    box-shadow: var(--shadow-md);
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"][data-variant="plain"]) {
+    height: 1rem;
+    width: 0.125rem;
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"][data-variant="plain"]:where(:hover, [data-dragging])) {
+    --cui-range-thumb-background: oklch(from var(--foreground) l c h / 0.5);
+    scale: 1;
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"][data-variant="plain"][data-dragging]) {
+    --cui-range-thumb-background: oklch(from var(--foreground) l c h / 0.7);
+    height: 1.25rem;
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="tick"]) {
+    inline-size: 1px;
+    block-size: calc(var(--spacing) * 1.5);
+    background: oklch(from var(--foreground) l c h / 0.15);
+    transition-property: height, background-color;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="root"][data-dragging] [data-slot="tick"]) {
+    height: 0.75rem;
+    background: oklch(from var(--foreground) l c h / 0.25);
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"]:is([data-slot="label"], [data-slot="value"])) {
+    color: var(--muted-foreground);
+    transition-property: color, scale, translate;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="root"][data-dragging] [data-slot="label"]) {
+    translate: calc(var(--spacing) * -1) calc(var(--spacing) * -1.5);
+    scale: 0.9;
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="root"][data-dragging] [data-slot="value"]) {
+    translate: calc(var(--spacing) * 0.5) calc(var(--spacing) * -1.5);
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="value"]) {
+    font-size: var(--text-caption);
+    line-height: calc(var(--spacing) * 3.5);
+    letter-spacing: var(--tracking-tight);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="label"]) {
+    font-size: var(--text-caption);
+    line-height: calc(var(--spacing) * 3.5);
+    letter-spacing: var(--tracking-tight);
+  }
+
+  :where([data-control-family="range"][data-range-kind="slider"][data-slot="root"][data-disabled]) {
+    opacity: 50%;
+  }
+
+  :where([data-control-family="range"][data-range-kind="progress"][data-slot="indicator"]) {
+    transition-property: width;
+    transition-duration: var(--duration-slow);
+    transition-timing-function: var(--ease-emphasized);
+  }
+
+  :where([data-control-family="range"][data-range-kind="progress"][data-slot="value"]) {
+    font-size: var(--text-label);
+    color: var(--muted-foreground);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-control-family="range"][data-range-kind="progress"][data-slot="label"]) {
+    font-size: var(--text-label);
+    font-weight: var(--font-weight-medium);
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="range"][data-range-kind="meter"][data-slot="indicator"]) {
+    transition-property: width;
+    transition-duration: var(--duration-slow);
+    transition-timing-function: var(--ease-emphasized);
+  }
+
+  :where([data-control-family="range"][data-range-kind="meter"][data-slot="value"]) {
+    font-size: var(--text-label);
+    color: var(--muted-foreground);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-control-family="range"][data-range-kind="meter"][data-slot="label"]) {
+    font-size: var(--text-label);
+    font-weight: var(--font-weight-medium);
+    color: var(--foreground);
+  }
+}
+
+@property --cui-range-track-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-range-track-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-range-indicator-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-range-indicator-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-range-thumb-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-range-thumb-background {
+  syntax: "*";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-range-thumb-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-range-thumb-shadow {
+  syntax: "*";
+  inherits: true;
+  initial-value: none;
+}