gbs-add-block 2.0.4 → 2.1.0

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

@@ -1,264 +1,264 @@
-/*
- * Tabs styles.
- *
- * 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` override them.
- */
-@layer theme, base, components, utilities;
-
-@layer components {
-  .tb-root {
-    --tb-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
-    --tb-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
-    --tb-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
-    /*
-     * Unselected tabs are darker than ordinary muted text. A tab is a control,
-     * not a hint, and the strip usually sits on the page's own background
-     * rather than on a white card — where the shared muted grey only just
-     * clears 4.5:1, and misses it on anything tinted.
-     */
-    --tb-tab-fg: var(--gbs-tab-fg, light-dark(#5b5b64, #a1a1aa));
-    --tb-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
-    --tb-hover: var(--gbs-hover, var(--dg-hover, light-dark(#f4f4f5, #1f1f23)));
-    --tb-track: var(--gbs-subtle, light-dark(#f4f4f5, #18181b));
-    --tb-accent: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
-    --tb-accent-soft: var(--gbs-accent-soft, var(--dg-accent-soft, light-dark(#eff6ff, #172554)));
-    --tb-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
-    --tb-radius: var(--gbs-radius, var(--dg-radius, 8px));
-    --tb-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
-    --tb-height: 36px;
-    --tb-px: 12px;
-    --tb-duration: 200ms;
-
-    color-scheme: inherit;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    min-width: 0;
-    font-size: var(--tb-font-size);
-    line-height: 1.4;
-    color: var(--tb-fg);
-  }
-
-  :where(.dark, [data-theme="dark"]) .tb-root {
-    color-scheme: dark;
-  }
-  :where(.light, [data-theme="light"]) .tb-root {
-    color-scheme: light;
-  }
-
-  :where(.tb-root) *,
-  :where(.tb-root) *::before,
-  :where(.tb-root) *::after {
-    box-sizing: border-box;
-  }
-
-  .tb-root[data-size="sm"] {
-    --tb-height: 30px;
-    --tb-px: 10px;
-    --tb-font-size: 12px;
-  }
-  .tb-root[data-size="lg"] {
-    --tb-height: 44px;
-    --tb-px: 16px;
-    --tb-font-size: 14px;
-  }
-  .tb-root[data-orientation="vertical"] {
-    flex-direction: row;
-    gap: 20px;
-  }
-
-  /* ---------------------------------------------------------------- list */
-
-  .tb-list {
-    position: relative;
-    display: flex;
-    flex: none;
-    gap: 2px;
-    overflow-x: auto;
-    scrollbar-width: none;
-  }
-  .tb-root[data-orientation="vertical"] .tb-list {
-    flex-direction: column;
-    overflow: visible;
-  }
-
-  .tb-tab {
-    position: relative;
-    z-index: 1;
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    height: var(--tb-height);
-    padding: 0 var(--tb-px);
-    border: 0;
-    border-radius: calc(var(--tb-radius) - 2px);
-    background: transparent;
-    color: var(--tb-tab-fg);
-    font: inherit;
-    font-weight: 500;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: color 120ms ease;
-  }
-  .tb-root[data-orientation="vertical"] .tb-tab {
-    justify-content: flex-start;
-  }
-  .tb-tab:hover:not([aria-disabled="true"]),
-  .tb-tab[aria-selected="true"] {
-    color: var(--tb-fg);
-  }
-  .tb-tab:focus-visible {
-    outline: 2px solid var(--tb-focus);
-    outline-offset: -2px;
-  }
-  .tb-tab[aria-disabled="true"] {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
-  .tb-icon {
-    display: inline-flex;
-  }
-  .tb-icon > svg {
-    width: 1.1em;
-    height: 1.1em;
-  }
-  .tb-badge {
-    min-width: 18px;
-    padding: 1px 6px;
-    border-radius: 999px;
-    background: var(--tb-hover);
-    color: var(--tb-fg);
-    font-size: 0.85em;
-    font-variant-numeric: tabular-nums;
-    line-height: 1.4;
-    text-align: center;
-  }
-  .tb-tab[aria-selected="true"] .tb-badge {
-    background: var(--tb-accent-soft);
-    color: var(--tb-accent);
-  }
-
-  /* The indicator is measured in JS; it slides between tabs. */
-  .tb-indicator {
-    position: absolute;
-    z-index: 0;
-    pointer-events: none;
-    opacity: 0;
-    transition:
-      left var(--tb-duration) ease,
-      top var(--tb-duration) ease,
-      width var(--tb-duration) ease,
-      height var(--tb-duration) ease;
-  }
-  .tb-list[style*="--tb-indicator-size"] .tb-indicator {
-    opacity: 1;
-  }
-
-  /* ---------------------------------------------------------------- line */
-
-  .tb-root[data-variant="line"] .tb-list {
-    border-bottom: 1px solid var(--tb-border);
-  }
-  .tb-root[data-variant="line"] .tb-indicator {
-    bottom: -1px;
-    left: var(--tb-indicator-start);
-    width: var(--tb-indicator-size);
-    height: 2px;
-    border-radius: 2px;
-    background: var(--tb-accent);
-  }
-  .tb-root[data-variant="line"][data-orientation="vertical"] .tb-list {
-    border-bottom: 0;
-    border-inline-end: 1px solid var(--tb-border);
-  }
-  .tb-root[data-variant="line"][data-orientation="vertical"] .tb-indicator {
-    top: var(--tb-indicator-start);
-    bottom: auto;
-    left: auto;
-    inset-inline-end: -1px;
-    width: 2px;
-    height: var(--tb-indicator-size);
-  }
-
-  /* --------------------------------------------------------------- pills */
-
-  .tb-root[data-variant="pills"] .tb-indicator {
-    top: 0;
-    left: var(--tb-indicator-start);
-    width: var(--tb-indicator-size);
-    height: 100%;
-    border-radius: calc(var(--tb-radius) - 2px);
-    background: var(--tb-accent-soft);
-  }
-  .tb-root[data-variant="pills"] .tb-tab[aria-selected="true"] {
-    color: var(--tb-accent);
-  }
-  .tb-root[data-variant="pills"][data-orientation="vertical"] .tb-indicator {
-    top: var(--tb-indicator-start);
-    left: 0;
-    width: 100%;
-    height: var(--tb-indicator-size);
-  }
-
-  /* ------------------------------------------------------------ enclosed */
-
-  .tb-root[data-variant="enclosed"] .tb-list {
-    padding: 3px;
-    border-radius: var(--tb-radius);
-    background: var(--tb-track);
-  }
-  .tb-root[data-variant="enclosed"] .tb-indicator {
-    top: 3px;
-    bottom: 3px;
-    left: var(--tb-indicator-start);
-    width: var(--tb-indicator-size);
-    border-radius: calc(var(--tb-radius) - 2px);
-    background: var(--tb-bg);
-    box-shadow: 0 1px 3px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.5));
-  }
-  .tb-root[data-variant="enclosed"] .tb-tab {
-    height: calc(var(--tb-height) - 6px);
-  }
-  .tb-root[data-variant="enclosed"][data-orientation="vertical"] .tb-indicator {
-    top: var(--tb-indicator-start);
-    bottom: auto;
-    left: 3px;
-    right: 3px;
-    width: auto;
-    height: var(--tb-indicator-size);
-  }
-
-  /* Before the indicator is measured (server render), mark the selected tab statically. */
-  .tb-root[data-variant="line"] .tb-list:not([style*="--tb-indicator-size"]) .tb-tab[aria-selected="true"] {
-    box-shadow: inset 0 -2px 0 var(--tb-accent);
-  }
-
-  /* --------------------------------------------------------------- panel */
-
-  .tb-panel {
-    flex: 1 1 auto;
-    min-width: 0;
-    border-radius: 4px;
-  }
-  .tb-panel:focus-visible {
-    outline: 2px solid var(--tb-focus);
-    outline-offset: 4px;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .tb-root {
-      --tb-duration: 0s;
-    }
-  }
-
-  @media (forced-colors: active) {
-    .tb-indicator {
-      background: Highlight;
-    }
-  }
-}
+/*
+ * Tabs styles.
+ *
+ * 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 `gbs` layer; declare
+ * where it sits in your global CSS, e.g. `@layer reset, gbs, app,
+ * utilities;`, and anything in a later layer overrides them.
+ */
+
+@layer gbs {
+  .tb-root {
+    --tb-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
+    --tb-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+    --tb-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+    /*
+     * Unselected tabs are darker than ordinary muted text. A tab is a control,
+     * not a hint, and the strip usually sits on the page's own background
+     * rather than on a white card — where the shared muted grey only just
+     * clears 4.5:1, and misses it on anything tinted.
+     */
+    --tb-tab-fg: var(--gbs-tab-fg, light-dark(#5b5b64, #a1a1aa));
+    --tb-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
+    --tb-hover: var(--gbs-hover, var(--dg-hover, light-dark(#f4f4f5, #1f1f23)));
+    --tb-track: var(--gbs-subtle, light-dark(#f4f4f5, #18181b));
+    --tb-accent: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
+    --tb-accent-soft: var(--gbs-accent-soft, var(--dg-accent-soft, light-dark(#eff6ff, #172554)));
+    --tb-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+    --tb-radius: var(--gbs-radius, var(--dg-radius, 8px));
+    --tb-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
+    --tb-height: 36px;
+    --tb-px: 12px;
+    --tb-duration: 200ms;
+
+    color-scheme: inherit;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    min-width: 0;
+    font-size: var(--tb-font-size);
+    line-height: 1.4;
+    color: var(--tb-fg);
+  }
+
+  :where(.dark, [data-theme="dark"]) .tb-root {
+    color-scheme: dark;
+  }
+  :where(.light, [data-theme="light"]) .tb-root {
+    color-scheme: light;
+  }
+
+  :where(.tb-root) *,
+  :where(.tb-root) *::before,
+  :where(.tb-root) *::after {
+    box-sizing: border-box;
+  }
+
+  .tb-root[data-size="sm"] {
+    --tb-height: 30px;
+    --tb-px: 10px;
+    --tb-font-size: 12px;
+  }
+  .tb-root[data-size="lg"] {
+    --tb-height: 44px;
+    --tb-px: 16px;
+    --tb-font-size: 14px;
+  }
+  .tb-root[data-orientation="vertical"] {
+    flex-direction: row;
+    gap: 20px;
+  }
+
+  /* ---------------------------------------------------------------- list */
+
+  .tb-list {
+    position: relative;
+    display: flex;
+    flex: none;
+    gap: 2px;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .tb-root[data-orientation="vertical"] .tb-list {
+    flex-direction: column;
+    overflow: visible;
+  }
+
+  .tb-tab {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    height: var(--tb-height);
+    padding: 0 var(--tb-px);
+    border: 0;
+    border-radius: calc(var(--tb-radius) - 2px);
+    background: transparent;
+    color: var(--tb-tab-fg);
+    font: inherit;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color 120ms ease;
+  }
+  .tb-root[data-orientation="vertical"] .tb-tab {
+    justify-content: flex-start;
+  }
+  .tb-tab:hover:not([aria-disabled="true"]),
+  .tb-tab[aria-selected="true"] {
+    color: var(--tb-fg);
+  }
+  .tb-tab:focus-visible {
+    outline: 2px solid var(--tb-focus);
+    outline-offset: -2px;
+  }
+  .tb-tab[aria-disabled="true"] {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+  .tb-icon {
+    display: inline-flex;
+  }
+  .tb-icon > svg {
+    width: 1.1em;
+    height: 1.1em;
+  }
+  .tb-badge {
+    min-width: 18px;
+    padding: 1px 6px;
+    border-radius: 999px;
+    background: var(--tb-hover);
+    color: var(--tb-fg);
+    font-size: 0.85em;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.4;
+    text-align: center;
+  }
+  .tb-tab[aria-selected="true"] .tb-badge {
+    background: var(--tb-accent-soft);
+    color: var(--tb-accent);
+  }
+
+  /* The indicator is measured in JS; it slides between tabs. */
+  .tb-indicator {
+    position: absolute;
+    z-index: 0;
+    pointer-events: none;
+    opacity: 0;
+    transition:
+      left var(--tb-duration) ease,
+      top var(--tb-duration) ease,
+      width var(--tb-duration) ease,
+      height var(--tb-duration) ease;
+  }
+  .tb-list[style*="--tb-indicator-size"] .tb-indicator {
+    opacity: 1;
+  }
+
+  /* ---------------------------------------------------------------- line */
+
+  .tb-root[data-variant="line"] .tb-list {
+    border-bottom: 1px solid var(--tb-border);
+  }
+  .tb-root[data-variant="line"] .tb-indicator {
+    bottom: -1px;
+    left: var(--tb-indicator-start);
+    width: var(--tb-indicator-size);
+    height: 2px;
+    border-radius: 2px;
+    background: var(--tb-accent);
+  }
+  .tb-root[data-variant="line"][data-orientation="vertical"] .tb-list {
+    border-bottom: 0;
+    border-inline-end: 1px solid var(--tb-border);
+  }
+  .tb-root[data-variant="line"][data-orientation="vertical"] .tb-indicator {
+    top: var(--tb-indicator-start);
+    bottom: auto;
+    left: auto;
+    inset-inline-end: -1px;
+    width: 2px;
+    height: var(--tb-indicator-size);
+  }
+
+  /* --------------------------------------------------------------- pills */
+
+  .tb-root[data-variant="pills"] .tb-indicator {
+    top: 0;
+    left: var(--tb-indicator-start);
+    width: var(--tb-indicator-size);
+    height: 100%;
+    border-radius: calc(var(--tb-radius) - 2px);
+    background: var(--tb-accent-soft);
+  }
+  .tb-root[data-variant="pills"] .tb-tab[aria-selected="true"] {
+    color: var(--tb-accent);
+  }
+  .tb-root[data-variant="pills"][data-orientation="vertical"] .tb-indicator {
+    top: var(--tb-indicator-start);
+    left: 0;
+    width: 100%;
+    height: var(--tb-indicator-size);
+  }
+
+  /* ------------------------------------------------------------ enclosed */
+
+  .tb-root[data-variant="enclosed"] .tb-list {
+    padding: 3px;
+    border-radius: var(--tb-radius);
+    background: var(--tb-track);
+  }
+  .tb-root[data-variant="enclosed"] .tb-indicator {
+    top: 3px;
+    bottom: 3px;
+    left: var(--tb-indicator-start);
+    width: var(--tb-indicator-size);
+    border-radius: calc(var(--tb-radius) - 2px);
+    background: var(--tb-bg);
+    box-shadow: 0 1px 3px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.5));
+  }
+  .tb-root[data-variant="enclosed"] .tb-tab {
+    height: calc(var(--tb-height) - 6px);
+  }
+  .tb-root[data-variant="enclosed"][data-orientation="vertical"] .tb-indicator {
+    top: var(--tb-indicator-start);
+    bottom: auto;
+    left: 3px;
+    right: 3px;
+    width: auto;
+    height: var(--tb-indicator-size);
+  }
+
+  /* Before the indicator is measured (server render), mark the selected tab statically. */
+  .tb-root[data-variant="line"] .tb-list:not([style*="--tb-indicator-size"]) .tb-tab[aria-selected="true"] {
+    box-shadow: inset 0 -2px 0 var(--tb-accent);
+  }
+
+  /* --------------------------------------------------------------- panel */
+
+  .tb-panel {
+    flex: 1 1 auto;
+    min-width: 0;
+    border-radius: 4px;
+  }
+  .tb-panel:focus-visible {
+    outline: 2px solid var(--tb-focus);
+    outline-offset: 4px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tb-root {
+      --tb-duration: 0s;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .tb-indicator {
+      background: Highlight;
+    }
+  }
+}

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

@@ -3,12 +3,13 @@
  *
  * 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.
+ * same default palette otherwise. Rules live in the `gbs` layer. Declare
+ * where that sits in your global CSS — e.g. `@layer reset, gbs, app,
+ * utilities;` — and anything in a later layer, Tailwind utilities included,
+ * overrides them.
  */
-@layer theme, base, components, utilities;
 
-@layer components {
+@layer gbs {
   .ta-root {
     --ta-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
     --ta-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));

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

@@ -6,9 +6,8 @@
  * the same default palette otherwise. Rules live in the `components`
  * layer, so utility classes passed through `className` / `classNames` win.
  */
-@layer theme, base, components, utilities;
 
-@layer components {
+@layer gbs {
   .ts-region {
     --ts-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
     --ts-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));

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

@@ -3,12 +3,13 @@
  *
  * 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.
+ * same default palette otherwise. Rules live in the `gbs` layer. Declare
+ * where that sits in your global CSS — e.g. `@layer reset, gbs, app,
+ * utilities;` — and anything in a later layer, Tailwind utilities included,
+ * overrides them.
  */
-@layer theme, base, components, utilities;
 
-@layer components {
+@layer gbs {
   .tt-root {
     /* Inverted against the page, the way a tooltip is expected to read. */
     --tt-bg: var(--gbs-tooltip-bg, light-dark(#18181b, #f4f4f5));