gbs-add-block 2.0.4 → 2.3.0

package/source/beta-components/combobox/styles.css

@@ -1,417 +1,419 @@
-/*
- * Combobox styles (Select and MultiSelect).
- *
- * Tokens read the shared --gbs-* variables when they are set on an ancestor
- * (set them on :root to theme every component at once) and fall back to the
- * same default palette otherwise. Rules live in the `components` layer, so
- * utility classes passed through `className` / `classNames` override them.
- */
-@layer theme, base, components, utilities;
-
-@layer components {
-  .cb-root {
-    --cb-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
-    --cb-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
-    --cb-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
-    --cb-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
-    --cb-hover: var(--gbs-hover, var(--dg-hover, light-dark(#f4f4f5, #1f1f23)));
-    --cb-input-bg: var(--gbs-input-bg, var(--dg-input-bg, light-dark(#ffffff, #121216)));
-    --cb-accent: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
-    --cb-accent-fg: var(--gbs-accent-fg, var(--dg-accent-fg, light-dark(#ffffff, #0b1220)));
-    --cb-accent-soft: var(--gbs-accent-soft, var(--dg-accent-soft, light-dark(#eff6ff, #172554)));
-    --cb-accent-strong: var(--gbs-accent-strong, var(--dg-accent-strong, light-dark(#1d4ed8, #bfdbfe)));
-    --cb-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
-    --cb-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
-    --cb-shadow: var(--gbs-shadow, var(--dg-shadow, 0 10px 30px -8px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.6))));
-    --cb-radius: var(--gbs-radius, var(--dg-radius, 8px));
-    --cb-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
-    --cb-height: 36px;
-    --cb-px: 10px;
-
-    color-scheme: inherit;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    width: 100%;
-    min-width: 0;
-    font-size: var(--cb-font-size);
-    line-height: 1.4;
-    color: var(--cb-fg);
-  }
-
-  :where(.dark, [data-theme="dark"]) .cb-root {
-    color-scheme: dark;
-  }
-  :where(.light, [data-theme="light"]) .cb-root {
-    color-scheme: light;
-  }
-
-  :where(.cb-root, .cb-popover) *,
-  :where(.cb-root, .cb-popover) *::before,
-  :where(.cb-root, .cb-popover) *::after {
-    box-sizing: border-box;
-  }
-
-  .cb-root[data-size="sm"] {
-    --cb-height: 30px;
-    --cb-font-size: 12px;
-    --cb-px: 8px;
-  }
-  .cb-root[data-size="lg"] {
-    --cb-height: 44px;
-    --cb-font-size: 14px;
-    --cb-px: 12px;
-  }
-
-  .cb-label {
-    font-weight: 500;
-  }
-  .cb-label[data-required]::after {
-    content: " *";
-    color: var(--cb-danger);
-  }
-  .cb-description {
-    color: var(--cb-muted);
-    font-size: 0.92em;
-  }
-  .cb-error {
-    color: var(--cb-danger);
-    font-size: 0.92em;
-  }
-
-  /* -------------------------------------------------------------- trigger */
-
-  .cb-control {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    width: 100%;
-    min-height: var(--cb-height);
-    padding: 3px var(--cb-px);
-    border: 1px solid var(--cb-border);
-    border-radius: var(--cb-radius);
-    background: var(--cb-input-bg);
-    color: inherit;
-    font: inherit;
-    text-align: start;
-    cursor: pointer;
-  }
-  .cb-control:hover:not([data-disabled]) {
-    border-color: color-mix(in oklab, var(--cb-border), var(--cb-fg) 25%);
-  }
-  .cb-control:focus-visible,
-  .cb-root[data-state="open"] .cb-control {
-    outline: 2px solid var(--cb-focus);
-    outline-offset: -1px;
-  }
-  .cb-control[data-invalid] {
-    border-color: var(--cb-danger);
-  }
-  .cb-control[data-invalid]:focus-visible,
-  .cb-root[data-invalid][data-state="open"] .cb-control {
-    outline-color: var(--cb-danger);
-  }
-  .cb-control[data-disabled] {
-    opacity: 0.55;
-    cursor: not-allowed;
-  }
-
-  .cb-value {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .cb-placeholder {
-    color: var(--cb-muted);
-  }
-  .cb-value-icon {
-    display: inline-flex;
-    margin-inline-end: 6px;
-    vertical-align: -2px;
-    color: var(--cb-muted);
-  }
-
-  .cb-tags {
-    display: flex;
-    flex: 1 1 auto;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 4px;
-    min-width: 0;
-  }
-  .cb-tag {
-    display: inline-flex;
-    align-items: center;
-    gap: 2px;
-    max-width: 100%;
-    padding-inline: 8px 3px;
-    border-radius: 999px;
-    background: var(--cb-accent-soft);
-    color: var(--cb-accent-strong);
-    font-size: 0.92em;
-    line-height: 20px;
-  }
-  .cb-tag-label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .cb-tag-remove {
-    display: inline-grid;
-    place-items: center;
-    width: 16px;
-    height: 16px;
-    padding: 0;
-    border: 0;
-    border-radius: 50%;
-    background: transparent;
-    color: inherit;
-    cursor: pointer;
-  }
-  .cb-tag-remove:hover {
-    background: color-mix(in oklab, var(--cb-accent-strong), transparent 85%);
-  }
-  .cb-tag-overflow {
-    color: var(--cb-muted);
-    font-size: 0.92em;
-    white-space: nowrap;
-  }
-
-  .cb-actions {
-    display: flex;
-    flex: none;
-    align-items: center;
-    gap: 2px;
-    color: var(--cb-muted);
-  }
-  .cb-icon-button {
-    display: inline-grid;
-    place-items: center;
-    width: 22px;
-    height: 22px;
-    padding: 0;
-    border: 0;
-    border-radius: 4px;
-    background: transparent;
-    color: inherit;
-    cursor: pointer;
-  }
-  .cb-icon-button:hover {
-    background: var(--cb-hover);
-    color: var(--cb-fg);
-  }
-  .cb-icon-button:focus-visible {
-    outline: 2px solid var(--cb-focus);
-    outline-offset: 1px;
-  }
-  .cb-chevron {
-    transition: transform 120ms ease;
-  }
-  .cb-root[data-state="open"] .cb-chevron {
-    transform: rotate(180deg);
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .cb-chevron {
-      transition: none;
-    }
-  }
-
-  /* -------------------------------------------------------------- popover */
-
-  .cb-popover {
-    position: fixed;
-    inset: auto;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    border: 1px solid var(--cb-border);
-    border-radius: var(--cb-radius);
-    background: var(--cb-bg);
-    color: var(--cb-fg);
-    box-shadow: var(--cb-shadow);
-    font-size: var(--cb-font-size);
-  }
-  .cb-search {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 10px;
-    border-bottom: 1px solid var(--cb-border);
-    color: var(--cb-muted);
-  }
-  .cb-search input {
-    width: 100%;
-    min-width: 0;
-    border: 0;
-    outline: 0;
-    background: transparent;
-    color: var(--cb-fg);
-    font: inherit;
-  }
-
-  .cb-list {
-    position: relative;
-    overflow: auto;
-    overscroll-behavior: contain;
-    padding: 4px;
-    outline: none;
-  }
-  .cb-list:focus-visible {
-    outline: 2px solid var(--cb-focus);
-    outline-offset: -2px;
-  }
-  .cb-list[data-virtual] .cb-item,
-  .cb-list[data-virtual] .cb-group {
-    position: absolute;
-    inset-inline: 4px;
-  }
-
-  .cb-group {
-    display: flex;
-    align-items: center;
-    padding: 6px 8px 2px;
-    color: var(--cb-muted);
-    font-size: 0.85em;
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-  }
-
-  .cb-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-    padding: 6px 8px;
-    border: 0;
-    border-radius: 6px;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    text-align: start;
-    cursor: pointer;
-  }
-  .cb-item[data-active] {
-    background: var(--cb-hover);
-  }
-  .cb-item[data-selected] {
-    color: var(--cb-accent-strong);
-    font-weight: 500;
-  }
-  .cb-item[data-disabled] {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
-  .cb-item-check {
-    flex: none;
-    width: 16px;
-    color: var(--cb-accent);
-    opacity: 0;
-  }
-  .cb-item[data-selected] .cb-item-check {
-    opacity: 1;
-  }
-  .cb-item-icon {
-    flex: none;
-    display: inline-flex;
-    color: var(--cb-muted);
-  }
-  .cb-item-body {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-  .cb-item-label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .cb-item-description {
-    overflow: hidden;
-    color: var(--cb-muted);
-    font-size: 0.9em;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .cb-mark {
-    background: color-mix(in oklab, var(--cb-accent), transparent 82%);
-    border-radius: 2px;
-    color: inherit;
-    font-weight: 600;
-  }
-
-  .cb-empty,
-  .cb-status {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    padding: 16px 8px;
-    color: var(--cb-muted);
-  }
-  .cb-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    padding: 4px 6px;
-    border-top: 1px solid var(--cb-border);
-  }
-  .cb-link-button {
-    padding: 4px 6px;
-    border: 0;
-    border-radius: 4px;
-    background: none;
-    color: var(--cb-accent);
-    font: inherit;
-    cursor: pointer;
-  }
-  .cb-link-button:hover {
-    background: var(--cb-hover);
-  }
-  .cb-link-button:disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-  .cb-footer-count {
-    color: var(--cb-muted);
-  }
-
-  .cb-spinner {
-    animation: cb-spin 0.7s linear infinite;
-  }
-  @keyframes cb-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .cb-spinner {
-      animation-duration: 2s;
-    }
-  }
-
-  .cb-sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    padding: 0;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  @media (forced-colors: active) {
-    .cb-item[data-active] {
-      outline: 1px solid Highlight;
-    }
-    .cb-mark {
-      background: Highlight;
-      color: HighlightText;
-    }
-  }
-}
+/*
+ * Combobox styles (Select and MultiSelect).
+ *
+ * Tokens read the shared --gbs-* variables when they are set on an ancestor
+ * (set them on :root to theme every component at once) and fall back to the
+ * same default palette otherwise. Rules are unlayered: they beat a framework
+ * reset on specificity, and lose to anything you pass through `className`.
+ * With Tailwind v4, import this file after the framework and inside its
+ * components layer - see the README.
+ */
+
+.cb-root {
+  --cb-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
+  --cb-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+  --cb-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+  --cb-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
+  --cb-hover: var(--gbs-hover, var(--dg-hover, light-dark(#f4f4f5, #1f1f23)));
+  --cb-input-bg: var(--gbs-input-bg, var(--dg-input-bg, light-dark(#ffffff, #121216)));
+  --cb-accent: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
+  --cb-accent-fg: var(--gbs-accent-fg, var(--dg-accent-fg, light-dark(#ffffff, #0b1220)));
+  --cb-accent-soft: var(--gbs-accent-soft, var(--dg-accent-soft, light-dark(#eff6ff, #172554)));
+  --cb-accent-strong: var(--gbs-accent-strong, var(--dg-accent-strong, light-dark(#1d4ed8, #bfdbfe)));
+  --cb-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+  --cb-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
+  --cb-shadow: var(--gbs-shadow, var(--dg-shadow, 0 10px 30px -8px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.6))));
+  --cb-radius: var(--gbs-radius, var(--dg-radius, 8px));
+  --cb-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
+  --cb-height: 36px;
+  --cb-px: 10px;
+
+  color-scheme: inherit;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  min-width: 0;
+  font-size: var(--cb-font-size);
+  line-height: 1.4;
+  color: var(--cb-fg);
+}
+
+:where(.dark, [data-theme="dark"]) .cb-root {
+  color-scheme: dark;
+}
+:where(.light, [data-theme="light"]) .cb-root {
+  color-scheme: light;
+}
+
+:where(.cb-root, .cb-popover) *,
+:where(.cb-root, .cb-popover) *::before,
+:where(.cb-root, .cb-popover) *::after {
+  box-sizing: border-box;
+}
+
+.cb-root[data-size="sm"] {
+  --cb-height: 30px;
+  --cb-font-size: 12px;
+  --cb-px: 8px;
+}
+.cb-root[data-size="lg"] {
+  --cb-height: 44px;
+  --cb-font-size: 14px;
+  --cb-px: 12px;
+}
+
+.cb-label {
+  font-weight: 500;
+}
+.cb-label[data-required]::after {
+  content: " *";
+  color: var(--cb-danger);
+}
+.cb-description {
+  color: var(--cb-muted);
+  font-size: 0.92em;
+}
+.cb-error {
+  color: var(--cb-danger);
+  font-size: 0.92em;
+}
+
+/* -------------------------------------------------------------- trigger */
+
+.cb-control {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  min-height: var(--cb-height);
+  padding: 3px var(--cb-px);
+  border: 1px solid var(--cb-border);
+  border-radius: var(--cb-radius);
+  background: var(--cb-input-bg);
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+.cb-control:hover:not([data-disabled]) {
+  border-color: color-mix(in oklab, var(--cb-border), var(--cb-fg) 25%);
+}
+.cb-control:focus-visible,
+.cb-root[data-state="open"] .cb-control {
+  outline: 2px solid var(--cb-focus);
+  outline-offset: -1px;
+}
+.cb-control[data-invalid] {
+  border-color: var(--cb-danger);
+}
+.cb-control[data-invalid]:focus-visible,
+.cb-root[data-invalid][data-state="open"] .cb-control {
+  outline-color: var(--cb-danger);
+}
+.cb-control[data-disabled] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.cb-value {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cb-placeholder {
+  color: var(--cb-muted);
+}
+.cb-value-icon {
+  display: inline-flex;
+  margin-inline-end: 6px;
+  vertical-align: -2px;
+  color: var(--cb-muted);
+}
+
+.cb-tags {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+.cb-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  max-width: 100%;
+  padding-inline: 8px 3px;
+  border-radius: 999px;
+  background: var(--cb-accent-soft);
+  color: var(--cb-accent-strong);
+  font-size: 0.92em;
+  line-height: 20px;
+}
+.cb-tag-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cb-tag-remove {
+  display: inline-grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.cb-tag-remove:hover {
+  background: color-mix(in oklab, var(--cb-accent-strong), transparent 85%);
+}
+.cb-tag-overflow {
+  color: var(--cb-muted);
+  font-size: 0.92em;
+  white-space: nowrap;
+}
+
+.cb-actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 2px;
+  color: var(--cb-muted);
+}
+.cb-icon-button {
+  display: inline-grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.cb-icon-button:hover {
+  background: var(--cb-hover);
+  color: var(--cb-fg);
+}
+.cb-icon-button:focus-visible {
+  outline: 2px solid var(--cb-focus);
+  outline-offset: 1px;
+}
+.cb-chevron {
+  transition: transform 120ms ease;
+}
+.cb-root[data-state="open"] .cb-chevron {
+  transform: rotate(180deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  .cb-chevron {
+    transition: none;
+  }
+}
+
+/* -------------------------------------------------------------- popover */
+
+.cb-popover {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--cb-border);
+  border-radius: var(--cb-radius);
+  background: var(--cb-bg);
+  color: var(--cb-fg);
+  box-shadow: var(--cb-shadow);
+  font-size: var(--cb-font-size);
+}
+.cb-search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--cb-border);
+  color: var(--cb-muted);
+}
+.cb-search input {
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--cb-fg);
+  font: inherit;
+}
+
+.cb-list {
+  position: relative;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 4px;
+  outline: none;
+  scrollbar-width: var(--gbs-scrollbar-width, thin);
+  scrollbar-color: var(--gbs-scrollbar-thumb, light-dark(#c4c4ca, #3f3f46))
+    var(--gbs-scrollbar-track, transparent);
+}
+.cb-list:focus-visible {
+  outline: 2px solid var(--cb-focus);
+  outline-offset: -2px;
+}
+.cb-list[data-virtual] .cb-item,
+.cb-list[data-virtual] .cb-group {
+  position: absolute;
+  inset-inline: 4px;
+}
+
+.cb-group {
+  display: flex;
+  align-items: center;
+  padding: 6px 8px 2px;
+  color: var(--cb-muted);
+  font-size: 0.85em;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.cb-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+.cb-item[data-active] {
+  background: var(--cb-hover);
+}
+.cb-item[data-selected] {
+  color: var(--cb-accent-strong);
+  font-weight: 500;
+}
+.cb-item[data-disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.cb-item-check {
+  flex: none;
+  width: 16px;
+  color: var(--cb-accent);
+  opacity: 0;
+}
+.cb-item[data-selected] .cb-item-check {
+  opacity: 1;
+}
+.cb-item-icon {
+  flex: none;
+  display: inline-flex;
+  color: var(--cb-muted);
+}
+.cb-item-body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.cb-item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cb-item-description {
+  overflow: hidden;
+  color: var(--cb-muted);
+  font-size: 0.9em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cb-mark {
+  background: color-mix(in oklab, var(--cb-accent), transparent 82%);
+  border-radius: 2px;
+  color: inherit;
+  font-weight: 600;
+}
+
+.cb-empty,
+.cb-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px 8px;
+  color: var(--cb-muted);
+}
+.cb-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px 6px;
+  border-top: 1px solid var(--cb-border);
+}
+.cb-link-button {
+  padding: 4px 6px;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--cb-accent);
+  font: inherit;
+  cursor: pointer;
+}
+.cb-link-button:hover {
+  background: var(--cb-hover);
+}
+.cb-link-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.cb-footer-count {
+  color: var(--cb-muted);
+}
+
+.cb-spinner {
+  animation: cb-spin 0.7s linear infinite;
+}
+@keyframes cb-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cb-spinner {
+    animation-duration: 2s;
+  }
+}
+
+.cb-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (forced-colors: active) {
+  .cb-item[data-active] {
+    outline: 1px solid Highlight;
+  }
+  .cb-mark {
+    background: Highlight;
+    color: HighlightText;
+  }
+}