@d4gger/design-system 3.0.0 → 4.0.0

package/dist/components/tabs/Tabs.js

@@ -6,7 +6,7 @@ import { Slot } from "../slot/Slot.js";
 import { extractProps } from "../../_internal/helpers/extractProps.js";
 import { tabsContentPropDefs, tabsListPropDefs, tabsPropDefs, tabsTriggerPropDefs } from "./tabs.props.js";
 import { jsx } from "react/jsx-runtime";
-const TabsContext = React.createContext({ value: void 0, onValueChange: void 0 });
+const TabsContext = React.createContext(null);
 function useTabsContext() {
   const ctx = React.useContext(TabsContext);
   if (!ctx) {
@@ -15,72 +15,57 @@ function useTabsContext() {
   return ctx;
 }
 const TabsRoot = React.forwardRef(({ children, onValueChange, value, ...props }, forwardedRef) => {
-  const { asChild: _asChild, className, size = "md", ...tabsProps } = extractProps(props, tabsPropDefs);
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { value, onValueChange }, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ...tabsProps, ref: forwardedRef, className, onValueChange, value, "data-size": size, children }) });
+  const { asChild, className, size = "md", ...tabsProps } = extractProps(props, tabsPropDefs);
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { value, onValueChange }, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ...tabsProps, asChild, ref: forwardedRef, className: classNames("dsx-tabs", className), onValueChange, value, "data-size": size, children }) });
 });
 TabsRoot.displayName = "Tabs";
-const TabsIndicator = React.forwardRef(({ className, asChild, ...props }, forwardedRef) => {
+const TabsIndicator = React.forwardRef(({ className, asChild, style, ...props }, forwardedRef) => {
   const { value } = useTabsContext();
   const indicatorRef = React.useRef(null);
-  const [position, setPosition] = React.useState({ left: 0, width: 0 });
+  const [position, setPosition] = React.useState({ width: 0 });
+  const setRef = React.useCallback((node) => {
+    indicatorRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  }, [forwardedRef]);
   React.useEffect(() => {
     const list = indicatorRef.current?.closest(".dsx-tabs__list");
     if (!list) return;
-    const triggers = Array.from(list.querySelectorAll('[role="tab"]'));
-    const activeTrigger = triggers.find((trigger) => {
-      const isActive = trigger.getAttribute("data-state") === "active";
-      const triggerValue = trigger.getAttribute("data-value");
-      return isActive && (triggerValue === value || value === void 0);
-    });
-    if (activeTrigger) {
+    const update = () => {
+      const active = Array.from(list.querySelectorAll('[role="tab"][data-state="active"]')).find((trigger) => trigger.closest(".dsx-tabs__list") === list);
+      if (!active) return;
       const listRect = list.getBoundingClientRect();
-      const triggerRect = activeTrigger.getBoundingClientRect();
-      setPosition({
-        left: triggerRect.left - listRect.left,
-        width: triggerRect.width
-      });
-    }
+      const triggerRect = active.getBoundingClientRect();
+      setPosition(list.dataset.orientation === "vertical" ? { left: 0, top: triggerRect.top - listRect.top + list.scrollTop - list.clientTop, height: triggerRect.height } : { left: triggerRect.left - listRect.left + list.scrollLeft - list.clientLeft, width: triggerRect.width });
+    };
+    update();
+    const mutation = new MutationObserver(update);
+    mutation.observe(list, { subtree: true, childList: true, attributes: true, attributeFilter: ["data-state", "data-orientation"] });
+    const resize = new ResizeObserver(update);
+    resize.observe(list);
+    list.querySelectorAll('[role="tab"]').forEach((trigger) => resize.observe(trigger));
+    return () => {
+      mutation.disconnect();
+      resize.disconnect();
+    };
   }, [value]);
-  if (asChild) {
-    return /* @__PURE__ */ jsx(
-      Slot,
-      {
-        ref: forwardedRef,
-        className: classNames("dsx-tabs__indicator", className),
-        "data-slot": "tabs-indicator",
-        style: {
-          position: "absolute",
-          bottom: 0,
-          left: position.left,
-          width: position.width,
-          transition: "left 200ms ease, width 200ms ease"
-        },
-        ...props
-      }
-    );
-  }
+  const Comp = asChild ? Slot : "div";
   return /* @__PURE__ */ jsx(
-    "div",
+    Comp,
     {
-      ref: forwardedRef,
+      ...props,
+      ref: setRef,
       className: classNames("dsx-tabs__indicator", className),
       "data-slot": "tabs-indicator",
-      style: {
-        position: "absolute",
-        bottom: 0,
-        left: position.left,
-        width: position.width,
-        transition: "left 200ms ease, width 200ms ease"
-      },
-      ...props,
-      children: /* @__PURE__ */ jsx("div", { ref: indicatorRef, style: { width: "100%", height: 2, backgroundColor: "var(--dsx-colors-accent-9)" } })
+      "aria-hidden": "true",
+      style: { ...position, ...style }
     }
   );
 });
 TabsIndicator.displayName = "TabsIndicator";
 const TabsList = React.forwardRef(
   ({ className: propClassName, variant = "default", ...props }, forwardedRef) => {
-    const { asChild: _asChild, className, ...listProps } = extractProps(
+    const { asChild, className, ...listProps } = extractProps(
       {
         ...props,
         className: propClassName,
@@ -92,23 +77,23 @@ const TabsList = React.forwardRef(
       TabsPrimitive.List,
       {
         ...listProps,
+        asChild,
         ref: forwardedRef,
         className: classNames("dsx-tabs__list", className),
-        "data-variant": variant,
-        style: { position: "relative" }
+        "data-variant": variant
       }
     );
   }
 );
 TabsList.displayName = "TabsList";
 const TabsTrigger = React.forwardRef((props, forwardedRef) => {
-  const { asChild: _asChild, className, ...triggerProps } = extractProps(props, tabsTriggerPropDefs);
-  return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { ...triggerProps, ref: forwardedRef, className: classNames("dsx-tabs__trigger", className) });
+  const { asChild, className, ...triggerProps } = extractProps(props, tabsTriggerPropDefs);
+  return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { ...triggerProps, asChild, ref: forwardedRef, className: classNames("dsx-tabs__trigger", className) });
 });
 TabsTrigger.displayName = "TabsTrigger";
 const TabsContent = React.forwardRef((props, forwardedRef) => {
-  const { asChild: _asChild, className, ...contentProps } = extractProps(props, tabsContentPropDefs);
-  return /* @__PURE__ */ jsx(TabsPrimitive.Content, { ...contentProps, ref: forwardedRef, className: classNames("dsx-tabs__content", className) });
+  const { asChild, className, ...contentProps } = extractProps(props, tabsContentPropDefs);
+  return /* @__PURE__ */ jsx(TabsPrimitive.Content, { ...contentProps, asChild, ref: forwardedRef, className: classNames("dsx-tabs__content", className) });
 });
 TabsContent.displayName = "TabsContent";
 const TabsContentGroup = React.forwardRef(({ className, asChild, ...props }, forwardedRef) => {

package/dist/components/tabs/Tabs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/tabs/Tabs.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { Slot } from '../slot/Slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { tabsContentPropDefs, tabsListPropDefs, tabsPropDefs, tabsTriggerPropDefs } from './tabs.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype TabsOwnProps = GetPropDefTypes<typeof tabsPropDefs>\ntype TabsListOwnProps = GetPropDefTypes<typeof tabsListPropDefs>\ntype TabsTriggerOwnProps = GetPropDefTypes<typeof tabsTriggerPropDefs>\ntype TabsContentOwnProps = GetPropDefTypes<typeof tabsContentPropDefs>\n\ntype TabsListVariant = NonNullable<TabsListOwnProps['variant']>\n\ntype TabsContextValue = {\n  value: string | undefined\n  onValueChange: ((value: string) => void) | undefined\n}\n\nconst TabsContext = React.createContext<TabsContextValue>({ value: undefined, onValueChange: undefined })\n\nfunction useTabsContext() {\n  const ctx = React.useContext(TabsContext)\n  if (!ctx) {\n    throw new Error('Tabs compound components must be rendered within a Tabs root.')\n  }\n  return ctx\n}\n\ninterface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, TabsOwnProps {}\ninterface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, TabsListOwnProps {}\ninterface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, TabsTriggerOwnProps {}\ninterface TabsContentProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>, TabsContentOwnProps {}\n\ninterface TabsIndicatorProps extends React.ComponentPropsWithoutRef<'div'> {\n  asChild?: boolean\n}\n\ninterface TabsContentGroupProps extends React.ComponentPropsWithoutRef<'div'> {\n  asChild?: boolean\n}\n\nconst TabsRoot = React.forwardRef<React.ComponentRef<typeof TabsPrimitive.Root>, TabsProps>(({ children, onValueChange, value, ...props }, forwardedRef) => {\n  const { asChild: _asChild, className, size = 'md', ...tabsProps } = extractProps(props, tabsPropDefs)\n\n  return (\n    <TabsContext.Provider value={{ value, onValueChange }}>\n      <TabsPrimitive.Root {...tabsProps} ref={forwardedRef} className={className} onValueChange={onValueChange} value={value} data-size={size}>\n        {children}\n      </TabsPrimitive.Root>\n    </TabsContext.Provider>\n  )\n})\nTabsRoot.displayName = 'Tabs'\n\nconst TabsIndicator = React.forwardRef<HTMLDivElement, TabsIndicatorProps>(({ className, asChild, ...props }, forwardedRef) => {\n  const { value } = useTabsContext()\n  const indicatorRef = React.useRef<HTMLDivElement>(null)\n  const [position, setPosition] = React.useState<{ left: number; width: number }>({ left: 0, width: 0 })\n\n  React.useEffect(() => {\n    const list = indicatorRef.current?.closest('.dsx-tabs__list') as HTMLElement | null\n    if (!list) return\n\n    const triggers = Array.from(list.querySelectorAll<HTMLElement>('[role=\"tab\"]'))\n    const activeTrigger = triggers.find((trigger) => {\n      const isActive = trigger.getAttribute('data-state') === 'active'\n      const triggerValue = trigger.getAttribute('data-value')\n      return isActive && (triggerValue === value || value === undefined)\n    })\n\n    if (activeTrigger) {\n      const listRect = list.getBoundingClientRect()\n      const triggerRect = activeTrigger.getBoundingClientRect()\n      setPosition({\n        left: triggerRect.left - listRect.left,\n        width: triggerRect.width,\n      })\n    }\n  }, [value])\n\n  if (asChild) {\n    return (\n      <Slot\n        ref={forwardedRef}\n        className={classNames('dsx-tabs__indicator', className)}\n        data-slot=\"tabs-indicator\"\n        style={{\n          position: 'absolute',\n          bottom: 0,\n          left: position.left,\n          width: position.width,\n          transition: 'left 200ms ease, width 200ms ease',\n        }}\n        {...props}\n      />\n    )\n  }\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={classNames('dsx-tabs__indicator', className)}\n      data-slot=\"tabs-indicator\"\n      style={{\n        position: 'absolute',\n        bottom: 0,\n        left: position.left,\n        width: position.width,\n        transition: 'left 200ms ease, width 200ms ease',\n      }}\n      {...props}\n    >\n      <div ref={indicatorRef} style={{ width: '100%', height: 2, backgroundColor: 'var(--dsx-colors-accent-9)' }} />\n    </div>\n  )\n})\nTabsIndicator.displayName = 'TabsIndicator'\n\nconst TabsList = React.forwardRef<React.ComponentRef<typeof TabsPrimitive.List>, TabsListProps>(\n  ({ className: propClassName, variant = 'default', ...props }, forwardedRef) => {\n    const { asChild: _asChild, className, ...listProps } = extractProps(\n      {\n        ...props,\n        className: propClassName,\n        variant,\n      },\n      tabsListPropDefs,\n    )\n\n    return (\n      <TabsPrimitive.List\n        {...listProps}\n        ref={forwardedRef}\n        className={classNames('dsx-tabs__list', className)}\n        data-variant={variant as TabsListVariant}\n        style={{ position: 'relative' }}\n      />\n    )\n  },\n)\nTabsList.displayName = 'TabsList'\n\nconst TabsTrigger = React.forwardRef<React.ComponentRef<typeof TabsPrimitive.Trigger>, TabsTriggerProps>((props, forwardedRef) => {\n  const { asChild: _asChild, className, ...triggerProps } = extractProps(props, tabsTriggerPropDefs)\n\n  return <TabsPrimitive.Trigger {...triggerProps} ref={forwardedRef} className={classNames('dsx-tabs__trigger', className)} />\n})\nTabsTrigger.displayName = 'TabsTrigger'\n\nconst TabsContent = React.forwardRef<React.ComponentRef<typeof TabsPrimitive.Content>, TabsContentProps>((props, forwardedRef) => {\n  const { asChild: _asChild, className, ...contentProps } = extractProps(props, tabsContentPropDefs)\n\n  return <TabsPrimitive.Content {...contentProps} ref={forwardedRef} className={classNames('dsx-tabs__content', className)} />\n})\nTabsContent.displayName = 'TabsContent'\n\nconst TabsContentGroup = React.forwardRef<HTMLDivElement, TabsContentGroupProps>(({ className, asChild, ...props }, forwardedRef) => {\n  const Comp = asChild ? Slot : 'div'\n  return (\n    <Comp\n      ref={forwardedRef}\n      className={classNames('dsx-tabs__content-group', className)}\n      data-slot=\"tabs-content-group\"\n      {...props}\n    />\n  )\n})\nTabsContentGroup.displayName = 'TabsContentGroup'\n\nconst Tabs: typeof TabsRoot & {\n  List: typeof TabsList\n  Trigger: typeof TabsTrigger\n  Content: typeof TabsContent\n  Indicator: typeof TabsIndicator\n  ContentGroup: typeof TabsContentGroup\n} = Object.assign(TabsRoot, {\n  List: TabsList,\n  Trigger: TabsTrigger,\n  Content: TabsContent,\n  Indicator: TabsIndicator,\n  ContentGroup: TabsContentGroup,\n})\n\nexport { Tabs, TabsContent, TabsContentGroup, TabsIndicator, TabsList, TabsRoot, TabsTrigger }\nexport type { TabsContentGroupProps, TabsContentProps, TabsIndicatorProps, TabsListProps, TabsListVariant, TabsProps, TabsTriggerProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { Slot } from '../slot/Slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { tabsContentPropDefs, tabsListPropDefs, tabsPropDefs, tabsTriggerPropDefs } from './tabs.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype TabsOwnProps = GetPropDefTypes<typeof tabsPropDefs>\ntype TabsListOwnProps = GetPropDefTypes<typeof tabsListPropDefs>\ntype TabsTriggerOwnProps = GetPropDefTypes<typeof tabsTriggerPropDefs>\ntype TabsContentOwnProps = GetPropDefTypes<typeof tabsContentPropDefs>\n\ntype TabsListVariant = NonNullable<TabsListOwnProps['variant']>\n\ntype TabsContextValue = {\n  value: string | undefined\n  onValueChange: ((value: string) => void) | undefined\n}\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\nfunction useTabsContext() {\n  const ctx = React.useContext(TabsContext)\n  if (!ctx) {\n    throw new Error('Tabs compound components must be rendered within a Tabs root.')\n  }\n  return ctx\n}\n\ninterface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, TabsOwnProps {}\ninterface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, TabsListOwnProps {}\ninterface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, TabsTriggerOwnProps {}\ninterface TabsContentProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>, TabsContentOwnProps {}\n\ninterface TabsIndicatorProps extends React.ComponentPropsWithoutRef<'div'> {\n  asChild?: boolean\n}\n\ninterface TabsContentGroupProps extends React.ComponentPropsWithoutRef<'div'> {\n  asChild?: boolean\n}\n\nconst TabsRoot = React.forwardRef<React.ComponentRef<typeof TabsPrimitive.Root>, TabsProps>(({ children, onValueChange, value, ...props }, forwardedRef) => {\n  const { asChild, className, size = 'md', ...tabsProps } = extractProps(props, tabsPropDefs)\n\n  return (\n    <TabsContext.Provider value={{ value, onValueChange }}>\n      <TabsPrimitive.Root {...tabsProps} asChild={asChild} ref={forwardedRef} className={classNames('dsx-tabs', className)} onValueChange={onValueChange} value={value} data-size={size}>\n        {children}\n      </TabsPrimitive.Root>\n    </TabsContext.Provider>\n  )\n})\nTabsRoot.displayName = 'Tabs'\n\nconst TabsIndicator = React.forwardRef<HTMLDivElement, TabsIndicatorProps>(({ className, asChild, style, ...props }, forwardedRef) => {\n  const { value } = useTabsContext()\n  const indicatorRef = React.useRef<HTMLDivElement | null>(null)\n  const [position, setPosition] = React.useState<React.CSSProperties>({ width: 0 })\n  const setRef = React.useCallback((node: HTMLDivElement | null) => {\n    indicatorRef.current = node\n    if (typeof forwardedRef === 'function') forwardedRef(node)\n    else if (forwardedRef) forwardedRef.current = node\n  }, [forwardedRef])\n\n  React.useEffect(() => {\n    const list = indicatorRef.current?.closest<HTMLElement>('.dsx-tabs__list')\n    if (!list) return\n    const update = () => {\n      const active = Array.from(list.querySelectorAll<HTMLElement>('[role=\"tab\"][data-state=\"active\"]'))\n        .find((trigger) => trigger.closest('.dsx-tabs__list') === list)\n      if (!active) return\n      const listRect = list.getBoundingClientRect()\n      const triggerRect = active.getBoundingClientRect()\n      setPosition(list.dataset.orientation === 'vertical'\n        ? { left: 0, top: triggerRect.top - listRect.top + list.scrollTop - list.clientTop, height: triggerRect.height }\n        : { left: triggerRect.left - listRect.left + list.scrollLeft - list.clientLeft, width: triggerRect.width })\n    }\n    update()\n    const mutation = new MutationObserver(update)\n    mutation.observe(list, { subtree: true, childList: true, attributes: true, attributeFilter: ['data-state', 'data-orientation'] })\n    const resize = new ResizeObserver(update)\n    resize.observe(list)\n    list.querySelectorAll<HTMLElement>('[role=\"tab\"]').forEach((trigger) => resize.observe(trigger))\n    return () => { mutation.disconnect(); resize.disconnect() }\n  }, [value])\n\n  const Comp = asChild ? Slot : 'div'\n  return <Comp {...props} ref={setRef} className={classNames('dsx-tabs__indicator', className)}\n    data-slot=\"tabs-indicator\" aria-hidden=\"true\" style={{ ...position, ...style }} />\n})\nTabsIndicator.displayName = 'TabsIndicator'\n\nconst TabsList = React.forwardRef<React.ComponentRef<typeof TabsPrimitive.List>, TabsListProps>(\n  ({ className: propClassName, variant = 'default', ...props }, forwardedRef) => {\n    const { asChild, className, ...listProps } = extractProps(\n      {\n        ...props,\n        className: propClassName,\n        variant,\n      },\n      tabsListPropDefs,\n    )\n\n    return (\n      <TabsPrimitive.List\n        {...listProps} asChild={asChild}\n        ref={forwardedRef}\n        className={classNames('dsx-tabs__list', className)}\n        data-variant={variant as TabsListVariant}\n      />\n    )\n  },\n)\nTabsList.displayName = 'TabsList'\n\nconst TabsTrigger = React.forwardRef<React.ComponentRef<typeof TabsPrimitive.Trigger>, TabsTriggerProps>((props, forwardedRef) => {\n  const { asChild, className, ...triggerProps } = extractProps(props, tabsTriggerPropDefs)\n\n  return <TabsPrimitive.Trigger {...triggerProps} asChild={asChild} ref={forwardedRef} className={classNames('dsx-tabs__trigger', className)} />\n})\nTabsTrigger.displayName = 'TabsTrigger'\n\nconst TabsContent = React.forwardRef<React.ComponentRef<typeof TabsPrimitive.Content>, TabsContentProps>((props, forwardedRef) => {\n  const { asChild, className, ...contentProps } = extractProps(props, tabsContentPropDefs)\n\n  return <TabsPrimitive.Content {...contentProps} asChild={asChild} ref={forwardedRef} className={classNames('dsx-tabs__content', className)} />\n})\nTabsContent.displayName = 'TabsContent'\n\nconst TabsContentGroup = React.forwardRef<HTMLDivElement, TabsContentGroupProps>(({ className, asChild, ...props }, forwardedRef) => {\n  const Comp = asChild ? Slot : 'div'\n  return (\n    <Comp\n      ref={forwardedRef}\n      className={classNames('dsx-tabs__content-group', className)}\n      data-slot=\"tabs-content-group\"\n      {...props}\n    />\n  )\n})\nTabsContentGroup.displayName = 'TabsContentGroup'\n\nconst Tabs: typeof TabsRoot & {\n  List: typeof TabsList\n  Trigger: typeof TabsTrigger\n  Content: typeof TabsContent\n  Indicator: typeof TabsIndicator\n  ContentGroup: typeof TabsContentGroup\n} = Object.assign(TabsRoot, {\n  List: TabsList,\n  Trigger: TabsTrigger,\n  Content: TabsContent,\n  Indicator: TabsIndicator,\n  ContentGroup: TabsContentGroup,\n})\n\nexport { Tabs, TabsContent, TabsContentGroup, TabsIndicator, TabsList, TabsRoot, TabsTrigger }\nexport type { TabsContentGroupProps, TabsContentProps, TabsIndicatorProps, TabsListProps, TabsListVariant, TabsProps, TabsTriggerProps }\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/tabs.css

@@ -1,12 +1,23 @@
 
 @import '../../_internal/baseTabs.css';
 
+.dsx-tabs { min-width: 0; max-width: 100%; }
+.dsx-tabs[data-orientation='vertical'] { display: flex; flex-wrap: wrap; gap: var(--dsx-space-md); align-items: flex-start; }
+
 .dsx-tabs__list {
+  position: relative;
   display: inline-flex;
   align-items: center;
   width: fit-content;
-  border-bottom: var(--dsx-border-width-md, var(--dsx-border-width-sm)) solid var(--dsx-control-separator-color);
-  gap: var(--dsx-space-xs);
+  /* Narrow-container rule: cap at the container and scroll internally —
+     same containment as the segmented-control/button/toggle-group family.
+     A 5-tab strip wider than a 320px viewport scrolls instead of bleeding
+     with unreachable tabs. No visual change at widths that fit. */
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+  border-bottom: var(--dsx-boundary-divider-width) solid var(--dsx-control-separator-color);
+  gap: 0;
 }
 
 .dsx-tabs__list[data-variant='pills'] {
@@ -22,6 +33,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  /* Never compress inside the scrolled list — labels would truncate
+     otherwise. No effect in roomy containers. */
+  flex-shrink: 0;
   padding: var(--dsx-space-sm) var(--dsx-space-md);
   border: 0;
   border-radius: var(--dsx-rounded-md);
@@ -47,14 +61,14 @@
 
 /* ---- size variants ---- */
 
-[data-size='sm'] .dsx-tabs__trigger {
+.dsx-tabs[data-size='sm'] > .dsx-tabs__list > .dsx-tabs__trigger {
   padding: var(--dsx-space-xs) var(--dsx-space-sm);
   font-size: var(--dsx-typography-label-medium-font-size);
   font-weight: var(--dsx-typography-label-medium-font-weight);
   line-height: var(--dsx-typography-label-medium-line-height);
 }
 
-[data-size='lg'] .dsx-tabs__trigger {
+.dsx-tabs[data-size='lg'] > .dsx-tabs__list > .dsx-tabs__trigger {
   padding: var(--dsx-space-md) var(--dsx-space-lg);
   font-size: var(--dsx-typography-label-large-font-size);
   font-weight: var(--dsx-typography-label-large-font-weight);
@@ -66,7 +80,48 @@
 .dsx-tabs__indicator {
   position: absolute;
   bottom: 0;
-  height: 2px;
-  background-color: var(--dsx-color-primary);
-  transition: left var(--dsx-motion-duration-normal) var(--dsx-motion-easing-standard), width var(--dsx-motion-duration-normal) var(--dsx-motion-easing-standard);
+  height: var(--dsx-boundary-selected-width);
+  background-color: var(--dsx-color-accent-indicator);
+  transition: left var(--dsx-motion-duration-normal) var(--dsx-motion-easing-standard), width var(--dsx-motion-duration-normal) var(--dsx-motion-easing-standard), top var(--dsx-motion-duration-normal) var(--dsx-motion-easing-standard), height var(--dsx-motion-duration-normal) var(--dsx-motion-easing-standard);
+}
+
+.dsx-tabs__list[data-orientation='vertical'] {
+  flex-direction: column;
+  align-items: stretch;
+  border-bottom: 0;
+  border-inline-end: var(--dsx-boundary-divider-width) solid var(--dsx-control-separator-color);
+}
+.dsx-tabs__list[data-orientation='vertical'][data-variant='pills'] { border-inline-end: 0; }
+.dsx-tabs__list[data-orientation='vertical'] .dsx-tabs__indicator { bottom: auto; width: var(--dsx-boundary-selected-width); }
+.dsx-tabs__list:has(> .dsx-tabs__indicator) > .dsx-tabs__trigger[data-state='active'] { box-shadow: none; }
+.dsx-tabs__content, .dsx-tabs__content-group { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
+.dsx-tabs[data-orientation='vertical'] > .dsx-tabs__content,
+.dsx-tabs[data-orientation='vertical'] > .dsx-tabs__content-group { flex: 1 1 50%; min-width: var(--dsx-size-2xl); margin-top: 0; padding-top: 0; }
+.dsx-tabs__trigger:focus-visible { box-shadow: inset var(--dsx-shadow-focus-ring); }
+@media (prefers-reduced-motion: reduce) { .dsx-tabs__indicator { transition: none; } }
+
+/* Underlined tabs are contiguous; pills alone carry a selected fill. */
+.dsx-tabs__list[data-variant='default'] > .dsx-tabs__trigger[data-state='active'] {
+  color: var(--dsx-color-accent-indicator);
+  background: transparent;
+  box-shadow: none;
+}
+.dsx-tabs__list:where([data-variant='default']):where(:not(:has(> .dsx-tabs__indicator))) > .dsx-tabs__trigger[data-state='active']::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: var(--dsx-boundary-selected-width);
+  background: var(--dsx-color-accent-indicator);
+}
+.dsx-tabs__list:where([data-orientation='vertical'][data-variant='default']):where(:not(:has(> .dsx-tabs__indicator))) > .dsx-tabs__trigger[data-state='active']::after {
+  inset-inline: auto;
+  inset-inline-start: 0;
+  top: 0;
+  bottom: 0;
+  width: var(--dsx-boundary-selected-width);
+  height: auto;
 }
+.dsx-tabs__content-group > .dsx-tabs__content { margin-top: 0; }
+.dsx-tabs__trigger { font-weight: var(--dsx-typography-label-large-font-weight); line-height: var(--dsx-typography-label-large-line-height); }
+.dsx-tabs__list[data-variant='default'] > .dsx-tabs__trigger:focus-visible { box-shadow: inset var(--dsx-shadow-focus-ring); }

package/dist/components/text/text.props.cjs

@@ -31,20 +31,21 @@ var import_textAlign = require("../../_internal/props/textAlign.prop");
 var import_textWrap = require("../../_internal/props/textWrap.prop");
 var import_truncate = require("../../_internal/props/truncate.prop");
 var import_weight = require("../../_internal/props/weight.prop");
+var import_typography = require("./typography.props");
 const textVariants = ["body-large", "body-medium", "body-small", "label-large", "label-medium", "label-small"];
 const textTones = ["default", "muted", "inverse"];
 const textSizes = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
 const textPropDefs = {
   ...import_asChild.asChildPropDef,
-  ...import_color.colorPropDef,
+  ...(0, import_typography.scalarTypographyProps)(import_color.colorPropDef),
   ...import_highContrast.highContrastPropDef,
-  ...import_leadingTrim.leadingTrimPropDef,
-  ...import_margin.marginPropDef,
-  ...import_padding.paddingPropDef,
-  ...import_textAlign.textAlignPropDef,
-  ...import_textWrap.textWrapPropDef,
+  ...(0, import_typography.scalarTypographyProps)(import_leadingTrim.leadingTrimPropDef),
+  ...(0, import_typography.scalarTypographyProps)(import_margin.marginPropDef),
+  ...(0, import_typography.scalarTypographyProps)(import_padding.paddingPropDef),
+  ...(0, import_typography.scalarTypographyProps)(import_textAlign.textAlignPropDef),
+  ...(0, import_typography.scalarTypographyProps)(import_textWrap.textWrapPropDef),
   ...import_truncate.truncatePropDef,
-  ...import_weight.weightPropDef,
+  ...(0, import_typography.scalarTypographyProps)(import_weight.weightPropDef),
   variant: {
     type: "enum",
     values: textVariants,
@@ -58,8 +59,7 @@ const textPropDefs = {
   size: {
     type: "enum",
     className: "dsx-r-text-size",
-    values: textSizes,
-    responsive: true
+    values: textSizes
   }
 };
 //# sourceMappingURL=text.props.cjs.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/text/text.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\nimport { colorPropDef } from '../../_internal/props/color.prop'\nimport { highContrastPropDef } from '../../_internal/props/highContrast.prop'\nimport { leadingTrimPropDef } from '../../_internal/props/leadingTrim.prop'\nimport { marginPropDef } from '../../_internal/props/margin.prop'\nimport { paddingPropDef } from '../../_internal/props/padding.prop'\nimport { textAlignPropDef } from '../../_internal/props/textAlign.prop'\nimport { textWrapPropDef } from '../../_internal/props/textWrap.prop'\nimport { truncatePropDef } from '../../_internal/props/truncate.prop'\nimport { weightPropDef } from '../../_internal/props/weight.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst textVariants = ['body-large', 'body-medium', 'body-small', 'label-large', 'label-medium', 'label-small'] as const\nconst textTones = ['default', 'muted', 'inverse'] as const\nconst textSizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const\n\nconst textPropDefs = {\n  ...asChildPropDef,\n  ...colorPropDef,\n  ...highContrastPropDef,\n  ...leadingTrimPropDef,\n  ...marginPropDef,\n  ...paddingPropDef,\n  ...textAlignPropDef,\n  ...textWrapPropDef,\n  ...truncatePropDef,\n  ...weightPropDef,\n  variant: {\n    type: 'enum',\n    values: textVariants,\n    default: 'body-medium',\n  },\n  tone: {\n    type: 'enum',\n    values: textTones,\n    default: 'default',\n  },\n  size: {\n    type: 'enum',\n    className: 'dsx-r-text-size',\n    values: textSizes,\n    responsive: true,\n  },\n} satisfies {\n  asChild: PropDef\n  align: PropDef<(typeof textAlignPropDef.align.values)[number]>\n  color: PropDef<(typeof colorPropDef.color.values)[number]>\n  highContrast: PropDef\n  m: PropDef\n  mb: PropDef\n  ml: PropDef\n  mr: PropDef\n  mt: PropDef\n  mx: PropDef\n  my: PropDef\n  p: PropDef\n  pb: PropDef\n  pl: PropDef\n  pr: PropDef\n  pt: PropDef\n  px: PropDef\n  py: PropDef\n  tone: PropDef<(typeof textTones)[number]>\n  size: PropDef<(typeof textSizes)[number]>\n  trim: PropDef<(typeof leadingTrimPropDef.trim.values)[number]>\n  truncate: PropDef\n  variant: PropDef<(typeof textVariants)[number]>\n  weight: PropDef<(typeof weightPropDef.weight.values)[number]>\n  wrap: PropDef<(typeof textWrapPropDef.wrap.values)[number]>\n}\n\nexport { textPropDefs }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAC/B,mBAA6B;AAC7B,0BAAoC;AACpC,yBAAmC;AACnC,oBAA8B;AAC9B,qBAA+B;AAC/B,uBAAiC;AACjC,sBAAgC;AAChC,sBAAgC;AAChC,oBAA8B;AAI9B,MAAM,eAAe,CAAC,cAAc,eAAe,cAAc,eAAe,gBAAgB,aAAa;AAC7G,MAAM,YAAY,CAAC,WAAW,SAAS,SAAS;AAChD,MAAM,YAAY,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,GAAG;AAE9D,MAAM,eAAe;AAAA,EACnB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AACF;",
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\nimport { colorPropDef } from '../../_internal/props/color.prop'\nimport { highContrastPropDef } from '../../_internal/props/highContrast.prop'\nimport { leadingTrimPropDef } from '../../_internal/props/leadingTrim.prop'\nimport { marginPropDef } from '../../_internal/props/margin.prop'\nimport { paddingPropDef } from '../../_internal/props/padding.prop'\nimport { textAlignPropDef } from '../../_internal/props/textAlign.prop'\nimport { textWrapPropDef } from '../../_internal/props/textWrap.prop'\nimport { truncatePropDef } from '../../_internal/props/truncate.prop'\nimport { weightPropDef } from '../../_internal/props/weight.prop'\n\nimport { scalarTypographyProps } from './typography.props'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst textVariants = ['body-large', 'body-medium', 'body-small', 'label-large', 'label-medium', 'label-small'] as const\nconst textTones = ['default', 'muted', 'inverse'] as const\nconst textSizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const\n\nconst textPropDefs = {\n  ...asChildPropDef,\n  ...scalarTypographyProps(colorPropDef),\n  ...highContrastPropDef,\n  ...scalarTypographyProps(leadingTrimPropDef),\n  ...scalarTypographyProps(marginPropDef),\n  ...scalarTypographyProps(paddingPropDef),\n  ...scalarTypographyProps(textAlignPropDef),\n  ...scalarTypographyProps(textWrapPropDef),\n  ...truncatePropDef,\n  ...scalarTypographyProps(weightPropDef),\n  variant: {\n    type: 'enum',\n    values: textVariants,\n    default: 'body-medium',\n  },\n  tone: {\n    type: 'enum',\n    values: textTones,\n    default: 'default',\n  },\n  size: {\n    type: 'enum',\n    className: 'dsx-r-text-size',\n    values: textSizes,\n  },\n} satisfies {\n  asChild: PropDef\n  align: PropDef<(typeof textAlignPropDef.align.values)[number]>\n  color: PropDef<(typeof colorPropDef.color.values)[number]>\n  highContrast: PropDef\n  m: PropDef\n  mb: PropDef\n  ml: PropDef\n  mr: PropDef\n  mt: PropDef\n  mx: PropDef\n  my: PropDef\n  p: PropDef\n  pb: PropDef\n  pl: PropDef\n  pr: PropDef\n  pt: PropDef\n  px: PropDef\n  py: PropDef\n  tone: PropDef<(typeof textTones)[number]>\n  size: PropDef<(typeof textSizes)[number]>\n  trim: PropDef<(typeof leadingTrimPropDef.trim.values)[number]>\n  truncate: PropDef\n  variant: PropDef<(typeof textVariants)[number]>\n  weight: PropDef<(typeof weightPropDef.weight.values)[number]>\n  wrap: PropDef<(typeof textWrapPropDef.wrap.values)[number]>\n}\n\nexport { textPropDefs }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAC/B,mBAA6B;AAC7B,0BAAoC;AACpC,yBAAmC;AACnC,oBAA8B;AAC9B,qBAA+B;AAC/B,uBAAiC;AACjC,sBAAgC;AAChC,sBAAgC;AAChC,oBAA8B;AAE9B,wBAAsC;AAItC,MAAM,eAAe,CAAC,cAAc,eAAe,cAAc,eAAe,gBAAgB,aAAa;AAC7G,MAAM,YAAY,CAAC,WAAW,SAAS,SAAS;AAChD,MAAM,YAAY,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,GAAG;AAE9D,MAAM,eAAe;AAAA,EACnB,GAAG;AAAA,EACH,OAAG,yCAAsB,yBAAY;AAAA,EACrC,GAAG;AAAA,EACH,OAAG,yCAAsB,qCAAkB;AAAA,EAC3C,OAAG,yCAAsB,2BAAa;AAAA,EACtC,OAAG,yCAAsB,6BAAc;AAAA,EACvC,OAAG,yCAAsB,iCAAgB;AAAA,EACzC,OAAG,yCAAsB,+BAAe;AAAA,EACxC,GAAG;AAAA,EACH,OAAG,yCAAsB,2BAAa;AAAA,EACtC,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,EACV;AACF;",
   "names": []
 }

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

@@ -13,31 +13,30 @@ declare const textPropDefs: {
         type: "enum";
         className: string;
         values: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
-        responsive: true;
     };
-    weight: {
+    weight: Omit<{
         type: "enum";
         className: string;
         values: readonly ["light", "regular", "medium", "bold"];
         responsive: true;
-    };
+    }, "responsive">;
     truncate: {
         type: "boolean";
         className: string;
     };
-    wrap: {
+    wrap: Omit<{
         type: "enum";
         className: string;
         values: readonly ["wrap", "nowrap", "pretty", "balance"];
         responsive: true;
-    };
-    align: {
+    }, "responsive">;
+    align: Omit<{
         type: "enum";
         className: string;
         values: readonly ["left", "center", "right", "justify"];
         responsive: true;
-    };
-    padding: {
+    }, "responsive">;
+    padding: Omit<{
         type: "enum | string";
         values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         default: undefined;
@@ -45,8 +44,8 @@ declare const textPropDefs: {
         customProperties: readonly [`--${string}`];
         parseValue: ((value: string) => string | number | undefined) | undefined;
         responsive: true;
-    };
-    p: {
+    }, "responsive">;
+    p: Omit<{
         type: "enum | string";
         values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         className: string;
@@ -54,8 +53,8 @@ declare const textPropDefs: {
         customProperties: readonly [`--${string}`];
         parseValue: ((value: string) => string | number | undefined) | undefined;
         responsive: true;
-    };
-    px: {
+    }, "responsive">;
+    px: Omit<{
         type: "enum | string";
         values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         className: string;
@@ -63,8 +62,8 @@ declare const textPropDefs: {
         customProperties: readonly [`--${string}`];
         parseValue: ((value: string) => string | number | undefined) | undefined;
         responsive: true;
-    };
-    py: {
+    }, "responsive">;
+    py: Omit<{
         type: "enum | string";
         values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         className: string;
@@ -72,8 +71,8 @@ declare const textPropDefs: {
         customProperties: readonly [`--${string}`];
         parseValue: ((value: string) => string | number | undefined) | undefined;
         responsive: true;
-    };
-    pt: {
+    }, "responsive">;
+    pt: Omit<{
         type: "enum | string";
         values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         className: string;
@@ -81,8 +80,8 @@ declare const textPropDefs: {
         customProperties: readonly [`--${string}`];
         parseValue: ((value: string) => string | number | undefined) | undefined;
         responsive: true;
-    };
-    pr: {
+    }, "responsive">;
+    pr: Omit<{
         type: "enum | string";
         values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         className: string;
@@ -90,8 +89,8 @@ declare const textPropDefs: {
         customProperties: readonly [`--${string}`];
         parseValue: ((value: string) => string | number | undefined) | undefined;
         responsive: true;
-    };
-    pb: {
+    }, "responsive">;
+    pb: Omit<{
         type: "enum | string";
         values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         className: string;
@@ -99,8 +98,8 @@ declare const textPropDefs: {
         customProperties: readonly [`--${string}`];
         parseValue: ((value: string) => string | number | undefined) | undefined;
         responsive: true;
-    };
-    pl: {
+    }, "responsive">;
+    pl: Omit<{
         type: "enum | string";
         values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         className: string;
@@ -108,8 +107,8 @@ declare const textPropDefs: {
         customProperties: readonly [`--${string}`];
         parseValue: ((value: string) => string | number | undefined) | undefined;
         responsive: true;
-    };
-    margin: {
+    }, "responsive">;
+    margin: Omit<{
         type: "enum | string";
         values: readonly ["auto", "none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         default: undefined;
@@ -117,8 +116,8 @@ declare const textPropDefs: {
         customProperties: readonly [`--${string}`];
         parseValue: ((value: string) => string | number | undefined) | undefined;
         responsive: true;
-    };
-    m: {
+    }, "responsive">;
+    m: Omit<{
         readonly type: "enum | string";
         readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         readonly className: string;
@@ -126,8 +125,8 @@ declare const textPropDefs: {
         readonly customProperties: readonly [`--${string}`];
         readonly parseValue: ((value: string) => string | number | undefined) | undefined;
         readonly responsive: true;
-    };
-    mx: {
+    }, "responsive">;
+    mx: Omit<{
         readonly type: "enum | string";
         readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         readonly className: string;
@@ -135,8 +134,8 @@ declare const textPropDefs: {
         readonly customProperties: readonly [`--${string}`];
         readonly parseValue: ((value: string) => string | number | undefined) | undefined;
         readonly responsive: true;
-    };
-    my: {
+    }, "responsive">;
+    my: Omit<{
         readonly type: "enum | string";
         readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         readonly className: string;
@@ -144,8 +143,8 @@ declare const textPropDefs: {
         readonly customProperties: readonly [`--${string}`];
         readonly parseValue: ((value: string) => string | number | undefined) | undefined;
         readonly responsive: true;
-    };
-    mt: {
+    }, "responsive">;
+    mt: Omit<{
         readonly type: "enum | string";
         readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         readonly className: string;
@@ -153,8 +152,8 @@ declare const textPropDefs: {
         readonly customProperties: readonly [`--${string}`];
         readonly parseValue: ((value: string) => string | number | undefined) | undefined;
         readonly responsive: true;
-    };
-    mr: {
+    }, "responsive">;
+    mr: Omit<{
         readonly type: "enum | string";
         readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         readonly className: string;
@@ -162,8 +161,8 @@ declare const textPropDefs: {
         readonly customProperties: readonly [`--${string}`];
         readonly parseValue: ((value: string) => string | number | undefined) | undefined;
         readonly responsive: true;
-    };
-    mb: {
+    }, "responsive">;
+    mb: Omit<{
         readonly type: "enum | string";
         readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         readonly className: string;
@@ -171,8 +170,8 @@ declare const textPropDefs: {
         readonly customProperties: readonly [`--${string}`];
         readonly parseValue: ((value: string) => string | number | undefined) | undefined;
         readonly responsive: true;
-    };
-    ml: {
+    }, "responsive">;
+    ml: Omit<{
         readonly type: "enum | string";
         readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
         readonly className: string;
@@ -180,24 +179,24 @@ declare const textPropDefs: {
         readonly customProperties: readonly [`--${string}`];
         readonly parseValue: ((value: string) => string | number | undefined) | undefined;
         readonly responsive: true;
-    };
-    trim: {
+    }, "responsive">;
+    trim: Omit<{
         type: "enum";
         className: string;
         values: readonly ["normal", "start", "end", "both"];
         responsive: true;
-    };
+    }, "responsive">;
     highContrast: {
         type: "boolean";
         default: false;
     };
-    color: {
+    color: Omit<{
         type: "enum";
         className: string;
         values: readonly ["primary", "primary-container", "secondary", "secondary-container", "tertiary", "tertiary-container", "success", "success-container", "error", "error-container", "surface", "surface-raised", "surface-overlay", "surface-sunken", "background", "outline", "outline-variant"];
         default: undefined;
         responsive: true;
-    };
+    }, "responsive">;
     asChild: {
         type: "boolean";
         default: false;

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

@@ -1 +1 @@
-{"version":3,"file":"text.props.d.cts","sourceRoot":"","sources":["../../../src/components/text/text.props.ts"],"names":[],"mappings":"AAiBA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDjB,CAAA;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"text.props.d.cts","sourceRoot":"","sources":["../../../src/components/text/text.props.ts"],"names":[],"mappings":"AAmBA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDjB,CAAA;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}