@d4gger/design-system 3.0.1 → 4.0.1

package/dist/components/segmentedControl/SegmentedControl.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/segmentedControl/SegmentedControl.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { segmentedControlPropDefs } from './segmentedControl.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype SegmentedControlRootOwnProps = GetPropDefTypes<typeof segmentedControlPropDefs> & {\n  value?: string\n  defaultValue?: string\n  onValueChange?(value: string): void\n}\n\ntype SegmentedControlRootProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>\n  & SegmentedControlRootOwnProps\n\ntype SegmentedControlRootElement = React.ComponentRef<typeof ToggleGroupPrimitive.Root>\n\nfunction composeRefs<T>(...refs: Array<React.Ref<T> | undefined>) {\n  return (node: T | null) => {\n    for (const ref of refs) {\n      if (!ref) {\n        continue\n      }\n\n      if (typeof ref === 'function') {\n        ref(node)\n        continue\n      }\n\n      ;(ref as { current: T | null }).current = node\n    }\n  }\n}\n\nconst useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\ninterface SegmentedControlSelection {\n  activationMode: 'manual' | 'automatic'\n  disabled: boolean\n  selectedValue: string | undefined\n  requestSelect(value: string): void\n}\n\nconst SegmentedControlSelectionContext = React.createContext<SegmentedControlSelection | null>(null)\n\nconst SegmentedControlRoot = React.forwardRef<\n  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,\n  SegmentedControlRootProps\n>(({ className, children, disabled = false, size = 'md', variant = 'default', orientation = 'horizontal', activationMode = 'manual', fill = false, value, defaultValue, onValueChange, ...props }, forwardedRef) => {\n  const rootProps = extractProps(\n    { className, disabled, orientation, size },\n    segmentedControlPropDefs,\n  )\n  const innerRootRef = React.useRef<SegmentedControlRootElement | null>(null)\n  const mergedRef = composeRefs(forwardedRef, innerRootRef)\n\n  // Deselect guard (disallowEmptySelection): own the selection so the control\n  // can never render with no active item. Radix fires \"\" when the active item\n  // is clicked; the handler below swallows it and keeps the last value, and\n  // the resolved value below keeps Radix controlled so its internal state can\n  // never clear either.\n  const [uncontrolledValue, setUncontrolledValue] = React.useState<string | undefined>(defaultValue)\n  const resolvedValue = value ?? uncontrolledValue\n\n  // Sliding indicator: Mantine-style measured pill rendered behind the active\n  // item. The offset is a physical-pixel diff (active.left - root.left), which\n  // is direction-agnostic and therefore RTL-correct without special-casing.\n  // Measuring in layout effect positions the pill before first paint, and the\n  // `indicatorLive` gate keeps `transition: none` until that first positioned\n  // frame so mount never animates from the origin.\n  const [indicator, setIndicator] = React.useState({ x: 0, y: 0, width: 0, height: 0 })\n  const [indicatorLive, setIndicatorLive] = React.useState(false)\n\n  const measureActive = React.useCallback((root: HTMLElement) => {\n    const active = root.querySelector<HTMLElement>('[data-state=\"on\"]')\n\n    if (!active) {\n      return\n    }\n\n    const rootRect = root.getBoundingClientRect()\n    const activeRect = active.getBoundingClientRect()\n    // Border-box diffs are padding-box positioned: subtract the frame so the\n    // wrapper never overshoots the content box (1-2px overflow summoned a\n    // horizontal scrollbar on bordered variants).\n    setIndicator({\n      x: activeRect.left - rootRect.left - root.clientLeft,\n      y: activeRect.top - rootRect.top - root.clientTop,\n      width: activeRect.width,\n      height: activeRect.height,\n    })\n  }, [])\n\n  useIsomorphicLayoutEffect(() => {\n    const root = innerRootRef.current\n\n    if (!root) {\n      return undefined\n    }\n\n    const measure = () => measureActive(root)\n\n    measure()\n    setIndicatorLive(true)\n\n    if (typeof ResizeObserver === 'undefined') {\n      return undefined\n    }\n\n    const observer = new ResizeObserver(measure)\n    observer.observe(root)\n\n    const active = root.querySelector('[data-state=\"on\"]')\n\n    if (active) {\n      observer.observe(active)\n    }\n\n    return () => observer.disconnect()\n  }, [resolvedValue, measureActive])\n\n  const handleValueChange = (nextValue: string) => {\n    if (!nextValue) {\n      return\n    }\n\n    if (value === undefined) {\n      setUncontrolledValue(nextValue)\n    }\n\n    onValueChange?.(nextValue)\n  }\n\n  // Automatic activation: selection follows focus, so arrow-key navigation\n  // selects without Enter. The focused value goes through the same guarded\n  // setter, so focus can never empty the selection; landing on the\n  // already-selected item is a no-op. Manual mode (default) ignores focus\n  // and only selects on activation \u2014 use it when onValueChange drives side\n  // effects that must not fire on focus. Each item reads this context in its\n  // own onFocus (Radix strips the value prop from the DOM, so the root\n  // cannot recover the focused value from the event target).\n  const selection = React.useMemo<SegmentedControlSelection>(\n    () => ({\n      activationMode,\n      disabled,\n      selectedValue: resolvedValue,\n      requestSelect: handleValueChange,\n    }),\n    [activationMode, disabled, resolvedValue, handleValueChange],\n  )\n\n  return (\n    <ToggleGroupPrimitive.Root\n      {...props}\n      {...rootProps}\n      ref={mergedRef}\n      className={classNames(\n        'dsx-segmented-control',\n        `dsx-segmented-control--${size}`,\n        `dsx-segmented-control--${variant}`,\n        fill && 'dsx-segmented-control--fill',\n        className,\n      )}\n      type=\"single\"\n      value={resolvedValue}\n      onValueChange={handleValueChange}\n      disabled={disabled}\n      orientation={orientation}\n      data-disabled={disabled || undefined}\n      data-fill={fill || undefined}\n      data-size={size}\n      data-variant={variant}\n      data-orientation={orientation}\n      data-activation-mode={activationMode}\n    >\n      <SegmentedControlSelectionContext.Provider value={selection}>\n        {children}\n      </SegmentedControlSelectionContext.Provider>\n      <span\n        aria-hidden=\"true\"\n        className=\"dsx-segmented-control__indicator\"\n        style={\n          orientation === 'vertical'\n            ? {\n                transform: `translateY(${indicator.y}px)`,\n                height: indicator.height,\n                transition: indicatorLive ? undefined : 'none',\n              }\n            : {\n                transform: `translateX(${indicator.x}px)`,\n                width: indicator.width,\n                transition: indicatorLive ? undefined : 'none',\n              }\n        }\n      />\n    </ToggleGroupPrimitive.Root>\n  )\n})\nSegmentedControlRoot.displayName = 'SegmentedControl'\n\ninterface SegmentedControlItemProps\n  extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> {\n  iconOnly?: boolean\n  value: string\n}\n\nconst SegmentedControlItem = React.forwardRef<\n  React.ComponentRef<typeof ToggleGroupPrimitive.Item>,\n  SegmentedControlItemProps\n>(({ children, className, disabled, iconOnly = false, value, onFocus, ...props }, forwardedRef) => {\n  const selection = React.useContext(SegmentedControlSelectionContext)\n\n  const handleItemFocus: React.FocusEventHandler<React.ComponentRef<typeof ToggleGroupPrimitive.Item>> = (event) => {\n    onFocus?.(event)\n\n    if (!selection || selection.activationMode !== 'automatic') {\n      return\n    }\n\n    if (selection.disabled || disabled || value === selection.selectedValue) {\n      return\n    }\n\n    selection.requestSelect(value)\n  }\n\n  return (\n    <ToggleGroupPrimitive.Item\n      {...props}\n      ref={forwardedRef}\n      value={value}\n      className={classNames('dsx-segmented-control__item', className)}\n      disabled={disabled}\n      data-disabled={disabled || undefined}\n      data-icon-only={iconOnly || undefined}\n      onFocus={handleItemFocus}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n})\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n\nconst SegmentedControl: typeof SegmentedControlRoot & {\n  Item: typeof SegmentedControlItem\n} = Object.assign(SegmentedControlRoot, {\n  Item: SegmentedControlItem,\n})\n\nexport { SegmentedControl, SegmentedControlItem, SegmentedControlRoot }\nexport type { SegmentedControlItemProps, SegmentedControlRootProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { segmentedControlPropDefs } from './segmentedControl.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype SegmentedControlRootOwnProps = GetPropDefTypes<typeof segmentedControlPropDefs> & {\n  value?: string\n  defaultValue?: string\n  onValueChange?(value: string): void\n}\n\ntype SegmentedControlRootProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>\n  & SegmentedControlRootOwnProps\n\ntype SegmentedControlRootElement = React.ComponentRef<typeof ToggleGroupPrimitive.Root>\n\nfunction composeRefs<T>(...refs: Array<React.Ref<T> | undefined>) {\n  return (node: T | null) => {\n    for (const ref of refs) {\n      if (!ref) {\n        continue\n      }\n\n      if (typeof ref === 'function') {\n        ref(node)\n        continue\n      }\n\n      ;(ref as { current: T | null }).current = node\n    }\n  }\n}\n\nconst useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\ninterface SegmentedControlSelection {\n  activationMode: 'manual' | 'automatic'\n  disabled: boolean\n  selectedValue: string | undefined\n  requestSelect(value: string): void\n}\n\nconst SegmentedControlSelectionContext = React.createContext<SegmentedControlSelection | null>(null)\n\nconst SegmentedControlRoot = React.forwardRef<\n  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,\n  SegmentedControlRootProps\n>(({ className, children, disabled = false, size = 'md', variant = 'default', orientation = 'horizontal', activationMode = 'manual', fill = false, value, defaultValue, onValueChange, ...props }, forwardedRef) => {\n  const rootProps = extractProps(\n    { className, disabled, orientation, size },\n    segmentedControlPropDefs,\n  )\n  const innerRootRef = React.useRef<SegmentedControlRootElement | null>(null)\n  const mergedRef = composeRefs(forwardedRef, innerRootRef)\n\n  // Deselect guard (disallowEmptySelection): own the selection so the control\n  // can never render with no active item. Radix fires \"\" when the active item\n  // is clicked; the handler below swallows it and keeps the last value, and\n  // the resolved value below keeps Radix controlled so its internal state can\n  // never clear either.\n  const [uncontrolledValue, setUncontrolledValue] = React.useState<string | undefined>(defaultValue)\n  const resolvedValue = value ?? uncontrolledValue\n\n  // Sliding indicator: Mantine-style measured pill rendered behind the active\n  // item. The offset is a physical-pixel diff (active.left - root.left), which\n  // is direction-agnostic and therefore RTL-correct without special-casing.\n  // Measuring in layout effect positions the pill before first paint, and the\n  // `indicatorLive` gate keeps `transition: none` until that first positioned\n  // frame so mount never animates from the origin.\n  const [indicator, setIndicator] = React.useState({ x: 0, y: 0, width: 0, height: 0 })\n  const [indicatorLive, setIndicatorLive] = React.useState(false)\n\n  const measureActive = React.useCallback((root: HTMLElement) => {\n    const active = root.querySelector<HTMLElement>('[data-state=\"on\"]')\n\n    if (!active) {\n      return\n    }\n\n    const rootRect = root.getBoundingClientRect()\n    const activeRect = active.getBoundingClientRect()\n    // Border-box diffs are padding-box positioned: subtract the frame so the\n    // wrapper never overshoots the content box (1-2px overflow summoned a\n    // horizontal scrollbar on bordered variants). Add scroll offsets to convert\n    // viewport coordinates into the indicator's content coordinates; otherwise\n    // a scrolled selection paints behind the preceding item.\n    setIndicator({\n      x: activeRect.left - rootRect.left - root.clientLeft + root.scrollLeft,\n      y: activeRect.top - rootRect.top - root.clientTop + root.scrollTop,\n      width: activeRect.width,\n      height: activeRect.height,\n    })\n  }, [])\n\n  useIsomorphicLayoutEffect(() => {\n    const root = innerRootRef.current\n\n    if (!root) {\n      return undefined\n    }\n\n    const measure = () => measureActive(root)\n\n    measure()\n    setIndicatorLive(true)\n\n    if (typeof ResizeObserver === 'undefined') {\n      return undefined\n    }\n\n    const observer = new ResizeObserver(measure)\n    observer.observe(root)\n\n    const active = root.querySelector('[data-state=\"on\"]')\n\n    if (active) {\n      observer.observe(active)\n    }\n\n    return () => observer.disconnect()\n  }, [resolvedValue, measureActive])\n\n  const handleValueChange = (nextValue: string) => {\n    if (!nextValue) {\n      return\n    }\n\n    if (value === undefined) {\n      setUncontrolledValue(nextValue)\n    }\n\n    onValueChange?.(nextValue)\n  }\n\n  // Automatic activation: selection follows focus, so arrow-key navigation\n  // selects without Enter. The focused value goes through the same guarded\n  // setter, so focus can never empty the selection; landing on the\n  // already-selected item is a no-op. Manual mode (default) ignores focus\n  // and only selects on activation \u2014 use it when onValueChange drives side\n  // effects that must not fire on focus. Each item reads this context in its\n  // own onFocus (Radix strips the value prop from the DOM, so the root\n  // cannot recover the focused value from the event target).\n  const selection = React.useMemo<SegmentedControlSelection>(\n    () => ({\n      activationMode,\n      disabled,\n      selectedValue: resolvedValue,\n      requestSelect: handleValueChange,\n    }),\n    [activationMode, disabled, resolvedValue, handleValueChange],\n  )\n\n  return (\n    <ToggleGroupPrimitive.Root\n      {...props}\n      {...rootProps}\n      ref={mergedRef}\n      className={classNames(\n        'dsx-segmented-control',\n        `dsx-segmented-control--${size}`,\n        `dsx-segmented-control--${variant}`,\n        fill && 'dsx-segmented-control--fill',\n        className,\n      )}\n      type=\"single\"\n      value={resolvedValue}\n      onValueChange={handleValueChange}\n      disabled={disabled}\n      orientation={orientation}\n      data-disabled={disabled || undefined}\n      data-fill={fill || undefined}\n      data-size={size}\n      data-variant={variant}\n      data-orientation={orientation}\n      data-activation-mode={activationMode}\n    >\n      <SegmentedControlSelectionContext.Provider value={selection}>\n        {children}\n      </SegmentedControlSelectionContext.Provider>\n      <span\n        aria-hidden=\"true\"\n        className=\"dsx-segmented-control__indicator\"\n        style={\n          orientation === 'vertical'\n            ? {\n                transform: `translateY(${indicator.y}px)`,\n                height: indicator.height,\n                transition: indicatorLive ? undefined : 'none',\n              }\n            : {\n                transform: `translateX(${indicator.x}px)`,\n                width: indicator.width,\n                transition: indicatorLive ? undefined : 'none',\n              }\n        }\n      />\n    </ToggleGroupPrimitive.Root>\n  )\n})\nSegmentedControlRoot.displayName = 'SegmentedControl'\n\ninterface SegmentedControlItemProps\n  extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> {\n  iconOnly?: boolean\n  value: string\n}\n\nconst SegmentedControlItem = React.forwardRef<\n  React.ComponentRef<typeof ToggleGroupPrimitive.Item>,\n  SegmentedControlItemProps\n>(({ children, className, disabled, iconOnly = false, value, onFocus, ...props }, forwardedRef) => {\n  const selection = React.useContext(SegmentedControlSelectionContext)\n\n  const handleItemFocus: React.FocusEventHandler<React.ComponentRef<typeof ToggleGroupPrimitive.Item>> = (event) => {\n    onFocus?.(event)\n\n    if (!selection || selection.activationMode !== 'automatic') {\n      return\n    }\n\n    if (selection.disabled || disabled || value === selection.selectedValue) {\n      return\n    }\n\n    selection.requestSelect(value)\n  }\n\n  return (\n    <ToggleGroupPrimitive.Item\n      {...props}\n      ref={forwardedRef}\n      value={value}\n      className={classNames('dsx-segmented-control__item', className)}\n      disabled={disabled}\n      data-disabled={disabled || undefined}\n      data-icon-only={iconOnly || undefined}\n      onFocus={handleItemFocus}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n})\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n\nconst SegmentedControl: typeof SegmentedControlRoot & {\n  Item: typeof SegmentedControlItem\n} = Object.assign(SegmentedControlRoot, {\n  Item: SegmentedControlItem,\n})\n\nexport { SegmentedControl, SegmentedControlItem, SegmentedControlRoot }\nexport type { SegmentedControlItemProps, SegmentedControlRootProps }\n"],
+  "mappings": "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",
   "names": ["classNames"]
 }

package/dist/components/segmentedControl/SegmentedControl.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.cts","sourceRoot":"","sources":["../../../src/components/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAGpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAA;AAEnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,4BAA4B,GAAG,eAAe,CAAC,OAAO,wBAAwB,CAAC,GAAG;IACrF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACpC,CAAA;AAED,KAAK,yBAAyB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAC7F,4BAA4B,CAAA;AAgChC,QAAA,MAAM,oBAAoB,kGAwJxB,CAAA;AAGF,UAAU,yBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,oBAAoB,qGAkCxB,CAAA;AAGF,QAAA,MAAM,gBAAgB,EAAE,OAAO,oBAAoB,GAAG;IACpD,IAAI,EAAE,OAAO,oBAAoB,CAAA;CAGjC,CAAA;AAEF,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAA;AACvE,YAAY,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,CAAA"}
+{"version":3,"file":"SegmentedControl.d.cts","sourceRoot":"","sources":["../../../src/components/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAGpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAA;AAEnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,4BAA4B,GAAG,eAAe,CAAC,OAAO,wBAAwB,CAAC,GAAG;IACrF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACpC,CAAA;AAED,KAAK,yBAAyB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAC7F,4BAA4B,CAAA;AAgChC,QAAA,MAAM,oBAAoB,kGA0JxB,CAAA;AAGF,UAAU,yBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,oBAAoB,qGAkCxB,CAAA;AAGF,QAAA,MAAM,gBAAgB,EAAE,OAAO,oBAAoB,GAAG;IACpD,IAAI,EAAE,OAAO,oBAAoB,CAAA;CAGjC,CAAA;AAEF,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAA;AACvE,YAAY,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,CAAA"}

package/dist/components/segmentedControl/SegmentedControl.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.mts","sourceRoot":"","sources":["../../../src/components/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAGpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAA;AAEnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,4BAA4B,GAAG,eAAe,CAAC,OAAO,wBAAwB,CAAC,GAAG;IACrF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACpC,CAAA;AAED,KAAK,yBAAyB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAC7F,4BAA4B,CAAA;AAgChC,QAAA,MAAM,oBAAoB,kGAwJxB,CAAA;AAGF,UAAU,yBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,oBAAoB,qGAkCxB,CAAA;AAGF,QAAA,MAAM,gBAAgB,EAAE,OAAO,oBAAoB,GAAG;IACpD,IAAI,EAAE,OAAO,oBAAoB,CAAA;CAGjC,CAAA;AAEF,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAA;AACvE,YAAY,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,CAAA"}
+{"version":3,"file":"SegmentedControl.d.mts","sourceRoot":"","sources":["../../../src/components/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAGpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAA;AAEnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,4BAA4B,GAAG,eAAe,CAAC,OAAO,wBAAwB,CAAC,GAAG;IACrF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACpC,CAAA;AAED,KAAK,yBAAyB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAC7F,4BAA4B,CAAA;AAgChC,QAAA,MAAM,oBAAoB,kGA0JxB,CAAA;AAGF,UAAU,yBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,oBAAoB,qGAkCxB,CAAA;AAGF,QAAA,MAAM,gBAAgB,EAAE,OAAO,oBAAoB,GAAG;IACpD,IAAI,EAAE,OAAO,oBAAoB,CAAA;CAGjC,CAAA;AAEF,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAA;AACvE,YAAY,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,CAAA"}

package/dist/components/segmentedControl/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAGpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAA;AAEnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,4BAA4B,GAAG,eAAe,CAAC,OAAO,wBAAwB,CAAC,GAAG;IACrF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACpC,CAAA;AAED,KAAK,yBAAyB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAC7F,4BAA4B,CAAA;AAgChC,QAAA,MAAM,oBAAoB,kGAwJxB,CAAA;AAGF,UAAU,yBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,oBAAoB,qGAkCxB,CAAA;AAGF,QAAA,MAAM,gBAAgB,EAAE,OAAO,oBAAoB,GAAG;IACpD,IAAI,EAAE,OAAO,oBAAoB,CAAA;CAGjC,CAAA;AAEF,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAA;AACvE,YAAY,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,CAAA"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAGpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAA;AAEnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,4BAA4B,GAAG,eAAe,CAAC,OAAO,wBAAwB,CAAC,GAAG;IACrF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACpC,CAAA;AAED,KAAK,yBAAyB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAC7F,4BAA4B,CAAA;AAgChC,QAAA,MAAM,oBAAoB,kGA0JxB,CAAA;AAGF,UAAU,yBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,oBAAoB,qGAkCxB,CAAA;AAGF,QAAA,MAAM,gBAAgB,EAAE,OAAO,oBAAoB,GAAG;IACpD,IAAI,EAAE,OAAO,oBAAoB,CAAA;CAGjC,CAAA;AAEF,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAA;AACvE,YAAY,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,CAAA"}

package/dist/components/segmentedControl/SegmentedControl.js

@@ -40,8 +40,8 @@ const SegmentedControlRoot = React.forwardRef(({ className, children, disabled =
     const rootRect = root.getBoundingClientRect();
     const activeRect = active.getBoundingClientRect();
     setIndicator({
-      x: activeRect.left - rootRect.left - root.clientLeft,
-      y: activeRect.top - rootRect.top - root.clientTop,
+      x: activeRect.left - rootRect.left - root.clientLeft + root.scrollLeft,
+      y: activeRect.top - rootRect.top - root.clientTop + root.scrollTop,
       width: activeRect.width,
       height: activeRect.height
     });

package/dist/components/segmentedControl/SegmentedControl.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/segmentedControl/SegmentedControl.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { segmentedControlPropDefs } from './segmentedControl.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype SegmentedControlRootOwnProps = GetPropDefTypes<typeof segmentedControlPropDefs> & {\n  value?: string\n  defaultValue?: string\n  onValueChange?(value: string): void\n}\n\ntype SegmentedControlRootProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>\n  & SegmentedControlRootOwnProps\n\ntype SegmentedControlRootElement = React.ComponentRef<typeof ToggleGroupPrimitive.Root>\n\nfunction composeRefs<T>(...refs: Array<React.Ref<T> | undefined>) {\n  return (node: T | null) => {\n    for (const ref of refs) {\n      if (!ref) {\n        continue\n      }\n\n      if (typeof ref === 'function') {\n        ref(node)\n        continue\n      }\n\n      ;(ref as { current: T | null }).current = node\n    }\n  }\n}\n\nconst useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\ninterface SegmentedControlSelection {\n  activationMode: 'manual' | 'automatic'\n  disabled: boolean\n  selectedValue: string | undefined\n  requestSelect(value: string): void\n}\n\nconst SegmentedControlSelectionContext = React.createContext<SegmentedControlSelection | null>(null)\n\nconst SegmentedControlRoot = React.forwardRef<\n  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,\n  SegmentedControlRootProps\n>(({ className, children, disabled = false, size = 'md', variant = 'default', orientation = 'horizontal', activationMode = 'manual', fill = false, value, defaultValue, onValueChange, ...props }, forwardedRef) => {\n  const rootProps = extractProps(\n    { className, disabled, orientation, size },\n    segmentedControlPropDefs,\n  )\n  const innerRootRef = React.useRef<SegmentedControlRootElement | null>(null)\n  const mergedRef = composeRefs(forwardedRef, innerRootRef)\n\n  // Deselect guard (disallowEmptySelection): own the selection so the control\n  // can never render with no active item. Radix fires \"\" when the active item\n  // is clicked; the handler below swallows it and keeps the last value, and\n  // the resolved value below keeps Radix controlled so its internal state can\n  // never clear either.\n  const [uncontrolledValue, setUncontrolledValue] = React.useState<string | undefined>(defaultValue)\n  const resolvedValue = value ?? uncontrolledValue\n\n  // Sliding indicator: Mantine-style measured pill rendered behind the active\n  // item. The offset is a physical-pixel diff (active.left - root.left), which\n  // is direction-agnostic and therefore RTL-correct without special-casing.\n  // Measuring in layout effect positions the pill before first paint, and the\n  // `indicatorLive` gate keeps `transition: none` until that first positioned\n  // frame so mount never animates from the origin.\n  const [indicator, setIndicator] = React.useState({ x: 0, y: 0, width: 0, height: 0 })\n  const [indicatorLive, setIndicatorLive] = React.useState(false)\n\n  const measureActive = React.useCallback((root: HTMLElement) => {\n    const active = root.querySelector<HTMLElement>('[data-state=\"on\"]')\n\n    if (!active) {\n      return\n    }\n\n    const rootRect = root.getBoundingClientRect()\n    const activeRect = active.getBoundingClientRect()\n    // Border-box diffs are padding-box positioned: subtract the frame so the\n    // wrapper never overshoots the content box (1-2px overflow summoned a\n    // horizontal scrollbar on bordered variants).\n    setIndicator({\n      x: activeRect.left - rootRect.left - root.clientLeft,\n      y: activeRect.top - rootRect.top - root.clientTop,\n      width: activeRect.width,\n      height: activeRect.height,\n    })\n  }, [])\n\n  useIsomorphicLayoutEffect(() => {\n    const root = innerRootRef.current\n\n    if (!root) {\n      return undefined\n    }\n\n    const measure = () => measureActive(root)\n\n    measure()\n    setIndicatorLive(true)\n\n    if (typeof ResizeObserver === 'undefined') {\n      return undefined\n    }\n\n    const observer = new ResizeObserver(measure)\n    observer.observe(root)\n\n    const active = root.querySelector('[data-state=\"on\"]')\n\n    if (active) {\n      observer.observe(active)\n    }\n\n    return () => observer.disconnect()\n  }, [resolvedValue, measureActive])\n\n  const handleValueChange = (nextValue: string) => {\n    if (!nextValue) {\n      return\n    }\n\n    if (value === undefined) {\n      setUncontrolledValue(nextValue)\n    }\n\n    onValueChange?.(nextValue)\n  }\n\n  // Automatic activation: selection follows focus, so arrow-key navigation\n  // selects without Enter. The focused value goes through the same guarded\n  // setter, so focus can never empty the selection; landing on the\n  // already-selected item is a no-op. Manual mode (default) ignores focus\n  // and only selects on activation \u2014 use it when onValueChange drives side\n  // effects that must not fire on focus. Each item reads this context in its\n  // own onFocus (Radix strips the value prop from the DOM, so the root\n  // cannot recover the focused value from the event target).\n  const selection = React.useMemo<SegmentedControlSelection>(\n    () => ({\n      activationMode,\n      disabled,\n      selectedValue: resolvedValue,\n      requestSelect: handleValueChange,\n    }),\n    [activationMode, disabled, resolvedValue, handleValueChange],\n  )\n\n  return (\n    <ToggleGroupPrimitive.Root\n      {...props}\n      {...rootProps}\n      ref={mergedRef}\n      className={classNames(\n        'dsx-segmented-control',\n        `dsx-segmented-control--${size}`,\n        `dsx-segmented-control--${variant}`,\n        fill && 'dsx-segmented-control--fill',\n        className,\n      )}\n      type=\"single\"\n      value={resolvedValue}\n      onValueChange={handleValueChange}\n      disabled={disabled}\n      orientation={orientation}\n      data-disabled={disabled || undefined}\n      data-fill={fill || undefined}\n      data-size={size}\n      data-variant={variant}\n      data-orientation={orientation}\n      data-activation-mode={activationMode}\n    >\n      <SegmentedControlSelectionContext.Provider value={selection}>\n        {children}\n      </SegmentedControlSelectionContext.Provider>\n      <span\n        aria-hidden=\"true\"\n        className=\"dsx-segmented-control__indicator\"\n        style={\n          orientation === 'vertical'\n            ? {\n                transform: `translateY(${indicator.y}px)`,\n                height: indicator.height,\n                transition: indicatorLive ? undefined : 'none',\n              }\n            : {\n                transform: `translateX(${indicator.x}px)`,\n                width: indicator.width,\n                transition: indicatorLive ? undefined : 'none',\n              }\n        }\n      />\n    </ToggleGroupPrimitive.Root>\n  )\n})\nSegmentedControlRoot.displayName = 'SegmentedControl'\n\ninterface SegmentedControlItemProps\n  extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> {\n  iconOnly?: boolean\n  value: string\n}\n\nconst SegmentedControlItem = React.forwardRef<\n  React.ComponentRef<typeof ToggleGroupPrimitive.Item>,\n  SegmentedControlItemProps\n>(({ children, className, disabled, iconOnly = false, value, onFocus, ...props }, forwardedRef) => {\n  const selection = React.useContext(SegmentedControlSelectionContext)\n\n  const handleItemFocus: React.FocusEventHandler<React.ComponentRef<typeof ToggleGroupPrimitive.Item>> = (event) => {\n    onFocus?.(event)\n\n    if (!selection || selection.activationMode !== 'automatic') {\n      return\n    }\n\n    if (selection.disabled || disabled || value === selection.selectedValue) {\n      return\n    }\n\n    selection.requestSelect(value)\n  }\n\n  return (\n    <ToggleGroupPrimitive.Item\n      {...props}\n      ref={forwardedRef}\n      value={value}\n      className={classNames('dsx-segmented-control__item', className)}\n      disabled={disabled}\n      data-disabled={disabled || undefined}\n      data-icon-only={iconOnly || undefined}\n      onFocus={handleItemFocus}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n})\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n\nconst SegmentedControl: typeof SegmentedControlRoot & {\n  Item: typeof SegmentedControlItem\n} = Object.assign(SegmentedControlRoot, {\n  Item: SegmentedControlItem,\n})\n\nexport { SegmentedControl, SegmentedControlItem, SegmentedControlRoot }\nexport type { SegmentedControlItemProps, SegmentedControlRootProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { segmentedControlPropDefs } from './segmentedControl.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype SegmentedControlRootOwnProps = GetPropDefTypes<typeof segmentedControlPropDefs> & {\n  value?: string\n  defaultValue?: string\n  onValueChange?(value: string): void\n}\n\ntype SegmentedControlRootProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>\n  & SegmentedControlRootOwnProps\n\ntype SegmentedControlRootElement = React.ComponentRef<typeof ToggleGroupPrimitive.Root>\n\nfunction composeRefs<T>(...refs: Array<React.Ref<T> | undefined>) {\n  return (node: T | null) => {\n    for (const ref of refs) {\n      if (!ref) {\n        continue\n      }\n\n      if (typeof ref === 'function') {\n        ref(node)\n        continue\n      }\n\n      ;(ref as { current: T | null }).current = node\n    }\n  }\n}\n\nconst useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\ninterface SegmentedControlSelection {\n  activationMode: 'manual' | 'automatic'\n  disabled: boolean\n  selectedValue: string | undefined\n  requestSelect(value: string): void\n}\n\nconst SegmentedControlSelectionContext = React.createContext<SegmentedControlSelection | null>(null)\n\nconst SegmentedControlRoot = React.forwardRef<\n  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,\n  SegmentedControlRootProps\n>(({ className, children, disabled = false, size = 'md', variant = 'default', orientation = 'horizontal', activationMode = 'manual', fill = false, value, defaultValue, onValueChange, ...props }, forwardedRef) => {\n  const rootProps = extractProps(\n    { className, disabled, orientation, size },\n    segmentedControlPropDefs,\n  )\n  const innerRootRef = React.useRef<SegmentedControlRootElement | null>(null)\n  const mergedRef = composeRefs(forwardedRef, innerRootRef)\n\n  // Deselect guard (disallowEmptySelection): own the selection so the control\n  // can never render with no active item. Radix fires \"\" when the active item\n  // is clicked; the handler below swallows it and keeps the last value, and\n  // the resolved value below keeps Radix controlled so its internal state can\n  // never clear either.\n  const [uncontrolledValue, setUncontrolledValue] = React.useState<string | undefined>(defaultValue)\n  const resolvedValue = value ?? uncontrolledValue\n\n  // Sliding indicator: Mantine-style measured pill rendered behind the active\n  // item. The offset is a physical-pixel diff (active.left - root.left), which\n  // is direction-agnostic and therefore RTL-correct without special-casing.\n  // Measuring in layout effect positions the pill before first paint, and the\n  // `indicatorLive` gate keeps `transition: none` until that first positioned\n  // frame so mount never animates from the origin.\n  const [indicator, setIndicator] = React.useState({ x: 0, y: 0, width: 0, height: 0 })\n  const [indicatorLive, setIndicatorLive] = React.useState(false)\n\n  const measureActive = React.useCallback((root: HTMLElement) => {\n    const active = root.querySelector<HTMLElement>('[data-state=\"on\"]')\n\n    if (!active) {\n      return\n    }\n\n    const rootRect = root.getBoundingClientRect()\n    const activeRect = active.getBoundingClientRect()\n    // Border-box diffs are padding-box positioned: subtract the frame so the\n    // wrapper never overshoots the content box (1-2px overflow summoned a\n    // horizontal scrollbar on bordered variants). Add scroll offsets to convert\n    // viewport coordinates into the indicator's content coordinates; otherwise\n    // a scrolled selection paints behind the preceding item.\n    setIndicator({\n      x: activeRect.left - rootRect.left - root.clientLeft + root.scrollLeft,\n      y: activeRect.top - rootRect.top - root.clientTop + root.scrollTop,\n      width: activeRect.width,\n      height: activeRect.height,\n    })\n  }, [])\n\n  useIsomorphicLayoutEffect(() => {\n    const root = innerRootRef.current\n\n    if (!root) {\n      return undefined\n    }\n\n    const measure = () => measureActive(root)\n\n    measure()\n    setIndicatorLive(true)\n\n    if (typeof ResizeObserver === 'undefined') {\n      return undefined\n    }\n\n    const observer = new ResizeObserver(measure)\n    observer.observe(root)\n\n    const active = root.querySelector('[data-state=\"on\"]')\n\n    if (active) {\n      observer.observe(active)\n    }\n\n    return () => observer.disconnect()\n  }, [resolvedValue, measureActive])\n\n  const handleValueChange = (nextValue: string) => {\n    if (!nextValue) {\n      return\n    }\n\n    if (value === undefined) {\n      setUncontrolledValue(nextValue)\n    }\n\n    onValueChange?.(nextValue)\n  }\n\n  // Automatic activation: selection follows focus, so arrow-key navigation\n  // selects without Enter. The focused value goes through the same guarded\n  // setter, so focus can never empty the selection; landing on the\n  // already-selected item is a no-op. Manual mode (default) ignores focus\n  // and only selects on activation \u2014 use it when onValueChange drives side\n  // effects that must not fire on focus. Each item reads this context in its\n  // own onFocus (Radix strips the value prop from the DOM, so the root\n  // cannot recover the focused value from the event target).\n  const selection = React.useMemo<SegmentedControlSelection>(\n    () => ({\n      activationMode,\n      disabled,\n      selectedValue: resolvedValue,\n      requestSelect: handleValueChange,\n    }),\n    [activationMode, disabled, resolvedValue, handleValueChange],\n  )\n\n  return (\n    <ToggleGroupPrimitive.Root\n      {...props}\n      {...rootProps}\n      ref={mergedRef}\n      className={classNames(\n        'dsx-segmented-control',\n        `dsx-segmented-control--${size}`,\n        `dsx-segmented-control--${variant}`,\n        fill && 'dsx-segmented-control--fill',\n        className,\n      )}\n      type=\"single\"\n      value={resolvedValue}\n      onValueChange={handleValueChange}\n      disabled={disabled}\n      orientation={orientation}\n      data-disabled={disabled || undefined}\n      data-fill={fill || undefined}\n      data-size={size}\n      data-variant={variant}\n      data-orientation={orientation}\n      data-activation-mode={activationMode}\n    >\n      <SegmentedControlSelectionContext.Provider value={selection}>\n        {children}\n      </SegmentedControlSelectionContext.Provider>\n      <span\n        aria-hidden=\"true\"\n        className=\"dsx-segmented-control__indicator\"\n        style={\n          orientation === 'vertical'\n            ? {\n                transform: `translateY(${indicator.y}px)`,\n                height: indicator.height,\n                transition: indicatorLive ? undefined : 'none',\n              }\n            : {\n                transform: `translateX(${indicator.x}px)`,\n                width: indicator.width,\n                transition: indicatorLive ? undefined : 'none',\n              }\n        }\n      />\n    </ToggleGroupPrimitive.Root>\n  )\n})\nSegmentedControlRoot.displayName = 'SegmentedControl'\n\ninterface SegmentedControlItemProps\n  extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> {\n  iconOnly?: boolean\n  value: string\n}\n\nconst SegmentedControlItem = React.forwardRef<\n  React.ComponentRef<typeof ToggleGroupPrimitive.Item>,\n  SegmentedControlItemProps\n>(({ children, className, disabled, iconOnly = false, value, onFocus, ...props }, forwardedRef) => {\n  const selection = React.useContext(SegmentedControlSelectionContext)\n\n  const handleItemFocus: React.FocusEventHandler<React.ComponentRef<typeof ToggleGroupPrimitive.Item>> = (event) => {\n    onFocus?.(event)\n\n    if (!selection || selection.activationMode !== 'automatic') {\n      return\n    }\n\n    if (selection.disabled || disabled || value === selection.selectedValue) {\n      return\n    }\n\n    selection.requestSelect(value)\n  }\n\n  return (\n    <ToggleGroupPrimitive.Item\n      {...props}\n      ref={forwardedRef}\n      value={value}\n      className={classNames('dsx-segmented-control__item', className)}\n      disabled={disabled}\n      data-disabled={disabled || undefined}\n      data-icon-only={iconOnly || undefined}\n      onFocus={handleItemFocus}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n})\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n\nconst SegmentedControl: typeof SegmentedControlRoot & {\n  Item: typeof SegmentedControlItem\n} = Object.assign(SegmentedControlRoot, {\n  Item: SegmentedControlItem,\n})\n\nexport { SegmentedControl, SegmentedControlItem, SegmentedControlRoot }\nexport type { SegmentedControlItemProps, SegmentedControlRootProps }\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/separator.css

@@ -19,18 +19,12 @@
   margin-inline: var(--dsx-space-xs);
 }
 
-.dsx-separator[data-orientation='horizontal'][data-size='sm'] { height: var(--dsx-border-width-sm); }
-.dsx-separator[data-orientation='horizontal'][data-size='lg'] { height: var(--dsx-border-width-lg); }
-
-.dsx-separator[data-orientation='vertical'][data-size='sm'] { width: var(--dsx-border-width-sm); }
-.dsx-separator[data-orientation='vertical'][data-size='lg'] { width: var(--dsx-border-width-lg); }
-
 .dsx-separator--decorative {
   background: var(--dsx-color-separator-muted);
 }
 
-/* Reserved accent hook: any accent-color value paints the separator in the accent
-   indicator tone, for deliberate accent-divided surfaces. */
+/* Explicit accent rules use the decorative role; readable ink and selected
+   control indicators retain their own accent-indicator role. */
 .dsx-separator[data-accent-color] {
-  background: var(--dsx-color-accent-indicator);
+  background: var(--dsx-color-accent-border);
 }

package/dist/components/sidebar/Sidebar.cjs

@@ -167,6 +167,7 @@ function useSidebar() {
     },
     isMobile: false,
     mobile: "none",
+    mobileTrigger: true,
     sidebarId: void 0,
     collapsible: "offcanvas",
     manualToggleRef: { current: false },
@@ -174,7 +175,8 @@ function useSidebar() {
     recoveryRailRef: { current: null },
     rootRef: { current: null },
     defaultSubmenuMode: "click",
-    submenuOpenOnActive: true
+    submenuOpenOnActive: true,
+    variant: "default"
   };
 }
 function useMergedRef(...refs) {
@@ -254,8 +256,10 @@ const SidebarProvider = React.forwardRef((props, forwardedRef) => {
     storage = "localStorage",
     toggleShortcut = true,
     mobile = "sheet",
+    mobileTrigger = true,
     mobileBreakpoint = 768,
     collapsible = "offcanvas",
+    variant = "default",
     hoverExpand = false,
     previewOpen = false,
     nested = false,
@@ -338,6 +342,7 @@ const SidebarProvider = React.forwardRef((props, forwardedRef) => {
     }
   }, [isMobile]);
   const isMobileMode = mobile !== "none" && isMobile;
+  const effectiveVariant = variant === "floating" && !isMobileMode ? "floating" : "default";
   const canPreview = hoverExpand && collapsible === "icon" && !isMobileMode;
   const effectivePreviewExpanded = canPreview && (previewExpanded || previewOpen);
   const effectiveExpanded = persisted.expanded || effectivePreviewExpanded;
@@ -363,6 +368,7 @@ const SidebarProvider = React.forwardRef((props, forwardedRef) => {
       setMobileSheetOpen,
       isMobile: isMobileMode,
       mobile,
+      mobileTrigger,
       sidebarId,
       collapsible,
       manualToggleRef,
@@ -370,9 +376,10 @@ const SidebarProvider = React.forwardRef((props, forwardedRef) => {
       recoveryRailRef,
       rootRef,
       defaultSubmenuMode,
-      submenuOpenOnActive
+      submenuOpenOnActive,
+      variant: effectiveVariant
     }),
-    [effectiveExpanded, persisted.expanded, persisted.setExpanded, effectivePreviewExpanded, canPreview, mobileSheetOpen, isMobileMode, mobile, sidebarId, collapsible, defaultSubmenuMode, submenuOpenOnActive]
+    [effectiveExpanded, persisted.expanded, persisted.setExpanded, effectivePreviewExpanded, canPreview, mobileSheetOpen, isMobileMode, mobile, mobileTrigger, sidebarId, collapsible, defaultSubmenuMode, submenuOpenOnActive, effectiveVariant]
   );
   const nestedCounterRef = React.useRef(0);
   const desktopChildren = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarNestedContext.Provider, { value: { counter: nestedCounterRef, isActive: nested }, children });
@@ -387,6 +394,7 @@ const SidebarProvider = React.forwardRef((props, forwardedRef) => {
       "data-preview-expanded": effectivePreviewExpanded ? "true" : "false",
       "data-pinned-state": getSidebarState(persisted.expanded),
       "data-transitions-ready": transitionsReady ? "true" : "false",
+      "data-variant": effectiveVariant,
       ...providerProps,
       suppressHydrationWarning: true,
       children: [
@@ -433,6 +441,7 @@ const SidebarRoot = React.forwardRef((props, forwardedRef) => {
     },
     isMobile: false,
     mobile: "none",
+    mobileTrigger: true,
     sidebarId: void 0,
     collapsible: "offcanvas",
     manualToggleRef: { current: false },
@@ -440,7 +449,8 @@ const SidebarRoot = React.forwardRef((props, forwardedRef) => {
     recoveryRailRef: { current: null },
     rootRef: { current: null },
     defaultSubmenuMode: "click",
-    submenuOpenOnActive: true
+    submenuOpenOnActive: true,
+    variant: "default"
   };
   const { className, ...sidebarProps } = (0, import_extractProps.extractProps)(
     {
@@ -544,7 +554,7 @@ const SidebarRoot = React.forwardRef((props, forwardedRef) => {
   } = sidebarProps;
   const isMobileSheetMode = value.isMobile && value.mobile === "sheet";
   const content = isMobileSheetMode ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(React.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Drawer, { open: value.mobileSheetOpen, onOpenChange: value.setMobileSheetOpen, direction: "left", children: [
-    !value.mobileSheetOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    !value.mobileSheetOpen && value.mobileTrigger && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
         type: "button",
@@ -568,6 +578,7 @@ const SidebarRoot = React.forwardRef((props, forwardedRef) => {
           "data-preview-expanded": "false",
           "data-pinned-state": getSidebarState(value.pinnedExpanded),
           "data-effect": effect,
+          "data-variant": value.variant,
           "data-nested": isNestedInstance ? "true" : void 0,
           "data-slot": "sidebar",
           "aria-label": "Sidebar",
@@ -588,6 +599,7 @@ const SidebarRoot = React.forwardRef((props, forwardedRef) => {
       "data-preview-expanded": value.previewExpanded ? "true" : "false",
       "data-pinned-state": getSidebarState(value.pinnedExpanded),
       "data-effect": effect,
+      "data-variant": value.variant,
       "data-nested": isNestedInstance ? "true" : void 0,
       "data-slot": "sidebar",
       "aria-label": "Sidebar",