@ctrl-ui/react 0.8.0

package/dist/styles/recipes/dynamic-notification.css

@@ -0,0 +1,241 @@
+@layer components {
+  :where([data-control-family="dynamic-notification"][data-slot="root"]) {
+    --cui-dynamic-notification-content-easing: linear(
+      0,
+      0.0553 4.55%,
+      0.1795 9.09%,
+      0.328 13.64%,
+      0.4745 18.18%,
+      0.6054 22.73%,
+      0.7148 27.27%,
+      0.8017 31.82%,
+      0.868 36.36%,
+      0.9166 40.91%,
+      0.9509 45.45%,
+      0.9741 50%,
+      0.9891 54.55%,
+      0.9982 59.09%,
+      1.0032 63.64%,
+      1.0056 68.18%,
+      1.0063 72.73%,
+      1.006 77.27%,
+      1.0053 81.82%,
+      1.0044 86.36%,
+      1.0034 90.91%,
+      1.0026 95.45%,
+      1
+    );
+    --cui-dynamic-notification-expanded-radius: 1.65rem;
+    --cui-dynamic-notification-glass-foreground: white;
+    --cui-dynamic-notification-glass-ring-color: oklch(1 0 0 / 0.12);
+    --cui-dynamic-notification-indicator-end: oklch(0.7 0.17 250);
+    --cui-dynamic-notification-indicator-middle: oklch(0.75 0.15 70);
+    --cui-dynamic-notification-indicator-start: oklch(0.62 0.19 25);
+    --cui-dynamic-notification-liquid-foreground: white;
+    --cui-dynamic-notification-morph-easing: linear(
+      0,
+      0.0568 3.85%,
+      0.1888 7.69%,
+      0.351 11.54%,
+      0.5142 15.38%,
+      0.6608 19.23%,
+      0.7824 23.08%,
+      0.8767 26.92%,
+      0.9449 30.77%,
+      0.9908 34.62%,
+      1.0187 38.46%,
+      1.0332 42.31%,
+      1.0382 46.15%,
+      1.0372 50%,
+      1.0327 53.85%,
+      1.0266 57.69%,
+      1.0203 61.54%,
+      1.0145 65.38%,
+      1.0095 69.23%,
+      1.0056 73.08%,
+      1.0027 76.92%,
+      1.0008 80.77%,
+      0.9995 84.62%,
+      0.9988 88.46%,
+      0.9986 92.31%,
+      0.9985 96.15%,
+      1
+    );
+    --cui-dynamic-notification-surface-background: var(--popover);
+    --cui-dynamic-notification-surface-foreground: var(--popover-foreground);
+    --cui-dynamic-notification-surface-ring-color: var(--border);
+    --cui-dynamic-notification-surface-shadow: var(--shadow-pop);
+    --_dynamic-notification-active-foreground: var(--cui-dynamic-notification-surface-foreground);
+  }
+
+  :where([data-control-family="dynamic-notification"][data-slot="root"][data-variant="glass"]) {
+    --_dynamic-notification-active-foreground: var(--cui-dynamic-notification-glass-foreground);
+  }
+
+  :where([data-control-family="dynamic-notification"][data-slot="root"][data-variant="liquid"]) {
+    --_dynamic-notification-active-foreground: var(--cui-dynamic-notification-liquid-foreground);
+  }
+
+  :where([data-control-family="dynamic-notification"][data-slot="island"][data-variant="glass"]) {
+    background: linear-gradient(
+      to bottom,
+      oklch(0 0 0 / 0.97) 0%,
+      oklch(0 0 0 / 0.97) var(--_dynamic-notification-ink-plateau),
+      var(--_dynamic-notification-ink-mid) var(--_dynamic-notification-ink-mid-stop),
+      var(--_dynamic-notification-ink-low) var(--_dynamic-notification-ink-low-stop),
+      var(--_dynamic-notification-ink-tail) var(--_dynamic-notification-ink-tail-stop),
+      var(--_dynamic-notification-ink-tail) 100%
+    );
+    backdrop-filter: blur(4px) saturate(1.4);
+    color: var(--cui-dynamic-notification-glass-foreground);
+    box-shadow:
+      inset 0 0 0 1px var(--cui-dynamic-notification-glass-ring-color),
+      var(--shadow-pop);
+  }
+
+  :where([data-control-family="dynamic-notification"][data-slot="island"][data-variant="liquid"]) {
+    background: linear-gradient(
+      to bottom,
+      oklch(0 0 0 / 0.97) 0%,
+      oklch(0 0 0 / 0.97) var(--_dynamic-notification-ink-plateau),
+      var(--_dynamic-notification-ink-mid) var(--_dynamic-notification-ink-mid-stop),
+      var(--_dynamic-notification-ink-low) var(--_dynamic-notification-ink-low-stop),
+      var(--_dynamic-notification-ink-tail) var(--_dynamic-notification-ink-tail-stop),
+      var(--_dynamic-notification-ink-tail) 100%
+    );
+    color: var(--cui-dynamic-notification-liquid-foreground);
+    text-shadow: 0 1px 2px oklch(0 0 0 / 0.25);
+  }
+
+  :where([data-control-family="dynamic-notification"][data-slot="island"][data-variant="glass"]:has([data-glass-ready="true"])),
+  :where([data-control-family="dynamic-notification"][data-slot="island"][data-variant="liquid"]:has([data-glass-ready="true"])) {
+    background: transparent;
+  }
+
+  :where([data-control-family="dynamic-notification"][data-slot="glass"]),
+  :where([data-control-family="dynamic-notification"][data-slot="liquid"]) {
+    opacity: 0;
+    transition: opacity var(--duration-base) var(--ease-standard);
+  }
+
+  :where([data-control-family="dynamic-notification"][data-slot="glass"][data-glass-ready="true"]),
+  :where([data-control-family="dynamic-notification"][data-slot="liquid"][data-glass-ready="true"]) {
+    opacity: 1;
+  }
+
+  :where([data-control-family="dynamic-notification"][data-slot="island"][data-variant="surface"]) {
+    background: var(--cui-dynamic-notification-surface-background);
+    color: var(--cui-dynamic-notification-surface-foreground);
+    box-shadow:
+      inset 0 0 0 1px var(--cui-dynamic-notification-surface-ring-color),
+      var(--cui-dynamic-notification-surface-shadow);
+    backdrop-filter: blur(var(--backdrop-blur-popover));
+  }
+
+  :where([data-control-family="dynamic-notification"][data-slot="pill"]) {
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 4);
+    font-size: var(--text-caption);
+    outline-style: none;
+  }
+
+  :where([data-control-family="dynamic-notification"][data-slot="title"]) {
+    font-size: var(--text-caption);
+    opacity: 0.55;
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--tracking-wide);
+  }
+
+  :where([data-control-family="dynamic-notification"][data-slot="message"]) {
+    font-size: var(--text-body-lg);
+    line-height: 1.375;
+  }
+
+  :where([data-control-family="dynamic-notification"][data-slot="indicator"]) {
+    inline-size: calc(var(--spacing) * 2);
+    block-size: calc(var(--spacing) * 2);
+    border-radius: calc(infinity * 1px);
+  }
+
+  :where([data-control-family="dynamic-notification"][data-slot="content"]) {
+    gap: calc(var(--spacing) * 2.5);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 3) calc(var(--spacing) * 3.5);
+  }
+
+  :where([data-control-family="dynamic-notification"][data-slot="reply"]) {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="dynamic-notification"][data-slot="reply-input"]) {
+    block-size: calc(var(--spacing) * 9);
+    padding-inline: calc(var(--spacing) * 3.5);
+  }
+
+  :where([data-control-family="button"][data-dynamic-notification-close="true"]) {
+    margin-inline-end: calc(var(--spacing) * -1.5);
+  }
+
+  :where([data-control-family="dynamic-notification"][data-slot="island"]) {
+    outline-style: none;
+  }
+}
+
+@property --cui-dynamic-notification-glass-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-dynamic-notification-glass-ring-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-dynamic-notification-liquid-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-dynamic-notification-surface-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-dynamic-notification-surface-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-dynamic-notification-surface-ring-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-dynamic-notification-surface-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-dynamic-notification-indicator-end {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-dynamic-notification-indicator-middle {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-dynamic-notification-indicator-start {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/empty.css

@@ -0,0 +1,96 @@
+@layer components {
+  :where([data-control-family="empty"][data-slot="root"]) {
+    --cui-empty-radius: var(--radius-lg);
+    --cui-empty-background: transparent;
+    --cui-empty-border-color: transparent;
+    --cui-empty-border-width: 0px;
+    --cui-empty-border-style: solid;
+    --cui-empty-media-radius: var(--radius-lg);
+    --cui-empty-media-background: var(--muted);
+    border: var(--cui-empty-border-width) var(--cui-empty-border-style) var(--cui-empty-border-color);
+    border-radius: var(--cui-empty-radius);
+    background: var(--cui-empty-background);
+    box-shadow: none;
+    color: var(--foreground);
+    text-align: center;
+    text-wrap: balance;
+    gap: calc(var(--spacing) * 6);
+    padding: calc(var(--spacing) * 6);
+  }
+
+  :where([data-control-family="empty"][data-slot="media"]) {
+    margin-block-end: calc(var(--spacing) * 2);
+    inline-size: calc(var(--spacing) * 10);
+    block-size: calc(var(--spacing) * 10);
+    border-radius: var(--cui-empty-media-radius);
+    background: var(--cui-empty-media-background);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="empty"][data-slot="content"]) {
+    gap: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    line-height: var(--text-sm--line-height);
+    text-wrap: balance;
+  }
+
+  :where([data-control-family="empty"][data-slot="description"]) {
+    font-size: var(--text-sm);
+    line-height: var(--leading-relaxed);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="empty"][data-slot="title"]) {
+    font-size: var(--text-sm);
+    line-height: var(--text-sm--line-height);
+    font-weight: var(--font-weight-medium);
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="empty"][data-slot="header"]) {
+    gap: calc(var(--spacing) * 2);
+    text-align: center;
+  }
+}
+
+@property --cui-empty-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-empty-background {
+  syntax: "*";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-empty-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-empty-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-empty-border-style {
+  syntax: "*";
+  inherits: true;
+  initial-value: solid;
+}
+
+@property --cui-empty-media-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-empty-media-background {
+  syntax: "*";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/environment-variables.css

@@ -0,0 +1,173 @@
+@layer components {
+  :where([data-control-family="environment-variables"][data-slot="root"]) {
+    --cui-environment-variables-error-foreground: var(--destructive-text);
+    --cui-environment-variables-message-background: oklch(from var(--destructive) l c h / 0.05);
+    --cui-environment-variables-message-border-color: oklch(from var(--destructive) l c h / 0.4);
+    --cui-environment-variables-message-foreground: var(--destructive-text);
+    --cui-environment-variables-meta-foreground: var(--muted-foreground);
+    --cui-environment-variables-title-foreground: var(--foreground);
+    gap: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="environment-variables"][data-slot="header"]) {
+    gap: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="environment-variables"][data-slot="toolbar"]) {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="environment-variables"][data-slot="row"]) {
+    gap: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 1) calc(var(--spacing) * 9);
+  }
+
+  :where([data-control-family="environment-variables"][data-slot="row"] > div) {
+    gap: calc(var(--spacing) * 1.5);
+  }
+
+  @media (width >= 40rem) {
+    :where([data-control-family="environment-variables"][data-slot="row"]) {
+      gap: calc(var(--spacing) * 2);
+      padding-inline: calc(var(--spacing) * 1);
+    }
+  }
+
+  :where([data-control-family="environment-variables"][data-slot="actions"]),
+  :where([data-control-family="environment-variables"][data-slot="actions"] > div) {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="environment-variables"][data-slot="readonly-list"]) {
+    gap: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="environment-variables"][data-slot="readonly-item"]) {
+    gap: calc(var(--spacing) * 3);
+    padding-inline: calc(var(--spacing) * 1);
+    padding-block: calc(var(--spacing) * 2);
+  }
+  :where([data-control-family="environment-variables"][data-slot="title"]) {
+    color: var(--cui-environment-variables-title-foreground);
+    font-size: var(--text-label);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  :where(
+    [data-control-family="environment-variables"]:is(
+      [data-slot="description"],
+      [data-slot="hint"],
+      [data-slot="column-labels"],
+      [data-slot="field-label"],
+      [data-slot="empty"],
+      [data-slot="readonly-item"]
+    )
+  ) {
+    color: var(--cui-environment-variables-meta-foreground);
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-family="environment-variables"][data-slot="hint-code"]),
+  :where([data-control-family="environment-variables"][data-slot="readonly-key"]) {
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="environment-variables"]:is([data-slot="key-input"], [data-slot="value-input"])) {
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-family="environment-variables"][data-slot="value-group"][data-invalid="true"]) {
+    box-shadow: 0 0 0 2px oklch(from var(--destructive) l c h / 0.7);
+  }
+
+  :where([data-control-family="environment-variables"][data-slot="field-error"]) {
+    color: var(--cui-environment-variables-error-foreground);
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-family="environment-variables"][data-slot="message"]) {
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    background: var(--cui-environment-variables-message-background);
+    border-block: 1px solid var(--cui-environment-variables-message-border-color);
+    color: var(--cui-environment-variables-message-foreground);
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-family="environment-variables"][data-slot="readonly-value"]) {
+    color: var(--muted-foreground);
+    font-family: var(--font-mono);
+  }
+
+  :where([data-control-family="environment-variables"][data-slot="readonly-key"]) {
+    font-family: var(--font-mono);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="environment-variables"][data-slot="empty"]) {
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 4);
+    text-align: center;
+  }
+
+  :where([data-control-family="environment-variables"][data-slot="value-input"]) {
+    font-family: var(--font-mono);
+  }
+
+  :where([data-control-family="environment-variables"][data-slot="field-label"]) {
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="environment-variables"][data-slot="key-input"]) {
+    font-family: var(--font-mono);
+  }
+
+  :where([data-control-family="environment-variables"][data-slot="column-labels"]) {
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 1);
+    padding-block-end: calc(var(--spacing) * 1);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="environment-variables"][data-slot="hint-code"]) {
+    font-family: var(--font-mono);
+  }
+}
+
+@property --cui-environment-variables-title-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-environment-variables-meta-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-environment-variables-error-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-environment-variables-message-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-environment-variables-message-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-environment-variables-message-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/field-parts.css

@@ -0,0 +1,148 @@
+@layer components {
+  :where([data-control-family="field"][data-field-kind="input-group"][data-slot="addon"]),
+  :where([data-control-family="field"][data-field-kind="combobox"][data-slot="trigger"]),
+  :where([data-control-family="field"][data-field-kind="autocomplete"][data-slot="clear"]),
+  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="decrement"]),
+  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="increment"]),
+  :where([data-control-family="field"][data-field-kind="native-select"][data-slot="icon"]) {
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="field"][data-field-kind="input-group"][data-slot="input"]),
+  :where([data-control-family="field"][data-field-kind="phone-input"][data-slot="input"]),
+  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="input"]) {
+    outline: none;
+    background: transparent;
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="field"][data-field-kind="input-group"][data-slot="input"])::placeholder,
+  :where([data-control-family="field"][data-field-kind="phone-input"][data-slot="input"])::placeholder,
+  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="input"])::placeholder {
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="field"][data-field-kind="combobox"][data-slot="trigger"]),
+  :where([data-control-family="field"][data-field-kind="autocomplete"][data-slot="clear"]) {
+    border-radius: var(--radius-control);
+    outline: none;
+    transition-property: color, box-shadow;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="field"][data-field-kind="combobox"][data-slot="trigger"]:hover),
+    :where([data-control-family="field"][data-field-kind="autocomplete"][data-slot="clear"]:hover),
+    :where([data-control-family="field"][data-field-kind="number-field"][data-slot="decrement"]:hover),
+    :where([data-control-family="field"][data-field-kind="number-field"][data-slot="increment"]:hover) {
+      color: var(--foreground);
+    }
+  }
+
+  :where([data-control-family="field"][data-field-kind="combobox"][data-slot="trigger"]:disabled),
+  :where([data-control-family="field"][data-field-kind="autocomplete"][data-slot="clear"]:disabled) {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+
+  :where([data-control-family="field"][data-field-kind="combobox"][data-slot="icon"]) {
+    transition-property: rotate;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-emphasized);
+  }
+
+  :where(
+    [data-control-family="field"][data-field-kind="combobox"][data-popup-open]
+      :where([data-control-family="field"][data-field-kind="combobox"][data-slot="icon"])
+  ) {
+    rotate: 180deg;
+  }
+
+  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="decrement"]) {
+    border-inline-end: 1px solid var(--border);
+  }
+
+  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="increment"]) {
+    border-inline-start: 1px solid var(--border);
+  }
+
+  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="decrement"]),
+  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="increment"]) {
+    outline: none;
+    transition-property: color, background-color;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="decrement"]:active),
+  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="increment"]:active) {
+    background: oklch(from var(--foreground) l c h / 0.06);
+  }
+
+  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="decrement"][data-disabled]),
+  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="increment"][data-disabled]) {
+    color: oklch(from var(--muted-foreground) l c h / 0.5);
+  }
+
+  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="scrub-cursor"]) {
+    color: var(--foreground);
+    filter: drop-shadow(0 1px 1px oklch(0 0 0 / 0.05));
+  }
+
+  :where([data-control-family="field"][data-field-kind="input-otp"][data-slot="root"]) {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="field"][data-field-kind="input-otp"][data-slot="separator"]) {
+    block-size: 1px;
+    inline-size: calc(var(--spacing) * 2.5);
+    border-radius: 9999px;
+    background: var(--border);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="title"]) {
+    color: var(--foreground);
+    font-size: var(--text-label);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="label"]) {
+    color: var(--foreground);
+    font-size: var(--text-label);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="label"][data-disabled]) {
+    opacity: 0.5;
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="description"]) {
+    color: var(--muted-foreground);
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="error"]) {
+    color: var(--destructive-text);
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="separator"]) {
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="separator-content"]) {
+    background-color: var(--background);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="set"]) {
+    border-width: 0px;
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="legend"]) {
+    color: var(--foreground);
+    font-size: var(--text-label);
+    font-weight: var(--font-weight-semibold);
+  }
+}