@kerfjs/ui 5.0.0-beta.46 → 5.0.0-beta.47

package/docs/webawesome-theme.md

@@ -97,6 +97,11 @@ tiers:
   complete surface and the inset within it. Accordion applies the outer margin
   once to the group rather than separating connected items; Card's header,
   body, and footer all receive the full inset.
+- `appearance="sunken"` is a Kerf theme extension for Accordion, Card, and
+  Details. It removes raised chrome, paints the lowered semantic surface, and
+  uses the shared rounded-rectangle radius. Override
+  `--kui-wa-sunken-background` or `--kui-wa-sunken-radius` on an instance or
+  containing scope when that surface needs different tokens.
 - `--kui-wa-container-inset` defaults to the 16px homogeneous-group step. Tab
   Panel retains this roomier tier for unframed panel content. Dialog body uses
   the 8px surface inset, while its footer uses the 16px container inset so
@@ -111,9 +116,19 @@ parts, which CSS shadow parts do not support.
 
 Badge remains intentionally compact at Web Awesome's intrinsic `0.375em` block /
 `0.625em` inline padding (4.5px / 7.5px at its default 12px text size): it is a
-short status or count, not a content item. Breadcrumb has no bordered or filled
-container, and Scroller delegates item chrome to its slotted children, so both
-retain their upstream geometry. Web Awesome 3.12's free catalog has
+short status or count, not a content item. A badge with `appearance="filled"` or
+`appearance="filled-outlined"` uses its variant's quiet fill with normal text by
+default so every shipped semantic variant meets WCAG AA for that small text;
+filled-outlined keeps its normal variant border. Accent badges keep their loud
+fills, with brand, success, and danger using a dark foreground that clears AA in
+both themes (neutral and warning retain their already-safe variant foregrounds).
+Override
+`--kui-wa-badge-filled-background` and `--kui-wa-badge-filled-foreground` on a
+badge or containing scope when a product needs a different contrast-safe pair,
+or `--kui-wa-badge-accent-foreground` for a reviewed accent foreground.
+Breadcrumb has no bordered or filled container, and Scroller delegates item chrome
+to its slotted children, so both retain their upstream geometry. Web Awesome
+3.12's free catalog has
 `wa-dropdown-item`, but no `wa-menu-item`; the theme therefore styles the
 supported dropdown item rather than carrying a dead selector.
 
@@ -174,8 +189,9 @@ generic Kerf wrappers around them. Their variants and appearances already read
 the semantic palette above, and importing their component modules remains
 independent and tree-shakeable.
 
-- Use `wa-badge pill` for compact status, count, or activity labels. Hot Sheet
-  2's pill-shaped ticket status treatment is the reference shape.
+- Use `wa-badge pill appearance="filled"` for compact status, count, or activity
+  labels. Hot Sheet 2's quiet, contrast-safe pill-shaped ticket status treatment
+  is the reference shape.
 - Use the default, non-pill `wa-tag` for categories, filters, and removable
   selections. Its medium-radius rounded rectangle keeps tags distinct from
   status badges. Handle the bubbling `wa-remove` event in the feature that owns

package/llms.txt

@@ -115,6 +115,11 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
   the surface (8px) and container (16px) tiers respectively, independent of the
   dialog's shared `--spacing`. Override the tier at the narrowest useful scope
   instead of restyling individual shadow parts.
+  Filled badges use each semantic variant's quiet fill with normal text for
+  WCAG-AA compact-copy contrast. Override
+  `--kui-wa-badge-filled-background` and
+  `--kui-wa-badge-filled-foreground` as a contrast-safe pair instead of adding
+  host selectors.
   When a dialog provides another dismissal affordance, add `hide-actions` to
   the `wa-dialog` host; the theme hides its directly exported `header-actions`
   part without an unsupported chained `::part()` selector.
@@ -160,9 +165,11 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
   toolbar.
 - **Use `Text` for ordinary semantic headings and paragraphs outside toolbar
   title zones.** Omit `variant` for the default `p`, or pass `h1`–`h6` based on
-  the document outline. It passes native attributes through and owns the standard
-  transparent border plus item padding; keep toolbar titles on `ToolbarText` and
-  list-aligned bare prose on `ListInsetText`.
+  the document outline. Independently compose `tone="quiet|danger"`,
+  `size="compact"`, and `font="monospace"` for supporting, error, compact, and
+  code roles instead of global utility classes. It passes native attributes
+  through and owns the standard transparent border plus item padding; keep
+  toolbar titles on `ToolbarText` and list-aligned bare prose on `ListInsetText`.
 - **Space by the five-step scale, by relationship not by eye.** `0`
   `--kui-space-none`, `4px` `--kui-space-2xs`, `8px` `--kui-space-xs` (inside a
   group), `16px` `--kui-space-m`, `24px` `--kui-space-l` (between major differing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.46",
+  "version": "5.0.0-beta.47",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",

package/dist/chunk-QM4GQ7W3.js

@@ -1,17 +0,0 @@
-import { jsx } from 'kerfjs/jsx-runtime';
-
-// src/text.tsx
-function Text({
-  variant: Variant = "p",
-  children,
-  class: classValue = "",
-  className = "",
-  ...attributes
-}) {
-  const classes = `kui-text ${classValue} ${className}`.trim();
-  return /* @__PURE__ */ jsx(Variant, { ...attributes, class: classes, "data-component": "text", children });
-}
-
-export { Text };
-
-//# sourceMappingURL=chunk-QM4GQ7W3.js.map

package/dist/chunk-QM4GQ7W3.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/text.tsx"],"names":[],"mappings":";;;AAwBO,SAAS,IAAA,CAAK;AAAA,EACnB,SAAS,OAAA,GAAU,GAAA;AAAA,EACnB,QAAA;AAAA,EACA,OAAO,UAAA,GAAa,EAAA;AAAA,EACpB,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,EAAc;AACZ,EAAA,MAAM,UAAU,CAAA,SAAA,EAAY,UAAU,CAAA,CAAA,EAAI,SAAS,GAAG,IAAA,EAAK;AAC3D,EAAA,uBACE,GAAA,CAAC,WAAS,GAAG,UAAA,EAAY,OAAO,OAAA,EAAS,gBAAA,EAAe,QACrD,QAAA,EACH,CAAA;AAEJ","file":"chunk-QM4GQ7W3.js","sourcesContent":["import type { KerfBaseAttrs } from 'kerfjs/jsx-runtime';\n\nimport type { KerfUiContent } from './semantic-content.js';\n\nexport type TextVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';\n\nexport type TextContent =\n  KerfUiContent | string | number | readonly TextContent[];\n\nexport type TextProps = Omit<\n  KerfBaseAttrs,\n  'children' | 'class' | 'className'\n> & {\n  /** Native heading or paragraph element to render. Defaults to `p`. */\n  variant?: TextVariant;\n  children: TextContent;\n  class?: string;\n  className?: string;\n};\n\n/**\n * Semantic heading or paragraph text with the standard content-item padding.\n * All ordinary native heading/paragraph attributes pass through to the element.\n */\nexport function Text({\n  variant: Variant = 'p',\n  children,\n  class: classValue = '',\n  className = '',\n  ...attributes\n}: TextProps) {\n  const classes = `kui-text ${classValue} ${className}`.trim();\n  return (\n    <Variant {...attributes} class={classes} data-component=\"text\">\n      {children}\n    </Variant>\n  );\n}\n"]}