gbs-add-block 2.1.0 → 2.3.0

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

@@ -1,204 +1,203 @@
-/*
- * Badge and Tag styles.
- *
- * One tinted pill in six variants and three appearances; the variant only
- * ever sets --bd-accent, so adding one is a single rule. Tokens read the
- * shared --gbs-* variables when they are set on an ancestor (set them on
- * :root to theme every component at once). 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 {
-  .bd-root,
-  .bd-tag {
-    --bd-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
-    --bd-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
-    --bd-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
-    --bd-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
-    --bd-on-accent: var(--gbs-accent-fg, var(--dg-accent-fg, light-dark(#ffffff, #0b1220)));
-    --bd-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
-    --bd-accent-color: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
-    --bd-success: var(--gbs-success, light-dark(#15803d, #4ade80));
-    --bd-warning: var(--gbs-warning, light-dark(#b45309, #fbbf24));
-    --bd-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
-    --bd-info: var(--gbs-info, var(--bd-accent-color));
-    --bd-font-size: calc(var(--gbs-font-size, var(--dg-font-size, 13px)) - 1px);
-    --bd-radius: 999px;
-    --bd-height: 20px;
-    --bd-px: 8px;
-    /* Neutral is the text colour rather than a hue, so it reads as "no state". */
-    --bd-accent: var(--bd-fg);
-
-    color-scheme: inherit;
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    max-width: 100%;
-    height: var(--bd-height);
-    padding: 0 var(--bd-px);
-    border: 1px solid transparent;
-    border-radius: var(--bd-radius);
-    font-size: var(--bd-font-size);
-    font-weight: 500;
-    line-height: 1;
-    white-space: nowrap;
-    vertical-align: middle;
-  }
-
-  :where(.dark, [data-theme="dark"]) :is(.bd-root, .bd-tag) {
-    color-scheme: dark;
-  }
-  :where(.light, [data-theme="light"]) :is(.bd-root, .bd-tag) {
-    color-scheme: light;
-  }
-
-  :where(.bd-root, .bd-tag) *,
-  :where(.bd-root, .bd-tag) *::before,
-  :where(.bd-root, .bd-tag) *::after {
-    box-sizing: border-box;
-  }
-
-  .bd-root[data-variant="accent"],
-  .bd-tag[data-variant="accent"] {
-    --bd-accent: var(--bd-accent-color);
-  }
-  .bd-root[data-variant="success"],
-  .bd-tag[data-variant="success"] {
-    --bd-accent: var(--bd-success);
-  }
-  .bd-root[data-variant="warning"],
-  .bd-tag[data-variant="warning"] {
-    --bd-accent: var(--bd-warning);
-  }
-  .bd-root[data-variant="danger"],
-  .bd-tag[data-variant="danger"] {
-    --bd-accent: var(--bd-danger);
-  }
-  .bd-root[data-variant="info"],
-  .bd-tag[data-variant="info"] {
-    --bd-accent: var(--bd-info);
-  }
-
-  /* --------------------------------------------------------- appearances */
-
-  .bd-root[data-appearance="soft"],
-  .bd-tag[data-appearance="soft"] {
-    background: color-mix(in oklab, var(--bd-accent) 12%, var(--bd-bg));
-    color: color-mix(in oklab, var(--bd-accent) 85%, var(--bd-fg));
-  }
-  .bd-root[data-appearance="solid"],
-  .bd-tag[data-appearance="solid"] {
-    background: var(--bd-accent);
-    color: var(--bd-on-accent);
-  }
-  /* Neutral solid would be black on near-black text; invert it instead. */
-  .bd-root[data-variant="neutral"][data-appearance="solid"],
-  .bd-tag[data-variant="neutral"][data-appearance="solid"] {
-    background: var(--bd-fg);
-    color: var(--bd-bg);
-  }
-  .bd-root[data-appearance="outline"],
-  .bd-tag[data-appearance="outline"] {
-    border-color: color-mix(in oklab, var(--bd-accent) 40%, var(--bd-border));
-    color: color-mix(in oklab, var(--bd-accent) 85%, var(--bd-fg));
-  }
-
-  .bd-root[data-size="sm"],
-  .bd-tag[data-size="sm"] {
-    --bd-height: 17px;
-    --bd-px: 6px;
-    --bd-font-size: 11px;
-  }
-
-  /* A counter is a circle until it needs to be a pill. */
-  .bd-root[data-count] {
-    justify-content: center;
-    min-width: var(--bd-height);
-    padding: 0 5px;
-    font-variant-numeric: tabular-nums;
-  }
-
-  .bd-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: currentColor;
-  }
-  .bd-icon {
-    display: inline-flex;
-    flex: none;
-  }
-  .bd-icon > svg {
-    width: 12px;
-    height: 12px;
-  }
-  .bd-label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  /* ------------------------------------------------------------------ tag */
-
-  .bd-tag {
-    --bd-px: 8px;
-    padding-inline-end: 4px;
-  }
-  .bd-tag:not(:has(.bd-remove)) {
-    padding-inline-end: var(--bd-px);
-  }
-
-  .bd-remove {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    padding: 0;
-    border: 0;
-    border-radius: 50%;
-    background: none;
-    color: inherit;
-    opacity: 0.7;
-    cursor: pointer;
-  }
-  .bd-remove:hover:not(:disabled) {
-    background: color-mix(in oklab, currentColor 18%, transparent);
-    opacity: 1;
-  }
-  .bd-remove:focus-visible {
-    outline: 2px solid var(--bd-focus);
-    outline-offset: 1px;
-  }
-  .bd-remove:disabled {
-    cursor: not-allowed;
-  }
-  .bd-tag[data-disabled] {
-    opacity: 0.6;
-  }
-
-  .bd-sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    padding: 0;
-    border: 0;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-  }
-
-  @media (forced-colors: active) {
-    .bd-root,
-    .bd-tag {
-      border-color: CanvasText;
-    }
-    .bd-root[data-appearance="solid"],
-    .bd-tag[data-appearance="solid"] {
-      background: Highlight;
-      color: HighlightText;
-    }
-  }
-}
+/*
+ * Badge and Tag styles.
+ *
+ * One tinted pill in six variants and three appearances; the variant only ever
+ * sets --bd-accent, so adding one is a single rule. Tokens read the shared
+ * --gbs-* variables when they are set on an ancestor (set them on :root to
+ * theme every component at once). 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.
+ */
+
+.bd-root,
+.bd-tag {
+  --bd-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+  --bd-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+  --bd-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
+  --bd-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
+  --bd-on-accent: var(--gbs-accent-fg, var(--dg-accent-fg, light-dark(#ffffff, #0b1220)));
+  --bd-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+  --bd-accent-color: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
+  --bd-success: var(--gbs-success, light-dark(#15803d, #4ade80));
+  --bd-warning: var(--gbs-warning, light-dark(#b45309, #fbbf24));
+  --bd-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
+  --bd-info: var(--gbs-info, var(--bd-accent-color));
+  --bd-font-size: calc(var(--gbs-font-size, var(--dg-font-size, 13px)) - 1px);
+  --bd-radius: 999px;
+  --bd-height: 20px;
+  --bd-px: 8px;
+  /* Neutral is the text colour rather than a hue, so it reads as "no state". */
+  --bd-accent: var(--bd-fg);
+
+  color-scheme: inherit;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  height: var(--bd-height);
+  padding: 0 var(--bd-px);
+  border: 1px solid transparent;
+  border-radius: var(--bd-radius);
+  font-size: var(--bd-font-size);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+:where(.dark, [data-theme="dark"]) :is(.bd-root, .bd-tag) {
+  color-scheme: dark;
+}
+:where(.light, [data-theme="light"]) :is(.bd-root, .bd-tag) {
+  color-scheme: light;
+}
+
+:where(.bd-root, .bd-tag) *,
+:where(.bd-root, .bd-tag) *::before,
+:where(.bd-root, .bd-tag) *::after {
+  box-sizing: border-box;
+}
+
+.bd-root[data-variant="accent"],
+.bd-tag[data-variant="accent"] {
+  --bd-accent: var(--bd-accent-color);
+}
+.bd-root[data-variant="success"],
+.bd-tag[data-variant="success"] {
+  --bd-accent: var(--bd-success);
+}
+.bd-root[data-variant="warning"],
+.bd-tag[data-variant="warning"] {
+  --bd-accent: var(--bd-warning);
+}
+.bd-root[data-variant="danger"],
+.bd-tag[data-variant="danger"] {
+  --bd-accent: var(--bd-danger);
+}
+.bd-root[data-variant="info"],
+.bd-tag[data-variant="info"] {
+  --bd-accent: var(--bd-info);
+}
+
+/* --------------------------------------------------------- appearances */
+
+.bd-root[data-appearance="soft"],
+.bd-tag[data-appearance="soft"] {
+  background: color-mix(in oklab, var(--bd-accent) 12%, var(--bd-bg));
+  color: color-mix(in oklab, var(--bd-accent) 85%, var(--bd-fg));
+}
+.bd-root[data-appearance="solid"],
+.bd-tag[data-appearance="solid"] {
+  background: var(--bd-accent);
+  color: var(--bd-on-accent);
+}
+/* Neutral solid would be black on near-black text; invert it instead. */
+.bd-root[data-variant="neutral"][data-appearance="solid"],
+.bd-tag[data-variant="neutral"][data-appearance="solid"] {
+  background: var(--bd-fg);
+  color: var(--bd-bg);
+}
+.bd-root[data-appearance="outline"],
+.bd-tag[data-appearance="outline"] {
+  border-color: color-mix(in oklab, var(--bd-accent) 40%, var(--bd-border));
+  color: color-mix(in oklab, var(--bd-accent) 85%, var(--bd-fg));
+}
+
+.bd-root[data-size="sm"],
+.bd-tag[data-size="sm"] {
+  --bd-height: 17px;
+  --bd-px: 6px;
+  --bd-font-size: 11px;
+}
+
+/* A counter is a circle until it needs to be a pill. */
+.bd-root[data-count] {
+  justify-content: center;
+  min-width: var(--bd-height);
+  padding: 0 5px;
+  font-variant-numeric: tabular-nums;
+}
+
+.bd-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+.bd-icon {
+  display: inline-flex;
+  flex: none;
+}
+.bd-icon > svg {
+  width: 12px;
+  height: 12px;
+}
+.bd-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ------------------------------------------------------------------ tag */
+
+.bd-tag {
+  --bd-px: 8px;
+  padding-inline-end: 4px;
+}
+.bd-tag:not(:has(.bd-remove)) {
+  padding-inline-end: var(--bd-px);
+}
+
+.bd-remove {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+  color: inherit;
+  opacity: 0.7;
+  cursor: pointer;
+}
+.bd-remove:hover:not(:disabled) {
+  background: color-mix(in oklab, currentColor 18%, transparent);
+  opacity: 1;
+}
+.bd-remove:focus-visible {
+  outline: 2px solid var(--bd-focus);
+  outline-offset: 1px;
+}
+.bd-remove:disabled {
+  cursor: not-allowed;
+}
+.bd-tag[data-disabled] {
+  opacity: 0.6;
+}
+
+.bd-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@media (forced-colors: active) {
+  .bd-root,
+  .bd-tag {
+    border-color: CanvasText;
+  }
+  .bd-root[data-appearance="solid"],
+  .bd-tag[data-appearance="solid"] {
+    background: Highlight;
+    color: HighlightText;
+  }
+}

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

@@ -0,0 +1,243 @@
+{
+  "passportVersion": "1.0.0",
+  "identity": {
+    "component": "Breadcrumb",
+    "folder": "breadcrumb",
+    "exports": [
+      "Breadcrumb"
+    ]
+  },
+  "source": {
+    "libraryVersion": "2.3.0",
+    "files": [
+      "core/index.ts",
+      "core/trail.ts",
+      "core/types.ts",
+      "index.ts",
+      "react/Breadcrumb.tsx",
+      "react/locale.ts",
+      "react/props.ts"
+    ],
+    "sourceHash": "sha256:b6481a74d207aee947732a6f0657b0beab8e687f1c5fdf4f4da2d3965c6aafa7"
+  },
+  "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": "className",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "classNames",
+      "type": "other",
+      "typeText": "Partial<Record<BreadcrumbSlot, string>> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "hidden",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "id",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "items",
+      "type": "other",
+      "typeText": "readonly BreadcrumbItem[]",
+      "required": true,
+      "origin": "derived",
+      "description": "From the top level to the current page. The last item is the current page.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "itemsAfterCollapse",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "default": 1,
+      "origin": "derived",
+      "description": "Crumbs kept after the collapsed part. Default 1.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "itemsBeforeCollapse",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "default": 1,
+      "origin": "derived",
+      "description": "Crumbs kept before the collapsed part. Default 1.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "localeText",
+      "type": "other",
+      "typeText": "Partial<BreadcrumbLocaleText> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "maxItems",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "origin": "derived",
+      "description": "Collapse the middle of the trail when it has more crumbs than this.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "renderLink",
+      "type": "function",
+      "signature": "((props: BreadcrumbLinkProps) => ReactElement) | undefined",
+      "required": false,
+      "origin": "derived",
+      "description": "Draw links with your router, e.g. `(props) => <Link {...props} />`.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "role",
+      "type": "other",
+      "typeText": "AriaRole | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "separator",
+      "type": "other",
+      "typeText": "ReactNode",
+      "required": false,
+      "origin": "derived",
+      "description": "Between crumbs. Default a chevron.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "size",
+      "type": "enum",
+      "values": [
+        "lg",
+        "md",
+        "sm"
+      ],
+      "typeText": "'sm' | 'md' | 'lg' | undefined",
+      "required": false,
+      "default": "md",
+      "origin": "derived"
+    },
+    {
+      "name": "structuredData",
+      "type": "other",
+      "typeText": "boolean | { baseUrl: string; } | undefined",
+      "required": false,
+      "default": false,
+      "origin": "derived",
+      "description": "Add schema.org `BreadcrumbList` JSON-LD for search engines. Pass\n`{ baseUrl }` so relative links become absolute, as search engines require.",
+      "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"
+    }
+  ],
+  "inherits": [
+    {
+      "from": "HTMLAttributes<HTMLElement>",
+      "omitted": [
+        "children"
+      ],
+      "passthrough": true
+    }
+  ],
+  "events": [],
+  "slots": [
+    "item",
+    "ellipsis",
+    "root",
+    "list",
+    "link",
+    "current",
+    "separator"
+  ],
+  "states": [
+    {
+      "attr": "data-index"
+    },
+    {
+      "attr": "data-size",
+      "values": [
+        "lg",
+        "sm"
+      ]
+    },
+    {
+      "attr": "data-theme",
+      "values": [
+        "dark",
+        "light"
+      ]
+    }
+  ],
+  "accessibility": {
+    "supplied": [],
+    "required": []
+  },
+  "composition": {},
+  "operations": {},
+  "intentDomains": [],
+  "safeMutations": {},
+  "examples": [],
+  "coverage": {
+    "propsTotal": 20,
+    "propsDescribed": 7,
+    "describedPct": 35,
+    "authoredSections": [
+      "accessibility"
+    ]
+  }
+}