@d4gger/design-system 3.0.0 → 3.0.1

package/dist/tokens.css

@@ -12,7 +12,7 @@
   --dsx-color-accent-11: #bfb1ff;
   --dsx-color-accent-12: #ded8ff;
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: rgba(40, 0, 93, 0.4);
+  --dsx-color-accent-surface: rgba(40, 0, 93, 0.2);
   --dsx-color-accent-indicator: #bfb1ff;
   --dsx-color-accent-track: #8553f6;
   --dsx-color-gray-1: #0c0d12;
@@ -189,7 +189,7 @@
   --dsx-color-accent-indicator: #bfb1ff;
   --dsx-color-accent-track: #8553f6;
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: rgba(40, 0, 93, 0.4);
+  --dsx-color-accent-surface: rgba(40, 0, 93, 0.2);
   --dsx-color-border-subtle: #333640;
   --dsx-color-border-strong: #565b70;
   --dsx-effect-shadow-1: 0 1px 2px rgba(8, 9, 12, 0.24);
@@ -216,7 +216,7 @@
   --dsx-sheet-width-sm: 320px;
   --dsx-sheet-width-lg: 480px;
   --dsx-chart-min-height: 240px;
-  --dsx-data-table-empty-height: 96px;
+  --dsx-data-table-empty-height: 192px;
   --dsx-sidebar-width: 272px;
   --dsx-sidebar-width-collapsed: 72px;
   --dsx-calendar-width: 320px;
@@ -448,7 +448,7 @@
   --dsx-color-accent-indicator: var(--dsx-color-accent-rift-11);
   --dsx-color-accent-track: var(--dsx-color-accent-rift-9);
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-rift-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-rift-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-rift-9) 64%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-rift-9) 28%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-rift-9) 40%, transparent);
@@ -476,7 +476,7 @@
   --dsx-color-accent-indicator: var(--dsx-color-accent-warp-11);
   --dsx-color-accent-track: var(--dsx-color-accent-warp-9);
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-warp-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-warp-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-warp-9) 64%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-warp-9) 28%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-warp-9) 40%, transparent);
@@ -504,7 +504,7 @@
   --dsx-color-accent-indicator: var(--dsx-color-accent-ray-11);
   --dsx-color-accent-track: var(--dsx-color-accent-ray-9);
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-ray-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-ray-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-ray-9) 64%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-ray-9) 28%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-ray-9) 40%, transparent);
@@ -532,7 +532,7 @@
   --dsx-color-accent-indicator: var(--dsx-color-accent-astral-11);
   --dsx-color-accent-track: var(--dsx-color-accent-astral-9);
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-astral-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-astral-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-astral-9) 64%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-astral-9) 28%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-astral-9) 40%, transparent);
@@ -560,7 +560,7 @@
   --dsx-color-accent-indicator: var(--dsx-color-accent-spark-11);
   --dsx-color-accent-track: var(--dsx-color-accent-spark-9);
   --dsx-color-accent-contrast: #0c0d12;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-spark-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-spark-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-spark-9) 64%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-spark-9) 28%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-spark-9) 40%, transparent);
@@ -582,7 +582,7 @@
   --dsx-color-accent-11: #5211ac;
   --dsx-color-accent-12: #28005d;
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: rgba(230, 226, 255, 0.4);
+  --dsx-color-accent-surface: rgba(230, 226, 255, 0.2);
   --dsx-color-accent-indicator: #28005d;
   --dsx-color-accent-track: #8553f6;
   --dsx-color-gray-1: #fbfbfc;
@@ -759,7 +759,7 @@
   --dsx-color-accent-indicator: #28005d;
   --dsx-color-accent-track: #8553f6;
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: rgba(230, 226, 255, 0.4);
+  --dsx-color-accent-surface: rgba(230, 226, 255, 0.2);
   --dsx-color-border-subtle: #c3c8d4;
   --dsx-color-border-strong: #8b90a3;
   --dsx-effect-shadow-1: 0 1px 2px rgba(44, 47, 61, 0.12);
@@ -804,7 +804,7 @@
   --dsx-color-accent-indicator: var(--dsx-color-accent-rift-12);
   --dsx-color-accent-track: var(--dsx-color-accent-rift-9);
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-rift-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-rift-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-rift-9) 56%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-rift-9) 24%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-rift-9) 36%, transparent);
@@ -833,7 +833,7 @@
   --dsx-color-accent-indicator: var(--dsx-color-accent-warp-12);
   --dsx-color-accent-track: var(--dsx-color-accent-warp-9);
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-warp-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-warp-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-warp-9) 56%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-warp-9) 24%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-warp-9) 36%, transparent);
@@ -862,7 +862,7 @@
   --dsx-color-accent-indicator: var(--dsx-color-accent-ray-12);
   --dsx-color-accent-track: var(--dsx-color-accent-ray-9);
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-ray-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-ray-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-ray-9) 56%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-ray-9) 24%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-ray-9) 36%, transparent);
@@ -891,7 +891,7 @@
   --dsx-color-accent-indicator: var(--dsx-color-accent-astral-12);
   --dsx-color-accent-track: var(--dsx-color-accent-astral-9);
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-astral-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-astral-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-astral-9) 56%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-astral-9) 24%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-astral-9) 36%, transparent);
@@ -920,7 +920,7 @@
   --dsx-color-accent-indicator: var(--dsx-color-accent-spark-12);
   --dsx-color-accent-track: var(--dsx-color-accent-spark-9);
   --dsx-color-accent-contrast: #0c0d12;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-spark-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-spark-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-spark-9) 56%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-spark-9) 24%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-spark-9) 36%, transparent);
@@ -1079,6 +1079,12 @@
   --dsx-shadow-elevation-2: var(--dsx-effect-shadow-2);
   --dsx-shadow-elevation-3: var(--dsx-effect-shadow-3);
   --dsx-shadow-elevation-4: var(--dsx-effect-shadow-4);
+  /* Step 5 (Spotlight: toasts, dragged panels). Step 6 stays raw until an
+     occupant earns it — no elevation-6 alias by decision (B4 Q3). */
+  --dsx-shadow-elevation-5: var(--dsx-effect-shadow-5);
+  /* Menu-tier control point (B4 Q3): every menu-family content rides step 3
+     unless a component file reasserts it locally for cascade order. */
+  --dsx-menu-content-elevation: var(--dsx-shadow-elevation-3);
   --dsx-shadow-panel-shadow: var(--dsx-effect-shadow-3);
 
   /* ── Constructed shadows ────────────────────────────────────────────── */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d4gger/design-system",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "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": []
-}