@d4gger/design-system 3.0.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d4gger/design-system",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Publishable design-system package for D4gger foundations, icons, primitives, and components.",
   "keywords": [
     "d4gger",

package/dist/components/control-group.css

@@ -1,142 +0,0 @@
-/* data-group-radius, not data-radius (2026-08-26, real bug found live): data-radius is a
-   reserved document-theme attribute that PortalThemeBoundary walks up via closest-ancestor
-   lookup to mirror the app's global radius setting into portaled content (Select/Dialog/
-   Popover/etc). A component-local data-radius sitting between a portal trigger and <html>
-   gets picked up instead of the real value — confirmed live via a Select inside this
-   component whose dropdown opened at 9999px border-radius instead of the real global radius. */
-.dsx-control-group {
-  display: inline-flex;
-  align-items: center;
-  gap: 0;
-  isolation: isolate;
-  border: var(--dsx-border-width-sm) solid var(--dsx-color-outline-variant);
-  background: var(--dsx-color-surface);
-  padding: var(--dsx-space-xs);
-  min-width: max-content;
-}
-
-/* Real bug found live (2026-08-26, direct screenshot: an active ToggleGroup item's filled
-   background poked a hard square corner past this frame's rounded-full pill): this used to set
-   a bespoke `--dsx-control-group-item-radius` custom property that only this file ever read.
-   ButtonGroup, SegmentedControl, ToggleGroup, and baseInput all already share one established
-   convention for the same concept — `--dsx-grouped-radius` (declared globally in tokens.css,
-   defaulting to `--dsx-rounded-md`) — and ToggleGroup's own per-item corner rules (this file's
-   sibling, toggle-group.css) read exactly that token with that exact fallback. Because
-   ControlGroup never set it, every child silently fell back to `--dsx-rounded-md` (8px)
-   regardless of ControlGroup's own `radius` prop — invisible for a plain-bordered rest-state
-   corner, glaringly visible once an active item got a real fill (this session's ToggleGroup
-   contrast fix). Renamed to join the existing convention instead of inventing a second one. */
-.dsx-control-group[data-group-radius='full'] {
-  border-radius: var(--dsx-rounded-full);
-  --dsx-grouped-radius: var(--dsx-rounded-full);
-}
-
-.dsx-control-group[data-group-radius='md'] {
-  border-radius: var(--dsx-rounded-md);
-  --dsx-grouped-radius: var(--dsx-rounded-md);
-}
-
-/* Direct children keep their own border/shadow/background — ControlGroup only manages the two
-   outer corners (so a child's own rounded shape matches the frame's curve instead of poking a
-   square corner past it, the exact bug that motivated this component) and a 1px seam between
-   adjacent children. Not a border-collapse like InputGroup: children here are not assumed to
-   share one border width, since they're full DS components, not stacked form parts.
-   --dsx-grouped-radius (set on the root above, per data-radius) keeps these child
-   selectors at class+pseudo-class specificity instead of repeating the [data-radius] attribute
-   on every rule — the CSS selector policy caps specificity, this keeps both radius values
-   covered by two selectors instead of four.
-
-   Real bug found live (2026-08-26): a child composed from a component that renders
-   PortalThemeBoundary (Select, Dialog, Popover, DropdownMenu, ...) injects a `hidden`
-   `<span data-dsx-portal-probe>` as ITS OWN first DOM sibling, ahead of the component's visible
-   markup — confirmed via a Select child, whose actual `:first-child` in the DOM was that hidden
-   probe span, not the visible trigger button. `> *:first-child` landed the corner radius on the
-   invisible probe, leaving the real trigger's own default (non-full) radius untouched — the
-   "currency picker isn't rounded" bug. The probe is always exactly one hidden leading sibling
-   (never last), so `:first-child` alone still needs a fallback for "the element right after a
-   hidden first child"; `:last-child` needed no change since the probe is never last. */
-.dsx-control-group > *:first-child:not([hidden]),
-.dsx-control-group > [hidden]:first-child + * {
-  border-start-start-radius: var(--dsx-grouped-radius);
-  border-end-start-radius: var(--dsx-grouped-radius);
-}
-
-.dsx-control-group > *:last-child {
-  border-start-end-radius: var(--dsx-grouped-radius);
-  border-end-end-radius: var(--dsx-grouped-radius);
-}
-
-/* Real bug found live (2026-08-26, direct screenshot annotation pointing at the seam between
-   Select and ToggleGroup): the two rules above only ever touched each child's OUTER corners —
-   the INNER corners (Select's right edge, ToggleGroup's left edge, where they meet at the
-   divider) were left at that child's own component default (Select's own `--dsx-rounded-md`,
-   8px), not explicitly squared. Confirmed via computed style: Select's own `border-radius`
-   read `9999px 8px 8px 9999px` — the outer-left corner correctly matched the pill, but the
-   inner-right corner sat at a stray 8px instead of 0, reading as a mismatched notch right at
-   the seam. Every grouped-control convention in this DS (ButtonGroup, SegmentedControl) squares
-   the inner-facing corners explicitly rather than assuming a child's own default is already 0 —
-   this closes the same gap here.
-
-   ROOT CAUSE, not another patch (2026-08-26, same-day correction after the fix above still
-   broke, confirmed live via a screenshot of the currency dropdown OPEN): the very next rule
-   added here (a generic "middle child" `:not(:first-child):not(:last-child) { border-radius:
-   0 }`) was written for a hypothetical 3+-child ControlGroup that has never existed anywhere in
-   this codebase — the only real usage today is exactly two children (Select + ToggleGroup).
-   Because PortalThemeBoundary's hidden probe span sits at real DOM index 0, Select's own
-   trigger sits at DOM index 1 — neither `:first-child` nor `:last-child` — so the speculative
-   middle-child rule matched it by accident, tied in specificity with the correct
-   `[hidden]:first-child + *` rule above, and won by coming later in the file, forcing
-   `border-radius: 0` on ALL FOUR corners including the outer-left one this file exists to
-   round. Deleted rather than special-cased further: a selector with no real target is the
-   actual defect here, not something to keep patching around. If a genuine 3+-child ControlGroup
-   ever ships, its middle-child corner logic needs designing against that real DOM shape then —
-   not speculatively now, against a shape that doesn't exist and that the hidden-probe mechanic
-   actively defeats. */
-.dsx-control-group > *:first-child:not([hidden]),
-.dsx-control-group > [hidden]:first-child + * {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}
-
-.dsx-control-group > *:last-child {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-}
-
-/* The `:not([hidden])` on the preceding sibling keeps the divider off the first VISIBLE child
-   when a PortalThemeBoundary child (Select, Dialog, Popover, DropdownMenu, ...) injects a hidden
-   `<span data-dsx-portal-probe>` at real DOM index 0 (2026-08-27 "stray separator on the left
-   side" bug). A plain `* + *` matches "has a preceding sibling element" regardless of whether
-   that sibling is hidden, so it previously needed a separate `content: none` override for the
-   probe case. Folding the guard into the base selector removes that override and keeps the rule
-   under the `0,3,0` selector-policy specificity ceiling — a three-class guard plus `::before`
-   lands at `0,3,1`. */
-.dsx-control-group > *:not([hidden]) + * {
-  position: relative;
-}
-
-.dsx-control-group > *:not([hidden]) + *::before {
-  content: '';
-  position: absolute;
-  inset-inline-start: calc(-1 * var(--dsx-space-xs));
-  top: 50%;
-  transform: translateY(-50%);
-  width: var(--dsx-border-width-sm);
-  height: 60%;
-  background: var(--dsx-color-outline-variant);
-  pointer-events: none;
-}
-
-/* Lift a focused child above its neighbors so its focus ring is never clipped by the group's
-   own rounded corners or the seam divider. */
-.dsx-control-group > *:focus-within {
-  z-index: 1;
-}
-
-.dsx-control-group[data-size='sm'] {
-  padding: var(--dsx-space-1, 2px);
-}
-
-.dsx-control-group[data-size='lg'] {
-  padding: var(--dsx-space-sm);
-}

package/dist/components/controlGroup/ControlGroup.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/controlGroup/ControlGroup.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { controlGroupPropDefs } from './controlGroup.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype ControlGroupOwnProps = GetPropDefTypes<typeof controlGroupPropDefs>\n\ninterface ControlGroupProps extends React.HTMLAttributes<HTMLDivElement>, ControlGroupOwnProps {}\n\n/**\n * Visually groups two or more unlike controls (a Select next to a ToggleGroup, a Button next to\n * a SegmentedControl) inside one shared bordered frame. Unlike InputGroup, no single child is\n * assumed to be \"the\" input, so children are consumed as-is \u2014 no Addon/Text/Button wrapper slots.\n * See docs/design-system/control-group.md for the full spec.\n */\nconst ControlGroup = React.forwardRef<HTMLDivElement, ControlGroupProps>((props, forwardedRef) => {\n  const { asChild, className, size, radius, ...controlGroupProps } = extractProps(props, controlGroupPropDefs)\n  const Comp = asChild ? Slot : 'div'\n\n  return (\n    <Comp\n      {...controlGroupProps}\n      ref={forwardedRef}\n      role={props.role ?? 'group'}\n      className={classNames('dsx-control-group', className)}\n      data-size={size}\n      // NOT data-radius (2026-08-26, real bug found live): `data-radius` is a reserved\n      // document-theme attribute \u2014 PortalThemeBoundary's getClosestThemeAttribute(el,\n      // 'data-radius') walks up the nearest ancestor with that attribute name to mirror the\n      // app's global radius setting into portaled content (Select/Dialog/Popover/etc). A\n      // component-local `data-radius` sitting between the portal trigger and <html> gets\n      // picked up INSTEAD of the real document-level value \u2014 confirmed live: a Select inside\n      // this component's radius=\"full\" frame opened its dropdown at 9999px border-radius and\n      // --dsx-rounded-lg itself resolved to 9999px on the portaled content, while <html> still\n      // correctly read data-radius=\"md\". data-group-radius avoids the collision.\n      data-group-radius={radius}\n    />\n  )\n})\nControlGroup.displayName = 'ControlGroup'\n\nexport { ControlGroup }\nexport type { ControlGroupProps }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAqB;AAErB,0BAA6B;AAC7B,0BAAqC;AAmBjC;AALJ,MAAM,eAAe,MAAM,WAA8C,CAAC,OAAO,iBAAiB;AAChG,QAAM,EAAE,SAAS,WAAW,MAAM,QAAQ,GAAG,kBAAkB,QAAI,kCAAa,OAAO,wCAAoB;AAC3G,QAAM,OAAO,UAAU,yBAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,MAAM,MAAM,QAAQ;AAAA,MACpB,eAAW,kBAAAA,SAAW,qBAAqB,SAAS;AAAA,MACpD,aAAW;AAAA,MAUX,qBAAmB;AAAA;AAAA,EACrB;AAEJ,CAAC;AACD,aAAa,cAAc;",
-  "names": ["classNames"]
-}

package/dist/components/controlGroup/ControlGroup.d.cts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { controlGroupPropDefs } from './controlGroup.props.cjs';
-import type { GetPropDefTypes } from '../../_internal/props/propDef.cjs';
-type ControlGroupOwnProps = GetPropDefTypes<typeof controlGroupPropDefs>;
-interface ControlGroupProps extends React.HTMLAttributes<HTMLDivElement>, ControlGroupOwnProps {
-}
-/**
- * Visually groups two or more unlike controls (a Select next to a ToggleGroup, a Button next to
- * a SegmentedControl) inside one shared bordered frame. Unlike InputGroup, no single child is
- * assumed to be "the" input, so children are consumed as-is — no Addon/Text/Button wrapper slots.
- * See docs/design-system/control-group.md for the full spec.
- */
-declare const ControlGroup: React.ForwardRefExoticComponent<ControlGroupProps & React.RefAttributes<HTMLDivElement>>;
-export { ControlGroup };
-export type { ControlGroupProps };
-//# sourceMappingURL=ControlGroup.d.cts.map

package/dist/components/controlGroup/ControlGroup.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ControlGroup.d.cts","sourceRoot":"","sources":["../../../src/components/controlGroup/ControlGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAE3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,oBAAoB,GAAG,eAAe,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAExE,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,oBAAoB;CAAG;AAEjG;;;;;GAKG;AACH,QAAA,MAAM,YAAY,0FAuBhB,CAAA;AAGF,OAAO,EAAE,YAAY,EAAE,CAAA;AACvB,YAAY,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/controlGroup/ControlGroup.d.mts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { controlGroupPropDefs } from './controlGroup.props.js';
-import type { GetPropDefTypes } from '../../_internal/props/propDef.js';
-type ControlGroupOwnProps = GetPropDefTypes<typeof controlGroupPropDefs>;
-interface ControlGroupProps extends React.HTMLAttributes<HTMLDivElement>, ControlGroupOwnProps {
-}
-/**
- * Visually groups two or more unlike controls (a Select next to a ToggleGroup, a Button next to
- * a SegmentedControl) inside one shared bordered frame. Unlike InputGroup, no single child is
- * assumed to be "the" input, so children are consumed as-is — no Addon/Text/Button wrapper slots.
- * See docs/design-system/control-group.md for the full spec.
- */
-declare const ControlGroup: React.ForwardRefExoticComponent<ControlGroupProps & React.RefAttributes<HTMLDivElement>>;
-export { ControlGroup };
-export type { ControlGroupProps };
-//# sourceMappingURL=ControlGroup.d.mts.map

package/dist/components/controlGroup/ControlGroup.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ControlGroup.d.mts","sourceRoot":"","sources":["../../../src/components/controlGroup/ControlGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAE3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,oBAAoB,GAAG,eAAe,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAExE,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,oBAAoB;CAAG;AAEjG;;;;;GAKG;AACH,QAAA,MAAM,YAAY,0FAuBhB,CAAA;AAGF,OAAO,EAAE,YAAY,EAAE,CAAA;AACvB,YAAY,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/controlGroup/ControlGroup.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { controlGroupPropDefs } from './controlGroup.props.js';
-import type { GetPropDefTypes } from '../../_internal/props/propDef.js';
-type ControlGroupOwnProps = GetPropDefTypes<typeof controlGroupPropDefs>;
-interface ControlGroupProps extends React.HTMLAttributes<HTMLDivElement>, ControlGroupOwnProps {
-}
-/**
- * Visually groups two or more unlike controls (a Select next to a ToggleGroup, a Button next to
- * a SegmentedControl) inside one shared bordered frame. Unlike InputGroup, no single child is
- * assumed to be "the" input, so children are consumed as-is — no Addon/Text/Button wrapper slots.
- * See docs/design-system/control-group.md for the full spec.
- */
-declare const ControlGroup: React.ForwardRefExoticComponent<ControlGroupProps & React.RefAttributes<HTMLDivElement>>;
-export { ControlGroup };
-export type { ControlGroupProps };
-//# sourceMappingURL=ControlGroup.d.ts.map

package/dist/components/controlGroup/ControlGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ControlGroup.d.ts","sourceRoot":"","sources":["../../../src/components/controlGroup/ControlGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAE3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,oBAAoB,GAAG,eAAe,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAExE,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,oBAAoB;CAAG;AAEjG;;;;;GAKG;AACH,QAAA,MAAM,YAAY,0FAuBhB,CAAA;AAGF,OAAO,EAAE,YAAY,EAAE,CAAA;AACvB,YAAY,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/controlGroup/ControlGroup.js

@@ -1,26 +0,0 @@
-import * as React from "react";
-import classNames from "classnames";
-import { Slot } from "@radix-ui/react-slot";
-import { extractProps } from "../../_internal/helpers/extractProps.js";
-import { controlGroupPropDefs } from "./controlGroup.props.js";
-import { jsx } from "react/jsx-runtime";
-const ControlGroup = React.forwardRef((props, forwardedRef) => {
-  const { asChild, className, size, radius, ...controlGroupProps } = extractProps(props, controlGroupPropDefs);
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      ...controlGroupProps,
-      ref: forwardedRef,
-      role: props.role ?? "group",
-      className: classNames("dsx-control-group", className),
-      "data-size": size,
-      "data-group-radius": radius
-    }
-  );
-});
-ControlGroup.displayName = "ControlGroup";
-export {
-  ControlGroup
-};
-//# sourceMappingURL=ControlGroup.js.map

package/dist/components/controlGroup/ControlGroup.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/controlGroup/ControlGroup.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { controlGroupPropDefs } from './controlGroup.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype ControlGroupOwnProps = GetPropDefTypes<typeof controlGroupPropDefs>\n\ninterface ControlGroupProps extends React.HTMLAttributes<HTMLDivElement>, ControlGroupOwnProps {}\n\n/**\n * Visually groups two or more unlike controls (a Select next to a ToggleGroup, a Button next to\n * a SegmentedControl) inside one shared bordered frame. Unlike InputGroup, no single child is\n * assumed to be \"the\" input, so children are consumed as-is \u2014 no Addon/Text/Button wrapper slots.\n * See docs/design-system/control-group.md for the full spec.\n */\nconst ControlGroup = React.forwardRef<HTMLDivElement, ControlGroupProps>((props, forwardedRef) => {\n  const { asChild, className, size, radius, ...controlGroupProps } = extractProps(props, controlGroupPropDefs)\n  const Comp = asChild ? Slot : 'div'\n\n  return (\n    <Comp\n      {...controlGroupProps}\n      ref={forwardedRef}\n      role={props.role ?? 'group'}\n      className={classNames('dsx-control-group', className)}\n      data-size={size}\n      // NOT data-radius (2026-08-26, real bug found live): `data-radius` is a reserved\n      // document-theme attribute \u2014 PortalThemeBoundary's getClosestThemeAttribute(el,\n      // 'data-radius') walks up the nearest ancestor with that attribute name to mirror the\n      // app's global radius setting into portaled content (Select/Dialog/Popover/etc). A\n      // component-local `data-radius` sitting between the portal trigger and <html> gets\n      // picked up INSTEAD of the real document-level value \u2014 confirmed live: a Select inside\n      // this component's radius=\"full\" frame opened its dropdown at 9999px border-radius and\n      // --dsx-rounded-lg itself resolved to 9999px on the portaled content, while <html> still\n      // correctly read data-radius=\"md\". data-group-radius avoids the collision.\n      data-group-radius={radius}\n    />\n  )\n})\nControlGroup.displayName = 'ControlGroup'\n\nexport { ControlGroup }\nexport type { ControlGroupProps }\n"],
-  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,SAAS,YAAY;AAErB,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AAmBjC;AALJ,MAAM,eAAe,MAAM,WAA8C,CAAC,OAAO,iBAAiB;AAChG,QAAM,EAAE,SAAS,WAAW,MAAM,QAAQ,GAAG,kBAAkB,IAAI,aAAa,OAAO,oBAAoB;AAC3G,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,MAAM,MAAM,QAAQ;AAAA,MACpB,WAAW,WAAW,qBAAqB,SAAS;AAAA,MACpD,aAAW;AAAA,MAUX,qBAAmB;AAAA;AAAA,EACrB;AAEJ,CAAC;AACD,aAAa,cAAc;",
-  "names": []
-}

package/dist/components/controlGroup/controlGroup.props.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/controlGroup/controlGroup.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst controlGroupSizes = ['sm', 'md', 'lg'] as const\nconst controlGroupRadii = ['md', 'full'] as const\n\nconst controlGroupPropDefs = {\n  ...asChildPropDef,\n  size: {\n    type: 'enum',\n    values: controlGroupSizes,\n    default: 'md',\n  },\n  radius: {\n    type: 'enum',\n    values: controlGroupRadii,\n    default: 'full',\n  },\n} satisfies {\n  asChild: PropDef\n  size: PropDef<(typeof controlGroupSizes)[number]>\n  radius: PropDef<(typeof controlGroupRadii)[number]>\n}\n\nexport { controlGroupPropDefs }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAI/B,MAAM,oBAAoB,CAAC,MAAM,MAAM,IAAI;AAC3C,MAAM,oBAAoB,CAAC,MAAM,MAAM;AAEvC,MAAM,uBAAuB;AAAA,EAC3B,GAAG;AAAA,EACH,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
-  "names": []
-}

package/dist/components/controlGroup/controlGroup.props.d.cts

@@ -1,18 +0,0 @@
-declare const controlGroupPropDefs: {
-    size: {
-        type: "enum";
-        values: readonly ["sm", "md", "lg"];
-        default: "md";
-    };
-    radius: {
-        type: "enum";
-        values: readonly ["md", "full"];
-        default: "full";
-    };
-    asChild: {
-        type: "boolean";
-        default: false;
-    };
-};
-export { controlGroupPropDefs };
-//# sourceMappingURL=controlGroup.props.d.cts.map

package/dist/components/controlGroup/controlGroup.props.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"controlGroup.props.d.cts","sourceRoot":"","sources":["../../../src/components/controlGroup/controlGroup.props.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,oBAAoB;;;;;;;;;;;;;;;CAgBzB,CAAA;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/components/controlGroup/controlGroup.props.d.mts

@@ -1,18 +0,0 @@
-declare const controlGroupPropDefs: {
-    size: {
-        type: "enum";
-        values: readonly ["sm", "md", "lg"];
-        default: "md";
-    };
-    radius: {
-        type: "enum";
-        values: readonly ["md", "full"];
-        default: "full";
-    };
-    asChild: {
-        type: "boolean";
-        default: false;
-    };
-};
-export { controlGroupPropDefs };
-//# sourceMappingURL=controlGroup.props.d.mts.map

package/dist/components/controlGroup/controlGroup.props.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"controlGroup.props.d.mts","sourceRoot":"","sources":["../../../src/components/controlGroup/controlGroup.props.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,oBAAoB;;;;;;;;;;;;;;;CAgBzB,CAAA;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/components/controlGroup/controlGroup.props.d.ts

@@ -1,18 +0,0 @@
-declare const controlGroupPropDefs: {
-    size: {
-        type: "enum";
-        values: readonly ["sm", "md", "lg"];
-        default: "md";
-    };
-    radius: {
-        type: "enum";
-        values: readonly ["md", "full"];
-        default: "full";
-    };
-    asChild: {
-        type: "boolean";
-        default: false;
-    };
-};
-export { controlGroupPropDefs };
-//# sourceMappingURL=controlGroup.props.d.ts.map

package/dist/components/controlGroup/controlGroup.props.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"controlGroup.props.d.ts","sourceRoot":"","sources":["../../../src/components/controlGroup/controlGroup.props.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,oBAAoB;;;;;;;;;;;;;;;CAgBzB,CAAA;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/components/controlGroup/controlGroup.props.js

@@ -1,20 +0,0 @@
-import { asChildPropDef } from "../../_internal/props/asChild.prop.js";
-const controlGroupSizes = ["sm", "md", "lg"];
-const controlGroupRadii = ["md", "full"];
-const controlGroupPropDefs = {
-  ...asChildPropDef,
-  size: {
-    type: "enum",
-    values: controlGroupSizes,
-    default: "md"
-  },
-  radius: {
-    type: "enum",
-    values: controlGroupRadii,
-    default: "full"
-  }
-};
-export {
-  controlGroupPropDefs
-};
-//# sourceMappingURL=controlGroup.props.js.map

package/dist/components/controlGroup/controlGroup.props.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/controlGroup/controlGroup.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst controlGroupSizes = ['sm', 'md', 'lg'] as const\nconst controlGroupRadii = ['md', 'full'] as const\n\nconst controlGroupPropDefs = {\n  ...asChildPropDef,\n  size: {\n    type: 'enum',\n    values: controlGroupSizes,\n    default: 'md',\n  },\n  radius: {\n    type: 'enum',\n    values: controlGroupRadii,\n    default: 'full',\n  },\n} satisfies {\n  asChild: PropDef\n  size: PropDef<(typeof controlGroupSizes)[number]>\n  radius: PropDef<(typeof controlGroupRadii)[number]>\n}\n\nexport { controlGroupPropDefs }\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,oBAAoB,CAAC,MAAM,MAAM,IAAI;AAC3C,MAAM,oBAAoB,CAAC,MAAM,MAAM;AAEvC,MAAM,uBAAuB;AAAA,EAC3B,GAAG;AAAA,EACH,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
-  "names": []
-}

package/dist/docs/components/control-group.md

@@ -1,261 +0,0 @@
----
-title: ControlGroup
-status: canonical
-category: Components
-archetype: composite
-depends_on:
-  - Select
-  - ToggleGroup
-  - SegmentedControl
-  - Button
-  - Separator
----
-
-# ControlGroup
-
-> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
-
-## Purpose
-
-Visually groups two or more *unlike* interactive controls (a `Select` next to a `ToggleGroup`, a
-`Button` next to a `SegmentedControl`, etc.) inside one shared bordered frame, so they read as one
-settings cluster instead of separate floating widgets.
-
-## Anatomy & slots
-
-**Parent:** `ControlGroup` (flat export — no compound sub-components).
-
-**Slots:**
-
-| Slot | Element | Renders | Notes |
-|---|---|---|---|
-| `ControlGroup` (Root) | `<div>` | Flex container, `role="group"` | Holds any number of DS control children directly — no wrapper slot components. |
-
-No named child slots: unlike `InputGroup` (which wraps its children in `InputGroup.Addon` /
-`InputGroup.Text` / `InputGroup.Button` for input-specific semantics), `ControlGroup`'s children
-are consumed as-is. This is the deliberate distinction from `InputGroup` — see Wiring notes.
-
-## Props contract
-
-| Prop | Type | Default | Required | Description | Responsive |
-|---|---|---|---|---|---|
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | no | Controls the group's height and inner item padding. | no |
-| `radius` | `'md' \| 'full'` | `'full'` | no | Outer corner radius of the group frame and of the first/last child's outer corners. | no |
-| `asChild` | `boolean` | `false` | no | Renders the root as its child via Radix `Slot` instead of a `div`. | no |
-
-Rules:
-
-- Every prop in this table must exist in `controlGroup.props.ts`. The runtime prop def is the source.
-- Every prop in `controlGroup.props.ts` must be in this table. Mismatches fail `qa:contracts`.
-- No `Responsive` column values are `yes` — this component does not vary by breakpoint.
-
-## CSS class contract
-
-**Root class:** `dsx-control-group`
-
-**Modifier classes** (driven by `data-*` attributes written by the component):
-
-| Attribute | Allowed values | Class | CSS file |
-|---|---|---|---|
-| `data-size` | `sm`, `md`, `lg` | `.dsx-control-group[data-size="sm"]` | `control-group.css` |
-| `data-group-radius` | `md`, `full` | `.dsx-control-group[data-group-radius="md"]`, `.dsx-control-group[data-group-radius="full"]` | `control-group.css` |
-
-**Not `data-radius`, deliberately (2026-08-26, real bug found live):** `data-radius` is a
-reserved document-theme attribute — `PortalThemeBoundary`'s `getClosestThemeAttribute(el,
-'data-radius')` walks up the nearest ancestor carrying that attribute to mirror the app's global
-radius setting into portaled content (`Select`/`Dialog`/`Popover`/etc). A component that emits
-its own local `data-radius` between a portal trigger and `<html>` gets picked up *instead of* the
-real document-level value. Confirmed live: a `Select` inside a `ControlGroup radius="full"` frame
-opened its dropdown at `9999px` border-radius (`--dsx-rounded-lg` itself resolved to `9999px` on
-the portaled content), while `<html>` still correctly read `data-radius="md"`. Any future
-component with its own per-instance radius axis should avoid the literal `data-radius` name for
-the same reason — this isn't `ControlGroup`-specific.
-
-**Slot classes:** none — flat export, no named slots.
-
-**Corner-radius mechanism:**
-
-The root paints the visible border/background. Direct children get their shared (inner-facing)
-corners squared and outer corners rounded to match the root, via structural selectors
-(`:first-child`, `:last-child`, `:not(:first-child)`) — the same technique `InputGroup` already
-uses, applied here to children that are complete DS components (Select, ToggleGroup, Button,
-SegmentedControl) rather than raw form parts. A child's own border/shadow/background is
-intentionally left alone — `ControlGroup` only manages corner radius on the two outer edges and a
-1px visual seam between children (a `Separator`-style divider, not a border collapse, since
-children are not assumed to share the exact same border width the way stacked inputs do).
-
-**Responsive behavior:**
-
-- The component does not write `@media` rules.
-
-**Reduced motion:**
-
-- No motion — a static layout container.
-
-## Token mapping
-
-| Property | Token | Role |
-|---|---|---|
-| Background | `var(--dsx-color-surface)` | Group frame surface |
-| Border | `var(--dsx-color-outline-variant)` | Group frame edge |
-| Radius (full) | `var(--dsx-rounded-full)` | Pill frame |
-| Radius (md) | `var(--dsx-rounded-md)` | Rectangular frame |
-| Padding | `var(--dsx-space-xs)` | Inner gutter between frame edge and first/last child |
-| Seam | `var(--dsx-color-outline-variant)` | Divider between adjacent children |
-
-Rules:
-
-- No raw color, spacing, radius, or motion values in this table or in the CSS file.
-- Accent-driven children (a `ToggleGroup` item's active fill, a `SegmentedControl`'s active
-  state) keep their own accent tokens — `ControlGroup` does not repaint or override a child's own
-  interactive state, only its outer corner radius.
-
-## Motion contract
-
-| Region | Token | Default | Reduced |
-|---|---|---|---|
-| Root | `none` | `none` | `none` |
-
-## Accessibility
-
-**Roles:**
-
-- `group` on the root, so assistive tech announces the contained controls as one related cluster.
-
-**Keyboard:**
-
-- No keyboard handling of its own — each child control owns its own keyboard interaction
-  (`Tab` moves between children exactly as it would without the wrapper).
-
-**Focus:**
-
-- A focused child's own focus ring must remain fully visible — the root's `overflow` stays
-  visible (not `hidden`), so a focus ring is never clipped by the group's rounded corners.
-
-**Reduced motion:**
-
-- N/A — no motion.
-
-**Color and meaning:**
-
-- N/A — a layout container, no semantic state of its own.
-
-**Naming:**
-
-- The root's `aria-label` is left to the consumer when the group's purpose isn't obvious from its
-  children's own labels (e.g. `<ControlGroup aria-label="Currency and language">`).
-
-## Playground demo spec
-
-**Default story:**
-
-- Renders `ControlGroup` with a `Select` and a `ToggleGroup` child, no extra props.
-- Asserts the root class is `dsx-control-group`.
-
-**Variant story** (one per `radius` value):
-
-- `radius="full"` and `radius="md"`, asserting `data-group-radius` matches.
-
-**State story:**
-
-- One child focused (via `Tab`) — asserts the focus ring is not clipped.
-
-**Composition story:**
-
-- Three children (`Select`, `Separator`-free two-item `ToggleGroup`, `Button`) to prove the
-  corner-radius mechanism holds for more than two children.
-
-**Token story:**
-
-- Rendered inside `Theme` with `accentColor="silver"` and `accentColor="bronze"` — asserts a
-  `ToggleGroup` child's active-item fill still resolves to the right accent (proving
-  `ControlGroup` doesn't interfere with a child's own accent scoping).
-
-**A11y story:**
-
-- `vitest-axe` on the composition story.
-
-**Props exposed in the playground controls:**
-
-| Prop | Control | Default |
-|---|---|---|
-| `size` | `select` | `md` |
-| `radius` | `select` | `full` |
-
-## Wiring notes
-
-**Composes from:**
-
-- Any DS interactive component as a direct child — `Select`, `ToggleGroup`, `SegmentedControl`,
-  `Button`, `IconButton` are the ones currently exercised.
-
-**Used by:**
-
-- Landing header's currency + language cluster (`apps/playground/.../landing/_shared/landing-view.tsx`)
-  — the motivating real usage. Previously hand-built as a bordered `Stack` with per-instance CSS
-  overrides for corner radius; migrated to `ControlGroup` in the same change that added this spec.
-
-**State boundaries:**
-
-- Owned by this component: corner-radius/seam geometry only.
-- Owned by the consumer: every child's own value/state — `ControlGroup` never reads or writes a
-  child's `value`/`onValueChange`.
-
-**Boundary rules:**
-
-- App-owned data: which controls are grouped, their values, their change handlers.
-- DS-owned visuals: the group frame's border/background/radius and the inter-child seam.
-
-**Distinction from InputGroup:** `InputGroup`'s purpose is input-centric (a text field with
-leading/trailing addons — "Ideal for search fields, URLs, copy/share flows," per its roster row)
-and its convenience sub-components (`Addon`/`Text`/`Button`/`Input`/`Textarea`) assume the group
-is built around exactly one text-entry control. `ControlGroup` has no such assumption — it exists
-for clusters where no single child is "the" input (e.g. two independent selectors). Using
-`InputGroup` for the landing header (checked before building this) would have stretched it past
-its documented purpose for a resemblance in CSS mechanism alone, not a real semantic fit.
-
-## Penpot build recipe
-
-### Root board
-
-- **Name**: `Components / ControlGroup`.
-- **Dimensions**: `auto × auto` (content-sized).
-- **Layout**: `Flex`.
-- **Sizing**: `horizontalSizing = 'auto'`, `verticalSizing = 'auto'`.
-
-### Layer tree
-
-```
-ControlGroup
-  ├── Child 1 (e.g. Select instance)
-  ├── Seam (1px divider)
-  └── Child 2 (e.g. ToggleGroup instance)
-```
-
-### Token bindings (Penpot properties)
-
-| Shape | Property | Token | Token type | Penpot property name |
-|---|---|---|---|---|
-| Root | fill | `--dsx-color-surface` | Color | fills |
-| Root | stroke | `--dsx-color-outline-variant` | Color | strokes |
-| Root | radius | `--dsx-rounded-full` | Radius | corner-radius |
-| Root | padding | `--dsx-space-xs` | Spacing | padding |
-| Seam | fill | `--dsx-color-outline-variant` | Color | fills |
-
-### State transformations
-
-| State | Root fill | Stroke | Text fill | Shadow |
-|---|---|---|---|---|
-| `default` | `--dsx-color-surface` | `--dsx-color-outline-variant` | n/a (children own their own text) | none |
-
-### Variant model
-
-- `radius`: `full`, `md`. Default `full`.
-- `size`: `sm`, `md`, `lg`. Default `md`.
-- Total members: `6`.
-
-### Validation checklist
-
-- [ ] Token bindings resolve at the values `DESIGN.md` describes.
-- [ ] Component is promoted to Main Component under `Components`.
-- [ ] `penpotUtils.shapeStructure(board, 3)` matches the expected hierarchy.