@_linked/primitives 1.0.8 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @\_linked/primitives
 
+## 1.1.0
+
+### Minor Changes
+
+- [#11](https://github.com/linked-cm/primitives/pull/11) [`85deea9`](https://github.com/linked-cm/primitives/commit/85deea9406d9a5c655427d9302e015c334799691) Thanks [@flyon](https://github.com/flyon)! - Add the `Badge` primitive — badge, tag, chip and pill in one component, with the
+  variant and size vocabulary the rest of the library uses.
+
+  Also forwards `aria-label` and `aria-disabled` to the single thumb in `Slider`, so a
+  one-thumb slider is announced correctly by screen readers.
+
+## 1.0.9
+
+### Patch Changes
+
+- [#9](https://github.com/linked-cm/primitives/pull/9) [`780eaee`](https://github.com/linked-cm/primitives/commit/780eaee5a4bf1c17f21f3840996ad6cbc0caa63b) Thanks [@carlenmy](https://github.com/carlenmy)! - Allow labelled ToggleGroup items to expand to their content while preserving the existing square minimum for icon-only items. Add `--togglegroup-item-padding-x` so consumers can tune inline padding without overriding primitive geometry.
+
 ## 1.0.7
 
 ### Patch Changes

package/lib/cjs/components/Badge.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+/**
+ * Badge — a small status/metadata label (badge, tag, chip, pill).
+ *
+ * One primitive, many looks: every axis is an independent prop so surfaces can
+ * swap variation without new components —
+ *
+ *   variant  solid | soft | outline | ghost      fill strength
+ *   color    neutral | primary | success | warning | danger | info
+ *   size     small | medium | large
+ *   shape    pill | rounded
+ *   dot      leading status dot in the badge color
+ *   asChild  render as the child element (a link, a button) via Radix Slot,
+ *            so an interactive badge keeps real semantics and focus behavior
+ *
+ * Theming follows the library contract: the component consumes `--badge-*`
+ * variables with working fallbacks, so it renders sensibly out of the box and
+ * apps re-skin it from their theme without touching the component.
+ */
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    asChild?: boolean;
+    variant?: 'solid' | 'soft' | 'outline' | 'ghost';
+    color?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    size?: 'small' | 'medium' | 'large';
+    shape?: 'pill' | 'rounded';
+    /** Leading status dot in the badge color. */
+    dot?: boolean;
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export { Badge };

package/lib/cjs/components/Badge.js

@@ -0,0 +1,64 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = void 0;
+const React = __importStar(require("react"));
+const Badge_module_css_1 = __importDefault(require("./Badge.module.css"));
+const ClassNames_1 = require("@_linked/react/utils/ClassNames");
+const react_slot_1 = require("@radix-ui/react-slot");
+const Badge = React.forwardRef((_a, ref) => {
+    var { className, variant = 'soft', color = 'neutral', size = 'medium', shape = 'pill', dot = false, asChild = false, children } = _a, props = __rest(_a, ["className", "variant", "color", "size", "shape", "dot", "asChild", "children"]);
+    const Comp = asChild ? react_slot_1.Slot : 'span';
+    return (React.createElement(Comp, Object.assign({ className: (0, ClassNames_1.cl)(Badge_module_css_1.default.Root, Badge_module_css_1.default[variant], Badge_module_css_1.default[color], Badge_module_css_1.default[size], Badge_module_css_1.default[shape], className), ref: ref }, props), asChild ? (children) : (React.createElement(React.Fragment, null,
+        dot && React.createElement("span", { className: Badge_module_css_1.default.dot, "aria-hidden": true }),
+        children))));
+});
+exports.Badge = Badge;
+Badge.displayName = 'Badge';
+//# sourceMappingURL=Badge.js.map

package/lib/cjs/components/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,0EAAuC;AACvC,gEAAqD;AACrD,qDAA4C;AA8B5C,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,SAAS,EACT,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,MAAM,EACd,GAAG,GAAG,KAAK,EACX,OAAO,GAAG,KAAK,EACf,QAAQ,OAET,EADI,KAAK,cATV,gFAUC,CADS;IAIV,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAErC,OAAO,CACL,oBAAC,IAAI,kBACH,SAAS,EAAE,IAAA,eAAE,EACX,0BAAK,CAAC,IAAI,EACV,0BAAK,CAAC,OAAO,CAAC,EACd,0BAAK,CAAC,KAAK,CAAC,EACZ,0BAAK,CAAC,IAAI,CAAC,EACX,0BAAK,CAAC,KAAK,CAAC,EACZ,SAAS,CACV,EACD,GAAG,EAAE,GAAG,IACJ,KAAK,GAER,OAAO,CAAC,CAAC,CAAC,CACT,QAAQ,CACT,CAAC,CAAC,CAAC,CACF;QACG,GAAG,IAAI,8BAAM,SAAS,EAAE,0BAAK,CAAC,GAAG,wBAAgB;QACjD,QAAQ,CACR,CACJ,CACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAGO,sBAAK;AAFd,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/lib/cjs/components/Badge.module.css

@@ -0,0 +1,89 @@
+/* Badge — consumes `--badge-*` semantic variables with working fallbacks, so it
+   renders out of the box and apps re-skin it from their theme (same contract as
+   Button/Input: the component names the tokens, the app supplies them). */
+
+.Root {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  border: solid 1px transparent;
+  gap: var(--badge-gap, 0.3em);
+  font-family: var(--badge-font-family, inherit);
+  font-weight: var(--badge-font-weight, 500);
+  line-height: var(--badge-line-height, 1.2);
+
+  /* Per-color base; every visual below derives from this one custom property,
+     which is what keeps the variant × color matrix to two small class sets. */
+  --_badge-color: var(--badge-color-neutral, #64748b);
+}
+
+/* ── color ─────────────────────────────────────────────────────────────── */
+.neutral { --_badge-color: var(--badge-color-neutral, #64748b); }
+.primary { --_badge-color: var(--badge-color-primary, var(--primary, #4f46e5)); }
+.success { --_badge-color: var(--badge-color-success, #15803d); }
+.warning { --_badge-color: var(--badge-color-warning, #b45309); }
+.danger  { --_badge-color: var(--badge-color-danger, #b91c1c); }
+.info    { --_badge-color: var(--badge-color-info, #0369a1); }
+
+/* ── variant ───────────────────────────────────────────────────────────── */
+.solid {
+  background: var(--_badge-color);
+  color: var(--badge-solid-foreground, #fff);
+}
+.soft {
+  background: color-mix(in oklch, var(--_badge-color) 12%, transparent);
+  color: var(--_badge-color);
+}
+.outline {
+  border-color: color-mix(in oklch, var(--_badge-color) 45%, transparent);
+  color: var(--_badge-color);
+}
+.ghost {
+  color: var(--_badge-color);
+}
+
+/* ── size ──────────────────────────────────────────────────────────────── */
+.small {
+  font-size: var(--badge-font-size-sm, 0.6875rem);
+  padding: var(--badge-padding-y-sm, 0.0625rem) var(--badge-padding-x-sm, 0.375rem);
+}
+.medium {
+  font-size: var(--badge-font-size, 0.75rem);
+  padding: var(--badge-padding-y, 0.125rem) var(--badge-padding-x, 0.5rem);
+}
+.large {
+  font-size: var(--badge-font-size-lg, 0.8125rem);
+  padding: var(--badge-padding-y-lg, 0.1875rem) var(--badge-padding-x-lg, 0.625rem);
+}
+
+/* ── shape ─────────────────────────────────────────────────────────────── */
+.pill { border-radius: var(--badge-radius-pill, 999px); }
+.rounded { border-radius: var(--badge-radius, var(--control-radius, 0.375rem)); }
+
+/* ── dot ───────────────────────────────────────────────────────────────── */
+.dot {
+  width: 0.375em;
+  height: 0.375em;
+  border-radius: 999px;
+  background: currentColor;
+  flex: none;
+}
+
+/* Interactive badges (asChild over a link/button) get hover/focus affordance
+   without imposing it on static ones. */
+a.Root,
+button.Root {
+  cursor: pointer;
+  transition: var(--transition-fast, background-color 120ms ease);
+  text-decoration: none;
+}
+a.Root:hover,
+button.Root:hover {
+  filter: brightness(0.95);
+}
+a.Root:focus-visible,
+button.Root:focus-visible {
+  outline: 2px solid color-mix(in oklch, var(--_badge-color) 45%, transparent);
+  outline-offset: 1px;
+}

package/lib/cjs/components/Command.d.ts

@@ -27,7 +27,7 @@ declare const Input: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.D
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -53,7 +53,7 @@ declare const Group: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -71,7 +71,7 @@ declare const Item: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
@@ -108,7 +108,7 @@ export declare const Command: {
         ref?: React.Ref<HTMLInputElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+    }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
         value?: string;
         onValueChange?: (search: string) => void;
     } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -134,7 +134,7 @@ export declare const Command: {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
         heading?: React.ReactNode;
         value?: string;
         forceMount?: boolean;
@@ -145,7 +145,7 @@ export declare const Command: {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
         disabled?: boolean;
         onSelect?: (value: string) => void;
         value?: string;

package/lib/cjs/components/MultiSelect.d.ts

@@ -14,7 +14,7 @@ declare const Input: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.D
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -36,7 +36,7 @@ declare const Item: React.ForwardRefExoticComponent<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
@@ -53,7 +53,7 @@ export declare const MultiSelect: {
         ref?: React.Ref<HTMLInputElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+    }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
         value?: string;
         onValueChange?: (search: string) => void;
     } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -75,7 +75,7 @@ export declare const MultiSelect: {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
         disabled?: boolean;
         onSelect?: (value: string) => void;
         value?: string;

package/lib/cjs/components/Slider.js

@@ -67,11 +67,15 @@ exports.Range = Range;
 const Thumb = extend(SliderPrimitive.Thumb, Slider_module_css_1.default.Thumb);
 exports.Thumb = Thumb;
 const Root = React.forwardRef((_a, ref) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement(SliderPrimitive.Root, Object.assign({ ref: ref, className: (0, ClassNames_1.cl)(Slider_module_css_1.default.Root, className) }, props),
+    var { className, 'aria-label': ariaLabel, 'aria-disabled': ariaDisabled } = _a, props = __rest(_a, ["className", 'aria-label', 'aria-disabled']);
+    return (
+    // Self-contained single-thumb slider. Forward the accessible name / disabled
+    // state to the actual `role="slider"` element (the Thumb) rather than the Root,
+    // so `getByRole('slider', { name })` and assistive tech can address the control.
+    React.createElement(SliderPrimitive.Root, Object.assign({ ref: ref, className: (0, ClassNames_1.cl)(Slider_module_css_1.default.Root, className) }, props),
         React.createElement(Track, null,
             React.createElement(Range, null)),
-        React.createElement(Thumb, null)));
+        React.createElement(Thumb, { "aria-label": ariaLabel, "aria-disabled": ariaDisabled })));
 });
 exports.Root = Root;
 Root.displayName = SliderPrimitive.Root.displayName;

package/lib/cjs/components/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,4EAAwC;AACxC,gEAAqD;AAErD,wEAA0D;AAE1D,SAAS,MAAM,CACb,SAAY,EACZ,aAAqB;IAErB,IAAI,QAAQ,GAAG,KAAK,CAAC,UAAU,CAG7B,CAAC,EAAuB,EAAE,GAAG,EAAE,EAAE;YAAhC,EAAE,SAAS,OAAY,EAAP,KAAK,cAArB,aAAuB,CAAF;QACtB,OAAA,KAAK,CAAC,aAAa,CAAC,SAAS,kBAC3B,GAAG,EACH,SAAS,EAAE,IAAA,eAAE,EAAC,aAAa,EAAE,SAAS,CAAC,IACpC,KAAK,EACR,CAAA;KAAA,CACH,CAAC;IACF,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAC,WAAW,CAAC;IAC7C,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,2BAAK,CAAC,KAAK,CAAC,CAAC;AA4B1C,sBAAK;AA3BpB,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,2BAAK,CAAC,KAAK,CAAC,CAAC;AA2BnC,sBAAK;AA1B3B,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,2BAAK,CAAC,KAAK,CAAC,CAAC;AA0B5B,sBAAK;AAxBlC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAG3B,CAAC,EAAuB,EAAE,GAAG,EAAE,EAAE;QAAhC,EAAE,SAAS,OAAY,EAAP,KAAK,cAArB,aAAuB,CAAF;IAAY,OAAA,CAClC,oBAAC,eAAe,CAAC,IAAI,kBACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,eAAE,EAAC,2BAAK,CAAC,IAAI,EAAE,SAAS,CAAC,IAChC,KAAK;QAET,oBAAC,KAAK;YACJ,oBAAC,KAAK,OAAG,CACH;QACR,oBAAC,KAAK,OAAG,CACY,CACxB,CAAA;CAAA,CAAC,CAAC;AAUM,oBAAI;AATb,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC;AAEvC,QAAA,MAAM,GAAG;IACpB,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;CACN,CAAC"}
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,4EAAwC;AACxC,gEAAqD;AAErD,wEAA0D;AAE1D,SAAS,MAAM,CACb,SAAY,EACZ,aAAqB;IAErB,IAAI,QAAQ,GAAG,KAAK,CAAC,UAAU,CAG7B,CAAC,EAAuB,EAAE,GAAG,EAAE,EAAE;YAAhC,EAAE,SAAS,OAAY,EAAP,KAAK,cAArB,aAAuB,CAAF;QACtB,OAAA,KAAK,CAAC,aAAa,CAAC,SAAS,kBAC3B,GAAG,EACH,SAAS,EAAE,IAAA,eAAE,EAAC,aAAa,EAAE,SAAS,CAAC,IACpC,KAAK,EACR,CAAA;KAAA,CACH,CAAC;IACF,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAC,WAAW,CAAC;IAC7C,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,2BAAK,CAAC,KAAK,CAAC,CAAC;AA+B1C,sBAAK;AA9BpB,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,2BAAK,CAAC,KAAK,CAAC,CAAC;AA8BnC,sBAAK;AA7B3B,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,2BAAK,CAAC,KAAK,CAAC,CAAC;AA6B5B,sBAAK;AA3BlC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAG3B,CAAC,EAA+E,EAAE,GAAG,EAAE,EAAE;QAAxF,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,YAAY,OAAY,EAAP,KAAK,cAA7E,4CAA+E,CAAF;IAAY,OAAA;IAC1F,6EAA6E;IAC7E,gFAAgF;IAChF,iFAAiF;IACjF,oBAAC,eAAe,CAAC,IAAI,kBACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,eAAE,EAAC,2BAAK,CAAC,IAAI,EAAE,SAAS,CAAC,IAChC,KAAK;QAET,oBAAC,KAAK;YACJ,oBAAC,KAAK,OAAG,CACH;QACR,oBAAC,KAAK,kBAAa,SAAS,mBAAiB,YAAY,GAAI,CACxC,CACxB,CAAA;CAAA,CAAC,CAAC;AAUM,oBAAI;AATb,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC;AAEvC,QAAA,MAAM,GAAG;IACpB,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;CACN,CAAC"}

package/lib/cjs/components/ToggleGroup.module.css

@@ -11,8 +11,11 @@
 .Item {
   background-color: var(--togglegroup-item-bg, var(--control-bg));
   color: var(--togglegroup-item-text, var(--control-text));
-  height: var(--togglegroup-item-size, var(--control-toggle-size));
-  width: var(--togglegroup-item-size, var(--control-toggle-size));
+  box-sizing: border-box;
+  block-size: var(--togglegroup-item-size, var(--control-toggle-size));
+  inline-size: auto;
+  min-inline-size: var(--togglegroup-item-size, var(--control-toggle-size));
+  padding-inline: var(--togglegroup-item-padding-x, --spacing(2));
   display: flex;
   font-size: var(--togglegroup-item-font-size, var(--typography-small-size));
   line-height: var(

package/lib/cjs/index.d.ts

@@ -1,6 +1,7 @@
 import './theme.css';
 import './types.js';
 import './ontologies/primitives.js';
+import './components/Badge.js';
 import './components/Button.js';
 import './components/Input.js';
 import './components/Tabs.js';

package/lib/cjs/index.js

@@ -6,6 +6,7 @@ require("./ontologies/primitives.js");
 //SHAPES FIRST
 // import './shapes/YourShape.js';
 //THEN COMPONENTS
+require("./components/Badge.js");
 require("./components/Button.js");
 require("./components/Input.js");
 require("./components/Tabs.js");

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;AAAA,uBAAqB;AACrB,sBAAoB;AACpB,sCAAoC;AAEpC,cAAc;AACd,kCAAkC;AAElC,iBAAiB;AACjB,kCAAgC;AAChC,iCAA+B;AAC/B,gCAA8B;AAC9B,kCAAgC;AAChC,oCAAkC;AAClC,sCAAoC;AACpC,kCAAgC;AAChC,iCAA+B;AAC/B,qCAAmC;AACnC,kCAAgC;AAChC,uCAAqC;AACrC,oCAAkC;AAClC,qCAAmC;AACnC,qCAAmC;AACnC,uCAAqC;AACrC,sCAAoC;AACpC,gCAA8B;AAC9B,mCAAiC;AACjC,uCAAqC;AACrC,kCAAgC;AAChC,sCAAoC;AACpC,mCAAiC;AACjC,mCAAiC;AACjC,kCAAgC;AAChC,uCAAqC;AACrC,kCAAgC;AAChC,iCAA+B;AAC/B,mCAAiC;AACjC,oCAAkC;AAClC,0CAAwC;AACxC,mCAAiC;AACjC,uCAAqC;AACrC,mCAAiC;AACjC,sCAAoC;AACpC,kCAAgC;AAChC,sCAAoC;AACpC,wCAAsC;AACtC,uCAAqC;AACrC,gCAA8B;AAC9B,mCAAiC;AACjC,0CAAwC;AAExC,gCAA8B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;AAAA,uBAAqB;AACrB,sBAAoB;AACpB,sCAAoC;AAEpC,cAAc;AACd,kCAAkC;AAElC,iBAAiB;AACjB,iCAA+B;AAC/B,kCAAgC;AAChC,iCAA+B;AAC/B,gCAA8B;AAC9B,kCAAgC;AAChC,oCAAkC;AAClC,sCAAoC;AACpC,kCAAgC;AAChC,iCAA+B;AAC/B,qCAAmC;AACnC,kCAAgC;AAChC,uCAAqC;AACrC,oCAAkC;AAClC,qCAAmC;AACnC,qCAAmC;AACnC,uCAAqC;AACrC,sCAAoC;AACpC,gCAA8B;AAC9B,mCAAiC;AACjC,uCAAqC;AACrC,kCAAgC;AAChC,sCAAoC;AACpC,mCAAiC;AACjC,mCAAiC;AACjC,kCAAgC;AAChC,uCAAqC;AACrC,kCAAgC;AAChC,iCAA+B;AAC/B,mCAAiC;AACjC,oCAAkC;AAClC,0CAAwC;AACxC,mCAAiC;AACjC,uCAAqC;AACrC,mCAAiC;AACjC,sCAAoC;AACpC,kCAAgC;AAChC,sCAAoC;AACpC,wCAAsC;AACtC,uCAAqC;AACrC,gCAA8B;AAC9B,mCAAiC;AACjC,0CAAwC;AAExC,gCAA8B"}

package/lib/cjs/package.json

@@ -10,11 +10,12 @@
     "type": "git",
     "url": ""
   },
-  "version": "1.0.8",
+  "version": "1.1.0",
   "linkedPackage": true,
   "license": "ISC",
   "scripts": {
     "start": "npm exec linked dev",
+    "test": "node --test test/*.test.mjs",
     "build": "rimraf ./lib && yarn build-esm && yarn build-cjs && yarn copy-to-lib && yarn dual-package",
     "build-esm": "echo \"compiling ESM\" && rimraf ./lib/esm && yarn tsc -p tsconfig-esm.json",
     "build-cjs": "echo \"compiling CJS\" && rimraf ./lib/cjs && yarn tsc -p tsconfig-cjs.json",

package/lib/esm/components/Badge.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+/**
+ * Badge — a small status/metadata label (badge, tag, chip, pill).
+ *
+ * One primitive, many looks: every axis is an independent prop so surfaces can
+ * swap variation without new components —
+ *
+ *   variant  solid | soft | outline | ghost      fill strength
+ *   color    neutral | primary | success | warning | danger | info
+ *   size     small | medium | large
+ *   shape    pill | rounded
+ *   dot      leading status dot in the badge color
+ *   asChild  render as the child element (a link, a button) via Radix Slot,
+ *            so an interactive badge keeps real semantics and focus behavior
+ *
+ * Theming follows the library contract: the component consumes `--badge-*`
+ * variables with working fallbacks, so it renders sensibly out of the box and
+ * apps re-skin it from their theme without touching the component.
+ */
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    asChild?: boolean;
+    variant?: 'solid' | 'soft' | 'outline' | 'ghost';
+    color?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    size?: 'small' | 'medium' | 'large';
+    shape?: 'pill' | 'rounded';
+    /** Leading status dot in the badge color. */
+    dot?: boolean;
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export { Badge };

package/lib/esm/components/Badge.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import style from './Badge.module.css';
+import { cl } from '@_linked/react/utils/ClassNames';
+import { Slot } from '@radix-ui/react-slot';
+const Badge = React.forwardRef(({ className, variant = 'soft', color = 'neutral', size = 'medium', shape = 'pill', dot = false, asChild = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'span';
+    return (React.createElement(Comp, { className: cl(style.Root, style[variant], style[color], style[size], style[shape], className), ref: ref, ...props }, asChild ? (children) : (React.createElement(React.Fragment, null,
+        dot && React.createElement("span", { className: style.dot, "aria-hidden": true }),
+        children))));
+});
+Badge.displayName = 'Badge';
+export { Badge };
+//# sourceMappingURL=Badge.js.map

package/lib/esm/components/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AA8B5C,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,EACE,SAAS,EACT,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,MAAM,EACd,GAAG,GAAG,KAAK,EACX,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAErC,OAAO,CACL,oBAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,IAAI,EACV,KAAK,CAAC,OAAO,CAAC,EACd,KAAK,CAAC,KAAK,CAAC,EACZ,KAAK,CAAC,IAAI,CAAC,EACX,KAAK,CAAC,KAAK,CAAC,EACZ,SAAS,CACV,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,IAER,OAAO,CAAC,CAAC,CAAC,CACT,QAAQ,CACT,CAAC,CAAC,CAAC,CACF;QACG,GAAG,IAAI,8BAAM,SAAS,EAAE,KAAK,CAAC,GAAG,wBAAgB;QACjD,QAAQ,CACR,CACJ,CACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/lib/esm/components/Badge.module.css

@@ -0,0 +1,89 @@
+/* Badge — consumes `--badge-*` semantic variables with working fallbacks, so it
+   renders out of the box and apps re-skin it from their theme (same contract as
+   Button/Input: the component names the tokens, the app supplies them). */
+
+.Root {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  border: solid 1px transparent;
+  gap: var(--badge-gap, 0.3em);
+  font-family: var(--badge-font-family, inherit);
+  font-weight: var(--badge-font-weight, 500);
+  line-height: var(--badge-line-height, 1.2);
+
+  /* Per-color base; every visual below derives from this one custom property,
+     which is what keeps the variant × color matrix to two small class sets. */
+  --_badge-color: var(--badge-color-neutral, #64748b);
+}
+
+/* ── color ─────────────────────────────────────────────────────────────── */
+.neutral { --_badge-color: var(--badge-color-neutral, #64748b); }
+.primary { --_badge-color: var(--badge-color-primary, var(--primary, #4f46e5)); }
+.success { --_badge-color: var(--badge-color-success, #15803d); }
+.warning { --_badge-color: var(--badge-color-warning, #b45309); }
+.danger  { --_badge-color: var(--badge-color-danger, #b91c1c); }
+.info    { --_badge-color: var(--badge-color-info, #0369a1); }
+
+/* ── variant ───────────────────────────────────────────────────────────── */
+.solid {
+  background: var(--_badge-color);
+  color: var(--badge-solid-foreground, #fff);
+}
+.soft {
+  background: color-mix(in oklch, var(--_badge-color) 12%, transparent);
+  color: var(--_badge-color);
+}
+.outline {
+  border-color: color-mix(in oklch, var(--_badge-color) 45%, transparent);
+  color: var(--_badge-color);
+}
+.ghost {
+  color: var(--_badge-color);
+}
+
+/* ── size ──────────────────────────────────────────────────────────────── */
+.small {
+  font-size: var(--badge-font-size-sm, 0.6875rem);
+  padding: var(--badge-padding-y-sm, 0.0625rem) var(--badge-padding-x-sm, 0.375rem);
+}
+.medium {
+  font-size: var(--badge-font-size, 0.75rem);
+  padding: var(--badge-padding-y, 0.125rem) var(--badge-padding-x, 0.5rem);
+}
+.large {
+  font-size: var(--badge-font-size-lg, 0.8125rem);
+  padding: var(--badge-padding-y-lg, 0.1875rem) var(--badge-padding-x-lg, 0.625rem);
+}
+
+/* ── shape ─────────────────────────────────────────────────────────────── */
+.pill { border-radius: var(--badge-radius-pill, 999px); }
+.rounded { border-radius: var(--badge-radius, var(--control-radius, 0.375rem)); }
+
+/* ── dot ───────────────────────────────────────────────────────────────── */
+.dot {
+  width: 0.375em;
+  height: 0.375em;
+  border-radius: 999px;
+  background: currentColor;
+  flex: none;
+}
+
+/* Interactive badges (asChild over a link/button) get hover/focus affordance
+   without imposing it on static ones. */
+a.Root,
+button.Root {
+  cursor: pointer;
+  transition: var(--transition-fast, background-color 120ms ease);
+  text-decoration: none;
+}
+a.Root:hover,
+button.Root:hover {
+  filter: brightness(0.95);
+}
+a.Root:focus-visible,
+button.Root:focus-visible {
+  outline: 2px solid color-mix(in oklch, var(--_badge-color) 45%, transparent);
+  outline-offset: 1px;
+}

package/lib/esm/components/Command.d.ts

@@ -27,7 +27,7 @@ declare const Input: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.D
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -53,7 +53,7 @@ declare const Group: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -71,7 +71,7 @@ declare const Item: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
@@ -108,7 +108,7 @@ export declare const Command: {
         ref?: React.Ref<HTMLInputElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+    }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
         value?: string;
         onValueChange?: (search: string) => void;
     } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -134,7 +134,7 @@ export declare const Command: {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
         heading?: React.ReactNode;
         value?: string;
         forceMount?: boolean;
@@ -145,7 +145,7 @@ export declare const Command: {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
         disabled?: boolean;
         onSelect?: (value: string) => void;
         value?: string;

package/lib/esm/components/MultiSelect.d.ts

@@ -14,7 +14,7 @@ declare const Input: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.D
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -36,7 +36,7 @@ declare const Item: React.ForwardRefExoticComponent<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
@@ -53,7 +53,7 @@ export declare const MultiSelect: {
         ref?: React.Ref<HTMLInputElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+    }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
         value?: string;
         onValueChange?: (search: string) => void;
     } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -75,7 +75,7 @@ export declare const MultiSelect: {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
         disabled?: boolean;
         onSelect?: (value: string) => void;
         value?: string;

package/lib/esm/components/Slider.js

@@ -14,10 +14,14 @@ function extend(Component, baseClassName) {
 const Track = extend(SliderPrimitive.Track, style.Track);
 const Range = extend(SliderPrimitive.Range, style.Range);
 const Thumb = extend(SliderPrimitive.Thumb, style.Thumb);
-const Root = React.forwardRef(({ className, ...props }, ref) => (React.createElement(SliderPrimitive.Root, { ref: ref, className: cl(style.Root, className), ...props },
+const Root = React.forwardRef(({ className, 'aria-label': ariaLabel, 'aria-disabled': ariaDisabled, ...props }, ref) => (
+// Self-contained single-thumb slider. Forward the accessible name / disabled
+// state to the actual `role="slider"` element (the Thumb) rather than the Root,
+// so `getByRole('slider', { name })` and assistive tech can address the control.
+React.createElement(SliderPrimitive.Root, { ref: ref, className: cl(style.Root, className), ...props },
     React.createElement(Track, null,
         React.createElement(Range, null)),
-    React.createElement(Thumb, null))));
+    React.createElement(Thumb, { "aria-label": ariaLabel, "aria-disabled": ariaDisabled }))));
 Root.displayName = SliderPrimitive.Root.displayName;
 export const Slider = {
     Root,

package/lib/esm/components/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AAErD,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,SAAS,MAAM,CACb,SAAY,EACZ,aAAqB;IAErB,IAAI,QAAQ,GAAG,KAAK,CAAC,UAAU,CAG7B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CACjC,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;QAC7B,GAAG;QACH,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC;QACvC,GAAG,KAAK;KACT,CAAC,CACH,CAAC;IACF,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAC,WAAW,CAAC;IAC7C,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AACzD,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AACzD,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AAEzD,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAG3B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,oBAAC,eAAe,CAAC,IAAI,IACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,KAChC,KAAK;IAET,oBAAC,KAAK;QACJ,oBAAC,KAAK,OAAG,CACH;IACR,oBAAC,KAAK,OAAG,CACY,CACxB,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC;AAEpD,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;CACN,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AAErD,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,SAAS,MAAM,CACb,SAAY,EACZ,aAAqB;IAErB,IAAI,QAAQ,GAAG,KAAK,CAAC,UAAU,CAG7B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CACjC,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;QAC7B,GAAG;QACH,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC;QACvC,GAAG,KAAK;KACT,CAAC,CACH,CAAC;IACF,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAC,WAAW,CAAC;IAC7C,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AACzD,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AACzD,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AAEzD,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAG3B,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC;AAC1F,6EAA6E;AAC7E,gFAAgF;AAChF,iFAAiF;AACjF,oBAAC,eAAe,CAAC,IAAI,IACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,KAChC,KAAK;IAET,oBAAC,KAAK;QACJ,oBAAC,KAAK,OAAG,CACH;IACR,oBAAC,KAAK,kBAAa,SAAS,mBAAiB,YAAY,GAAI,CACxC,CACxB,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC;AAEpD,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;CACN,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC"}

package/lib/esm/components/ToggleGroup.module.css

@@ -11,8 +11,11 @@
 .Item {
   background-color: var(--togglegroup-item-bg, var(--control-bg));
   color: var(--togglegroup-item-text, var(--control-text));
-  height: var(--togglegroup-item-size, var(--control-toggle-size));
-  width: var(--togglegroup-item-size, var(--control-toggle-size));
+  box-sizing: border-box;
+  block-size: var(--togglegroup-item-size, var(--control-toggle-size));
+  inline-size: auto;
+  min-inline-size: var(--togglegroup-item-size, var(--control-toggle-size));
+  padding-inline: var(--togglegroup-item-padding-x, --spacing(2));
   display: flex;
   font-size: var(--togglegroup-item-font-size, var(--typography-small-size));
   line-height: var(

package/lib/esm/index.d.ts

@@ -1,6 +1,7 @@
 import './theme.css';
 import './types.js';
 import './ontologies/primitives.js';
+import './components/Badge.js';
 import './components/Button.js';
 import './components/Input.js';
 import './components/Tabs.js';

package/lib/esm/index.js

@@ -4,6 +4,7 @@ import './ontologies/primitives.js';
 //SHAPES FIRST
 // import './shapes/YourShape.js';
 //THEN COMPONENTS
+import './components/Badge.js';
 import './components/Button.js';
 import './components/Input.js';
 import './components/Tabs.js';

package/lib/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AACrB,OAAO,YAAY,CAAC;AACpB,OAAO,4BAA4B,CAAC;AAEpC,cAAc;AACd,kCAAkC;AAElC,iBAAiB;AACjB,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,yBAAyB,CAAC;AACjC,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,yBAAyB,CAAC;AACjC,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,yBAAyB,CAAC;AACjC,OAAO,0BAA0B,CAAC;AAClC,OAAO,gCAAgC,CAAC;AACxC,OAAO,yBAAyB,CAAC;AACjC,OAAO,6BAA6B,CAAC;AACrC,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,6BAA6B,CAAC;AACrC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,yBAAyB,CAAC;AACjC,OAAO,gCAAgC,CAAC;AAExC,OAAO,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AACrB,OAAO,YAAY,CAAC;AACpB,OAAO,4BAA4B,CAAC;AAEpC,cAAc;AACd,kCAAkC;AAElC,iBAAiB;AACjB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,yBAAyB,CAAC;AACjC,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,yBAAyB,CAAC;AACjC,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,yBAAyB,CAAC;AACjC,OAAO,0BAA0B,CAAC;AAClC,OAAO,gCAAgC,CAAC;AACxC,OAAO,yBAAyB,CAAC;AACjC,OAAO,6BAA6B,CAAC;AACrC,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,6BAA6B,CAAC;AACrC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,yBAAyB,CAAC;AACjC,OAAO,gCAAgC,CAAC;AAExC,OAAO,sBAAsB,CAAC"}

package/lib/esm/package.json

@@ -10,11 +10,12 @@
     "type": "git",
     "url": ""
   },
-  "version": "1.0.8",
+  "version": "1.1.0",
   "linkedPackage": true,
   "license": "ISC",
   "scripts": {
     "start": "npm exec linked dev",
+    "test": "node --test test/*.test.mjs",
     "build": "rimraf ./lib && yarn build-esm && yarn build-cjs && yarn copy-to-lib && yarn dual-package",
     "build-esm": "echo \"compiling ESM\" && rimraf ./lib/esm && yarn tsc -p tsconfig-esm.json",
     "build-cjs": "echo \"compiling CJS\" && rimraf ./lib/cjs && yarn tsc -p tsconfig-cjs.json",

package/package.json

@@ -10,12 +10,13 @@
     "type": "git",
     "url": ""
   },
-  "version": "1.0.8",
+  "version": "1.1.0",
   "linkedPackage": true,
   "main": "lib/cjs/index.js",
   "license": "ISC",
   "scripts": {
     "start": "npm exec linked dev",
+    "test": "node --test test/*.test.mjs",
     "build": "rimraf ./lib && yarn build-esm && yarn build-cjs && yarn copy-to-lib && yarn dual-package",
     "build-esm": "echo \"compiling ESM\" && rimraf ./lib/esm && yarn tsc -p tsconfig-esm.json",
     "build-cjs": "echo \"compiling CJS\" && rimraf ./lib/cjs && yarn tsc -p tsconfig-cjs.json",

package/test/toggle-group-css.test.mjs

@@ -0,0 +1,19 @@
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import test from 'node:test';
+
+const stylesheet = readFileSync(
+  new URL('../src/components/ToggleGroup.module.css', import.meta.url),
+  'utf8'
+);
+
+test('labelled toggle-group items expand while icon-only items retain a square minimum', () => {
+  assert.match(stylesheet, /block-size:\s*var\(--togglegroup-item-size/);
+  assert.match(stylesheet, /inline-size:\s*auto/);
+  assert.match(stylesheet, /min-inline-size:\s*var\(--togglegroup-item-size/);
+  assert.match(
+    stylesheet,
+    /padding-inline:\s*var\(--togglegroup-item-padding-x,\s*--spacing\(2\)\)/
+  );
+  assert.doesNotMatch(stylesheet, /\bwidth\s*:/);
+});