@simple-base/css 0.1.0

package/styles/button.css

@@ -0,0 +1,159 @@
+@layer sb {
+  .sb-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--sb-semantic-size-control-md);
+    gap: var(--sb-semantic-space-2);
+    padding: 0 var(--sb-semantic-space-4);
+    border: var(--sb-semantic-border-width-hairline) solid transparent;
+    border-radius: var(--sb-semantic-radius-sm);
+    appearance: none;
+    cursor: pointer;
+    color: var(--sb-semantic-color-foreground-inverse);
+    background: var(--sb-semantic-color-foreground-primary);
+    font: inherit;
+    font-size: var(--sb-semantic-typography-size-md);
+    font-weight: var(--sb-semantic-typography-weight-semibold);
+    line-height: var(--sb-semantic-typography-line-height-none);
+    letter-spacing: var(--sb-semantic-typography-letter-spacing-normal);
+    text-decoration: none;
+    white-space: nowrap;
+    user-select: none;
+    transition:
+      background var(--sb-semantic-motion-duration-normal) var(--sb-semantic-motion-easing-standard),
+      color var(--sb-semantic-motion-duration-normal) var(--sb-semantic-motion-easing-standard),
+      border-color var(--sb-semantic-motion-duration-normal)
+        var(--sb-semantic-motion-easing-standard),
+      opacity var(--sb-semantic-motion-duration-normal) var(--sb-semantic-motion-easing-standard);
+  }
+
+  .sb-button[data-variant="primary"] {
+    color: var(--sb-semantic-color-foreground-inverse);
+    background: var(--sb-semantic-color-foreground-primary);
+    border-color: var(--sb-semantic-color-foreground-primary);
+  }
+
+  .sb-button[data-variant="primary"]:not(:disabled):not([aria-disabled="true"]):hover {
+    background: color-mix(
+      in oklch,
+      var(--sb-semantic-color-foreground-primary) 90%,
+      var(--sb-semantic-color-foreground-inverse)
+    );
+    border-color: color-mix(
+      in oklch,
+      var(--sb-semantic-color-foreground-primary) 90%,
+      var(--sb-semantic-color-foreground-inverse)
+    );
+  }
+
+  .sb-button[data-variant="primary"]:not(:disabled):not([aria-disabled="true"]):active {
+    background: color-mix(
+      in oklch,
+      var(--sb-semantic-color-foreground-primary) 82%,
+      var(--sb-semantic-color-foreground-inverse)
+    );
+    border-color: color-mix(
+      in oklch,
+      var(--sb-semantic-color-foreground-primary) 82%,
+      var(--sb-semantic-color-foreground-inverse)
+    );
+  }
+
+  .sb-button[data-variant="secondary"] {
+    color: var(--sb-semantic-color-foreground-primary);
+    background: var(--sb-semantic-color-background-raised);
+    border-color: var(--sb-semantic-color-border-strong);
+  }
+
+  .sb-button[data-variant="secondary"]:not(:disabled):not([aria-disabled="true"]):hover {
+    background: var(--sb-semantic-color-background-overlay);
+    border-color: var(--sb-semantic-color-foreground-secondary);
+  }
+
+  .sb-button[data-variant="tertiary"] {
+    color: var(--sb-semantic-color-foreground-secondary);
+    background: var(--sb-semantic-color-background-subtle);
+  }
+
+  .sb-button[data-variant="tertiary"]:not(:disabled):not([aria-disabled="true"]):hover {
+    color: var(--sb-semantic-color-foreground-primary);
+    background: color-mix(in oklch, var(--sb-semantic-color-foreground-primary) 10%, transparent);
+  }
+
+  .sb-button[data-variant="ghost"] {
+    color: var(--sb-semantic-color-foreground-secondary);
+    background: transparent;
+  }
+
+  .sb-button[data-variant="ghost"]:not(:disabled):not([aria-disabled="true"]):hover {
+    color: var(--sb-semantic-color-foreground-primary);
+    background: var(--sb-semantic-color-background-subtle);
+  }
+
+  .sb-button[data-variant="danger"] {
+    color: var(--sb-semantic-color-status-danger-on-surface);
+    background: var(--sb-semantic-color-status-danger-surface);
+    border-color: var(--sb-semantic-color-status-danger-surface);
+  }
+
+  .sb-button[data-variant="danger"]:not(:disabled):not([aria-disabled="true"]):hover {
+    background: color-mix(
+      in oklch,
+      var(--sb-semantic-color-status-danger-surface) 88%,
+      var(--sb-semantic-color-background-canvas)
+    );
+    border-color: color-mix(
+      in oklch,
+      var(--sb-semantic-color-status-danger-surface) 88%,
+      var(--sb-semantic-color-background-canvas)
+    );
+  }
+
+  .sb-button[data-variant="danger-subtle"] {
+    color: var(--sb-semantic-color-status-danger-text);
+    background: var(--sb-semantic-color-status-danger-soft);
+    border-color: color-mix(
+      in oklch,
+      var(--sb-semantic-color-status-danger-base) 55%,
+      var(--sb-semantic-color-border-default)
+    );
+  }
+
+  .sb-button[data-variant="danger-subtle"]:not(:disabled):not([aria-disabled="true"]):hover {
+    color: var(--sb-semantic-color-status-danger-on-surface);
+    background: var(--sb-semantic-color-status-danger-surface);
+    border-color: var(--sb-semantic-color-status-danger-surface);
+  }
+
+  .sb-button:focus-visible {
+    outline: 0;
+    box-shadow:
+      0 0 0 var(--sb-semantic-border-width-hairline) var(--sb-semantic-color-background-canvas),
+      0 0 0 var(--sb-semantic-space-1) var(--sb-semantic-color-focus-ring);
+  }
+
+  .sb-button:disabled,
+  .sb-button[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: var(--sb-semantic-opacity-disabled);
+  }
+
+  .sb-button[data-size="small"] {
+    min-height: var(--sb-semantic-size-control-sm);
+    padding-inline: var(--sb-semantic-space-3);
+    font-size: var(--sb-semantic-typography-size-sm);
+  }
+
+  .sb-button[data-size="medium"] {
+    min-height: var(--sb-semantic-size-control-md);
+    padding-inline: var(--sb-semantic-space-4);
+    font-size: var(--sb-semantic-typography-size-md);
+  }
+
+  .sb-button[data-size="large"] {
+    min-height: var(--sb-semantic-size-control-xl);
+    padding-inline: var(--sb-semantic-space-6);
+    font-size: var(--sb-semantic-typography-size-lg);
+  }
+}

package/styles/card.css

@@ -0,0 +1,28 @@
+@layer sb {
+  .sb-card {
+    min-width: 0;
+    border: var(--sb-semantic-border-width-hairline) solid var(--sb-semantic-color-border-default);
+    border-radius: var(--sb-semantic-radius-lg);
+    background: var(--sb-semantic-color-background-surface);
+    box-shadow: var(--sb-semantic-shadow-card);
+  }
+
+  .sb-card[data-padding="true"] {
+    padding: clamp(var(--sb-semantic-space-5), 3vw, var(--sb-semantic-space-8));
+  }
+
+  .sb-card[data-variant="flat"] {
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .sb-card[data-variant="rule"] {
+    padding-top: var(--sb-semantic-space-5);
+    border: 0;
+    border-top: var(--sb-semantic-border-width-hairline) solid
+      var(--sb-semantic-color-border-strong);
+    border-radius: 0;
+    box-shadow: none;
+  }
+}

package/styles/checkbox.css

@@ -0,0 +1,42 @@
+@layer sb {
+  .sb-checkbox {
+    position: relative;
+    width: 18px;
+    height: 18px;
+    flex: 0 0 auto;
+    margin: 0;
+    border: var(--sb-semantic-border-width-hairline) solid var(--sb-semantic-color-border-strong);
+    border-radius: var(--sb-semantic-radius-sm);
+    appearance: none;
+    background: var(--sb-semantic-color-background-surface);
+    cursor: pointer;
+  }
+
+  .sb-checkbox:checked {
+    background: var(--sb-semantic-color-accent-surface);
+    border-color: var(--sb-semantic-color-accent-surface);
+  }
+
+  .sb-checkbox:checked::after {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    color: var(--sb-semantic-color-accent-on-surface);
+    content: "✓";
+    font-size: var(--sb-semantic-typography-size-sm);
+    font-weight: var(--sb-semantic-typography-weight-bold);
+  }
+
+  .sb-checkbox:focus-visible {
+    outline: 0;
+    box-shadow:
+      0 0 0 var(--sb-semantic-border-width-hairline) var(--sb-semantic-color-background-canvas),
+      0 0 0 var(--sb-semantic-space-1) var(--sb-semantic-color-focus-ring);
+  }
+
+  .sb-checkbox:disabled {
+    cursor: not-allowed;
+    opacity: var(--sb-semantic-opacity-disabled);
+  }
+}

package/styles/combobox.css

@@ -0,0 +1,235 @@
+@layer sb {
+  .sb-combobox {
+    display: grid;
+    gap: var(--sb-semantic-space-2);
+    min-width: 0;
+  }
+
+  .sb-combobox-label {
+    color: var(--sb-semantic-color-foreground-secondary);
+    font-size: var(--sb-semantic-typography-size-sm);
+    font-weight: var(--sb-semantic-typography-weight-semibold);
+  }
+
+  .sb-combobox-label[data-required]::after {
+    margin-inline-start: var(--sb-semantic-space-1);
+    color: var(--sb-semantic-color-status-danger-base);
+    content: "*";
+    content: "*" / "";
+  }
+
+  .sb-combobox-control {
+    display: flex;
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: var(--sb-semantic-size-control-lg);
+    border: var(--sb-semantic-border-width-hairline) solid var(--sb-semantic-color-border-default);
+    border-radius: var(--sb-semantic-radius-sm);
+    color: var(--sb-semantic-color-foreground-primary);
+    background: color-mix(
+      in oklch,
+      var(--sb-semantic-color-background-canvas) 82%,
+      var(--sb-semantic-color-background-surface)
+    );
+    transition:
+      border-color var(--sb-semantic-motion-duration-normal)
+        var(--sb-semantic-motion-easing-standard),
+      box-shadow var(--sb-semantic-motion-duration-normal) var(--sb-semantic-motion-easing-standard);
+  }
+
+  .sb-combobox-control:hover:where(:not([data-disabled])) {
+    border-color: var(--sb-semantic-color-border-strong);
+  }
+
+  .sb-combobox-control:focus-within {
+    border-color: var(--sb-semantic-color-accent-text);
+    box-shadow:
+      0 0 0 var(--sb-semantic-border-width-hairline) var(--sb-semantic-color-background-canvas),
+      0 0 0 var(--sb-semantic-space-1) var(--sb-semantic-color-focus-ring);
+  }
+
+  .sb-combobox-control[data-invalid] {
+    border-color: var(--sb-semantic-color-status-danger-base);
+  }
+
+  .sb-combobox-control[data-invalid]:focus-within {
+    box-shadow:
+      0 0 0 var(--sb-semantic-border-width-hairline) var(--sb-semantic-color-background-canvas),
+      0 0 0 var(--sb-semantic-space-1) var(--sb-semantic-color-focus-danger-ring);
+  }
+
+  .sb-combobox-input {
+    flex: 1;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    padding: 0 var(--sb-semantic-space-3);
+    border: 0;
+    border-radius: inherit;
+    outline: 0;
+    color: inherit;
+    background: transparent;
+    caret-color: var(--sb-semantic-color-accent-text);
+    font: inherit;
+    font-size: var(--sb-semantic-typography-size-md);
+    letter-spacing: var(--sb-semantic-typography-letter-spacing-normal);
+  }
+
+  .sb-combobox-input::placeholder {
+    color: var(--sb-semantic-color-foreground-muted);
+  }
+
+  .sb-combobox-input::selection {
+    color: var(--sb-semantic-color-selection-foreground);
+    background: var(--sb-semantic-color-selection-background);
+  }
+
+  .sb-combobox-trigger {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--sb-semantic-size-target-minimum);
+    padding: 0 var(--sb-semantic-space-3);
+    border: 0;
+    border-start-end-radius: var(--sb-semantic-radius-sm);
+    border-end-end-radius: var(--sb-semantic-radius-sm);
+    color: var(--sb-semantic-color-foreground-muted);
+    background: transparent;
+    font: inherit;
+    cursor: pointer;
+    transition:
+      color var(--sb-semantic-motion-duration-normal) var(--sb-semantic-motion-easing-standard),
+      background var(--sb-semantic-motion-duration-normal) var(--sb-semantic-motion-easing-standard);
+  }
+
+  .sb-combobox-trigger:hover:where(:not(:disabled)) {
+    color: var(--sb-semantic-color-foreground-primary);
+    background: var(--sb-semantic-color-background-subtle);
+  }
+
+  .sb-combobox-trigger:focus-visible {
+    outline: var(--sb-semantic-border-width-strong) solid var(--sb-semantic-color-focus-ring);
+    outline-offset: calc(-1 * var(--sb-semantic-border-width-strong));
+  }
+
+  .sb-combobox-trigger > svg {
+    flex: 0 0 auto;
+    width: var(--sb-semantic-size-icon-sm);
+    height: var(--sb-semantic-size-icon-sm);
+  }
+
+  .sb-combobox-control[data-disabled] {
+    cursor: not-allowed;
+    opacity: var(--sb-semantic-opacity-disabled);
+  }
+
+  .sb-combobox-input:disabled,
+  .sb-combobox-trigger:disabled {
+    cursor: not-allowed;
+  }
+
+  .sb-combobox-content {
+    box-sizing: border-box;
+    z-index: var(--sb-semantic-layer-dropdown);
+    width: var(--reference-width);
+    max-width: var(--available-width);
+    padding: var(--sb-semantic-space-2);
+    border: var(--sb-semantic-border-width-hairline) solid var(--sb-semantic-color-border-strong);
+    border-radius: var(--sb-semantic-radius-md);
+    color: var(--sb-semantic-color-foreground-primary);
+    background: var(--sb-semantic-color-background-overlay);
+    box-shadow: var(--sb-semantic-shadow-overlay);
+    font-family: var(--sb-semantic-typography-family-body);
+    font-size: var(--sb-semantic-typography-size-md);
+    line-height: var(--sb-semantic-typography-line-height-normal);
+  }
+
+  .sb-combobox-list {
+    max-height: min(
+      calc(var(--sb-semantic-size-control-md) * 6),
+      calc(
+        var(--available-height, 100dvh) - var(--sb-semantic-space-4) -
+          var(--sb-semantic-border-width-strong)
+      )
+    );
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    list-style: none;
+  }
+
+  .sb-combobox-item {
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--sb-semantic-space-3);
+    min-height: var(--sb-semantic-size-control-md);
+    padding: var(--sb-semantic-space-2) var(--sb-semantic-space-3);
+    border-radius: var(--sb-semantic-radius-sm);
+    color: var(--sb-semantic-color-foreground-secondary);
+    overflow-wrap: anywhere;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .sb-combobox-item::after {
+    flex: 0 0 auto;
+    width: var(--sb-semantic-space-1);
+    height: var(--sb-semantic-space-2);
+    margin-inline: var(--sb-semantic-space-1);
+    border-right: var(--sb-semantic-border-width-strong) solid currentColor;
+    border-bottom: var(--sb-semantic-border-width-strong) solid currentColor;
+    visibility: hidden;
+    content: "";
+    transform: rotate(45deg);
+  }
+
+  .sb-combobox-item[data-state="checked"] {
+    color: var(--sb-semantic-color-accent-text);
+    background: var(--sb-semantic-color-accent-soft);
+    font-weight: var(--sb-semantic-typography-weight-semibold);
+  }
+
+  .sb-combobox-item[data-state="checked"]::after {
+    visibility: visible;
+  }
+
+  .sb-combobox-item[data-highlighted]:not([data-disabled]) {
+    color: var(--sb-semantic-color-selection-foreground);
+    background: var(--sb-semantic-color-selection-background);
+  }
+
+  .sb-combobox-item[data-disabled] {
+    color: var(--sb-semantic-color-foreground-muted);
+    cursor: not-allowed;
+    opacity: var(--sb-semantic-opacity-disabled);
+  }
+
+  .sb-combobox-empty {
+    padding: var(--sb-semantic-space-3);
+    color: var(--sb-semantic-color-foreground-muted);
+    font-size: var(--sb-semantic-typography-size-sm);
+    overflow-wrap: anywhere;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sb-combobox-control,
+    .sb-combobox-trigger {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sb-combobox-control:focus-within {
+      outline: var(--sb-semantic-border-width-strong) solid Highlight;
+    }
+
+    .sb-combobox-item[data-highlighted]:not([data-disabled]) {
+      outline: var(--sb-semantic-border-width-strong) solid Highlight;
+      outline-offset: calc(-1 * var(--sb-semantic-border-width-strong));
+    }
+  }
+}

package/styles/dialog.css

@@ -0,0 +1,84 @@
+@layer sb {
+  .sb-dialog {
+    box-sizing: border-box;
+    width: min(560px, calc(100vw - 40px));
+    max-width: none;
+    margin: auto;
+    padding: var(--sb-semantic-space-6);
+    border: var(--sb-semantic-border-width-hairline) solid var(--sb-semantic-color-border-strong);
+    border-radius: var(--sb-semantic-radius-lg);
+    color: var(--sb-semantic-color-foreground-primary);
+    background: var(--sb-semantic-color-background-raised);
+    box-shadow: var(--sb-semantic-shadow-overlay);
+  }
+
+  .sb-dialog::backdrop {
+    background: var(--sb-semantic-color-overlay-scrim);
+  }
+
+  .sb-dialog-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--sb-semantic-space-5);
+  }
+
+  .sb-dialog-kicker {
+    margin: 0;
+    color: var(--sb-semantic-color-foreground-muted);
+    font-family: var(--sb-semantic-typography-family-body);
+    font-size: var(--sb-semantic-typography-size-sm);
+    line-height: var(--sb-semantic-typography-line-height-normal);
+  }
+
+  .sb-dialog-title {
+    margin: var(--sb-semantic-space-2) 0 0;
+    color: var(--sb-semantic-color-foreground-primary);
+    font-family: var(--sb-semantic-typography-family-body);
+    font-size: var(--sb-semantic-typography-size-2xl);
+    font-weight: var(--sb-semantic-typography-weight-semibold);
+    line-height: var(--sb-semantic-typography-line-height-snug);
+  }
+
+  .sb-dialog-copy {
+    margin: var(--sb-semantic-space-3) 0 0;
+    color: var(--sb-semantic-color-foreground-secondary);
+  }
+
+  .sb-dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--sb-semantic-space-3);
+    margin-top: var(--sb-semantic-space-6);
+  }
+
+  .sb-dialog-close {
+    display: inline-grid;
+    place-items: center;
+    width: var(--sb-semantic-size-target-minimum);
+    height: var(--sb-semantic-size-target-minimum);
+    padding: 0;
+    border: 0;
+    border-radius: var(--sb-semantic-radius-sm);
+    color: var(--sb-semantic-color-foreground-muted);
+    background: transparent;
+    font-size: var(--sb-semantic-typography-size-2xl);
+    line-height: var(--sb-semantic-typography-line-height-none);
+  }
+
+  .sb-dialog-close:hover {
+    color: var(--sb-semantic-color-foreground-primary);
+    background: var(--sb-semantic-color-background-subtle);
+  }
+
+  @media (max-width: 480px) {
+    .sb-dialog-actions {
+      align-items: stretch;
+      flex-direction: column;
+    }
+
+    .sb-dialog-actions > * {
+      width: 100%;
+    }
+  }
+}

package/styles/disclosure.css

@@ -0,0 +1,44 @@
+@layer sb {
+  .sb-disclosure {
+    border-top: var(--sb-semantic-border-width-hairline) solid
+      var(--sb-semantic-color-border-default);
+  }
+
+  .sb-disclosure:last-child {
+    border-bottom: var(--sb-semantic-border-width-hairline) solid
+      var(--sb-semantic-color-border-default);
+  }
+
+  .sb-disclosure summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 56px;
+    gap: var(--sb-semantic-space-4);
+    color: var(--sb-semantic-color-foreground-secondary);
+    cursor: pointer;
+    list-style: none;
+    font-weight: var(--sb-semantic-typography-weight-semibold);
+  }
+
+  .sb-disclosure summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .sb-disclosure summary::after {
+    color: var(--sb-semantic-color-foreground-muted);
+    content: "+";
+    font-family: var(--sb-semantic-typography-family-code);
+    font-size: var(--sb-semantic-typography-size-xl);
+  }
+
+  .sb-disclosure[open] summary::after {
+    content: "−";
+  }
+
+  .sb-disclosure-copy {
+    padding: 0 42px var(--sb-semantic-space-5) 0;
+    color: var(--sb-semantic-color-foreground-muted);
+    font-size: 13px;
+  }
+}

package/styles/empty-state.css

@@ -0,0 +1,29 @@
+@layer sb {
+  .sb-empty-state {
+    display: grid;
+    place-items: center;
+    min-height: 210px;
+    padding: var(--sb-semantic-space-8);
+    text-align: center;
+  }
+
+  .sb-empty-state-mark,
+  .sb-empty-mark {
+    display: grid;
+    place-items: center;
+    width: 42px;
+    height: 42px;
+    margin-bottom: var(--sb-semantic-space-4);
+    border: var(--sb-semantic-border-width-hairline) solid var(--sb-semantic-color-border-strong);
+    border-radius: var(--sb-semantic-radius-md);
+    color: var(--sb-semantic-color-foreground-muted);
+    font-family: var(--sb-semantic-typography-family-code);
+  }
+
+  .sb-empty-state p {
+    max-width: 34ch;
+    margin: var(--sb-semantic-space-2) 0 0;
+    color: var(--sb-semantic-color-foreground-muted);
+    font-size: 13px;
+  }
+}

package/styles/field.css

@@ -0,0 +1,64 @@
+@layer sb {
+  .sb-field {
+    display: grid;
+    gap: var(--sb-semantic-space-2);
+    min-width: 0;
+  }
+
+  .sb-field label,
+  .sb-field legend,
+  .sb-field-title {
+    color: var(--sb-semantic-color-foreground-secondary);
+    font-size: 13px;
+    font-weight: var(--sb-semantic-typography-weight-semibold);
+  }
+
+  .sb-field small,
+  .sb-field-help {
+    color: var(--sb-semantic-color-foreground-muted);
+    font-size: var(--sb-semantic-typography-size-sm);
+  }
+
+  .sb-field-help[data-invalid] {
+    color: var(--sb-semantic-color-status-danger-text);
+  }
+
+  .sb-fieldset {
+    min-width: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  .sb-choice-list {
+    display: grid;
+    gap: var(--sb-semantic-space-1);
+    margin-top: var(--sb-semantic-space-3);
+  }
+
+  .sb-choice {
+    display: flex;
+    align-items: center;
+    min-height: var(--sb-semantic-size-target-minimum);
+    gap: var(--sb-semantic-space-3);
+    padding: 0 var(--sb-semantic-space-3);
+    border: var(--sb-semantic-border-width-hairline) solid transparent;
+    border-radius: var(--sb-semantic-radius-md);
+    color: var(--sb-semantic-color-foreground-secondary);
+    cursor: pointer;
+  }
+
+  .sb-choice:hover {
+    color: var(--sb-semantic-color-foreground-primary);
+    background: var(--sb-semantic-color-background-subtle);
+  }
+
+  .sb-choice:has(input:focus-visible) {
+    box-shadow:
+      0 0 0 var(--sb-semantic-border-width-hairline) var(--sb-semantic-color-background-canvas),
+      0 0 0 var(--sb-semantic-space-1) var(--sb-semantic-color-focus-ring);
+  }
+
+  .sb-choice span {
+    font-size: 13px;
+  }
+}