create-kerf-component 5.0.0-beta.9 → 6.0.0-beta.1

package/template/kerf.components.json

@@ -0,0 +1,71 @@
+{
+  "$schema": "https://raw.githubusercontent.com/brianwestphal/kerf/main/create-kerf-component/component-metadata.schema.json",
+  "schemaVersion": 1,
+  "componentCatalog": "not-applicable",
+  "components": [
+    {
+      "id": "counter",
+      "name": "Counter",
+      "kind": "component",
+      "purpose": "Render a controlled counter with delegated increment and decrement actions.",
+      "source": "src/counter.tsx",
+      "publicExports": [
+        { "name": "Counter", "subpath": "." },
+        { "name": "CounterProps", "subpath": "." },
+        { "name": "CounterState", "subpath": "." },
+        { "name": "CounterStore", "subpath": "." },
+        { "name": "createCounter", "subpath": "." },
+        { "name": "wireCounter", "subpath": "." },
+        { "name": "Counter", "subpath": "./counter" },
+        { "name": "CounterProps", "subpath": "./counter" },
+        { "name": "CounterState", "subpath": "./counter" },
+        { "name": "CounterStore", "subpath": "./counter" },
+        { "name": "createCounter", "subpath": "./counter" },
+        { "name": "wireCounter", "subpath": "./counter" }
+      ],
+      "sourceLinks": ["README.md#use-it", "src/counter.tsx"],
+      "composition": {
+        "parents": { "mode": "any", "entries": [] },
+        "contexts": ["controlled-counter"],
+        "zones": [],
+        "children": {
+          "mode": "listed",
+          "concepts": ["decrement-control", "value", "increment-control"],
+          "requiredConcepts": [
+            "decrement-control",
+            "value",
+            "increment-control"
+          ]
+        },
+        "state": [{ "id": "count", "owner": "controlled", "required": true }],
+        "wiring": {
+          "required": true,
+          "helpers": ["wireCounter"],
+          "obligations": [
+            "Retain and call the disposer returned by wireCounter."
+          ]
+        },
+        "responsive": { "owner": "not-applicable", "behaviors": [] },
+        "layout": {
+          "roles": ["counter"],
+          "geometry": { "margin": "none", "border": "none", "padding": "none" }
+        }
+      },
+      "boundaries": {
+        "rootClass": "kerf-counter",
+        "publicClasses": ["kerf-counter"],
+        "publicTokens": ["--kerf-counter-gap"]
+      },
+      "accessibility": {
+        "obligations": [
+          "Keep increment and decrement controls named and expose the current count as output."
+        ]
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "README.md#use-it",
+        "composition": "README.md#the-rules-this-package-follows"
+      }
+    }
+  ]
+}

package/template/package.json

@@ -12,23 +12,35 @@
     "./counter": {
       "types": "./dist/counter.d.ts",
       "import": "./dist/counter.js"
-    }
+    },
+    "./counter.css": "./src/counter.css"
   },
   "files": [
     "dist",
+    "src/counter.css",
+    "component-composition.json",
+    "kerf.components.json",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
     "build": "tsup",
+    "catalog:generate": "node scripts/kerf-component-catalog.mjs --write",
+    "catalog:check": "node scripts/kerf-component-catalog.mjs --check",
+    "check:styles": "kerf-ui-analyze --root . src",
     "typecheck": "tsc --noEmit",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run catalog:check && npm run check:styles && npm run build"
+  },
+  "kerfComponentCatalog": {
+    "source": "./kerf.components.json",
+    "output": "./component-composition.json"
   },
   "peerDependencies": {
-    "kerfjs": "^5.0.0-0"
+    "kerfjs": "^6.0.0-0"
   },
   "devDependencies": {
-    "kerfjs": "^5.0.0-beta.9",
+    "kerfjs": "^6.0.0-beta.1",
+    "@kerfjs/ui": "^6.0.0-beta.1",
     "tsup": "^8",
     "typescript": "^5 || ^6"
   }

package/template/src/counter.css

@@ -0,0 +1,38 @@
+/*
+ * Counter owns this stylesheet, and this stylesheet styles only Counter.
+ *
+ * - It selects `.kerf-counter` and Counter's own internals, never another
+ *   component's class, `[data-component]` root, `wa-*` element, or `::part()`.
+ * - It writes only Counter's own `--_kerf-counter-*` private variables. The
+ *   context Counter hands its buttons is named after Counter, the provider.
+ * - Consumers configure Counter through its typed props (`size`) and its one
+ *   public theme token (`--kerf-counter-gap`), never by restyling
+ *   `.kerf-counter` from their own CSS. A need with no prop is a gap to add to
+ *   Counter, not an override for the consumer to write.
+ */
+.kerf-counter {
+  --_kerf-counter-gap: var(--kerf-counter-gap, 0.5rem);
+  --_kerf-counter-control-size: 2rem;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--_kerf-counter-gap);
+}
+
+.kerf-counter[data-size="compact"] {
+  --_kerf-counter-control-size: 1.5rem;
+}
+
+.kerf-counter > button {
+  inline-size: var(--_kerf-counter-control-size);
+  block-size: var(--_kerf-counter-control-size);
+}
+
+/*
+ * Parent context: when a Counter sits in a Kerf UI Toolbar, Counter adapts
+ * itself here, in its own stylesheet. The parent appears only as an ancestor
+ * and Counter stays the subject, so the Toolbar never styles Counter and
+ * Counter never styles the Toolbar.
+ */
+.kui-toolbar .kerf-counter {
+  --_kerf-counter-control-size: 1.75rem;
+}

package/template/src/counter.tsx

@@ -28,6 +28,11 @@ export type CounterStore = ReturnType<typeof createCounter>;
 export interface CounterProps {
   store: CounterStore;
   label?: string;
+  /**
+   * Control density. A typed prop is how consumers configure the component's
+   * look; they never restyle `.kerf-counter` from their own CSS.
+   */
+  size?: 'standard' | 'compact';
 }
 
 /**
@@ -35,10 +40,17 @@ export interface CounterProps {
  * `data-action` hooks instead of inline event handlers — inline `onClick={...}`
  * handlers don't survive kerf's morph (and the `no-inline-jsx-event-handlers`
  * lint rule flags them). The host wires the events; see `wireCounter` below.
+ *
+ * Its look lives in `counter.css` (the `./counter.css` export), which styles
+ * only Counter; `size` is the configuration consumers use instead of CSS.
  */
-export function Counter({ store, label = 'Count' }: CounterProps): SafeHtml {
+export function Counter({
+  store,
+  label = 'Count',
+  size = 'standard',
+}: CounterProps): SafeHtml {
   return (
-    <div class="kerf-counter">
+    <div class="kerf-counter" data-size={size}>
       <button type="button" data-action="counter:dec" aria-label="Decrement">
         −
       </button>
@@ -61,7 +73,10 @@ export function Counter({ store, label = 'Count' }: CounterProps): SafeHtml {
  * single listener survives every re-render. Returns the disposer `delegate()`
  * hands back — call it when the host unmounts.
  */
-export function wireCounter(root: HTMLElement, store: CounterStore): () => void {
+export function wireCounter(
+  root: HTMLElement,
+  store: CounterStore,
+): () => void {
   return delegate(root, 'click', '[data-action^="counter:"]', (_event, el) => {
     const action = el.getAttribute('data-action');
     if (action === 'counter:inc') store.actions.inc();