gbs-add-block 2.1.0 → 2.3.0

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

@@ -1,140 +1,138 @@
-/*
- * Breadcrumb 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 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 gbs {
-  .bc-root {
-    --bc-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
-    --bc-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
-    --bc-hover: var(--gbs-hover, var(--dg-hover, light-dark(#f4f4f5, #1f1f23)));
-    --bc-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
-    --bc-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
-    /* Long labels are cut with an ellipsis; the full text is in the tooltip. */
-    --bc-max-label: 24ch;
-
-    color-scheme: inherit;
-    font-size: var(--bc-font-size);
-    line-height: 1.4;
-    color: var(--bc-muted);
-  }
-
-  :where(.dark, [data-theme="dark"]) .bc-root {
-    color-scheme: dark;
-  }
-  :where(.light, [data-theme="light"]) .bc-root {
-    color-scheme: light;
-  }
-
-  :where(.bc-root) *,
-  :where(.bc-root) *::before,
-  :where(.bc-root) *::after {
-    box-sizing: border-box;
-  }
-
-  .bc-root[data-size="sm"] {
-    --bc-font-size: 12px;
-  }
-  .bc-root[data-size="lg"] {
-    --bc-font-size: 14px;
-  }
-
-  .bc-list {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 4px 6px;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  .bc-item {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    min-width: 0;
-  }
-
-  .bc-link,
-  .bc-current {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    min-width: 0;
-  }
-  .bc-link {
-    margin: -2px -4px;
-    padding: 2px 4px;
-    border: 0;
-    border-radius: 4px;
-    background: none;
-    color: inherit;
-    font: inherit;
-    text-decoration: none;
-    cursor: pointer;
-  }
-  .bc-link:hover {
-    color: var(--bc-fg);
-    text-decoration: underline;
-    text-underline-offset: 3px;
-  }
-  .bc-link:focus-visible,
-  .bc-ellipsis:focus-visible {
-    outline: 2px solid var(--bc-focus);
-    outline-offset: 1px;
-  }
-  .bc-current {
-    color: var(--bc-fg);
-    font-weight: 500;
-  }
-
-  .bc-text {
-    max-width: var(--bc-max-label);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .bc-icon {
-    display: inline-flex;
-    flex: none;
-  }
-  .bc-icon > svg {
-    width: 1.1em;
-    height: 1.1em;
-  }
-
-  .bc-separator {
-    display: inline-flex;
-    flex: none;
-    opacity: 0.7;
-  }
-  /* A chevron points the reading direction. */
-  .bc-separator > svg:dir(rtl) {
-    transform: scaleX(-1);
-  }
-
-  .bc-ellipsis {
-    display: inline-grid;
-    place-items: center;
-    min-width: 24px;
-    height: 22px;
-    padding: 0 4px;
-    border: 0;
-    border-radius: 4px;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    letter-spacing: 1px;
-    cursor: pointer;
-  }
-  .bc-ellipsis:hover {
-    background: var(--bc-hover);
-    color: var(--bc-fg);
-  }
-}
+/*
+ * Breadcrumb 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 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.
+ */
+
+.bc-root {
+  --bc-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+  --bc-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+  --bc-hover: var(--gbs-hover, var(--dg-hover, light-dark(#f4f4f5, #1f1f23)));
+  --bc-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+  --bc-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
+  /* Long labels are cut with an ellipsis; the full text is in the tooltip. */
+  --bc-max-label: 24ch;
+
+  color-scheme: inherit;
+  font-size: var(--bc-font-size);
+  line-height: 1.4;
+  color: var(--bc-muted);
+}
+
+:where(.dark, [data-theme="dark"]) .bc-root {
+  color-scheme: dark;
+}
+:where(.light, [data-theme="light"]) .bc-root {
+  color-scheme: light;
+}
+
+:where(.bc-root) *,
+:where(.bc-root) *::before,
+:where(.bc-root) *::after {
+  box-sizing: border-box;
+}
+
+.bc-root[data-size="sm"] {
+  --bc-font-size: 12px;
+}
+.bc-root[data-size="lg"] {
+  --bc-font-size: 14px;
+}
+
+.bc-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.bc-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.bc-link,
+.bc-current {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+}
+.bc-link {
+  margin: -2px -4px;
+  padding: 2px 4px;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+.bc-link:hover {
+  color: var(--bc-fg);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.bc-link:focus-visible,
+.bc-ellipsis:focus-visible {
+  outline: 2px solid var(--bc-focus);
+  outline-offset: 1px;
+}
+.bc-current {
+  color: var(--bc-fg);
+  font-weight: 500;
+}
+
+.bc-text {
+  max-width: var(--bc-max-label);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bc-icon {
+  display: inline-flex;
+  flex: none;
+}
+.bc-icon > svg {
+  width: 1.1em;
+  height: 1.1em;
+}
+
+.bc-separator {
+  display: inline-flex;
+  flex: none;
+  opacity: 0.7;
+}
+/* A chevron points the reading direction. */
+.bc-separator > svg:dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.bc-ellipsis {
+  display: inline-grid;
+  place-items: center;
+  min-width: 24px;
+  height: 22px;
+  padding: 0 4px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: 1px;
+  cursor: pointer;
+}
+.bc-ellipsis:hover {
+  background: var(--bc-hover);
+  color: var(--bc-fg);
+}

package/source/beta-components/button/passport.json

@@ -0,0 +1,402 @@
+{
+  "passportVersion": "1.0.0",
+  "identity": {
+    "component": "Button",
+    "folder": "button",
+    "exports": [
+      "Button"
+    ]
+  },
+  "source": {
+    "libraryVersion": "2.3.0",
+    "files": [
+      "core/index.ts",
+      "core/state.ts",
+      "core/types.ts",
+      "index.ts",
+      "react/Button.tsx",
+      "react/locale.ts",
+      "react/props.ts"
+    ],
+    "sourceHash": "sha256:f53690b4e1fe89f40756aac2e995bf2d4163e1a53d657053459d657eae7f75d0"
+  },
+  "purpose": "Trigger an action. Not for navigation unless `render` supplies a link element.",
+  "props": [
+    {
+      "name": "aria-describedby",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "aria-labelledby",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "autoFocus",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "classNames",
+      "type": "other",
+      "typeText": "Partial<Record<ButtonSlot, string>> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "form",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "fullWidth",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "default": false,
+      "origin": "derived"
+    },
+    {
+      "name": "hidden",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "icon",
+      "type": "other",
+      "typeText": "ReactNode",
+      "required": false,
+      "origin": "derived",
+      "description": "An icon-only button. Give it an `aria-label`.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "id",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "leading",
+      "type": "other",
+      "typeText": "ReactNode",
+      "required": false,
+      "origin": "derived",
+      "description": "Icon before the label.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "loading",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "default": false,
+      "origin": "derived",
+      "description": "Show a spinner and ignore clicks, while keeping focus and the button's width.",
+      "descriptionOrigin": "jsdoc",
+      "note": "Managed automatically when `onClick` returns a promise. Setting it manually opts out of that."
+    },
+    {
+      "name": "loadingText",
+      "type": "other",
+      "typeText": "ReactNode",
+      "required": false,
+      "origin": "derived",
+      "description": "Text shown next to the spinner while busy, instead of keeping the label.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "localeText",
+      "type": "other",
+      "typeText": "Partial<ButtonLocaleText> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "onClick",
+      "type": "function",
+      "signature": "((event: MouseEvent<HTMLElement>) => unknown) | undefined",
+      "required": false,
+      "origin": "derived",
+      "description": "Return a promise to show the loading state until it settles.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "ref",
+      "type": "other",
+      "typeText": "Ref<HTMLButtonElement> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "render",
+      "type": "function",
+      "signature": "((props: ButtonRenderProps) => ReactElement) | undefined",
+      "required": false,
+      "origin": "derived",
+      "description": "Render another element with the button's look and behavior, e.g. a router\nlink: `render={(props) => <Link href=\"/billing\" {...props} />}`.",
+      "descriptionOrigin": "jsdoc",
+      "note": "Escape hatch for router links. Changes the rendered element, so composition rules apply to whatever it returns."
+    },
+    {
+      "name": "role",
+      "type": "other",
+      "typeText": "AriaRole | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "size",
+      "type": "enum",
+      "values": [
+        "lg",
+        "md",
+        "sm"
+      ],
+      "typeText": "ButtonSize | undefined",
+      "required": false,
+      "default": "md",
+      "origin": "derived",
+      "description": "Default `md`.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "style",
+      "type": "other",
+      "typeText": "CSSProperties | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "tabIndex",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "trailing",
+      "type": "other",
+      "typeText": "ReactNode",
+      "required": false,
+      "origin": "derived",
+      "description": "Icon after the label.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "type",
+      "type": "enum",
+      "values": [
+        "button",
+        "reset",
+        "submit"
+      ],
+      "typeText": "'button' | 'submit' | 'reset' | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "value",
+      "type": "other",
+      "typeText": "string | number | readonly string[] | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "variant",
+      "type": "enum",
+      "values": [
+        "danger",
+        "ghost",
+        "link",
+        "outline",
+        "primary",
+        "secondary"
+      ],
+      "typeText": "ButtonVariant | undefined",
+      "required": false,
+      "default": "primary",
+      "origin": "derived",
+      "description": "Default `primary`.",
+      "descriptionOrigin": "jsdoc"
+    }
+  ],
+  "inherits": [
+    {
+      "from": "ButtonHTMLAttributes<HTMLButtonElement>",
+      "omitted": [
+        "onClick"
+      ],
+      "passthrough": true
+    }
+  ],
+  "events": [
+    {
+      "name": "onClick",
+      "signature": "((event: MouseEvent<HTMLElement>) => unknown) | undefined"
+    }
+  ],
+  "slots": [
+    "root",
+    "content",
+    "spinner",
+    "icon"
+  ],
+  "states": [
+    {
+      "attr": "data-busy",
+      "values": [
+        "state"
+      ]
+    },
+    {
+      "attr": "data-full-width",
+      "values": [
+        "full"
+      ]
+    },
+    {
+      "attr": "data-hidden"
+    },
+    {
+      "attr": "data-icon-only",
+      "values": [
+        "icon"
+      ]
+    },
+    {
+      "attr": "data-loading-text",
+      "values": [
+        "state"
+      ]
+    },
+    {
+      "attr": "data-size",
+      "values": [
+        "lg",
+        "size",
+        "sm"
+      ]
+    },
+    {
+      "attr": "data-theme",
+      "values": [
+        "dark",
+        "light"
+      ]
+    },
+    {
+      "attr": "data-variant",
+      "values": [
+        "danger",
+        "ghost",
+        "link",
+        "outline",
+        "secondary",
+        "variant"
+      ]
+    }
+  ],
+  "accessibility": {
+    "supplied": [
+      "native <button> semantics, including Enter and Space activation",
+      "disabled state via the native attribute",
+      "focus-visible ring",
+      "the spinner is aria-hidden; loadingText is announced"
+    ],
+    "required": [
+      "aria-label when the button is icon-only (`icon` with no children)",
+      "type=\"submit\" on the button that submits a form; the default is \"button\""
+    ]
+  },
+  "composition": {
+    "mustNotContain": [
+      "Button",
+      "a"
+    ],
+    "notes": "Nesting interactive elements is invalid HTML and traps keyboard focus. Use `render` to change the element instead of wrapping it."
+  },
+  "operations": {},
+  "intentDomains": [
+    "ActionIntent"
+  ],
+  "safeMutations": {
+    "allowed": [
+      "variant",
+      "size",
+      "fullWidth",
+      "leading",
+      "trailing",
+      "icon",
+      "loadingText"
+    ],
+    "forbidden": [
+      "type",
+      "onClick",
+      "render",
+      "loading",
+      "disabled"
+    ],
+    "rationale": "Appearance is safe for an agent to change. `type` and `onClick` change behaviour; `loading` and `disabled` are owned by the component's own async handling."
+  },
+  "examples": [],
+  "coverage": {
+    "propsTotal": 29,
+    "propsDescribed": 9,
+    "describedPct": 31,
+    "authoredSections": [
+      "accessibility",
+      "composition",
+      "intentDomains",
+      "purpose",
+      "safeMutations"
+    ]
+  }
+}