@radui/ui 1.0.0 → 1.1.0

package/dist/styles/clarity/Card/card.clarity.scss

@@ -0,0 +1,121 @@
+.rad-ui-card-root {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: calc(var(--rad-ui-panel-radius-lg) + var(--rad-ui-spacing-1));
+  border: var(--rad-ui-border-width-default) solid var(--rad-ui-border-strong);
+  background-color: var(--rad-ui-surface);
+  color: var(--rad-ui-text-primary);
+  box-shadow: var(--rad-ui-elevation-xs-shadow);
+  padding: var(--rad-ui-spacing-6);
+  
+  &[data-variant="outline"] {
+    box-shadow: var(--rad-ui-shadow-none);
+  }
+  
+  &[data-variant="soft"] {
+    background-color: var(--rad-ui-surface-subtle);
+    border-color: var(--rad-ui-border-soft);
+    box-shadow: var(--rad-ui-shadow-none);
+  }
+
+  &[data-variant="soft"] > .rad-ui-card-footer {
+    background-color: var(--rad-ui-surface-muted);
+  }
+  
+  // Card Sizes
+  &[data-size="small"] {
+    padding: var(--rad-ui-spacing-4);
+  }
+  
+  &[data-size="medium"] {
+    padding: var(--rad-ui-spacing-6);
+  }
+
+  &[data-size="large"] {
+    padding: calc(var(--rad-ui-spacing-6) + var(--rad-ui-spacing-1));
+  }
+  
+  &[data-size="x-large"] {
+    padding: 2rem; // p-8
+  }
+
+  .rad-ui-card-header {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: var(--rad-ui-spacing-2) var(--rad-ui-spacing-4);
+    align-items: start;
+  }
+
+  .rad-ui-card-title {
+    margin: 0;
+    font-size: var(--rad-ui-font-size-3);
+    line-height: 1.3;
+    font-weight: 600;
+    letter-spacing: -0.015em;
+    color: var(--rad-ui-text-primary);
+  }
+
+  .rad-ui-card-description {
+    grid-column: 1 / 2;
+    margin: 0;
+    font-size: var(--rad-ui-font-size-2);
+    line-height: var(--rad-ui-line-height-3);
+    color: var(--rad-ui-text-secondary);
+  }
+
+  .rad-ui-card-action {
+    grid-column: 2 / 3;
+    grid-row: 1 / span 2;
+    place-self: start end;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--rad-ui-spacing-2);
+    font-size: calc(var(--rad-ui-font-size-2) - (var(--rad-ui-spacing-1) / 4));
+    font-weight: 600;
+    color: var(--rad-ui-text-strong);
+  }
+
+  .rad-ui-card-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rad-ui-spacing-4);
+    padding-top: var(--rad-ui-spacing-5);
+    font-size: calc(var(--rad-ui-font-size-3) - (var(--rad-ui-spacing-1) / 4));
+    line-height: calc(var(--rad-ui-component-line-height-relaxed) + 0.05);
+  }
+
+  .rad-ui-card-footer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rad-ui-spacing-3);
+    margin: var(--rad-ui-spacing-6) calc(var(--rad-ui-spacing-6) * -1) calc(var(--rad-ui-spacing-6) * -1);
+    padding: var(--rad-ui-spacing-4) var(--rad-ui-spacing-5) var(--rad-ui-spacing-5);
+    border-top: var(--rad-ui-border-width-default) solid var(--rad-ui-border);
+    background-color: var(--rad-ui-surface-subtle);
+  }
+
+  &[data-size="small"] > .rad-ui-card-content {
+    padding-top: var(--rad-ui-spacing-4);
+  }
+
+  &[data-size="small"] > .rad-ui-card-footer {
+    margin: 1rem -1rem -1rem;
+    padding: calc(var(--rad-ui-spacing-3) + var(--rad-ui-density-gap-xs)) var(--rad-ui-spacing-4) var(--rad-ui-spacing-4);
+  }
+
+  &[data-size="large"] > .rad-ui-card-content,
+  &[data-size="x-large"] > .rad-ui-card-content {
+    padding-top: calc(var(--rad-ui-spacing-6) + var(--rad-ui-spacing-1));
+  }
+
+  &[data-size="large"] > .rad-ui-card-footer {
+    margin: calc(var(--rad-ui-spacing-6) + var(--rad-ui-spacing-1)) calc((var(--rad-ui-spacing-6) + var(--rad-ui-spacing-1)) * -1) calc((var(--rad-ui-spacing-6) + var(--rad-ui-spacing-1)) * -1);
+    padding: var(--rad-ui-spacing-5) calc(var(--rad-ui-spacing-6) + var(--rad-ui-spacing-1)) calc(var(--rad-ui-spacing-6) + var(--rad-ui-spacing-1));
+  }
+
+  &[data-size="x-large"] > .rad-ui-card-footer {
+    margin: 2rem -2rem -2rem;
+    padding: 1.5rem 2rem 2rem;
+  }
+}

package/dist/styles/clarity/Checkbox/checkbox.clarity.scss

@@ -0,0 +1,75 @@
+.rad-ui-checkbox {
+  height: var(--rad-ui-size-4);
+  width: var(--rad-ui-size-4);
+  flex-shrink: 0;
+  border-radius: 0.3125rem;
+  border: 1px solid var(--rad-ui-border-strong);
+  background-color: var(--rad-ui-surface);
+  color: var(--rad-ui-surface);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: var(--rad-ui-shadow-none);
+  transition: border-color var(--rad-ui-motion-duration-fast) ease, background-color var(--rad-ui-motion-duration-fast) ease, color var(--rad-ui-motion-duration-fast) ease;
+
+  &:hover {
+    background-color: var(--rad-ui-surface-subtle);
+    border-color: var(--rad-ui-border-strong);
+  }
+  
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--rad-ui-focus-ring-shadow-offset);
+  }
+  
+  &[data-state="checked"] {
+    background-color: var(--rad-ui-surface-inverse);
+    border-color: var(--rad-ui-surface-inverse);
+    color: var(--rad-ui-text-inverse);
+  }
+
+  &[data-state="checked"]:hover,
+  &[data-state="indeterminate"]:hover {
+    background-color: var(--rad-ui-surface-inverse);
+    border-color: var(--rad-ui-surface-inverse);
+  }
+  
+  &[data-state="unchecked"] {
+    background-color: var(--rad-ui-surface);
+    border-color: var(--rad-ui-border-strong);
+  }
+
+  &[data-state="indeterminate"] {
+    background-color: var(--rad-ui-surface-inverse);
+    border-color: var(--rad-ui-surface-inverse);
+    color: var(--rad-ui-text-inverse);
+  }
+
+  &[data-state="checked"]:focus-visible,
+  &[data-state="indeterminate"]:focus-visible {
+    box-shadow: var(--rad-ui-focus-ring-shadow-offset);
+  }
+  
+  &[data-disabled],
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+    pointer-events: none;
+    box-shadow: var(--rad-ui-shadow-none);
+  }
+  
+}
+
+.rad-ui-checkbox-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: currentcolor;
+  
+  svg {
+    height: 0.75rem;
+    width: 0.75rem;
+    stroke-width: 2.5;
+  }
+}

package/dist/styles/clarity/CheckboxCards/checkbox-cards.clarity.scss

@@ -0,0 +1,143 @@
+.rad-ui-checkbox-cards-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: flex-start;
+  justify-content: stretch;
+  gap: 0 0.5rem;
+  padding: 0.5625rem 0.625rem 0.625rem;
+  border-radius: var(--rad-ui-radius-lg);
+  border: 1px solid var(--rad-ui-border-default);
+  background-color: var(--rad-ui-surface);
+  color: var(--rad-ui-text-primary);
+  cursor: pointer;
+  min-height: 3.5rem;
+  width: 100%;
+  margin: 0;
+  box-shadow: var(--rad-ui-shadow-none);
+  
+  &:hover {
+    background-color: var(--rad-ui-surface-subtle);
+    border-color: var(--rad-ui-border-default);
+  }
+  
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--rad-ui-focus-ring-shadow-offset);
+  }
+  
+  &[aria-checked="true"] {
+    border-color: var(--rad-ui-border-default);
+    background-color: var(--rad-ui-surface);
+    box-shadow: var(--rad-ui-shadow-none);
+  }
+
+  &[aria-checked="true"]:hover {
+    background-color: var(--rad-ui-surface-subtle);
+    border-color: var(--rad-ui-border-default);
+  }
+
+  &[aria-checked="true"]:focus-visible {
+    box-shadow: var(--rad-ui-focus-ring-shadow-offset);
+  }
+  
+  &[aria-checked="false"] {
+    border-color: var(--rad-ui-border-soft);
+    border-width: 1px;
+  }
+  
+  &[data-disabled],
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  
+  > *:not(.rad-ui-checkbox-cards-content) {
+    grid-column: 2 / 3;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    text-align: left;
+    align-items: flex-start;
+    
+    h1, h2, h3, h4, h5, h6, p, span, div {
+      text-align: left;
+      width: 100%;
+    }
+  }
+
+  > .rad-ui-checkbox-cards-content {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+    margin-top: 0.0625rem;
+  }
+}
+
+.rad-ui-checkbox-cards-root {
+  [role="group"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rad-ui-spacing-3);
+  }
+  
+  .rad-ui-checkbox-cards-item {
+    margin: 0;
+  }
+}
+
+.rad-ui-checkbox-cards-content {
+  position: relative;
+  height: 1.125rem;
+  width: 1.125rem;
+  flex-shrink: 0;
+  border-radius: 0.4375rem;
+  background-color: var(--rad-ui-surface-muted);
+  color: var(--rad-ui-text-inverse);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0.125rem;
+    border-radius: 0.3125rem;
+    border: 1px solid var(--rad-ui-border-strong);
+    background-color: var(--rad-ui-surface);
+  }
+  
+  .rad-ui-checkbox-cards-item[aria-checked="true"] & {
+    background-color: var(--rad-ui-surface-muted);
+    color: var(--rad-ui-text-inverse);
+  }
+  
+  .rad-ui-checkbox-cards-item[aria-checked="false"] & {
+    background-color: var(--rad-ui-surface-muted);
+  }
+  
+  .rad-ui-checkbox-cards-item:hover & {
+    background-color: var(--rad-ui-border-soft);
+  }
+  
+  .rad-ui-checkbox-cards-item[aria-checked="true"]:hover & {
+    background-color: var(--rad-ui-border-soft);
+  }
+
+  .rad-ui-checkbox-cards-item[aria-checked="true"] &::before {
+    border-color: var(--rad-ui-surface-inverse);
+    background-color: var(--rad-ui-surface-inverse);
+  }
+  
+}
+
+.rad-ui-checkbox-cards-tick-icon {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: currentcolor;
+  width: 0.5625rem;
+  height: 0.5625rem;
+  stroke-width: 2.5;
+}

package/dist/styles/clarity/CheckboxGroup/checkbox-group.clarity.scss

@@ -0,0 +1,92 @@
+.rad-ui-checkbox-group-root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rad-ui-spacing-3); // space-y-3
+}
+
+.rad-ui-checkbox-group-label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.625rem;
+  font-size: 0.95rem;
+  font-weight: 500; // font-medium
+  color: var(--rad-ui-text-primary);
+  cursor: pointer;
+  
+  &:hover {
+    color: var(--rad-ui-text-primary);
+  }
+  
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.rad-ui-checkbox-group-trigger {
+  height: var(--rad-ui-size-4);
+  width: var(--rad-ui-size-4);
+  flex-shrink: 0;
+  border-radius: 0.3125rem;
+  border: 1px solid var(--rad-ui-border-strong);
+  background-color: var(--rad-ui-surface);
+  color: var(--rad-ui-surface);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: var(--rad-ui-shadow-none);
+  transition: border-color var(--rad-ui-motion-duration-fast) ease, background-color var(--rad-ui-motion-duration-fast) ease, color var(--rad-ui-motion-duration-fast) ease;
+
+  &:hover {
+    background-color: var(--rad-ui-surface-subtle);
+    border-color: var(--rad-ui-border-strong);
+  }
+  
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--rad-ui-focus-ring-shadow-offset);
+  }
+  
+  &[data-state="checked"] {
+    background-color: var(--rad-ui-surface-inverse);
+    border-color: var(--rad-ui-surface-inverse);
+    color: var(--rad-ui-text-inverse);
+  }
+
+  &[data-state="checked"]:hover {
+    background-color: var(--rad-ui-surface-inverse);
+    border-color: var(--rad-ui-surface-inverse);
+  }
+
+  &[data-state="unchecked"] {
+    background-color: var(--rad-ui-surface);
+    border-color: var(--rad-ui-border-strong);
+  }
+
+  &[data-state="checked"]:focus-visible {
+    box-shadow: var(--rad-ui-focus-ring-shadow-offset);
+  }
+  
+  &[data-disabled],
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+    pointer-events: none;
+  }
+  
+}
+
+.rad-ui-checkbox-group-tick-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: currentcolor;
+  
+  svg {
+    height: 0.75rem;
+    width: 0.75rem;
+    stroke-width: 2.5;
+  }
+}

package/dist/styles/clarity/Code/code.clarity.scss

@@ -0,0 +1,42 @@
+.rad-ui-code {
+  --rad-ui-code-padding-y: calc(var(--rad-ui-spacing-1) / 2.5);
+  --rad-ui-code-padding-x: calc(var(--rad-ui-spacing-1) + (var(--rad-ui-spacing-1) * 0.6));
+
+  color: var(--rad-ui-color-accent-1000);
+  background-color: var(--rad-ui-color-accent-300);
+  padding: var(--rad-ui-code-padding-y) var(--rad-ui-code-padding-x);
+  border-radius: var(--rad-ui-control-radius-md);
+  font-size: calc(var(--rad-ui-font-size-2) - (var(--rad-ui-spacing-1) / 4));
+  font-family: var(--rad-ui-font-mono);
+  font-weight: 300;
+  line-height: var(--rad-ui-line-height-2);
+  display: inline-block;
+  border: 0;
+  
+  &[data-variant="outline"] {
+    background-color: transparent;
+    color: var(--rad-ui-color-accent-950);
+    border: var(--rad-ui-border-width-default) solid var(--rad-ui-color-accent-500);
+  }
+  
+  // Code Sizes
+  &[data-size="small"] {
+    font-size: var(--rad-ui-font-size-1);
+    padding: calc(var(--rad-ui-spacing-1) / 4) calc(var(--rad-ui-spacing-1) + (var(--rad-ui-spacing-1) / 4));
+  }
+  
+  &[data-size="medium"] {
+    font-size: calc(var(--rad-ui-font-size-2) - (var(--rad-ui-spacing-1) / 4));
+    padding: var(--rad-ui-code-padding-y) var(--rad-ui-code-padding-x);
+  }
+  
+  &[data-size="large"] {
+    font-size: var(--rad-ui-font-size-2);
+    padding: calc(var(--rad-ui-spacing-1) / 2) calc(var(--rad-ui-spacing-1) + var(--rad-ui-density-gap-xs) + (var(--rad-ui-spacing-1) / 2));
+  }
+  
+  &[data-size="x-large"] {
+    font-size: calc(var(--rad-ui-font-size-3) - (var(--rad-ui-spacing-1) / 4));
+    padding: calc(var(--rad-ui-spacing-1) - (var(--rad-ui-spacing-1) / 4)) var(--rad-ui-spacing-2);
+  }
+}

package/dist/styles/clarity/Collapsible/collapsible.clarity.scss

@@ -0,0 +1,84 @@
+.rad-ui-collapsible {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  width: 100%;
+
+  .rad-ui-collapsible-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--rad-ui-spacing-3);
+    width: 100%;
+    padding: 0.75rem 0.875rem;
+    border-radius: 0.875rem;
+    border: 1px solid var(--rad-ui-border-soft);
+    background-color: var(--rad-ui-surface);
+    box-shadow: var(--rad-ui-shadow-none);
+    font-size: var(--rad-ui-component-font-size-dense);
+    font-weight: 600;
+    line-height: 1.3;
+    letter-spacing: -0.01em;
+    color: var(--rad-ui-text-primary);
+    cursor: pointer;
+    text-align: left;
+    
+    &:focus-visible {
+      outline: none;
+      box-shadow: var(--rad-ui-focus-ring-shadow-offset);
+    }
+    
+    &[data-disabled],
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  .rad-ui-collapsible-content {
+    overflow: hidden;
+    font-size: var(--rad-ui-font-size-1);
+    color: var(--rad-ui-text-primary);
+    padding: 0;
+  }
+
+  .rad-ui-collapsible-panel {
+    border: 1px solid var(--rad-ui-border-soft);
+    border-radius: var(--rad-ui-radius-lg);
+    background-color: var(--rad-ui-surface);
+    overflow: hidden;
+    box-shadow: var(--rad-ui-shadow-none);
+  }
+
+  .rad-ui-collapsible-panel-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--rad-ui-spacing-3);
+    padding: 0.6875rem 0.875rem;
+    font-size: var(--rad-ui-font-size-1);
+    line-height: 1.4;
+  }
+
+  .rad-ui-collapsible-panel-row-label {
+    color: var(--rad-ui-text-muted);
+  }
+
+  .rad-ui-collapsible-panel-row-value {
+    font-weight: 600;
+    color: var(--rad-ui-text-primary);
+  }
+
+  .rad-ui-collapsible-trigger-icon {
+    flex-shrink: 0;
+    width: var(--rad-ui-size-4);
+    height: var(--rad-ui-size-4);
+    color: var(--rad-ui-text-primary);
+    transition: transform var(--rad-ui-motion-duration-normal) ease;
+  }
+
+  &[data-state="open"] .rad-ui-collapsible-trigger-icon {
+    transform: rotate(180deg);
+  }
+}

package/dist/styles/clarity/Combobox/combobox.clarity.scss

@@ -0,0 +1,157 @@
+@use '../Button/button.clarity';
+
+.rad-ui-combobox-root {
+    position: relative;
+    display: inline-block;
+    width: var(--rad-ui-overlay-width-sm);
+}
+
+.rad-ui-combobox-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    min-height: var(--rad-ui-control-height-md);
+    padding: 0 var(--rad-ui-control-padding-x-md);
+    border-radius: var(--rad-ui-control-radius-md);
+    background-color: transparent;
+    border: var(--rad-ui-border-width-default) solid var(--rad-ui-border-soft);
+    color: var(--rad-ui-text-primary);
+    font-size: var(--rad-ui-component-font-size-sm);
+    outline: none;
+    cursor: pointer;
+    box-sizing: border-box;
+    box-shadow: var(--rad-ui-control-shadow);
+
+    &:hover {
+        border-color: var(--rad-ui-border-default);
+    }
+
+    &:focus-visible, &[data-state="open"] {
+        border-color: var(--rad-ui-color-accent-500);
+        box-shadow: var(--rad-ui-focus-ring-shadow);
+    }
+
+    &::after {
+        content: '';
+        border-style: solid;
+        border-width: var(--rad-ui-density-gap-sm) var(--rad-ui-density-gap-sm) 0 var(--rad-ui-density-gap-sm);
+        border-color: var(--rad-ui-text-muted) transparent transparent transparent;
+        margin-left: var(--rad-ui-density-gap-md);
+    }
+
+    &[data-state="open"]::after {
+        transform: rotate(180deg);
+    }
+
+    &[data-disabled] {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+}
+
+.rad-ui-combobox-content {
+    z-index: var(--rad-ui-z-index-portal);
+    min-width: var(--rad-ui-overlay-width-sm);
+    width: max-content;
+    max-width: min(var(--rad-ui-overlay-width-md), calc(100vw - var(--rad-ui-overlay-viewport-gutter)));
+    max-height: min(
+        var(--rad-combobox-content-height, var(--rad-ui-overlay-max-height-md)),
+        var(--rad-ui-floating-available-height, var(--rad-ui-overlay-max-height-md))
+    );
+    padding: var(--rad-ui-density-gap-sm);
+    background-color: var(--rad-ui-surface-panel);
+    border: var(--rad-ui-border-width-default) solid var(--rad-ui-border-soft);
+    border-radius: var(--rad-ui-panel-radius-sm);
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    box-shadow: var(--rad-ui-elevation-md-shadow);
+    
+    // Animation
+    animation: rad-ui-slide-down 0.2s var(--rad-ui-motion-easing-entrance);
+    
+    &[data-state="closed"] {
+        display: none;
+    }
+}
+
+.rad-ui-combobox-search {
+    flex-shrink: 0;
+    margin: var(--rad-ui-density-gap-sm);
+    padding: var(--rad-ui-control-padding-y-md) var(--rad-ui-control-padding-x-md);
+    border-radius: var(--rad-ui-control-radius-sm);
+    border: var(--rad-ui-border-width-default) solid var(--rad-ui-border-soft);
+    background-color: transparent;
+    font-size: var(--rad-ui-component-font-size-sm);
+    outline: none;
+    color: var(--rad-ui-text-primary);
+
+    &:focus {
+        border-color: var(--rad-ui-color-accent-500);
+        box-shadow: var(--rad-ui-focus-ring-shadow);
+    }
+}
+
+.rad-ui-combobox-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: var(--rad-ui-control-padding-y-md) var(--rad-ui-control-padding-x-md);
+    font-size: var(--rad-ui-component-font-size-sm);
+    line-height: var(--rad-ui-component-line-height-normal);
+    color: var(--rad-ui-text-primary);
+    border-radius: var(--rad-ui-control-radius-sm);
+    cursor: default;
+    user-select: none;
+    outline: none;
+
+    &[data-highlighted], &[data-active="true"], &:hover {
+        background-color: var(--rad-ui-surface-hover);
+        color: var(--rad-ui-text-primary);
+    }
+    
+    &[data-disabled] {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+
+    .rad-ui-combobox-item-indicator {
+        position: absolute;
+        right: var(--rad-ui-control-padding-x-md);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--rad-ui-icon-size-sm);
+        height: var(--rad-ui-icon-size-sm);
+        opacity: 0;
+    }
+
+    &[aria-selected="true"] .rad-ui-combobox-item-indicator {
+        opacity: 1;
+    }
+
+    &[aria-selected="true"] {
+        color: var(--rad-ui-item-selected-text);
+    }
+}
+
+.rad-ui-combobox-label {
+    padding: var(--rad-ui-control-padding-y-md) var(--rad-ui-control-padding-x-md);
+    font-size: var(--rad-ui-component-font-size-xs);
+    font-weight: var(--rad-ui-component-font-weight-semibold);
+    text-transform: uppercase;
+    color: var(--rad-ui-text-muted);
+}
+
+@keyframes rad-ui-slide-down {
+    from {
+        opacity: 0;
+        transform: translateY(calc(var(--rad-ui-density-gap-sm) * -1));
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}