@ctrl-ui/react 0.8.0

package/dist/styles/recipes/sidebar.css

@@ -0,0 +1,345 @@
+@layer components {
+  :where([data-control-family="sidebar"][data-slot="wrapper"]) {
+    --cui-sidebar-wrapper-background: transparent;
+    --cui-sidebar-wrapper-background-image: none;
+    --cui-sidebar-inset-background: var(--background);
+    --cui-sidebar-inset-background-image: none;
+    --cui-sidebar-inset-shadow: var(--shadow-sm);
+    background-color: var(--cui-sidebar-wrapper-background);
+    background-image: var(--cui-sidebar-wrapper-background-image);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="wrapper"]:has([data-control-family="sidebar"][data-variant="inset"])) {
+    --cui-sidebar-wrapper-background: var(--sidebar);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="root"]) {
+    --cui-sidebar-inner-background: var(--sidebar);
+    --cui-sidebar-inner-background-image: none;
+    --cui-sidebar-inner-border-color: var(--sidebar-border);
+    --cui-sidebar-inner-border-width: 0px;
+    --cui-sidebar-inner-radius: 0px;
+    --cui-sidebar-inner-shadow: none;
+    --cui-sidebar-rail-divider-background: transparent;
+    --cui-sidebar-group-label-foreground: oklch(from var(--sidebar-foreground) l c h / 0.7);
+    --cui-sidebar-menu-button-radius: var(--radius-popup-item);
+    --cui-sidebar-menu-button-foreground: var(--sidebar-foreground);
+    --cui-sidebar-menu-button-hover-background: var(--hover-fill);
+    --cui-sidebar-menu-button-hover-foreground: var(--foreground);
+    --cui-sidebar-menu-button-hover-shadow: 0 0 transparent;
+    --cui-sidebar-menu-button-active-background: var(--active-fill);
+    --cui-sidebar-menu-button-active-shadow: 0 0 transparent;
+    --cui-sidebar-menu-button-active-foreground: var(--foreground);
+    background-color: var(--sidebar);
+    color: var(--sidebar-foreground);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="gap"]) {
+    background-color: transparent;
+    transition: width var(--duration-base) var(--ease-standard);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="container"]) {
+    transition-property: inset-inline-start, inset-inline-end, width;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="root"][data-variant="sidebar"][data-side="left"] [data-slot="container"]) {
+    border-inline-end: 1px solid var(--sidebar-border);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="root"][data-variant="sidebar"][data-side="right"] [data-slot="container"]) {
+    border-inline-start: 1px solid var(--sidebar-border);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="inner"]) {
+    border: var(--cui-sidebar-inner-border-width) solid var(--cui-sidebar-inner-border-color);
+    border-radius: var(--cui-sidebar-inner-radius);
+    background-color: var(--cui-sidebar-inner-background);
+    background-image: var(--cui-sidebar-inner-background-image);
+    box-shadow: var(--cui-sidebar-inner-shadow);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="root"][data-variant="floating"]) {
+    --cui-sidebar-inner-border-width: 1px;
+    --cui-sidebar-inner-radius: var(--radius-panel);
+    --cui-sidebar-inner-shadow: var(--shadow-md);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="rail"]) {
+    inline-size: calc(var(--spacing) * 4);
+    background-image: linear-gradient(var(--cui-sidebar-rail-divider-background), var(--cui-sidebar-rail-divider-background));
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 2px 100%;
+    transition-property: --cui-sidebar-rail-divider-background, background-color, translate;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="sidebar"][data-collapsible="offcanvas"] [data-slot="rail"]) {
+    background-position: right;
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="sidebar"][data-slot="rail"]:hover) {
+      --cui-sidebar-rail-divider-background: var(--sidebar-border);
+    }
+
+    :where([data-control-family="sidebar"][data-collapsible="offcanvas"] [data-slot="rail"]:hover) {
+      background-color: var(--sidebar);
+    }
+  }
+
+  :where([data-control-family="sidebar"][data-slot="inset"]) {
+    background-color: var(--cui-sidebar-inset-background);
+    background-image: var(--cui-sidebar-inset-background-image);
+    transition-property: margin, border-radius, box-shadow;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  @media (width >= 64rem) {
+    :where([data-control-family="sidebar"][data-slot="root"][data-variant="inset"] ~ [data-control-family="sidebar"][data-slot="inset"]) {
+      margin: calc(var(--spacing) * 2);
+      margin-inline-start: 0;
+      border-radius: var(--radius-xl);
+      box-shadow: var(--cui-sidebar-inset-shadow);
+    }
+
+    :where(
+        [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="collapsed"]
+          ~ [data-control-family="sidebar"][data-slot="inset"]
+      ) {
+      margin-inline-start: calc(var(--spacing) * 2);
+    }
+  }
+
+  :where([data-control-family="sidebar"][data-slot="header"]),
+  :where([data-control-family="sidebar"][data-slot="footer"]) {
+    gap: calc(var(--spacing) * 2);
+    padding: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="content-stack"]) {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="group"]) {
+    padding: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu"]) {
+    gap: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="group-label"]) {
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 2);
+    border-radius: var(--radius-md);
+    color: var(--cui-sidebar-group-label-foreground);
+    font-size: var(--text-caption);
+    font-weight: var(--font-weight-medium);
+    outline: none;
+    transition-property: margin, opacity;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"]) {
+    gap: calc(var(--spacing) * 1.5);
+    block-size: var(--control-h-md);
+    border-radius: var(--cui-sidebar-menu-button-radius);
+    padding-inline: var(--padding-x);
+    font-size: var(--text-body);
+    background-color: transparent;
+    color: var(--cui-sidebar-menu-button-foreground);
+    outline: none;
+    transition-property: width, height, padding, color, background-color, box-shadow;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"]) {
+    block-size: var(--control-h-sm);
+    padding-inline: calc(var(--padding-x) * 0.75);
+    font-size: var(--text-label);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"]) {
+    gap: calc(var(--spacing) * 2);
+    block-size: var(--control-h-lg);
+    padding-inline: calc(var(--padding-x) * 1.25);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="sidebar"][data-slot="menu-button"]:hover) {
+      background-color: var(--cui-sidebar-menu-button-hover-background);
+      color: var(--cui-sidebar-menu-button-hover-foreground);
+      box-shadow: var(--cui-sidebar-menu-button-hover-shadow);
+    }
+
+    :where([data-control-family="sidebar"][data-slot="menu-button"][data-state="open"]:hover) {
+      background-color: var(--cui-sidebar-menu-button-active-background);
+      color: var(--cui-sidebar-menu-button-active-foreground);
+    }
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"]:active),
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-active]) {
+    background-color: var(--cui-sidebar-menu-button-active-background);
+    color: var(--cui-sidebar-menu-button-active-foreground);
+    box-shadow: var(--cui-sidebar-menu-button-active-shadow);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-active]) {
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]) {
+    background-color: var(--background);
+    box-shadow: 0 0 0 1px var(--sidebar-border);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]:hover) {
+      box-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.08);
+    }
+  }
+
+  :where(
+    [data-control-family="sidebar"][data-indicator="slide"]
+      [data-control-family="sidebar"][data-slot="menu-button"]:is(:hover, :active, [data-active], [data-popup-open])
+  ) {
+    background-color: transparent;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"]:disabled),
+  :where([data-control-family="sidebar"][data-slot="menu-button"][aria-disabled="true"]) {
+    opacity: 0.5;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="root"][data-side="right"] [data-control-family="sidebar"][data-slot="gap"]) {
+    rotate: 180deg;
+  }
+}
+
+@property --cui-sidebar-rail-divider-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-wrapper-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-wrapper-background-image {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-sidebar-menu-button-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-sidebar-inner-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-inner-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-inner-background-image {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-sidebar-inner-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-sidebar-inner-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-sidebar-inner-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-sidebar-inset-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-inset-background-image {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-sidebar-inset-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-sidebar-group-label-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-menu-button-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-menu-button-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-menu-button-hover-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-menu-button-hover-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-sidebar-menu-button-active-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-menu-button-active-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-menu-button-active-shadow {
+  syntax: "*";
+  inherits: true;
+}

package/dist/styles/recipes/skeleton.css

@@ -0,0 +1,23 @@
+@layer components {
+  :where([data-control-family="skeleton"][data-slot="root"]) {
+    --cui-skeleton-radius: var(--radius-control);
+    --cui-skeleton-background: var(--muted);
+    border-radius: var(--cui-skeleton-radius);
+    background-color: var(--cui-skeleton-background);
+    background-image: linear-gradient(100deg, transparent 30%, oklch(from var(--foreground) l c h / 0.06) 50%, transparent 70%);
+    background-size: 220% 100%;
+    animation: shimmer calc(var(--duration-slow) * 5) var(--ease-standard) infinite;
+  }
+}
+
+@property --cui-skeleton-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-skeleton-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/source-badge.css

@@ -0,0 +1,77 @@
+@layer components {
+  :where([data-control-family="badge"][data-source-badge][data-slot="root"]) {
+    block-size: calc(var(--spacing) * 6);
+    gap: calc(var(--spacing) * 1.5);
+    padding-block: 0;
+    padding-inline: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
+    --cui-source-badge-background: var(--background);
+    --cui-source-badge-foreground: var(--muted-foreground);
+    --cui-source-badge-hover-background: oklch(from var(--muted) l c h / 0.6);
+    --cui-source-badge-hover-foreground: var(--foreground);
+    --cui-source-badge-favicon-background: var(--muted);
+    --cui-source-badge-favicon-radius: var(--radius-sm);
+    background: var(--cui-source-badge-background);
+    color: var(--cui-source-badge-foreground);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+    font-weight: var(--font-weight-normal);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="badge"][data-source-badge][data-slot="root"]:hover) {
+      background: var(--cui-source-badge-hover-background);
+      color: var(--cui-source-badge-hover-foreground);
+    }
+  }
+
+  :where([data-control-family="badge"][data-source-badge][data-slot="root"] [data-slot="label"]) {
+    max-inline-size: calc(var(--spacing) * 44);
+  }
+
+  :where([data-control-family="avatar"][data-source-badge-favicon][data-slot="root"]) {
+    inline-size: calc(var(--spacing) * 3.5);
+    block-size: calc(var(--spacing) * 3.5);
+    --cui-avatar-radius: var(--cui-source-badge-favicon-radius);
+    --cui-avatar-fallback-background: var(--cui-source-badge-favicon-background);
+    --cui-avatar-fallback-foreground: var(--cui-source-badge-foreground);
+    background: var(--cui-source-badge-favicon-background);
+    border-radius: var(--cui-source-badge-favicon-radius);
+  }
+}
+
+@property --cui-source-badge-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-source-badge-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-source-badge-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-source-badge-hover-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-source-badge-favicon-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-source-badge-favicon-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/spinner.css

@@ -0,0 +1,33 @@
+@layer components {
+  :where([data-control-family="spinner"][data-slot="root"]) {
+    --cui-spinner-foreground: var(--muted-foreground);
+    color: var(--cui-spinner-foreground);
+  }
+
+  :where([data-control-family="spinner"][data-slot="indicator"]) {
+    inline-size: calc(var(--spacing) * 4);
+    block-size: calc(var(--spacing) * 4);
+    animation: spin calc(var(--duration-slow) * 3.333) linear infinite;
+  }
+
+  :where([data-control-family="spinner"][data-slot="indicator"][data-size="xs"]) {
+    inline-size: calc(var(--spacing) * 3);
+    block-size: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="spinner"][data-slot="indicator"][data-size="md"]) {
+    inline-size: calc(var(--spacing) * 5);
+    block-size: calc(var(--spacing) * 5);
+  }
+
+  :where([data-control-family="spinner"][data-slot="indicator"][data-size="lg"]) {
+    inline-size: calc(var(--spacing) * 6);
+    block-size: calc(var(--spacing) * 6);
+  }
+}
+
+@property --cui-spinner-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/stepper.css

@@ -0,0 +1,178 @@
+@layer components {
+  :where([data-control-family="stepper"][data-slot="root"]) {
+    --cui-stepper-indicator-radius: 9999px;
+    --cui-stepper-indicator-background: var(--background);
+    --cui-stepper-indicator-foreground: var(--muted-foreground);
+    --cui-stepper-indicator-border-color: var(--border);
+    --cui-stepper-separator-background: var(--border);
+    --cui-stepper-title-foreground: var(--foreground);
+  }
+  :where([data-control-family="stepper"][data-slot="trigger"]) {
+    border-radius: var(--radius-control);
+    outline: none;
+    transition: color var(--duration-fast) var(--ease-standard);
+    --_stepper-trigger-text-align: left;
+    text-align: var(--_stepper-trigger-text-align);
+  }
+
+  :where([data-control-family="stepper"][data-slot="trigger"]:disabled) {
+    opacity: 0.5;
+  }
+
+  :where([data-control-family="stepper"][data-slot="indicator"]) {
+    inline-size: calc(var(--spacing) * 8);
+    block-size: calc(var(--spacing) * 8);
+    --_stepper-indicator-shadow: 0 0 transparent;
+    border: 1px solid var(--cui-stepper-indicator-border-color);
+    border-radius: var(--cui-stepper-indicator-radius);
+    background: var(--cui-stepper-indicator-background);
+    color: var(--cui-stepper-indicator-foreground);
+    box-shadow: var(--_stepper-indicator-shadow);
+    font-size: var(--text-caption);
+    font-weight: var(--font-weight-semibold);
+    font-variant-numeric: tabular-nums;
+    transition-property: color, background-color, border-color, box-shadow;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="stepper"][data-slot="indicator"][data-state="complete"]:not([data-invalid])) {
+    --cui-stepper-indicator-background: var(--primary);
+    --cui-stepper-indicator-foreground: var(--primary-foreground);
+    --cui-stepper-indicator-border-color: var(--primary);
+  }
+
+  :where([data-control-family="stepper"][data-slot="indicator"][data-state="current"]:not([data-invalid])) {
+    --cui-stepper-indicator-foreground: var(--primary-text);
+    --cui-stepper-indicator-border-color: var(--primary);
+    --_stepper-indicator-shadow: 0 0 0 4px oklch(from var(--primary) l c h / 0.1);
+  }
+
+  :where([data-control-family="stepper"][data-slot="indicator"][data-invalid]) {
+    --cui-stepper-indicator-background: oklch(from var(--destructive) l c h / 0.1);
+    --cui-stepper-indicator-foreground: var(--destructive-text);
+    --cui-stepper-indicator-border-color: var(--destructive);
+    --_stepper-indicator-shadow: 0 0 transparent;
+    border-style: dashed;
+  }
+
+  :where([data-control-family="stepper"][data-slot="separator"]) {
+    background: var(--cui-stepper-separator-background);
+    transition: background-color var(--duration-base) var(--ease-standard);
+  }
+
+  :where([data-control-family="stepper"][data-slot="separator"][data-state="complete"]:not([data-invalid])) {
+    --cui-stepper-separator-background: var(--primary);
+  }
+
+  :where([data-control-family="stepper"][data-slot="title"]) {
+    color: var(--cui-stepper-title-foreground);
+    font-size: var(--text-body);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--leading-tight);
+  }
+
+  :where([data-control-family="stepper"][data-slot="description"]) {
+    color: var(--muted-foreground);
+    font-size: var(--text-body);
+    line-height: var(--leading-relaxed);
+  }
+
+  :where([data-control-family="stepper"][data-slot="content"]) {
+    margin-block-start: calc(var(--spacing) * 6);
+    outline: none;
+  }
+
+  :where([data-control-family="stepper"][data-slot="root"][data-orientation="vertical"] [data-slot="item"]) {
+    padding-block-end: calc(var(--spacing) * 6);
+  }
+
+  :where([data-control-family="stepper"][data-slot="root"][data-orientation="vertical"] [data-slot="item"]:last-child) {
+    padding-block-end: 0;
+  }
+
+  :where(
+    [data-control-family="stepper"][data-slot="root"][data-orientation="vertical"] :is([data-slot="title"], [data-slot="description"])
+  ) {
+    margin-inline-start: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="stepper"][data-slot="root"][data-orientation="horizontal"] [data-slot="title"]) {
+    margin-block-start: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="stepper"][data-slot="root"][data-orientation="horizontal"] [data-slot="description"]) {
+    margin-block-start: calc(var(--spacing) * 0.5);
+  }
+
+  :where([data-control-family="stepper"][data-slot="root"][data-orientation="horizontal"] [data-slot="separator"]) {
+    block-size: 1px;
+  }
+
+  :where([data-control-family="stepper"][data-slot="root"][data-orientation="vertical"] [data-slot="separator"]) {
+    inline-size: 1px;
+  }
+
+  @container stepper (width < 28rem) {
+    :where([data-control-family="stepper"][data-slot="trigger"]) {
+      --_stepper-trigger-text-align: left;
+      text-align: var(--_stepper-trigger-text-align);
+    }
+
+    :where([data-control-family="stepper"][data-slot="root"][data-orientation="horizontal"] [data-slot="item"]) {
+      padding-block-end: calc(var(--spacing) * 6);
+    }
+
+    :where([data-control-family="stepper"][data-slot="root"][data-orientation="horizontal"] [data-slot="item"]:last-child) {
+      padding-block-end: 0;
+    }
+
+    :where(
+        [data-control-family="stepper"][data-slot="root"][data-orientation="horizontal"] :is([data-slot="title"], [data-slot="description"])
+      ) {
+      margin-block-start: 0;
+      margin-inline-start: calc(var(--spacing) * 3);
+    }
+
+    :where([data-control-family="stepper"][data-slot="root"][data-orientation="horizontal"] [data-slot="separator"]) {
+      block-size: auto;
+      inline-size: 1px;
+    }
+  }
+}
+
+@property --cui-stepper-indicator-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-stepper-indicator-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-stepper-indicator-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-stepper-indicator-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-stepper-separator-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-stepper-title-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}