@hjmds/react 1.1.1 → 1.3.4

package/dist/supplemental-display.d.ts

@@ -46,6 +46,12 @@ export type CounterBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"
     tone?: CounterBadgeTone;
     size?: CounterBadgeSize;
     variant?: CounterBadgeVariant;
+    /**
+     * Says "there is something new" without a number. Use it where the count is
+     * unknown or not worth reading; inventing a number would be worse than
+     * saying none. The accessible name then carries the whole meaning.
+     */
+    dot?: boolean;
     accessibilityLabel?: string;
     /** Canonical layout-only placement. Controlled visual keys are excluded. */
     layoutStyle?: HjmCompositionStyleProp;
@@ -56,6 +62,12 @@ export declare const CounterBadge: import("react").ForwardRefExoticComponent<Omi
     tone?: CounterBadgeTone;
     size?: CounterBadgeSize;
     variant?: CounterBadgeVariant;
+    /**
+     * Says "there is something new" without a number. Use it where the count is
+     * unknown or not worth reading; inventing a number would be worse than
+     * saying none. The accessible name then carries the whole meaning.
+     */
+    dot?: boolean;
     accessibilityLabel?: string;
     /** Canonical layout-only placement. Controlled visual keys are excluded. */
     layoutStyle?: HjmCompositionStyleProp;

package/dist/supplemental-display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"supplemental-display.d.ts","sourceRoot":"","sources":["../src/supplemental-display.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EAEpB,MAAM,yCAAyC,CAAC;AACjD,OAAO,EAKL,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAIL,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACzB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,GAAG,EACR,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAiDtE,MAAM,MAAM,SAAS,GAAG,IAAI,CAC1B,aAAa,CAAC,aAAa,CAAC,EAC5B,UAAU,GAAG,OAAO,CACrB,GAAG,cAAc,CAAC;AAEnB,eAAO,MAAM,IAAI,qGA0Df,CAAC;AAEH,KAAK,iBAAiB,GAAG,IAAI,CAC3B,iBAAiB,CAAC,gBAAgB,CAAC,EACjC,KAAK,GACL,aAAa,GACb,YAAY,GACZ,UAAU,GACV,WAAW,GACX,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,MAAM,GACN,KAAK,GACL,OAAO,GACP,OAAO,CACV,CAAC;AAEF,0EAA0E;AAC1E,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,GAC/C,QAAQ,CAAC;IACP,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,aAAa,CAAC;IACrB,aAAa,CAAC,EAAE,IAAI,CAAC;IACrB,MAAM,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC5C,OAAO,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B,CAAC,CAAC;AAEL,KAAK,cAAc,GAAG,IAAI,CACxB,cAAc,CAAC,eAAe,CAAC,EAC7B,aAAa,GACb,YAAY,GACZ,iBAAiB,GACjB,UAAU,GACV,SAAS,GACT,QAAQ,GACR,MAAM,CACT,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,cAAc,GACrC,eAAe,GACf,QAAQ,CAAC;IACP,yEAAyE;IACzE,UAAU,CAAC,EAAE,iBAAiB,GAC5B,QAAQ,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,aAAa,CAAA;KAAE,CAAC,CAAC;IAC1D;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,YAAY,CAAC;IACzD,qEAAqE;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,eAAe,EAAE,QAAQ,GAAG,OAAO,CAAC,KAAK,IAAI,CAAC;CACrF,CAAC,CAAC;AAOL,oFAAoF;AACpF,eAAO,MAAM,KAAK,wGAgHhB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,GAC/E,QAAQ,CAAC;IACP,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC1B,4EAA4E;IAC9E,WAAW,CAAC,EAAE,uBAAuB,CAAC;CACzC,CAAC,CAAC;AAEH,eAAO,MAAM,YAAY;WAVd,MAAM;UACP,MAAM;WACL,gBAAgB;WAChB,gBAAgB;cACb,mBAAmB;yBACR,MAAM;IACzB,4EAA4E;kBAChE,uBAAuB;oDAwCxC,CAAC"}
+{"version":3,"file":"supplemental-display.d.ts","sourceRoot":"","sources":["../src/supplemental-display.tsx"],"names":[],"mappings":"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"}

package/dist/supplemental-display.js

@@ -124,13 +124,17 @@ export const Image = forwardRef(function Image({ src, width, height, fit, decora
             aspectRatio: resolveImageAspectRatio(descriptor.width, descriptor.height),
         }, children: visual }));
 });
-export const CounterBadge = forwardRef(function CounterBadge({ count, max = counterBadgeRecipe.defaults.max, tone = counterBadgeRecipe.defaults.tone, size = counterBadgeRecipe.defaults.size, variant = counterBadgeRecipe.defaults.variant, accessibilityLabel, className, layoutStyle, style, ...props }, ref) {
+export const CounterBadge = forwardRef(function CounterBadge({ count, max = counterBadgeRecipe.defaults.max, tone = counterBadgeRecipe.defaults.tone, size = counterBadgeRecipe.defaults.size, variant = counterBadgeRecipe.defaults.variant, dot = false, accessibilityLabel, className, layoutStyle, style, ...props }, ref) {
     const label = formatCounterBadgeCount(count, max);
     if (accessibilityLabel !== undefined && accessibilityLabel.trim().length === 0) {
         throw new TypeError("CounterBadge accessibilityLabel must not be empty");
     }
+    if (dot && accessibilityLabel === undefined) {
+        // A dot with no name is a decoration that nobody can read.
+        throw new TypeError("CounterBadge dot requires an accessibilityLabel");
+    }
     if (label === null)
         return null;
-    return (_jsx("span", { ...props, style: { ...style, ...layoutStyle }, ref: ref, className: classNames("hjm-counter-badge", className), "data-tone": tone, "data-size": size, "data-variant": variant, "aria-hidden": accessibilityLabel === undefined || undefined, "aria-label": accessibilityLabel, children: label }));
+    return (_jsx("span", { ...props, ref: ref, className: classNames("hjm-counter-badge", className), "data-tone": tone, "data-size": size, "data-variant": variant, "data-dot": dot || undefined, style: dot ? { ...style, ...layoutStyle, "--hjm-counter-dot-size": `${counterBadgeRecipe.dotSize}px` } : { ...style, ...layoutStyle }, "aria-hidden": accessibilityLabel === undefined || undefined, "aria-label": accessibilityLabel, children: dot ? null : label }));
 });
 //# sourceMappingURL=supplemental-display.js.map

package/dist/supplemental-display.js.map

@@ -1 +1 @@
-{"version":3,"file":"supplemental-display.js","sourceRoot":"","sources":["../src/supplemental-display.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,gBAAgB,EAChB,qBAAqB,GAGtB,MAAM,yCAAyC,CAAC;AACjD,OAAO,EACL,WAAW,EACX,uBAAuB,EACvB,sBAAsB,EACtB,sCAAsC,GAGvC,MAAM,0CAA0C,CAAC;AAClD,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,UAAU,GAIX,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,UAAU,EACV,QAAQ,GAST,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAGpD,+FAA+F;AAC/F,MAAM,SAAS,GAAG;IAChB,GAAG,EAAE,kBAAkB;IACvB,EAAE,EAAE,iIAAiI;IACrI,KAAK,EAAE,uCAAuC;IAC9C,IAAI,EAAE,yBAAyB;IAC/B,QAAQ,EAAE,6FAA6F;IACvG,KAAK,EAAE,gBAAgB;IACvB,WAAW,EAAE,cAAc;IAC3B,UAAU,EAAE,cAAc;IAC1B,YAAY,EAAE,eAAe;IAC7B,SAAS,EAAE,eAAe;IAC1B,KAAK,EAAE,sBAAsB;IAC7B,OAAO,EAAE,kDAAkD;IAC3D,IAAI,EAAE,iHAAiH;IACvH,MAAM,EAAE,8CAA8C;IACtD,QAAQ,EAAE,wCAAwC;IAClD,IAAI,EAAE,uCAAuC;IAC7C,KAAK,EAAE,0DAA0D;IACjE,QAAQ,EAAE,wGAAwG;IAClH,MAAM,EAAE,6BAA6B;IACrC,OAAO,EAAE,oBAAoB;IAC7B,IAAI,EAAE,iGAAiG;IACvG,IAAI,EAAE,kCAAkC;IACxC,IAAI,EAAE,2DAA2D;IACjE,IAAI,EAAE,yCAAyC;IAC/C,IAAI,EAAE,yBAAyB;IAC/B,IAAI,EAAE,+BAA+B;IACrC,aAAa,EAAE,0DAA0D;IACzE,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,mBAAmB;IACzB,OAAO,EAAE,yEAAyE;IAClF,MAAM,EAAE,qDAAqD;IAC7D,QAAQ,EAAE,+PAA+P;IACzQ,KAAK,EAAE,uIAAuI;IAC9I,OAAO,EAAE,yDAAyD;IAClE,SAAS,EAAE,gCAAgC;IAC3C,SAAS,EAAE,0BAA0B;IACrC,OAAO,EAAE,gCAAgC;IACzC,MAAM,EAAE,qCAAqC;IAC7C,IAAI,EAAE,yDAAyD;IAC/D,KAAK,EAAE,8FAA8F;IACrG,UAAU,EAAE,gFAAgF;IAC5F,aAAa,EAAE,kJAAkJ;IACjK,OAAO,EAAE,uCAAuC;CACG,CAAC;AAOtD,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAA2B,SAAS,IAAI,CACpE,EACE,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,UAAU,EACV,kBAAkB,EAClB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG;IAEH,MAAM,UAAU,GAAG,qBAAqB,CAAC;QACvC,IAAI;QACJ,GAAG,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC;QACvC,GAAG,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC;QACvC,GAAG,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC;QAC3C,GAAG,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,CAAC;QAC3D,GAAG,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC;QACnD,GAAG,CAAC,kBAAkB,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,kBAAkB,EAAE,CAAC;KAClD,CAAC,CAAC;IACrB,MAAM,KAAK,GAAG,mBAAmB,EAAE,CAAC;IACpC,MAAM,SAAS,GAAG,gBAAgB,CAChC,UAAU,CAAC,cAAc,EACzB,KAAK,EAAE,WAAW,CAAC,SAAS,IAAI,KAAK,CACtC,CAAC;IACF,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,CACL,iBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC,eACjC,UAAU,CAAC,IAAI,eACf,UAAU,CAAC,IAAI,eACf,UAAU,CAAC,IAAI,iBACb,UAAU,CAAC,MAAM,oBACd,SAAS,EACzB,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,SAAS,EACjB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,UAAU,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,EAClD,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,IAAI,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,iBAClC,UAAU,CAAC,UAAU,IAAI,SAAS,gBACnC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,kBAAkB,EAC7E,SAAS,EAAC,OAAO,EACjB,KAAK,EAAE,KAAK,YAEZ,eAAM,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,GAAI,GACnC,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAoEH,oFAAoF;AACpF,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA8B,SAAS,KAAK,CACzE,EACE,GAAG,EACH,KAAK,EACL,MAAM,EACN,GAAG,EACH,UAAU,EACV,kBAAkB,EAClB,UAAU,EACV,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG;IAEH,MAAM,UAAU,GAAG,sBAAsB,CAAC;QACxC,GAAG;QACH,KAAK;QACL,MAAM;QACN,GAAG,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC;QACrC,GAAG,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC;QACnD,GAAG,CAAC,kBAAkB,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,kBAAkB,EAAE,CAAC;KACjD,CAAC,CAAC;IACtB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAa;QAC7C,GAAG,EAAE,UAAU,CAAC,GAAG;QACnB,MAAM,EAAE,SAAS;KAClB,CAAC,CAAC;IACH,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;IACvE,MAAM,EACJ,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE,UAAU,EACjB,GAAG,cAAc,EAClB,GAAG,UAAU,IAAI,EAAE,CAAC;IAErB,MAAM,UAAU,GAAwC,CAAC,KAAK,EAAE,EAAE;QAChE,QAAQ,CAAC,EAAE,GAAG,EAAE,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC;QACpD,kBAAkB,EAAE,CAAC,QAAQ,CAAC,CAAC;QAC/B,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC,CAAC;IACF,MAAM,WAAW,GAAwC,CAAC,KAAK,EAAE,EAAE;QACjE,QAAQ,CAAC,EAAE,GAAG,EAAE,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;QACnD,kBAAkB,EAAE,CAAC,OAAO,CAAC,CAAC;QAC9B,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IACF,MAAM,YAAY,GAAsB;QACtC,GAAG,cAAc;QACjB,GAAG,EAAE,UAAU,CAAC,GAAG;QACnB,GAAG,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,kBAAkB;QAC/D,KAAK,EAAE,UAAU,CAAC,KAAK;QACvB,MAAM,EAAE,UAAU,CAAC,MAAM;QACzB,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,cAAc,CAAC;YACvD,kBAAkB;QACpB,KAAK,EAAE,EAAE,GAAG,UAAU,EAAE,SAAS,EAAE,UAAU,CAAC,GAAG,EAAE;QACnD,GAAG,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACzD,MAAM,EAAE,UAAU;QAClB,OAAO,EAAE,WAAW;QACpB,GAAG,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC;KACrD,CAAC;IAEF,IAAI,MAAiB,CAAC;IACtB,IAAI,MAAM,KAAK,OAAO,EAAE,CAAC;QACvB,MAAM,aAAa,GAAG,sCAAsC,CAAC,UAAU,CAAC,CAAC;QACzE,MAAM,GAAG,CACP,eACE,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,gBACnC,aAAa,iBACZ,UAAU,CAAC,UAAU,IAAI,SAAS,YAE/C,eAAM,SAAS,EAAC,0BAA0B,iBAAa,MAAM,YAC1D,QAAQ,IAAI,CACX,KAAC,IAAI,IACH,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EACpC,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EACpC,UAAU,SACV,CACH,GACI,GACF,CACR,CAAC;IACJ,CAAC;SAAM,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;QACrC,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,gBAAgB,EAAE,GAAG,YAAY,CAAC;QAC5D,MAAM,GAAG,iBAAS,gBAAgB,EAAE,GAAG,EAAE,QAAQ,GAAI,CAAC;IACxD,CAAC;SAAM,CAAC;QACN,MAAM,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACrC,CAAC;IAED,OAAO,CACL,kBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,SAAS,CAAC,cACnC,UAAU,CAAC,GAAG,iBACX,MAAM,EACnB,KAAK,EAAE;YACL,UAAU,EAAE,UAAU,CAAC,KAAK;YAC5B,GAAG,KAAK;YACR,WAAW,EAAE,uBAAuB,CAClC,UAAU,CAAC,KAAK,EAChB,UAAU,CAAC,MAAM,CAClB;SACF,YAEA,MAAM,GACF,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAcH,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CACnB,EACE,KAAK,EACL,GAAG,GAAG,kBAAkB,CAAC,QAAQ,CAAC,GAAG,EACrC,IAAI,GAAG,kBAAkB,CAAC,QAAQ,CAAC,IAAI,EACvC,IAAI,GAAG,kBAAkB,CAAC,QAAQ,CAAC,IAAI,EACvC,OAAO,GAAG,kBAAkB,CAAC,QAAQ,CAAC,OAAO,EAC7C,kBAAkB,EAClB,SAAS,EACT,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG;IAEH,MAAM,KAAK,GAAG,uBAAuB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAClD,IAAI,kBAAkB,KAAK,SAAS,IAAI,kBAAkB,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC/E,MAAM,IAAI,SAAS,CAAC,mDAAmD,CAAC,CAAC;IAC3E,CAAC;IACD,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAChC,OAAO,CACL,kBACM,KAAK,EACT,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,WAAW,EAAE,EACnC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC,eAC1C,IAAI,eACJ,IAAI,kBACD,OAAO,iBACR,kBAAkB,KAAK,SAAS,IAAI,SAAS,gBAC9C,kBAAkB,YAE7B,KAAK,GACD,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import {\n  getIconTransform,\n  resolveIconDescriptor,\n  type IconDescriptor,\n  type SemanticIconName,\n} from \"@hjmds/design-contracts/components/icon\";\nimport {\n  imageRecipe,\n  resolveImageAspectRatio,\n  resolveImageDescriptor,\n  resolveImageFallbackAccessibilityLabel,\n  type ImageDescriptor,\n  type ImageLoadStatus,\n} from \"@hjmds/design-contracts/components/image\";\nimport {\n  counterBadgeRecipe,\n  formatCounterBadgeCount,\n  iconRecipe,\n  type CounterBadgeSize,\n  type CounterBadgeTone,\n  type CounterBadgeVariant,\n} from \"@hjmds/design-contracts/recipes\";\nimport {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ImgHTMLAttributes,\n  type ReactElement,\n  type ReactEventHandler,\n  type ReactNode,\n  type Ref,\n  type SVGAttributes,\n} from \"react\";\nimport { classNames } from \"./internal.js\";\nimport { useOptionalHjmTheme } from \"./provider.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\n\n/** Internal, dependency-free semantic glyph registry. All marks share one 24px stroke grid. */\nconst iconPaths = {\n  add: \"M12 5v14M5 12h14\",\n  ai: \"M12 2l1.2 4.1L17 8l-3.8 1.9L12 14l-1.2-4.1L7 8l3.8-1.9L12 2ZM19 14l.7 2.3L22 17.5l-2.3 1.2L19 21l-.7-2.3-2.3-1.2 2.3-1.2L19 14Z\",\n  alert: \"M12 3 2.7 20h18.6L12 3Zm0 6v4m0 3h.01\",\n  back: \"M15 18 9 12l6-6M9 12h10\",\n  calendar: \"M5 4h14a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm2-2v4m10-4v4M3 9h18\",\n  check: \"m5 12 4 4L19 6\",\n  chevronDown: \"m6 9 6 6 6-6\",\n  chevronEnd: \"m9 6 6 6-6 6\",\n  chevronStart: \"m15 6-6 6 6 6\",\n  chevronUp: \"m6 15 6-6 6 6\",\n  close: \"M6 6l12 12M18 6 6 18\",\n  compare: \"M8 7h11m0 0-3-3m3 3-3 3M16 17H5m0 0 3-3m-3 3 3 3\",\n  copy: \"M8 8h11a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V8Zm8 0V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3\",\n  delete: \"M4 7h16M9 7V4h6v3m3 0-1 14H7L6 7m4 4v6m4-6v6\",\n  download: \"M12 3v12m0 0 5-5m-5 5-5-5M4 19v2h16v-2\",\n  edit: \"m4 16-1 5 5-1L19 9l-4-4L4 16Zm9-9 4 4\",\n  error: \"M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Zm0-14v5m0 3h.01\",\n  favorite: \"M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z\",\n  filter: \"M3 5h18l-7 8v6l-4 2v-8L3 5Z\",\n  forward: \"m9 6 6 6-6 6m6-6H5\",\n  help: \"M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Zm-3-13a3 3 0 1 1 4.7 2.5c-1 .7-1.7 1.2-1.7 2.5m0 3h.01\",\n  home: \"m3 11 9-8 9 8v10h-6v-6H9v6H3V11Z\",\n  info: \"M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Zm0-11v6m0-10h.01\",\n  lock: \"M6 10h12v11H6V10Zm3 0V7a3 3 0 0 1 6 0v3\",\n  menu: \"M4 6h16M4 12h16M4 18h16\",\n  more: \"M5 12h.01M12 12h.01M19 12h.01\",\n  notifications: \"M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9Zm-8 12h4\",\n  pause: \"M8 5v14m8-14v14\",\n  play: \"m8 5 11 7-11 7V5Z\",\n  refresh: \"M20 7v5h-5M4 17v-5h5m10.5-3A8 8 0 0 0 6 6l-2 2m.5 7A8 8 0 0 0 18 18l2-2\",\n  search: \"m21 21-4.4-4.4M19 11a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z\",\n  settings: \"M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm7.4-3.5 2-1.5-2-3.5-2.4 1a8 8 0 0 0-2-1.2L14.7 4h-4l-.4 2.8A8 8 0 0 0 8 8L5.6 7l-2 3.5 2 1.5a8 8 0 0 0 0 2l-2 1.5 2 3.5L8 18a8 8 0 0 0 2.3 1.2l.4 2.8h4l.3-2.8A8 8 0 0 0 17 18l2.4 1 2-3.5-2-1.5a8 8 0 0 0 0-2Z\",\n  share: \"M18 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm12 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM8.6 16.5l6.8 4M15.4 6.5l-6.8 4\",\n  success: \"M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Zm-5-10 3 3 7-7\",\n  trendDown: \"M3 7l7 7 4-4 7 7m0 0v-6m0 6h-6\",\n  trendFlat: \"M4 12h16m0 0-4-4m4 4-4 4\",\n  trendUp: \"M3 17l7-7 4 4 7-7m0 0v6m0-6h-6\",\n  upload: \"M12 21V9m0 0-5 5m5-5 5 5M4 5V3h16v2\",\n  user: \"M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-8 9a8 8 0 0 1 16 0\",\n  users: \"M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 10a7 7 0 0 1 14 0m1-16a4 4 0 0 1 0 7m0 3a6 6 0 0 1 5 6\",\n  visibility: \"M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Zm10 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z\",\n  visibilityOff: \"m3 3 18 18M10.6 5.2A9 9 0 0 1 12 5c6 0 10 7 10 7a17 17 0 0 1-2.1 3M6.6 6.6C3.8 8.5 2 12 2 12s4 7 10 7a9 9 0 0 0 3.4-.7M9.9 9.9a3 3 0 0 0 4.2 4.2\",\n  warning: \"M12 3 2.7 20h18.6L12 3Zm0 6v4m0 3h.01\",\n} as const satisfies Record<SemanticIconName, string>;\n\nexport type IconProps = Omit<\n  SVGAttributes<SVGSVGElement>,\n  \"children\" | \"color\"\n> & IconDescriptor;\n\nexport const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(\n  {\n    name,\n    size,\n    tone,\n    weight,\n    directionality,\n    decorative,\n    accessibilityLabel,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const descriptor = resolveIconDescriptor({\n    name,\n    ...(size === undefined ? {} : { size }),\n    ...(tone === undefined ? {} : { tone }),\n    ...(weight === undefined ? {} : { weight }),\n    ...(directionality === undefined ? {} : { directionality }),\n    ...(decorative === undefined ? {} : { decorative }),\n    ...(accessibilityLabel === undefined ? {} : { accessibilityLabel }),\n  } as IconDescriptor);\n  const theme = useOptionalHjmTheme();\n  const transform = getIconTransform(\n    descriptor.directionality,\n    theme?.environment.direction ?? \"ltr\",\n  );\n  const dimension = iconRecipe.sizes[descriptor.size];\n  return (\n    <svg\n      {...props}\n      ref={ref}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={classNames(\"hjm-icon\", className)}\n      data-name={descriptor.name}\n      data-size={descriptor.size}\n      data-tone={descriptor.tone}\n      data-weight={descriptor.weight}\n      data-transform={transform}\n      width={dimension}\n      height={dimension}\n      stroke=\"currentColor\"\n      strokeWidth={iconRecipe.weights[descriptor.weight]}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      role={descriptor.decorative ? undefined : \"img\"}\n      aria-hidden={descriptor.decorative || undefined}\n      aria-label={descriptor.decorative ? undefined : descriptor.accessibilityLabel}\n      focusable=\"false\"\n      style={style}\n    >\n      <path d={iconPaths[descriptor.name]} />\n    </svg>\n  );\n});\n\ntype ImageElementProps = Omit<\n  ImgHTMLAttributes<HTMLImageElement>,\n  | \"alt\"\n  | \"aria-hidden\"\n  | \"aria-label\"\n  | \"children\"\n  | \"className\"\n  | \"height\"\n  | \"onError\"\n  | \"onLoad\"\n  | \"role\"\n  | \"src\"\n  | \"style\"\n  | \"width\"\n>;\n\n/** Canonical props handed to a framework adapter such as `next/image`. */\nexport type ImageAdapterProps = ImageElementProps &\n  Readonly<{\n    src: string;\n    alt: string;\n    width: number;\n    height: number;\n    className?: string;\n    style: CSSProperties;\n    \"aria-hidden\"?: true;\n    onLoad: ReactEventHandler<HTMLImageElement>;\n    onError: ReactEventHandler<HTMLImageElement>;\n    ref?: Ref<HTMLImageElement>;\n  }>;\n\ntype ImageRootProps = Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  | \"aria-hidden\"\n  | \"aria-label\"\n  | \"aria-labelledby\"\n  | \"children\"\n  | \"onError\"\n  | \"onLoad\"\n  | \"role\"\n>;\n\nexport type ImageProps = ImageRootProps &\n  ImageDescriptor &\n  Readonly<{\n    /** Additional native `<img>` props shared with the framework adapter. */\n    imageProps?: ImageElementProps &\n      Readonly<{ className?: string; style?: CSSProperties }>;\n    /**\n     * Receives the complete accessible image contract. The adapter must pass\n     * these props to its underlying image element so HJM can observe failure.\n     */\n    renderImage?: (props: ImageAdapterProps) => ReactElement;\n    /** Visual content only; HJM keeps the fallback's accessible name. */\n    fallback?: ReactNode;\n    imageRef?: Ref<HTMLImageElement>;\n    onLoad?: ReactEventHandler<HTMLImageElement>;\n    onError?: ReactEventHandler<HTMLImageElement>;\n    onLoadStatusChange?: (status: Extract<ImageLoadStatus, \"loaded\" | \"error\">) => void;\n  }>;\n\ntype ImageState = Readonly<{\n  src: string;\n  status: Extract<ImageLoadStatus, \"loading\" | \"loaded\" | \"error\">;\n}>;\n\n/** Intrinsic-size image with canonical alt semantics and an accessible fallback. */\nexport const Image = forwardRef<HTMLSpanElement, ImageProps>(function Image(\n  {\n    src,\n    width,\n    height,\n    fit,\n    decorative,\n    accessibilityLabel,\n    imageProps,\n    renderImage,\n    fallback,\n    imageRef,\n    onLoad,\n    onError,\n    onLoadStatusChange,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const descriptor = resolveImageDescriptor({\n    src,\n    width,\n    height,\n    ...(fit === undefined ? {} : { fit }),\n    ...(decorative === undefined ? {} : { decorative }),\n    ...(accessibilityLabel === undefined ? {} : { accessibilityLabel }),\n  } as ImageDescriptor);\n  const [state, setState] = useState<ImageState>({\n    src: descriptor.src,\n    status: \"loading\",\n  });\n  const status = state.src === descriptor.src ? state.status : \"loading\";\n  const {\n    className: imageClassName,\n    style: imageStyle,\n    ...restImageProps\n  } = imageProps ?? {};\n\n  const handleLoad: ReactEventHandler<HTMLImageElement> = (event) => {\n    setState({ src: descriptor.src, status: \"loaded\" });\n    onLoadStatusChange?.(\"loaded\");\n    onLoad?.(event);\n  };\n  const handleError: ReactEventHandler<HTMLImageElement> = (event) => {\n    setState({ src: descriptor.src, status: \"error\" });\n    onLoadStatusChange?.(\"error\");\n    onError?.(event);\n  };\n  const adapterProps: ImageAdapterProps = {\n    ...restImageProps,\n    src: descriptor.src,\n    alt: descriptor.decorative ? \"\" : descriptor.accessibilityLabel,\n    width: descriptor.width,\n    height: descriptor.height,\n    className: classNames(\"hjm-image__asset\", imageClassName) ??\n      \"hjm-image__asset\",\n    style: { ...imageStyle, objectFit: descriptor.fit },\n    ...(descriptor.decorative ? { \"aria-hidden\": true } : {}),\n    onLoad: handleLoad,\n    onError: handleError,\n    ...(imageRef === undefined ? {} : { ref: imageRef }),\n  };\n\n  let visual: ReactNode;\n  if (status === \"error\") {\n    const fallbackLabel = resolveImageFallbackAccessibilityLabel(descriptor);\n    visual = (\n      <span\n        className=\"hjm-image__fallback\"\n        role={descriptor.decorative ? undefined : \"img\"}\n        aria-label={fallbackLabel}\n        aria-hidden={descriptor.decorative || undefined}\n      >\n        <span className=\"hjm-image__fallback-icon\" aria-hidden=\"true\">\n          {fallback ?? (\n            <Icon\n              name={imageRecipe.fallback.icon.name}\n              tone={imageRecipe.fallback.icon.tone}\n              decorative\n            />\n          )}\n        </span>\n      </span>\n    );\n  } else if (renderImage === undefined) {\n    const { ref: assetRef, ...nativeImageProps } = adapterProps;\n    visual = <img {...nativeImageProps} ref={assetRef} />;\n  } else {\n    visual = renderImage(adapterProps);\n  }\n\n  return (\n    <span\n      {...props}\n      ref={ref}\n      className={classNames(\"hjm-image\", className)}\n      data-fit={descriptor.fit}\n      data-status={status}\n      style={{\n        inlineSize: descriptor.width,\n        ...style,\n        aspectRatio: resolveImageAspectRatio(\n          descriptor.width,\n          descriptor.height,\n        ),\n      }}\n    >\n      {visual}\n    </span>\n  );\n});\n\nexport type CounterBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> &\n  Readonly<{\n    count: number;\n    max?: number;\n    tone?: CounterBadgeTone;\n    size?: CounterBadgeSize;\n    variant?: CounterBadgeVariant;\n    accessibilityLabel?: string;\n      /** Canonical layout-only placement. Controlled visual keys are excluded. */\n    layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nexport const CounterBadge = forwardRef<HTMLSpanElement, CounterBadgeProps>(\n  function CounterBadge(\n    {\n      count,\n      max = counterBadgeRecipe.defaults.max,\n      tone = counterBadgeRecipe.defaults.tone,\n      size = counterBadgeRecipe.defaults.size,\n      variant = counterBadgeRecipe.defaults.variant,\n      accessibilityLabel,\n      className,\n      layoutStyle,\n      style,\n      ...props\n    },\n    ref,\n  ) {\n    const label = formatCounterBadgeCount(count, max);\n    if (accessibilityLabel !== undefined && accessibilityLabel.trim().length === 0) {\n      throw new TypeError(\"CounterBadge accessibilityLabel must not be empty\");\n    }\n    if (label === null) return null;\n    return (\n      <span\n        {...props}\n        style={{ ...style, ...layoutStyle }}\n        ref={ref}\n        className={classNames(\"hjm-counter-badge\", className)}\n        data-tone={tone}\n        data-size={size}\n        data-variant={variant}\n        aria-hidden={accessibilityLabel === undefined || undefined}\n        aria-label={accessibilityLabel}\n      >\n        {label}\n      </span>\n    );\n  },\n);\n"]}
+{"version":3,"file":"supplemental-display.js","sourceRoot":"","sources":["../src/supplemental-display.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  getIconTransform,\n  resolveIconDescriptor,\n  type IconDescriptor,\n  type SemanticIconName,\n} from \"@hjmds/design-contracts/components/icon\";\nimport {\n  imageRecipe,\n  resolveImageAspectRatio,\n  resolveImageDescriptor,\n  resolveImageFallbackAccessibilityLabel,\n  type ImageDescriptor,\n  type ImageLoadStatus,\n} from \"@hjmds/design-contracts/components/image\";\nimport {\n  counterBadgeRecipe,\n  formatCounterBadgeCount,\n  iconRecipe,\n  type CounterBadgeSize,\n  type CounterBadgeTone,\n  type CounterBadgeVariant,\n} from \"@hjmds/design-contracts/recipes\";\nimport {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ImgHTMLAttributes,\n  type ReactElement,\n  type ReactEventHandler,\n  type ReactNode,\n  type Ref,\n  type SVGAttributes,\n} from \"react\";\nimport { classNames } from \"./internal.js\";\nimport { useOptionalHjmTheme } from \"./provider.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\n\n/** Internal, dependency-free semantic glyph registry. All marks share one 24px stroke grid. */\nconst iconPaths = {\n  add: \"M12 5v14M5 12h14\",\n  ai: \"M12 2l1.2 4.1L17 8l-3.8 1.9L12 14l-1.2-4.1L7 8l3.8-1.9L12 2ZM19 14l.7 2.3L22 17.5l-2.3 1.2L19 21l-.7-2.3-2.3-1.2 2.3-1.2L19 14Z\",\n  alert: \"M12 3 2.7 20h18.6L12 3Zm0 6v4m0 3h.01\",\n  back: \"M15 18 9 12l6-6M9 12h10\",\n  calendar: \"M5 4h14a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm2-2v4m10-4v4M3 9h18\",\n  check: \"m5 12 4 4L19 6\",\n  chevronDown: \"m6 9 6 6 6-6\",\n  chevronEnd: \"m9 6 6 6-6 6\",\n  chevronStart: \"m15 6-6 6 6 6\",\n  chevronUp: \"m6 15 6-6 6 6\",\n  close: \"M6 6l12 12M18 6 6 18\",\n  compare: \"M8 7h11m0 0-3-3m3 3-3 3M16 17H5m0 0 3-3m-3 3 3 3\",\n  copy: \"M8 8h11a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V8Zm8 0V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3\",\n  delete: \"M4 7h16M9 7V4h6v3m3 0-1 14H7L6 7m4 4v6m4-6v6\",\n  download: \"M12 3v12m0 0 5-5m-5 5-5-5M4 19v2h16v-2\",\n  edit: \"m4 16-1 5 5-1L19 9l-4-4L4 16Zm9-9 4 4\",\n  error: \"M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Zm0-14v5m0 3h.01\",\n  favorite: \"M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z\",\n  filter: \"M3 5h18l-7 8v6l-4 2v-8L3 5Z\",\n  forward: \"m9 6 6 6-6 6m6-6H5\",\n  help: \"M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Zm-3-13a3 3 0 1 1 4.7 2.5c-1 .7-1.7 1.2-1.7 2.5m0 3h.01\",\n  home: \"m3 11 9-8 9 8v10h-6v-6H9v6H3V11Z\",\n  info: \"M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Zm0-11v6m0-10h.01\",\n  lock: \"M6 10h12v11H6V10Zm3 0V7a3 3 0 0 1 6 0v3\",\n  menu: \"M4 6h16M4 12h16M4 18h16\",\n  more: \"M5 12h.01M12 12h.01M19 12h.01\",\n  notifications: \"M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9Zm-8 12h4\",\n  pause: \"M8 5v14m8-14v14\",\n  play: \"m8 5 11 7-11 7V5Z\",\n  refresh: \"M20 7v5h-5M4 17v-5h5m10.5-3A8 8 0 0 0 6 6l-2 2m.5 7A8 8 0 0 0 18 18l2-2\",\n  search: \"m21 21-4.4-4.4M19 11a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z\",\n  settings: \"M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm7.4-3.5 2-1.5-2-3.5-2.4 1a8 8 0 0 0-2-1.2L14.7 4h-4l-.4 2.8A8 8 0 0 0 8 8L5.6 7l-2 3.5 2 1.5a8 8 0 0 0 0 2l-2 1.5 2 3.5L8 18a8 8 0 0 0 2.3 1.2l.4 2.8h4l.3-2.8A8 8 0 0 0 17 18l2.4 1 2-3.5-2-1.5a8 8 0 0 0 0-2Z\",\n  share: \"M18 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm12 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM8.6 16.5l6.8 4M15.4 6.5l-6.8 4\",\n  success: \"M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Zm-5-10 3 3 7-7\",\n  trendDown: \"M3 7l7 7 4-4 7 7m0 0v-6m0 6h-6\",\n  trendFlat: \"M4 12h16m0 0-4-4m4 4-4 4\",\n  trendUp: \"M3 17l7-7 4 4 7-7m0 0v6m0-6h-6\",\n  upload: \"M12 21V9m0 0-5 5m5-5 5 5M4 5V3h16v2\",\n  user: \"M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-8 9a8 8 0 0 1 16 0\",\n  users: \"M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 10a7 7 0 0 1 14 0m1-16a4 4 0 0 1 0 7m0 3a6 6 0 0 1 5 6\",\n  visibility: \"M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Zm10 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z\",\n  visibilityOff: \"m3 3 18 18M10.6 5.2A9 9 0 0 1 12 5c6 0 10 7 10 7a17 17 0 0 1-2.1 3M6.6 6.6C3.8 8.5 2 12 2 12s4 7 10 7a9 9 0 0 0 3.4-.7M9.9 9.9a3 3 0 0 0 4.2 4.2\",\n  warning: \"M12 3 2.7 20h18.6L12 3Zm0 6v4m0 3h.01\",\n} as const satisfies Record<SemanticIconName, string>;\n\nexport type IconProps = Omit<\n  SVGAttributes<SVGSVGElement>,\n  \"children\" | \"color\"\n> & IconDescriptor;\n\nexport const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(\n  {\n    name,\n    size,\n    tone,\n    weight,\n    directionality,\n    decorative,\n    accessibilityLabel,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const descriptor = resolveIconDescriptor({\n    name,\n    ...(size === undefined ? {} : { size }),\n    ...(tone === undefined ? {} : { tone }),\n    ...(weight === undefined ? {} : { weight }),\n    ...(directionality === undefined ? {} : { directionality }),\n    ...(decorative === undefined ? {} : { decorative }),\n    ...(accessibilityLabel === undefined ? {} : { accessibilityLabel }),\n  } as IconDescriptor);\n  const theme = useOptionalHjmTheme();\n  const transform = getIconTransform(\n    descriptor.directionality,\n    theme?.environment.direction ?? \"ltr\",\n  );\n  const dimension = iconRecipe.sizes[descriptor.size];\n  return (\n    <svg\n      {...props}\n      ref={ref}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={classNames(\"hjm-icon\", className)}\n      data-name={descriptor.name}\n      data-size={descriptor.size}\n      data-tone={descriptor.tone}\n      data-weight={descriptor.weight}\n      data-transform={transform}\n      width={dimension}\n      height={dimension}\n      stroke=\"currentColor\"\n      strokeWidth={iconRecipe.weights[descriptor.weight]}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      role={descriptor.decorative ? undefined : \"img\"}\n      aria-hidden={descriptor.decorative || undefined}\n      aria-label={descriptor.decorative ? undefined : descriptor.accessibilityLabel}\n      focusable=\"false\"\n      style={style}\n    >\n      <path d={iconPaths[descriptor.name]} />\n    </svg>\n  );\n});\n\ntype ImageElementProps = Omit<\n  ImgHTMLAttributes<HTMLImageElement>,\n  | \"alt\"\n  | \"aria-hidden\"\n  | \"aria-label\"\n  | \"children\"\n  | \"className\"\n  | \"height\"\n  | \"onError\"\n  | \"onLoad\"\n  | \"role\"\n  | \"src\"\n  | \"style\"\n  | \"width\"\n>;\n\n/** Canonical props handed to a framework adapter such as `next/image`. */\nexport type ImageAdapterProps = ImageElementProps &\n  Readonly<{\n    src: string;\n    alt: string;\n    width: number;\n    height: number;\n    className?: string;\n    style: CSSProperties;\n    \"aria-hidden\"?: true;\n    onLoad: ReactEventHandler<HTMLImageElement>;\n    onError: ReactEventHandler<HTMLImageElement>;\n    ref?: Ref<HTMLImageElement>;\n  }>;\n\ntype ImageRootProps = Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  | \"aria-hidden\"\n  | \"aria-label\"\n  | \"aria-labelledby\"\n  | \"children\"\n  | \"onError\"\n  | \"onLoad\"\n  | \"role\"\n>;\n\nexport type ImageProps = ImageRootProps &\n  ImageDescriptor &\n  Readonly<{\n    /** Additional native `<img>` props shared with the framework adapter. */\n    imageProps?: ImageElementProps &\n      Readonly<{ className?: string; style?: CSSProperties }>;\n    /**\n     * Receives the complete accessible image contract. The adapter must pass\n     * these props to its underlying image element so HJM can observe failure.\n     */\n    renderImage?: (props: ImageAdapterProps) => ReactElement;\n    /** Visual content only; HJM keeps the fallback's accessible name. */\n    fallback?: ReactNode;\n    imageRef?: Ref<HTMLImageElement>;\n    onLoad?: ReactEventHandler<HTMLImageElement>;\n    onError?: ReactEventHandler<HTMLImageElement>;\n    onLoadStatusChange?: (status: Extract<ImageLoadStatus, \"loaded\" | \"error\">) => void;\n  }>;\n\ntype ImageState = Readonly<{\n  src: string;\n  status: Extract<ImageLoadStatus, \"loading\" | \"loaded\" | \"error\">;\n}>;\n\n/** Intrinsic-size image with canonical alt semantics and an accessible fallback. */\nexport const Image = forwardRef<HTMLSpanElement, ImageProps>(function Image(\n  {\n    src,\n    width,\n    height,\n    fit,\n    decorative,\n    accessibilityLabel,\n    imageProps,\n    renderImage,\n    fallback,\n    imageRef,\n    onLoad,\n    onError,\n    onLoadStatusChange,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const descriptor = resolveImageDescriptor({\n    src,\n    width,\n    height,\n    ...(fit === undefined ? {} : { fit }),\n    ...(decorative === undefined ? {} : { decorative }),\n    ...(accessibilityLabel === undefined ? {} : { accessibilityLabel }),\n  } as ImageDescriptor);\n  const [state, setState] = useState<ImageState>({\n    src: descriptor.src,\n    status: \"loading\",\n  });\n  const status = state.src === descriptor.src ? state.status : \"loading\";\n  const {\n    className: imageClassName,\n    style: imageStyle,\n    ...restImageProps\n  } = imageProps ?? {};\n\n  const handleLoad: ReactEventHandler<HTMLImageElement> = (event) => {\n    setState({ src: descriptor.src, status: \"loaded\" });\n    onLoadStatusChange?.(\"loaded\");\n    onLoad?.(event);\n  };\n  const handleError: ReactEventHandler<HTMLImageElement> = (event) => {\n    setState({ src: descriptor.src, status: \"error\" });\n    onLoadStatusChange?.(\"error\");\n    onError?.(event);\n  };\n  const adapterProps: ImageAdapterProps = {\n    ...restImageProps,\n    src: descriptor.src,\n    alt: descriptor.decorative ? \"\" : descriptor.accessibilityLabel,\n    width: descriptor.width,\n    height: descriptor.height,\n    className: classNames(\"hjm-image__asset\", imageClassName) ??\n      \"hjm-image__asset\",\n    style: { ...imageStyle, objectFit: descriptor.fit },\n    ...(descriptor.decorative ? { \"aria-hidden\": true } : {}),\n    onLoad: handleLoad,\n    onError: handleError,\n    ...(imageRef === undefined ? {} : { ref: imageRef }),\n  };\n\n  let visual: ReactNode;\n  if (status === \"error\") {\n    const fallbackLabel = resolveImageFallbackAccessibilityLabel(descriptor);\n    visual = (\n      <span\n        className=\"hjm-image__fallback\"\n        role={descriptor.decorative ? undefined : \"img\"}\n        aria-label={fallbackLabel}\n        aria-hidden={descriptor.decorative || undefined}\n      >\n        <span className=\"hjm-image__fallback-icon\" aria-hidden=\"true\">\n          {fallback ?? (\n            <Icon\n              name={imageRecipe.fallback.icon.name}\n              tone={imageRecipe.fallback.icon.tone}\n              decorative\n            />\n          )}\n        </span>\n      </span>\n    );\n  } else if (renderImage === undefined) {\n    const { ref: assetRef, ...nativeImageProps } = adapterProps;\n    visual = <img {...nativeImageProps} ref={assetRef} />;\n  } else {\n    visual = renderImage(adapterProps);\n  }\n\n  return (\n    <span\n      {...props}\n      ref={ref}\n      className={classNames(\"hjm-image\", className)}\n      data-fit={descriptor.fit}\n      data-status={status}\n      style={{\n        inlineSize: descriptor.width,\n        ...style,\n        aspectRatio: resolveImageAspectRatio(\n          descriptor.width,\n          descriptor.height,\n        ),\n      }}\n    >\n      {visual}\n    </span>\n  );\n});\n\nexport type CounterBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> &\n  Readonly<{\n    count: number;\n    max?: number;\n    tone?: CounterBadgeTone;\n    size?: CounterBadgeSize;\n    variant?: CounterBadgeVariant;\n    /**\n     * Says \"there is something new\" without a number. Use it where the count is\n     * unknown or not worth reading; inventing a number would be worse than\n     * saying none. The accessible name then carries the whole meaning.\n     */\n    dot?: boolean;\n    accessibilityLabel?: string;\n      /** Canonical layout-only placement. Controlled visual keys are excluded. */\n    layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nexport const CounterBadge = forwardRef<HTMLSpanElement, CounterBadgeProps>(\n  function CounterBadge(\n    {\n      count,\n      max = counterBadgeRecipe.defaults.max,\n      tone = counterBadgeRecipe.defaults.tone,\n      size = counterBadgeRecipe.defaults.size,\n      variant = counterBadgeRecipe.defaults.variant,\n      dot = false,\n      accessibilityLabel,\n      className,\n      layoutStyle,\n      style,\n      ...props\n    },\n    ref,\n  ) {\n    const label = formatCounterBadgeCount(count, max);\n    if (accessibilityLabel !== undefined && accessibilityLabel.trim().length === 0) {\n      throw new TypeError(\"CounterBadge accessibilityLabel must not be empty\");\n    }\n    if (dot && accessibilityLabel === undefined) {\n      // A dot with no name is a decoration that nobody can read.\n      throw new TypeError(\"CounterBadge dot requires an accessibilityLabel\");\n    }\n    if (label === null) return null;\n    return (\n      <span\n        {...props}\n        ref={ref}\n        className={classNames(\"hjm-counter-badge\", className)}\n        data-tone={tone}\n        data-size={size}\n        data-variant={variant}\n        data-dot={dot || undefined}\n        style={dot ? { ...style, ...layoutStyle, \"--hjm-counter-dot-size\": `${counterBadgeRecipe.dotSize}px` } as typeof style : { ...style, ...layoutStyle }}\n        aria-hidden={accessibilityLabel === undefined || undefined}\n        aria-label={accessibilityLabel}\n      >\n        {dot ? null : label}\n      </span>\n    );\n  },\n);\n"]}

package/dist/tags-input.d.ts

@@ -0,0 +1,60 @@
+import { type TagsInputCommitKey, type TagsInputCommitResult, type TagsInputPolicy, type TagsInputSuggestion } from "@hjmds/design-contracts/components/tags-input";
+export type TagsInputProps = Readonly<{
+    label: string;
+    tags?: readonly string[];
+    defaultTags?: readonly string[];
+    onTagsChange?: (tags: readonly string[]) => void;
+    /** Fires when a value could not be committed, with the contract's reason. */
+    onReject?: (result: TagsInputCommitResult) => void;
+    /**
+     * The text being typed. A product filtering `suggestions` cannot do it
+     * without this — the draft lives here, not in the product's state.
+     */
+    onDraftChange?: (draft: string) => void;
+    policy?: TagsInputPolicy;
+    commitKeys?: readonly TagsInputCommitKey[];
+    /** Composes one tag's remove-control name from the tag text. */
+    composeRemoveLabel: (tag: string) => string;
+    /**
+     * Candidates for the current draft, already filtered by the product. Present
+     * them and the field becomes the multi-select combobox case without a second
+     * value shape.
+     */
+    suggestions?: readonly TagsInputSuggestion[];
+    /** Localized accessible name for the candidate list. */
+    suggestionsLabel?: string;
+    placeholder?: string;
+    description?: string;
+    disabled?: boolean;
+    className?: string;
+}>;
+export declare const TagsInput: import("react").ForwardRefExoticComponent<Readonly<{
+    label: string;
+    tags?: readonly string[];
+    defaultTags?: readonly string[];
+    onTagsChange?: (tags: readonly string[]) => void;
+    /** Fires when a value could not be committed, with the contract's reason. */
+    onReject?: (result: TagsInputCommitResult) => void;
+    /**
+     * The text being typed. A product filtering `suggestions` cannot do it
+     * without this — the draft lives here, not in the product's state.
+     */
+    onDraftChange?: (draft: string) => void;
+    policy?: TagsInputPolicy;
+    commitKeys?: readonly TagsInputCommitKey[];
+    /** Composes one tag's remove-control name from the tag text. */
+    composeRemoveLabel: (tag: string) => string;
+    /**
+     * Candidates for the current draft, already filtered by the product. Present
+     * them and the field becomes the multi-select combobox case without a second
+     * value shape.
+     */
+    suggestions?: readonly TagsInputSuggestion[];
+    /** Localized accessible name for the candidate list. */
+    suggestionsLabel?: string;
+    placeholder?: string;
+    description?: string;
+    disabled?: boolean;
+    className?: string;
+}> & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=tags-input.d.ts.map

package/dist/tags-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags-input.d.ts","sourceRoot":"","sources":["../src/tags-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACzB,MAAM,+CAA+C,CAAC;AAUvD,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAC;IACjD,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IAC3C,gEAAgE;IAChE,kBAAkB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,mBAAmB,EAAE,CAAC;IAC7C,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,SAAS;WA7Bb,MAAM;WACN,SAAS,MAAM,EAAE;kBACV,SAAS,MAAM,EAAE;mBAChB,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI;IAChD,6EAA6E;eAClE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI;IAClD;;;OAGG;oBACa,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;aAC9B,eAAe;iBACX,SAAS,kBAAkB,EAAE;IAC1C,gEAAgE;wBAC5C,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM;IAC3C;;;;OAIG;kBACW,SAAS,mBAAmB,EAAE;IAC5C,wDAAwD;uBACrC,MAAM;kBACX,MAAM;kBACN,MAAM;eACT,OAAO;gBACN,MAAM;qDAwKlB,CAAC"}

package/dist/tags-input.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { removeTagAt, resolveTagsInputActiveSuggestion, resolveTagsInputCommit, tagsInputBehaviorDefaults, tagsInputRecipe, } from "@hjmds/design-contracts/components/tags-input";
+import { forwardRef, useRef, useState, } from "react";
+import { classNames, composeRefs, useControllableState } from "./internal.js";
+export const TagsInput = forwardRef(function TagsInput({ label, tags: controlledTags, defaultTags, onTagsChange, onReject, onDraftChange, policy, commitKeys = tagsInputRecipe.defaults.commitKeys, suggestions, suggestionsLabel, composeRemoveLabel, placeholder, description, disabled = false, className, }, forwardedRef) {
+    const [tags, setTags] = useControllableState({
+        ...(controlledTags === undefined ? {} : { value: controlledTags }),
+        defaultValue: defaultTags ?? [],
+        ...(onTagsChange === undefined ? {} : { onChange: onTagsChange }),
+    });
+    const [draft, setDraft] = useState("");
+    // Backspace on an empty field selects the last tag first; a second press
+    // removes it. Removing on the first press loses work with no warning.
+    const [armedIndex, setArmedIndex] = useState(null);
+    const [activeSuggestionId, setActiveSuggestionId] = useState(null);
+    const openSuggestions = (suggestions?.length ?? 0) > 0 && draft.trim().length > 0;
+    const activeSuggestion = suggestions?.find((item) => item.id === activeSuggestionId) ?? null;
+    const inputRef = useRef(null);
+    const id = `hjm-tags-${label.replace(/\s+/gu, "-")}`;
+    const changeDraft = (next) => {
+        setDraft(next);
+        onDraftChange?.(next);
+    };
+    const commit = (value) => {
+        const result = resolveTagsInputCommit(tags, value, policy ?? {});
+        if (!result.accepted) {
+            onReject?.(result);
+            return;
+        }
+        setTags([...tags, result.value]);
+        setDraft("");
+        onDraftChange?.("");
+        setArmedIndex(null);
+        setActiveSuggestionId(null);
+    };
+    const remove = (index) => {
+        setTags(removeTagAt(tags, index));
+        setArmedIndex(null);
+        inputRef.current?.focus();
+    };
+    const onKeyDown = (event) => {
+        const key = event.key;
+        if (openSuggestions && (key === "ArrowDown" || key === "ArrowUp")) {
+            event.preventDefault();
+            setActiveSuggestionId(resolveTagsInputActiveSuggestion(suggestions ?? [], activeSuggestionId, key === "ArrowDown" ? "next" : "previous"));
+            return;
+        }
+        if (key === "Escape" && activeSuggestionId !== null) {
+            // Dismissing the candidate list must not clear what the user typed.
+            event.preventDefault();
+            setActiveSuggestionId(null);
+            return;
+        }
+        const isCommitKey = (key === "Enter" && commitKeys.includes("Enter")) ||
+            (key === "," && commitKeys.includes("Comma")) ||
+            (key === " " && commitKeys.includes("Space"));
+        if (isCommitKey) {
+            event.preventDefault();
+            // A highlighted candidate wins over the raw text; otherwise the typed
+            // value commits, which is what makes this different from a Select.
+            commit(activeSuggestion ? activeSuggestion.value ?? activeSuggestion.label : draft);
+            return;
+        }
+        if (key !== "Backspace" || draft.length > 0 || tags.length === 0) {
+            if (key !== "Backspace")
+                setArmedIndex(null);
+            return;
+        }
+        event.preventDefault();
+        const last = tags.length - 1;
+        if (armedIndex === last || tagsInputBehaviorDefaults.backspaceRemovesLastTag)
+            remove(last);
+        else
+            setArmedIndex(last);
+    };
+    return (_jsxs("div", { className: classNames("hjm-tags-input", className), "data-disabled": disabled || undefined, children: [_jsx("label", { className: "hjm-tags-input__label", htmlFor: id, children: label }), _jsxs("div", { className: "hjm-tags-input__frame", style: {
+                    "--hjm-tags-min-height": `${tagsInputRecipe.frame.minHeight}px`,
+                    "--hjm-tags-gap": `${tagsInputRecipe.frame.gap}px`,
+                    "--hjm-tags-tag-min-height": `${tagsInputRecipe.tag.minHeight}px`,
+                    "--hjm-tags-remove-target": `${tagsInputRecipe.remove.minTouchTarget}px`,
+                }, onClick: () => inputRef.current?.focus(), children: [_jsx("ul", { className: "hjm-tags-input__list", children: tags.map((tag, index) => (_jsxs("li", { className: "hjm-tags-input__tag", "data-armed": armedIndex === index || undefined, children: [_jsx("span", { children: tag }), _jsx("button", { type: "button", "aria-label": composeRemoveLabel(tag), className: "hjm-tags-input__remove", disabled: disabled, onClick: () => remove(index), children: "\u00D7" })] }, `${tag}-${index}`))) }), _jsx("input", { ref: composeRefs(inputRef, forwardedRef), id: id, type: "text", className: "hjm-tags-input__input", value: draft, placeholder: placeholder, disabled: disabled, "aria-describedby": description ? `${id}-description` : undefined, role: suggestions ? "combobox" : undefined, "aria-expanded": suggestions ? openSuggestions : undefined, "aria-controls": suggestions && openSuggestions ? `${id}-suggestions` : undefined, "aria-activedescendant": activeSuggestion ? `${id}-suggestion-${activeSuggestion.id}` : undefined, "aria-autocomplete": suggestions ? "list" : undefined, onChange: (event) => { changeDraft(event.target.value); setArmedIndex(null); setActiveSuggestionId(null); }, onKeyDown: onKeyDown, onBlur: () => { if (commitKeys.includes("Blur"))
+                            commit(draft); setArmedIndex(null); } })] }), openSuggestions ? (_jsx("ul", { id: `${id}-suggestions`, role: "listbox", "aria-label": suggestionsLabel, className: "hjm-tags-input__suggestions", children: (suggestions ?? []).map((item) => (_jsx("li", { id: `${id}-suggestion-${item.id}`, role: "option", "aria-selected": item.id === activeSuggestionId, "aria-disabled": item.disabled || undefined, className: "hjm-tags-input__suggestion", onMouseDown: (event) => {
+                        // Commit before blur so the draft is still there to replace.
+                        event.preventDefault();
+                        if (!item.disabled)
+                            commit(item.value ?? item.label);
+                    }, onMouseEnter: () => { if (!item.disabled)
+                        setActiveSuggestionId(item.id); }, children: item.label }, item.id))) })) : null, description ? _jsx("p", { id: `${id}-description`, className: "hjm-tags-input__description", children: description }) : null] }));
+});
+//# sourceMappingURL=tags-input.js.map

package/dist/tags-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags-input.js","sourceRoot":"","sources":["../src/tags-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  removeTagAt,\n  resolveTagsInputActiveSuggestion,\n  resolveTagsInputCommit,\n  tagsInputBehaviorDefaults,\n  tagsInputRecipe,\n  type TagsInputCommitKey,\n  type TagsInputCommitResult,\n  type TagsInputPolicy,\n  type TagsInputSuggestion,\n} from \"@hjmds/design-contracts/components/tags-input\";\nimport {\n  forwardRef,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n} from \"react\";\nimport { classNames, composeRefs, useControllableState } from \"./internal.js\";\n\nexport type TagsInputProps = Readonly<{\n  label: string;\n  tags?: readonly string[];\n  defaultTags?: readonly string[];\n  onTagsChange?: (tags: readonly string[]) => void;\n  /** Fires when a value could not be committed, with the contract's reason. */\n  onReject?: (result: TagsInputCommitResult) => void;\n  /**\n   * The text being typed. A product filtering `suggestions` cannot do it\n   * without this — the draft lives here, not in the product's state.\n   */\n  onDraftChange?: (draft: string) => void;\n  policy?: TagsInputPolicy;\n  commitKeys?: readonly TagsInputCommitKey[];\n  /** Composes one tag's remove-control name from the tag text. */\n  composeRemoveLabel: (tag: string) => string;\n  /**\n   * Candidates for the current draft, already filtered by the product. Present\n   * them and the field becomes the multi-select combobox case without a second\n   * value shape.\n   */\n  suggestions?: readonly TagsInputSuggestion[];\n  /** Localized accessible name for the candidate list. */\n  suggestionsLabel?: string;\n  placeholder?: string;\n  description?: string;\n  disabled?: boolean;\n  className?: string;\n}>;\n\nexport const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(function TagsInput(\n  {\n    label,\n    tags: controlledTags,\n    defaultTags,\n    onTagsChange,\n    onReject,\n    onDraftChange,\n    policy,\n    commitKeys = tagsInputRecipe.defaults.commitKeys,\n    suggestions,\n    suggestionsLabel,\n    composeRemoveLabel,\n    placeholder,\n    description,\n    disabled = false,\n    className,\n  },\n  forwardedRef,\n) {\n  const [tags, setTags] = useControllableState<readonly string[]>({\n    ...(controlledTags === undefined ? {} : { value: controlledTags }),\n    defaultValue: defaultTags ?? [],\n    ...(onTagsChange === undefined ? {} : { onChange: onTagsChange }),\n  });\n  const [draft, setDraft] = useState(\"\");\n  // Backspace on an empty field selects the last tag first; a second press\n  // removes it. Removing on the first press loses work with no warning.\n  const [armedIndex, setArmedIndex] = useState<number | null>(null);\n  const [activeSuggestionId, setActiveSuggestionId] = useState<string | null>(null);\n  const openSuggestions = (suggestions?.length ?? 0) > 0 && draft.trim().length > 0;\n  const activeSuggestion = suggestions?.find((item) => item.id === activeSuggestionId) ?? null;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const id = `hjm-tags-${label.replace(/\\s+/gu, \"-\")}`;\n\n  const changeDraft = (next: string) => {\n    setDraft(next);\n    onDraftChange?.(next);\n  };\n  const commit = (value: string) => {\n    const result = resolveTagsInputCommit(tags, value, policy ?? {});\n    if (!result.accepted) { onReject?.(result); return; }\n    setTags([...tags, result.value]);\n    setDraft(\"\");\n    onDraftChange?.(\"\");\n    setArmedIndex(null);\n    setActiveSuggestionId(null);\n  };\n  const remove = (index: number) => {\n    setTags(removeTagAt(tags, index));\n    setArmedIndex(null);\n    inputRef.current?.focus();\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    const key = event.key;\n    if (openSuggestions && (key === \"ArrowDown\" || key === \"ArrowUp\")) {\n      event.preventDefault();\n      setActiveSuggestionId(resolveTagsInputActiveSuggestion(\n        suggestions ?? [],\n        activeSuggestionId,\n        key === \"ArrowDown\" ? \"next\" : \"previous\",\n      ));\n      return;\n    }\n    if (key === \"Escape\" && activeSuggestionId !== null) {\n      // Dismissing the candidate list must not clear what the user typed.\n      event.preventDefault();\n      setActiveSuggestionId(null);\n      return;\n    }\n    const isCommitKey =\n      (key === \"Enter\" && commitKeys.includes(\"Enter\")) ||\n      (key === \",\" && commitKeys.includes(\"Comma\")) ||\n      (key === \" \" && commitKeys.includes(\"Space\"));\n    if (isCommitKey) {\n      event.preventDefault();\n      // A highlighted candidate wins over the raw text; otherwise the typed\n      // value commits, which is what makes this different from a Select.\n      commit(activeSuggestion ? activeSuggestion.value ?? activeSuggestion.label : draft);\n      return;\n    }\n    if (key !== \"Backspace\" || draft.length > 0 || tags.length === 0) {\n      if (key !== \"Backspace\") setArmedIndex(null);\n      return;\n    }\n    event.preventDefault();\n    const last = tags.length - 1;\n    if (armedIndex === last || tagsInputBehaviorDefaults.backspaceRemovesLastTag) remove(last);\n    else setArmedIndex(last);\n  };\n\n  return (\n    <div className={classNames(\"hjm-tags-input\", className)} data-disabled={disabled || undefined}>\n      <label className=\"hjm-tags-input__label\" htmlFor={id}>{label}</label>\n      <div\n        className=\"hjm-tags-input__frame\"\n        style={{\n          \"--hjm-tags-min-height\": `${tagsInputRecipe.frame.minHeight}px`,\n          \"--hjm-tags-gap\": `${tagsInputRecipe.frame.gap}px`,\n          \"--hjm-tags-tag-min-height\": `${tagsInputRecipe.tag.minHeight}px`,\n          \"--hjm-tags-remove-target\": `${tagsInputRecipe.remove.minTouchTarget}px`,\n        } as CSSProperties}\n        onClick={() => inputRef.current?.focus()}\n      >\n        <ul className=\"hjm-tags-input__list\">\n          {tags.map((tag, index) => (\n            <li key={`${tag}-${index}`} className=\"hjm-tags-input__tag\" data-armed={armedIndex === index || undefined}>\n              <span>{tag}</span>\n              <button\n                type=\"button\"\n                aria-label={composeRemoveLabel(tag)}\n                className=\"hjm-tags-input__remove\"\n                disabled={disabled}\n                onClick={() => remove(index)}\n              >\n                ×\n              </button>\n            </li>\n          ))}\n        </ul>\n        <input\n          ref={composeRefs(inputRef, forwardedRef)}\n          id={id}\n          type=\"text\"\n          className=\"hjm-tags-input__input\"\n          value={draft}\n          placeholder={placeholder}\n          disabled={disabled}\n          aria-describedby={description ? `${id}-description` : undefined}\n          role={suggestions ? \"combobox\" : undefined}\n          aria-expanded={suggestions ? openSuggestions : undefined}\n          aria-controls={suggestions && openSuggestions ? `${id}-suggestions` : undefined}\n          aria-activedescendant={activeSuggestion ? `${id}-suggestion-${activeSuggestion.id}` : undefined}\n          aria-autocomplete={suggestions ? \"list\" : undefined}\n          onChange={(event) => { changeDraft(event.target.value); setArmedIndex(null); setActiveSuggestionId(null); }}\n          onKeyDown={onKeyDown}\n          onBlur={() => { if (commitKeys.includes(\"Blur\")) commit(draft); setArmedIndex(null); }}\n        />\n      </div>\n      {openSuggestions ? (\n        <ul id={`${id}-suggestions`} role=\"listbox\" aria-label={suggestionsLabel} className=\"hjm-tags-input__suggestions\">\n          {(suggestions ?? []).map((item) => (\n            <li\n              key={item.id}\n              id={`${id}-suggestion-${item.id}`}\n              role=\"option\"\n              aria-selected={item.id === activeSuggestionId}\n              aria-disabled={item.disabled || undefined}\n              className=\"hjm-tags-input__suggestion\"\n              onMouseDown={(event) => {\n                // Commit before blur so the draft is still there to replace.\n                event.preventDefault();\n                if (!item.disabled) commit(item.value ?? item.label);\n              }}\n              onMouseEnter={() => { if (!item.disabled) setActiveSuggestionId(item.id); }}\n            >\n              {item.label}\n            </li>\n          ))}\n        </ul>\n      ) : null}\n      {description ? <p id={`${id}-description`} className=\"hjm-tags-input__description\">{description}</p> : null}\n    </div>\n  );\n});\n"]}

package/dist/text-formats.d.ts

@@ -0,0 +1,16 @@
+import type { TextFormatKind } from "@hjmds/design-contracts/components/text-formats";
+import { type HTMLAttributes, type ReactNode } from "react";
+export type TextFormatProps = HTMLAttributes<HTMLElement> & Readonly<{
+    kind: TextFormatKind;
+    children: ReactNode;
+}>;
+/**
+ * Each kind emits its own element, which is the entire point: `<kbd>`, `<code>`
+ * and `<blockquote>` mean different things to assistive technology, and a
+ * styled `<span>` means none of them.
+ */
+export declare const TextFormat: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & Readonly<{
+    kind: TextFormatKind;
+    children: ReactNode;
+}> & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=text-formats.d.ts.map

package/dist/text-formats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-formats.d.ts","sourceRoot":"","sources":["../src/text-formats.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iDAAiD,CAAC;AACtF,OAAO,EAA6B,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,WAAW,CAAC,GACvD,QAAQ,CAAC;IACP,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC,CAAC;AAQL;;;;GAIG;AACH,eAAO,MAAM,UAAU;UAfb,cAAc;cACV,SAAS;gDA+BrB,CAAC"}

package/dist/text-formats.js

@@ -0,0 +1,24 @@
+import { createElement, forwardRef } from "react";
+import { classNames } from "./internal.js";
+const elementFor = {
+    kbd: "kbd",
+    code: "code",
+    quote: "blockquote",
+};
+/**
+ * Each kind emits its own element, which is the entire point: `<kbd>`, `<code>`
+ * and `<blockquote>` mean different things to assistive technology, and a
+ * styled `<span>` means none of them.
+ */
+export const TextFormat = forwardRef(function TextFormat({ kind, children, className, ...props }, forwardedRef) {
+    if (!Object.prototype.hasOwnProperty.call(elementFor, kind)) {
+        throw new TypeError(`Unsupported TextFormat kind: ${String(kind)}`);
+    }
+    return createElement(elementFor[kind], {
+        ...props,
+        ref: forwardedRef,
+        className: classNames("hjm-text-format", className),
+        "data-kind": kind,
+    }, children);
+});
+//# sourceMappingURL=text-formats.js.map

package/dist/text-formats.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-formats.js","sourceRoot":"","sources":["../src/text-formats.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAuC,MAAM,OAAO,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAQ3C,MAAM,UAAU,GAA6C;IAC3D,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,YAAY;CACpB,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAA+B,SAAS,UAAU,CACpF,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACvC,YAAY;IAEZ,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,EAAE,CAAC;QAC5D,MAAM,IAAI,SAAS,CAAC,gCAAgC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACtE,CAAC;IACD,OAAO,aAAa,CAClB,UAAU,CAAC,IAAI,CAAC,EAChB;QACE,GAAG,KAAK;QACR,GAAG,EAAE,YAAY;QACjB,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC;QACnD,WAAW,EAAE,IAAI;KAClB,EACD,QAAQ,CACT,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import type { TextFormatKind } from \"@hjmds/design-contracts/components/text-formats\";\nimport { createElement, forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { classNames } from \"./internal.js\";\n\nexport type TextFormatProps = HTMLAttributes<HTMLElement> &\n  Readonly<{\n    kind: TextFormatKind;\n    children: ReactNode;\n  }>;\n\nconst elementFor: Readonly<Record<TextFormatKind, string>> = {\n  kbd: \"kbd\",\n  code: \"code\",\n  quote: \"blockquote\",\n};\n\n/**\n * Each kind emits its own element, which is the entire point: `<kbd>`, `<code>`\n * and `<blockquote>` mean different things to assistive technology, and a\n * styled `<span>` means none of them.\n */\nexport const TextFormat = forwardRef<HTMLElement, TextFormatProps>(function TextFormat(\n  { kind, children, className, ...props },\n  forwardedRef,\n) {\n  if (!Object.prototype.hasOwnProperty.call(elementFor, kind)) {\n    throw new TypeError(`Unsupported TextFormat kind: ${String(kind)}`);\n  }\n  return createElement(\n    elementFor[kind],\n    {\n      ...props,\n      ref: forwardedRef,\n      className: classNames(\"hjm-text-format\", className),\n      \"data-kind\": kind,\n    },\n    children,\n  );\n});\n"]}

package/dist/toast.d.ts

@@ -6,7 +6,7 @@ export type ToastProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "titl
     onDismissRequest: (reason: ToastDismissReason) => void;
 }>;
 /** Controlled single-toast renderer; ToastProvider supplies the full FIFO lifecycle. */
-export declare const Toast: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> & Readonly<{
+export declare const Toast: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> & Readonly<{
     descriptor: ToastDescriptor;
     onDismissRequest: (reason: ToastDismissReason) => void;
 }> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/toggle-group.d.ts

@@ -0,0 +1,13 @@
+import { type ToggleGroupDescriptor, type ToggleGroupSize } from "@hjmds/design-contracts/components/toggle-group";
+export type ToggleGroupProps<Id extends string = string> = Readonly<{
+    descriptor: ToggleGroupDescriptor<Id>;
+    pressedIds?: ReadonlySet<Id>;
+    defaultPressedIds?: ReadonlySet<Id>;
+    onPressedIdsChange?: (ids: ReadonlySet<Id>) => void;
+    size?: ToggleGroupSize;
+    className?: string;
+}>;
+export declare const ToggleGroup: <Id extends string = string>(props: ToggleGroupProps<Id> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.ReactElement | null;
+//# sourceMappingURL=toggle-group.d.ts.map

package/dist/toggle-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../src/toggle-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,qBAAqB,EAC1B,KAAK,eAAe,EACrB,MAAM,iDAAiD,CAAC;AAIzD,MAAM,MAAM,gBAAgB,CAAC,EAAE,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CAAC;IAClE,UAAU,EAAE,qBAAqB,CAAC,EAAE,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,WAAW,CAAC,EAAE,CAAC,CAAC;IAC7B,iBAAiB,CAAC,EAAE,WAAW,CAAC,EAAE,CAAC,CAAC;IACpC,kBAAkB,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IACpD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW,EAoDlB,CAAC,EAAE,SAAS,MAAM,GAAG,MAAM,EAC/B,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KAC9D,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC"}

package/dist/toggle-group.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { reconcileToggleGroupSelection, toggleGroupRecipe, toggleGroupSelection, validateToggleGroupDescriptor, } from "@hjmds/design-contracts/components/toggle-group";
+import { forwardRef, useMemo } from "react";
+import { classNames, useControllableState } from "./internal.js";
+export const ToggleGroup = forwardRef(function ToggleGroup({ descriptor, pressedIds: controlledPressed, defaultPressedIds, onPressedIdsChange, size = toggleGroupRecipe.defaults.size, className, }, forwardedRef) {
+    validateToggleGroupDescriptor(descriptor);
+    const [rawPressed, setPressed] = useControllableState({
+        ...(controlledPressed === undefined ? {} : { value: controlledPressed }),
+        defaultValue: defaultPressedIds ?? new Set(),
+        ...(onPressedIdsChange === undefined ? {} : { onChange: onPressedIdsChange }),
+    });
+    const pressed = useMemo(() => reconcileToggleGroupSelection(descriptor, rawPressed), [descriptor, rawPressed]);
+    const metrics = toggleGroupRecipe.sizes[size];
+    return (_jsx("div", { ref: forwardedRef, role: "group", "aria-label": descriptor.accessibilityLabel, className: classNames("hjm-toggle-group", className), "data-size": size, style: {
+            "--hjm-toggle-min-height": `${metrics.minHeight}px`,
+            "--hjm-toggle-padding": `${metrics.paddingHorizontal}px`,
+            "--hjm-toggle-gap": `${toggleGroupRecipe.gap}px`,
+            "--hjm-toggle-radius": `${toggleGroupRecipe.radius}px`,
+        }, children: descriptor.items.map((item) => (_jsx("button", { type: "button", "aria-pressed": pressed.has(item.id), "aria-disabled": item.disabled || undefined, disabled: item.disabled, className: "hjm-toggle-group__item", onClick: () => setPressed(toggleGroupSelection(descriptor, pressed, item.id)), children: item.label }, item.id))) }));
+});
+//# sourceMappingURL=toggle-group.js.map

package/dist/toggle-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.js","sourceRoot":"","sources":["../src/toggle-group.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,6BAA6B,EAC7B,iBAAiB,EACjB,oBAAoB,EACpB,6BAA6B,GAG9B,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,OAAO,EAAsB,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAWjE,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CAAC,SAAS,WAAW,CACxD,EACE,UAAU,EACV,UAAU,EAAE,iBAAiB,EAC7B,iBAAiB,EACjB,kBAAkB,EAClB,IAAI,GAAG,iBAAiB,CAAC,QAAQ,CAAC,IAAI,EACtC,SAAS,GACY,EACvB,YAAuC;IAEvC,6BAA6B,CAAC,UAAU,CAAC,CAAC;IAC1C,MAAM,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,oBAAoB,CAAkB;QACrE,GAAG,CAAC,iBAAiB,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC;QACxE,YAAY,EAAE,iBAAiB,IAAI,IAAI,GAAG,EAAM;QAChD,GAAG,CAAC,kBAAkB,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,kBAAkB,EAAE,CAAC;KAC9E,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,6BAA6B,CAAC,UAAU,EAAE,UAAU,CAAC,EAC3D,CAAC,UAAU,EAAE,UAAU,CAAC,CACzB,CAAC;IACF,MAAM,OAAO,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC9C,OAAO,CACL,cACE,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,OAAO,gBACA,UAAU,CAAC,kBAAkB,EACzC,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,eACzC,IAAI,EACf,KAAK,EAAE;YACL,yBAAyB,EAAE,GAAG,OAAO,CAAC,SAAS,IAAI;YACnD,sBAAsB,EAAE,GAAG,OAAO,CAAC,iBAAiB,IAAI;YACxD,kBAAkB,EAAE,GAAG,iBAAiB,CAAC,GAAG,IAAI;YAChD,qBAAqB,EAAE,GAAG,iBAAiB,CAAC,MAAM,IAAI;SACtC,YAEjB,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC9B,iBAEE,IAAI,EAAC,QAAQ,kBAEC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,mBACnB,IAAI,CAAC,QAAQ,IAAI,SAAS,EACzC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAC,wBAAwB,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,oBAAoB,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,YAE5E,IAAI,CAAC,KAAK,IATN,IAAI,CAAC,EAAE,CAUL,CACV,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAE6B,CAAC","sourcesContent":["import {\n  reconcileToggleGroupSelection,\n  toggleGroupRecipe,\n  toggleGroupSelection,\n  validateToggleGroupDescriptor,\n  type ToggleGroupDescriptor,\n  type ToggleGroupSize,\n} from \"@hjmds/design-contracts/components/toggle-group\";\nimport { forwardRef, useMemo, type CSSProperties } from \"react\";\nimport { classNames, useControllableState } from \"./internal.js\";\n\nexport type ToggleGroupProps<Id extends string = string> = Readonly<{\n  descriptor: ToggleGroupDescriptor<Id>;\n  pressedIds?: ReadonlySet<Id>;\n  defaultPressedIds?: ReadonlySet<Id>;\n  onPressedIdsChange?: (ids: ReadonlySet<Id>) => void;\n  size?: ToggleGroupSize;\n  className?: string;\n}>;\n\nexport const ToggleGroup = forwardRef(function ToggleGroup<Id extends string = string>(\n  {\n    descriptor,\n    pressedIds: controlledPressed,\n    defaultPressedIds,\n    onPressedIdsChange,\n    size = toggleGroupRecipe.defaults.size,\n    className,\n  }: ToggleGroupProps<Id>,\n  forwardedRef: React.Ref<HTMLDivElement>,\n) {\n  validateToggleGroupDescriptor(descriptor);\n  const [rawPressed, setPressed] = useControllableState<ReadonlySet<Id>>({\n    ...(controlledPressed === undefined ? {} : { value: controlledPressed }),\n    defaultValue: defaultPressedIds ?? new Set<Id>(),\n    ...(onPressedIdsChange === undefined ? {} : { onChange: onPressedIdsChange }),\n  });\n  const pressed = useMemo(\n    () => reconcileToggleGroupSelection(descriptor, rawPressed),\n    [descriptor, rawPressed],\n  );\n  const metrics = toggleGroupRecipe.sizes[size];\n  return (\n    <div\n      ref={forwardedRef}\n      role=\"group\"\n      aria-label={descriptor.accessibilityLabel}\n      className={classNames(\"hjm-toggle-group\", className)}\n      data-size={size}\n      style={{\n        \"--hjm-toggle-min-height\": `${metrics.minHeight}px`,\n        \"--hjm-toggle-padding\": `${metrics.paddingHorizontal}px`,\n        \"--hjm-toggle-gap\": `${toggleGroupRecipe.gap}px`,\n        \"--hjm-toggle-radius\": `${toggleGroupRecipe.radius}px`,\n      } as CSSProperties}\n    >\n      {descriptor.items.map((item) => (\n        <button\n          key={item.id}\n          type=\"button\"\n          // The pressed state rides on aria-pressed, never on color alone.\n          aria-pressed={pressed.has(item.id)}\n          aria-disabled={item.disabled || undefined}\n          disabled={item.disabled}\n          className=\"hjm-toggle-group__item\"\n          onClick={() => setPressed(toggleGroupSelection(descriptor, pressed, item.id))}\n        >\n          {item.label}\n        </button>\n      ))}\n    </div>\n  );\n}) as <Id extends string = string>(\n  props: ToggleGroupProps<Id> & { ref?: React.Ref<HTMLDivElement> },\n) => React.ReactElement | null;\n"]}

package/dist/top-bar.d.ts

@@ -0,0 +1,27 @@
+import { type HTMLAttributes, type MouseEventHandler, type ReactNode } from "react";
+export type TopBarProps = Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> & Readonly<{
+    title?: string;
+    titleLeading?: ReactNode;
+    onTitleClick?: MouseEventHandler<HTMLButtonElement>;
+    titleAccessibilityLabel?: string;
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    actions?: ReactNode;
+    centered?: boolean;
+    safeAreaTop?: number;
+}>;
+/** Screen chrome stays composable inside pages and dialogs, without adding a second banner landmark. */
+export declare const TopBar: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> & Readonly<{
+    title?: string;
+    titleLeading?: ReactNode;
+    onTitleClick?: MouseEventHandler<HTMLButtonElement>;
+    titleAccessibilityLabel?: string;
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    actions?: ReactNode;
+    centered?: boolean;
+    safeAreaTop?: number;
+}> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=top-bar.d.ts.map

package/dist/top-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../src/top-bar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkC,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKpH,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG,QAAQ,CAAC;IAC9F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AAEH,wGAAwG;AACxG,eAAO,MAAM,MAAM;YAbT,MAAM;mBACC,SAAS;mBACT,iBAAiB,CAAC,iBAAiB,CAAC;8BACzB,MAAM;mBACjB,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;cAC1B,SAAS;eACR,SAAS;cACV,SAAS;eACR,OAAO;kBACJ,MAAM;mDAmCpB,CAAC"}

package/dist/top-bar.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { topBarRecipe } from "@hjmds/design-contracts/recipes";
+import { forwardRef } from "react";
+import { Button } from "./actions.js";
+import { classNames } from "./internal.js";
+import { useOptionalHjmTheme } from "./provider.js";
+/** Screen chrome stays composable inside pages and dialogs, without adding a second banner landmark. */
+export const TopBar = forwardRef(function TopBar({ title, titleLeading, onTitleClick, titleAccessibilityLabel, headingLevel = 1, leading, trailing, actions, centered = topBarRecipe.defaults.centered, safeAreaTop = 0, className, style, ...props }, ref) {
+    const theme = useOptionalHjmTheme();
+    if (!Number.isFinite(safeAreaTop) || safeAreaTop < 0)
+        throw new RangeError("TopBar safeAreaTop must be non-negative");
+    if (title !== undefined && !title.trim())
+        throw new TypeError("TopBar title must not be empty");
+    if (titleAccessibilityLabel !== undefined && !titleAccessibilityLabel.trim())
+        throw new TypeError("TopBar titleAccessibilityLabel must not be empty");
+    if (actions !== undefined && trailing !== undefined)
+        throw new TypeError("TopBar accepts either trailing or actions");
+    if (title === undefined && (titleLeading !== undefined || onTitleClick !== undefined || titleAccessibilityLabel !== undefined)) {
+        throw new TypeError("TopBar title affordances require a title");
+    }
+    const Heading = `h${headingLevel}`;
+    return _jsxs("div", { ...props, ref: ref, className: classNames("hjm-top-bar", className), "data-centered": centered, "data-large-text": (theme?.environment.textScale ?? 1) >= topBarRecipe.largeTextThreshold, style: {
+            "--hjm-top-bar-min-height": `${topBarRecipe.minHeight}px`,
+            "--hjm-top-bar-padding": `${topBarRecipe.paddingHorizontal}px`,
+            "--hjm-top-bar-gap": `${topBarRecipe.gap}px`,
+            "--hjm-top-bar-safe-area": `${safeAreaTop}px`, ...style,
+        }, children: [_jsx("div", { className: "hjm-top-bar__leading", children: leading }), _jsx("div", { className: "hjm-top-bar__title", children: title === undefined ? null : _jsx(Heading, { className: "hjm-top-bar__heading", children: onTitleClick ? _jsx(Button, { tone: "ghost", onClick: onTitleClick, "aria-label": titleAccessibilityLabel, leading: titleLeading, children: title })
+                        : _jsxs("span", { "aria-label": titleAccessibilityLabel, children: [titleLeading, title] }) }) }), _jsx("div", { className: "hjm-top-bar__trailing", children: actions ?? trailing })] });
+});
+//# sourceMappingURL=top-bar.js.map

package/dist/top-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-bar.js","sourceRoot":"","sources":["../src/top-bar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAmF,MAAM,OAAO,CAAC;AACpH,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAepD,wGAAwG;AACxG,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAA8B,SAAS,MAAM,CAAC,EAC5E,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,uBAAuB,EAAE,YAAY,GAAG,CAAC,EAC5E,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,GAAG,YAAY,CAAC,QAAQ,CAAC,QAAQ,EAAE,WAAW,GAAG,CAAC,EACtF,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAC3B,EAAE,GAAG;IACJ,MAAM,KAAK,GAAG,mBAAmB,EAAE,CAAC;IACpC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,WAAW,GAAG,CAAC;QAAE,MAAM,IAAI,UAAU,CAAC,yCAAyC,CAAC,CAAC;IACtH,IAAI,KAAK,KAAK,SAAS,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;QAAE,MAAM,IAAI,SAAS,CAAC,gCAAgC,CAAC,CAAC;IAChG,IAAI,uBAAuB,KAAK,SAAS,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE;QAAE,MAAM,IAAI,SAAS,CAAC,kDAAkD,CAAC,CAAC;IACtJ,IAAI,OAAO,KAAK,SAAS,IAAI,QAAQ,KAAK,SAAS;QAAE,MAAM,IAAI,SAAS,CAAC,2CAA2C,CAAC,CAAC;IACtH,IAAI,KAAK,KAAK,SAAS,IAAI,CAAC,YAAY,KAAK,SAAS,IAAI,YAAY,KAAK,SAAS,IAAI,uBAAuB,KAAK,SAAS,CAAC,EAAE,CAAC;QAC/H,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;IAClE,CAAC;IACD,MAAM,OAAO,GAAG,IAAI,YAAY,EAA6C,CAAC;IAC9E,OAAO,kBAAS,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,mBAC/D,QAAQ,qBAAmB,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,YAAY,CAAC,kBAAkB,EAChH,KAAK,EAAE;YACL,0BAA0B,EAAE,GAAG,YAAY,CAAC,SAAS,IAAI;YACzD,uBAAuB,EAAE,GAAG,YAAY,CAAC,iBAAiB,IAAI;YAC9D,mBAAmB,EAAE,GAAG,YAAY,CAAC,GAAG,IAAI;YAC5C,yBAAyB,EAAE,GAAG,WAAW,IAAI,EAAE,GAAG,KAAK;SACvC,aAClB,cAAK,SAAS,EAAC,sBAAsB,YAAE,OAAO,GAAO,EACrD,cAAK,SAAS,EAAC,oBAAoB,YAChC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,SAAS,EAAC,sBAAsB,YACpE,YAAY,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,YAAY,gBAAc,uBAAuB,EAAE,OAAO,EAAE,YAAY,YAAG,KAAK,GAAU;wBACtI,CAAC,CAAC,8BAAkB,uBAAuB,aAAG,YAAY,EAAE,KAAK,IAAQ,GACnE,GACN,EACN,cAAK,SAAS,EAAC,uBAAuB,YAAE,OAAO,IAAI,QAAQ,GAAO,IAC9D,CAAC;AACT,CAAC,CAAC,CAAC","sourcesContent":["import { topBarRecipe } from \"@hjmds/design-contracts/recipes\";\nimport { forwardRef, type CSSProperties, type HTMLAttributes, type MouseEventHandler, type ReactNode } from \"react\";\nimport { Button } from \"./actions.js\";\nimport { classNames } from \"./internal.js\";\nimport { useOptionalHjmTheme } from \"./provider.js\";\n\nexport type TopBarProps = Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"children\"> & Readonly<{\n  title?: string;\n  titleLeading?: ReactNode;\n  onTitleClick?: MouseEventHandler<HTMLButtonElement>;\n  titleAccessibilityLabel?: string;\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  leading?: ReactNode;\n  trailing?: ReactNode;\n  actions?: ReactNode;\n  centered?: boolean;\n  safeAreaTop?: number;\n}>;\n\n/** Screen chrome stays composable inside pages and dialogs, without adding a second banner landmark. */\nexport const TopBar = forwardRef<HTMLDivElement, TopBarProps>(function TopBar({\n  title, titleLeading, onTitleClick, titleAccessibilityLabel, headingLevel = 1,\n  leading, trailing, actions, centered = topBarRecipe.defaults.centered, safeAreaTop = 0,\n  className, style, ...props\n}, ref) {\n  const theme = useOptionalHjmTheme();\n  if (!Number.isFinite(safeAreaTop) || safeAreaTop < 0) throw new RangeError(\"TopBar safeAreaTop must be non-negative\");\n  if (title !== undefined && !title.trim()) throw new TypeError(\"TopBar title must not be empty\");\n  if (titleAccessibilityLabel !== undefined && !titleAccessibilityLabel.trim()) throw new TypeError(\"TopBar titleAccessibilityLabel must not be empty\");\n  if (actions !== undefined && trailing !== undefined) throw new TypeError(\"TopBar accepts either trailing or actions\");\n  if (title === undefined && (titleLeading !== undefined || onTitleClick !== undefined || titleAccessibilityLabel !== undefined)) {\n    throw new TypeError(\"TopBar title affordances require a title\");\n  }\n  const Heading = `h${headingLevel}` as \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  return <div {...props} ref={ref} className={classNames(\"hjm-top-bar\", className)}\n    data-centered={centered} data-large-text={(theme?.environment.textScale ?? 1) >= topBarRecipe.largeTextThreshold}\n    style={{\n      \"--hjm-top-bar-min-height\": `${topBarRecipe.minHeight}px`,\n      \"--hjm-top-bar-padding\": `${topBarRecipe.paddingHorizontal}px`,\n      \"--hjm-top-bar-gap\": `${topBarRecipe.gap}px`,\n      \"--hjm-top-bar-safe-area\": `${safeAreaTop}px`, ...style,\n    } as CSSProperties}>\n    <div className=\"hjm-top-bar__leading\">{leading}</div>\n    <div className=\"hjm-top-bar__title\">\n      {title === undefined ? null : <Heading className=\"hjm-top-bar__heading\">\n        {onTitleClick ? <Button tone=\"ghost\" onClick={onTitleClick} aria-label={titleAccessibilityLabel} leading={titleLeading}>{title}</Button>\n          : <span aria-label={titleAccessibilityLabel}>{titleLeading}{title}</span>}\n      </Heading>}\n    </div>\n    <div className=\"hjm-top-bar__trailing\">{actions ?? trailing}</div>\n  </div>;\n});\n"]}

package/dist/top.d.ts

@@ -0,0 +1,15 @@
+import { type TopDescriptor } from "@hjmds/design-contracts/components/top";
+import { type ReactNode } from "react";
+export type TopProps = Readonly<{
+    descriptor: TopDescriptor;
+    /** Secondary action sharing the title row; drops below it when space runs out. */
+    trailing?: ReactNode;
+    className?: string;
+}>;
+export declare const Top: import("react").ForwardRefExoticComponent<Readonly<{
+    descriptor: TopDescriptor;
+    /** Secondary action sharing the title row; drops below it when space runs out. */
+    trailing?: ReactNode;
+    className?: string;
+}> & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=top.d.ts.map

package/dist/top.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"top.d.ts","sourceRoot":"","sources":["../src/top.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,aAAa,EACnB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAiD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtF,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC;IAC9B,UAAU,EAAE,aAAa,CAAC;IAC1B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,GAAG;gBANF,aAAa;IACzB,kFAAkF;eACvE,SAAS;gBACR,MAAM;gDAoClB,CAAC"}

package/dist/top.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { topDefaults, topRecipe, validateTopDescriptor, } from "@hjmds/design-contracts/components/top";
+import { forwardRef, createElement } from "react";
+import { classNames } from "./internal.js";
+export const Top = forwardRef(function Top({ descriptor, trailing, className }, forwardedRef) {
+    validateTopDescriptor(descriptor);
+    const size = descriptor.size ?? topDefaults.size;
+    const level = descriptor.headingLevel ?? topDefaults.headingLevel;
+    const metrics = topRecipe.sizes[size];
+    return (_jsxs("header", { ref: forwardedRef, className: classNames("hjm-top", className), "data-size": size, style: {
+            "--hjm-top-title-size": `${metrics.title.fontSize}px`,
+            "--hjm-top-title-line-height": `${metrics.title.lineHeight}px`,
+            "--hjm-top-title-weight": metrics.title.fontWeight,
+            "--hjm-top-padding-top": `${metrics.paddingTop}px`,
+            "--hjm-top-padding-bottom": `${metrics.paddingBottom}px`,
+        }, children: [descriptor.eyebrow ? _jsx("p", { className: "hjm-top__eyebrow", children: descriptor.eyebrow }) : null, _jsxs("div", { className: "hjm-top__row", children: [createElement(`h${level}`, { className: "hjm-top__title" }, descriptor.title), trailing ? _jsx("div", { className: "hjm-top__trailing", children: trailing }) : null] }), descriptor.description ? _jsx("p", { className: "hjm-top__description", children: descriptor.description }) : null] }));
+});
+//# sourceMappingURL=top.js.map