@d4gger/design-system 2.7.0 → 3.0.1

package/dist/components/copy-button.css

@@ -4,9 +4,12 @@
   transition: all var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-in-out, ease-in-out);
 }
 
-.dsx-copy-button--copied {
-  color: var(--dsx-color-success);
-  border-color: var(--dsx-color-success);
+/* Copied confirmation is icon-only (Direction #3 Q2 pick): the leading icon swaps
+   from copy to check and the label flips to the copied text. The variant's own
+   tones never repaint — a success wash on filled buttons reads as a status
+   change and collides with the variant fill, so the check swap is the signal. */
+.dsx-copy-button--copied .dsx-button__icon {
+  color: currentColor;
 }
 
 .dsx-copy-button__announcement {
@@ -20,7 +23,3 @@
   white-space: nowrap;
   border: 0;
 }
-
-.dsx-copy-button--copied .dsx-button__icon {
-  color: var(--dsx-color-success);
-}

package/dist/components/copy-field.css

@@ -9,3 +9,21 @@
 .dsx-copy-field__action {
   min-width: var(--dsx-copy-field-action-min-width);
 }
+
+/* One frame: the action half inherits the field-shell outline token at rest
+   and hover, so the group reads as a single frame (the -1px join overlaps
+   the seam into the frame line). baseInput would glow it — pinned here.
+   Focus ring untouched. */
+.dsx-copy-field .dsx-copy-field__action,
+.dsx-copy-field__action:hover {
+  border-color: var(--dsx-boundary-control-color);
+}
+/* Read-only value half: no hover invitation */
+:where(.dsx-copy-field) .dsx-input-shell:hover {
+  border-color: var(--dsx-boundary-control-color);
+  background: var(--dsx-color-surface);
+}
+
+.dsx-copy-field__input:hover {
+  cursor: default;
+}

package/dist/components/copyField/CopyField.cjs

@@ -80,10 +80,10 @@ const CopyField = React.forwardRef((props, forwardedRef) => {
               "aria-describedby": description ? descriptionId : void 0
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_InputGroup.InputGroup.Addon, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_CopyButton.CopyButton,
             {
-              className: "dsx-copy-field__action",
+              className: (0, import_classnames.default)("dsx-input-group__button", "dsx-copy-field__action"),
               value,
               disabled,
               size,
@@ -93,7 +93,7 @@ const CopyField = React.forwardRef((props, forwardedRef) => {
               onCopyError,
               children: copyLabel
             }
-          ) })
+          )
         ] }),
         description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Field.Field.Description, { id: descriptionId, children: description }) : null
       ]

package/dist/components/copyField/CopyField.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/copyField/CopyField.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { CopyButton } from '../copyButton/CopyButton'\nimport { Field } from '../field/Field'\nimport { InputGroup } from '../inputGroup/InputGroup'\nimport { copyFieldPropDefs } from './copyField.props'\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype CopyFieldOwnProps = GetPropDefTypes<typeof copyFieldPropDefs>\ninterface CopyFieldProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onCopy'>,\n    CopyFieldOwnProps {\n  value: string\n  label?: React.ReactNode\n  description?: React.ReactNode\n  timeout?: number\n  onCopyValue?: (value: string) => void\n  onCopyError?: (error: Error) => void\n}\n\nconst CopyField = React.forwardRef<HTMLDivElement, CopyFieldProps>((props, forwardedRef) => {\n  const {\n    className,\n    copiedLabel = 'Copied',\n    copyLabel = 'Copy value',\n    description,\n    disabled = false,\n    label,\n    onCopyError,\n    onCopyValue,\n    size = 'md',\n    timeout = 2000,\n    value,\n    ...fieldProps\n  } = extractProps(props, copyFieldPropDefs)\n  const inputId = React.useId()\n  const descriptionId = React.useId()\n\n  return (\n    <Field\n      {...fieldProps}\n      ref={forwardedRef}\n      className={classNames('dsx-copy-field', className)}\n      data-size={size}\n      disabled={disabled}\n      size={size}\n    >\n      {label ? <Field.Label htmlFor={inputId}>{label}</Field.Label> : null}\n      <InputGroup size={size}>\n        <InputGroup.Input\n          id={inputId}\n          className=\"dsx-copy-field__input\"\n          value={value}\n          readOnly\n          disabled={disabled}\n          aria-describedby={description ? descriptionId : undefined}\n        />\n        <InputGroup.Addon>\n          <CopyButton\n            className=\"dsx-copy-field__action\"\n            value={value}\n            disabled={disabled}\n            size={size}\n            copiedLabel={copiedLabel}\n            timeout={timeout}\n            onCopyValue={onCopyValue}\n            onCopyError={onCopyError}\n          >\n            {copyLabel}\n          </CopyButton>\n        </InputGroup.Addon>\n      </InputGroup>\n      {description ? <Field.Description id={descriptionId}>{description}</Field.Description> : null}\n    </Field>\n  )\n})\nCopyField.displayName = 'CopyField'\n\nexport { CopyField }\nexport type { CopyFieldProps }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,wBAAuB;AAEvB,0BAA6B;AAC7B,wBAA2B;AAC3B,mBAAsB;AACtB,wBAA2B;AAC3B,uBAAkC;AA0CnB;AA3Bf,MAAM,YAAY,MAAM,WAA2C,CAAC,OAAO,iBAAiB;AAC1F,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd,YAAY;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,QAAI,kCAAa,OAAO,kCAAiB;AACzC,QAAM,UAAU,MAAM,MAAM;AAC5B,QAAM,gBAAgB,MAAM,MAAM;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAW,kBAAAA,SAAW,kBAAkB,SAAS;AAAA,MACjD,aAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEC;AAAA,gBAAQ,4CAAC,mBAAM,OAAN,EAAY,SAAS,SAAU,iBAAM,IAAiB;AAAA,QAChE,6CAAC,gCAAW,MACV;AAAA;AAAA,YAAC,6BAAW;AAAA,YAAX;AAAA,cACC,IAAI;AAAA,cACJ,WAAU;AAAA,cACV;AAAA,cACA,UAAQ;AAAA,cACR;AAAA,cACA,oBAAkB,cAAc,gBAAgB;AAAA;AAAA,UAClD;AAAA,UACA,4CAAC,6BAAW,OAAX,EACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cAEC;AAAA;AAAA,UACH,GACF;AAAA,WACF;AAAA,QACC,cAAc,4CAAC,mBAAM,aAAN,EAAkB,IAAI,eAAgB,uBAAY,IAAuB;AAAA;AAAA;AAAA,EAC3F;AAEJ,CAAC;AACD,UAAU,cAAc;",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { CopyButton } from '../copyButton/CopyButton'\nimport { Field } from '../field/Field'\nimport { InputGroup } from '../inputGroup/InputGroup'\nimport { copyFieldPropDefs } from './copyField.props'\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype CopyFieldOwnProps = GetPropDefTypes<typeof copyFieldPropDefs>\ninterface CopyFieldProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onCopy'>,\n    CopyFieldOwnProps {\n  value: string\n  label?: React.ReactNode\n  description?: React.ReactNode\n  timeout?: number\n  onCopyValue?: (value: string) => void\n  onCopyError?: (error: Error) => void\n}\n\nconst CopyField = React.forwardRef<HTMLDivElement, CopyFieldProps>((props, forwardedRef) => {\n  const {\n    className,\n    copiedLabel = 'Copied',\n    copyLabel = 'Copy value',\n    description,\n    disabled = false,\n    label,\n    onCopyError,\n    onCopyValue,\n    size = 'md',\n    timeout = 2000,\n    value,\n    ...fieldProps\n  } = extractProps(props, copyFieldPropDefs)\n  const inputId = React.useId()\n  const descriptionId = React.useId()\n\n  return (\n    <Field\n      {...fieldProps}\n      ref={forwardedRef}\n      className={classNames('dsx-copy-field', className)}\n      data-size={size}\n      disabled={disabled}\n      size={size}\n    >\n      {label ? <Field.Label htmlFor={inputId}>{label}</Field.Label> : null}\n      <InputGroup size={size}>\n        <InputGroup.Input\n          id={inputId}\n          className=\"dsx-copy-field__input\"\n          value={value}\n          readOnly\n          disabled={disabled}\n          aria-describedby={description ? descriptionId : undefined}\n        />\n        <CopyButton\n          className={classNames('dsx-input-group__button', 'dsx-copy-field__action')}\n          value={value}\n          disabled={disabled}\n          size={size}\n          copiedLabel={copiedLabel}\n          timeout={timeout}\n          onCopyValue={onCopyValue}\n          onCopyError={onCopyError}\n        >\n          {copyLabel}\n        </CopyButton>\n      </InputGroup>\n      {description ? <Field.Description id={descriptionId}>{description}</Field.Description> : null}\n    </Field>\n  )\n})\nCopyField.displayName = 'CopyField'\n\nexport { CopyField }\nexport type { CopyFieldProps }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,wBAAuB;AAEvB,0BAA6B;AAC7B,wBAA2B;AAC3B,mBAAsB;AACtB,wBAA2B;AAC3B,uBAAkC;AA0CnB;AA3Bf,MAAM,YAAY,MAAM,WAA2C,CAAC,OAAO,iBAAiB;AAC1F,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd,YAAY;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,QAAI,kCAAa,OAAO,kCAAiB;AACzC,QAAM,UAAU,MAAM,MAAM;AAC5B,QAAM,gBAAgB,MAAM,MAAM;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAW,kBAAAA,SAAW,kBAAkB,SAAS;AAAA,MACjD,aAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEC;AAAA,gBAAQ,4CAAC,mBAAM,OAAN,EAAY,SAAS,SAAU,iBAAM,IAAiB;AAAA,QAChE,6CAAC,gCAAW,MACV;AAAA;AAAA,YAAC,6BAAW;AAAA,YAAX;AAAA,cACC,IAAI;AAAA,cACJ,WAAU;AAAA,cACV;AAAA,cACA,UAAQ;AAAA,cACR;AAAA,cACA,oBAAkB,cAAc,gBAAgB;AAAA;AAAA,UAClD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW,kBAAAA,SAAW,2BAA2B,wBAAwB;AAAA,cACzE;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,WACF;AAAA,QACC,cAAc,4CAAC,mBAAM,aAAN,EAAkB,IAAI,eAAgB,uBAAY,IAAuB;AAAA;AAAA;AAAA,EAC3F;AAEJ,CAAC;AACD,UAAU,cAAc;",
   "names": ["classNames"]
 }

package/dist/components/copyField/CopyField.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyField.d.cts","sourceRoot":"","sources":["../../../src/components/copyField/CopyField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAClE,UAAU,cACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC,EAC1D,iBAAiB;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACrC;AAED,QAAA,MAAM,SAAS,uFAuDb,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"CopyField.d.cts","sourceRoot":"","sources":["../../../src/components/copyField/CopyField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAClE,UAAU,cACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC,EAC1D,iBAAiB;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACrC;AAED,QAAA,MAAM,SAAS,uFAqDb,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/copyField/CopyField.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyField.d.mts","sourceRoot":"","sources":["../../../src/components/copyField/CopyField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAClE,UAAU,cACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC,EAC1D,iBAAiB;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACrC;AAED,QAAA,MAAM,SAAS,uFAuDb,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"CopyField.d.mts","sourceRoot":"","sources":["../../../src/components/copyField/CopyField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAClE,UAAU,cACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC,EAC1D,iBAAiB;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACrC;AAED,QAAA,MAAM,SAAS,uFAqDb,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/copyField/CopyField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyField.d.ts","sourceRoot":"","sources":["../../../src/components/copyField/CopyField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAClE,UAAU,cACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC,EAC1D,iBAAiB;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACrC;AAED,QAAA,MAAM,SAAS,uFAuDb,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"CopyField.d.ts","sourceRoot":"","sources":["../../../src/components/copyField/CopyField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAClE,UAAU,cACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC,EAC1D,iBAAiB;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACrC;AAED,QAAA,MAAM,SAAS,uFAqDb,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/copyField/CopyField.js

@@ -47,10 +47,10 @@ const CopyField = React.forwardRef((props, forwardedRef) => {
               "aria-describedby": description ? descriptionId : void 0
             }
           ),
-          /* @__PURE__ */ jsx(InputGroup.Addon, { children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(
             CopyButton,
             {
-              className: "dsx-copy-field__action",
+              className: classNames("dsx-input-group__button", "dsx-copy-field__action"),
               value,
               disabled,
               size,
@@ -60,7 +60,7 @@ const CopyField = React.forwardRef((props, forwardedRef) => {
               onCopyError,
               children: copyLabel
             }
-          ) })
+          )
         ] }),
         description ? /* @__PURE__ */ jsx(Field.Description, { id: descriptionId, children: description }) : null
       ]

package/dist/components/copyField/CopyField.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/copyField/CopyField.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { CopyButton } from '../copyButton/CopyButton'\nimport { Field } from '../field/Field'\nimport { InputGroup } from '../inputGroup/InputGroup'\nimport { copyFieldPropDefs } from './copyField.props'\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype CopyFieldOwnProps = GetPropDefTypes<typeof copyFieldPropDefs>\ninterface CopyFieldProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onCopy'>,\n    CopyFieldOwnProps {\n  value: string\n  label?: React.ReactNode\n  description?: React.ReactNode\n  timeout?: number\n  onCopyValue?: (value: string) => void\n  onCopyError?: (error: Error) => void\n}\n\nconst CopyField = React.forwardRef<HTMLDivElement, CopyFieldProps>((props, forwardedRef) => {\n  const {\n    className,\n    copiedLabel = 'Copied',\n    copyLabel = 'Copy value',\n    description,\n    disabled = false,\n    label,\n    onCopyError,\n    onCopyValue,\n    size = 'md',\n    timeout = 2000,\n    value,\n    ...fieldProps\n  } = extractProps(props, copyFieldPropDefs)\n  const inputId = React.useId()\n  const descriptionId = React.useId()\n\n  return (\n    <Field\n      {...fieldProps}\n      ref={forwardedRef}\n      className={classNames('dsx-copy-field', className)}\n      data-size={size}\n      disabled={disabled}\n      size={size}\n    >\n      {label ? <Field.Label htmlFor={inputId}>{label}</Field.Label> : null}\n      <InputGroup size={size}>\n        <InputGroup.Input\n          id={inputId}\n          className=\"dsx-copy-field__input\"\n          value={value}\n          readOnly\n          disabled={disabled}\n          aria-describedby={description ? descriptionId : undefined}\n        />\n        <InputGroup.Addon>\n          <CopyButton\n            className=\"dsx-copy-field__action\"\n            value={value}\n            disabled={disabled}\n            size={size}\n            copiedLabel={copiedLabel}\n            timeout={timeout}\n            onCopyValue={onCopyValue}\n            onCopyError={onCopyError}\n          >\n            {copyLabel}\n          </CopyButton>\n        </InputGroup.Addon>\n      </InputGroup>\n      {description ? <Field.Description id={descriptionId}>{description}</Field.Description> : null}\n    </Field>\n  )\n})\nCopyField.displayName = 'CopyField'\n\nexport { CopyField }\nexport type { CopyFieldProps }\n"],
-  "mappings": ";AAEA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AAEvB,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AA0CnB,cACT,YADS;AA3Bf,MAAM,YAAY,MAAM,WAA2C,CAAC,OAAO,iBAAiB;AAC1F,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd,YAAY;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,iBAAiB;AACzC,QAAM,UAAU,MAAM,MAAM;AAC5B,QAAM,gBAAgB,MAAM,MAAM;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,WAAW,kBAAkB,SAAS;AAAA,MACjD,aAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEC;AAAA,gBAAQ,oBAAC,MAAM,OAAN,EAAY,SAAS,SAAU,iBAAM,IAAiB;AAAA,QAChE,qBAAC,cAAW,MACV;AAAA;AAAA,YAAC,WAAW;AAAA,YAAX;AAAA,cACC,IAAI;AAAA,cACJ,WAAU;AAAA,cACV;AAAA,cACA,UAAQ;AAAA,cACR;AAAA,cACA,oBAAkB,cAAc,gBAAgB;AAAA;AAAA,UAClD;AAAA,UACA,oBAAC,WAAW,OAAX,EACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cAEC;AAAA;AAAA,UACH,GACF;AAAA,WACF;AAAA,QACC,cAAc,oBAAC,MAAM,aAAN,EAAkB,IAAI,eAAgB,uBAAY,IAAuB;AAAA;AAAA;AAAA,EAC3F;AAEJ,CAAC;AACD,UAAU,cAAc;",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { CopyButton } from '../copyButton/CopyButton'\nimport { Field } from '../field/Field'\nimport { InputGroup } from '../inputGroup/InputGroup'\nimport { copyFieldPropDefs } from './copyField.props'\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype CopyFieldOwnProps = GetPropDefTypes<typeof copyFieldPropDefs>\ninterface CopyFieldProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onCopy'>,\n    CopyFieldOwnProps {\n  value: string\n  label?: React.ReactNode\n  description?: React.ReactNode\n  timeout?: number\n  onCopyValue?: (value: string) => void\n  onCopyError?: (error: Error) => void\n}\n\nconst CopyField = React.forwardRef<HTMLDivElement, CopyFieldProps>((props, forwardedRef) => {\n  const {\n    className,\n    copiedLabel = 'Copied',\n    copyLabel = 'Copy value',\n    description,\n    disabled = false,\n    label,\n    onCopyError,\n    onCopyValue,\n    size = 'md',\n    timeout = 2000,\n    value,\n    ...fieldProps\n  } = extractProps(props, copyFieldPropDefs)\n  const inputId = React.useId()\n  const descriptionId = React.useId()\n\n  return (\n    <Field\n      {...fieldProps}\n      ref={forwardedRef}\n      className={classNames('dsx-copy-field', className)}\n      data-size={size}\n      disabled={disabled}\n      size={size}\n    >\n      {label ? <Field.Label htmlFor={inputId}>{label}</Field.Label> : null}\n      <InputGroup size={size}>\n        <InputGroup.Input\n          id={inputId}\n          className=\"dsx-copy-field__input\"\n          value={value}\n          readOnly\n          disabled={disabled}\n          aria-describedby={description ? descriptionId : undefined}\n        />\n        <CopyButton\n          className={classNames('dsx-input-group__button', 'dsx-copy-field__action')}\n          value={value}\n          disabled={disabled}\n          size={size}\n          copiedLabel={copiedLabel}\n          timeout={timeout}\n          onCopyValue={onCopyValue}\n          onCopyError={onCopyError}\n        >\n          {copyLabel}\n        </CopyButton>\n      </InputGroup>\n      {description ? <Field.Description id={descriptionId}>{description}</Field.Description> : null}\n    </Field>\n  )\n})\nCopyField.displayName = 'CopyField'\n\nexport { CopyField }\nexport type { CopyFieldProps }\n"],
+  "mappings": ";AAEA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AAEvB,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AA0CnB,cACT,YADS;AA3Bf,MAAM,YAAY,MAAM,WAA2C,CAAC,OAAO,iBAAiB;AAC1F,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd,YAAY;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,iBAAiB;AACzC,QAAM,UAAU,MAAM,MAAM;AAC5B,QAAM,gBAAgB,MAAM,MAAM;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,WAAW,kBAAkB,SAAS;AAAA,MACjD,aAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEC;AAAA,gBAAQ,oBAAC,MAAM,OAAN,EAAY,SAAS,SAAU,iBAAM,IAAiB;AAAA,QAChE,qBAAC,cAAW,MACV;AAAA;AAAA,YAAC,WAAW;AAAA,YAAX;AAAA,cACC,IAAI;AAAA,cACJ,WAAU;AAAA,cACV;AAAA,cACA,UAAQ;AAAA,cACR;AAAA,cACA,oBAAkB,cAAc,gBAAgB;AAAA;AAAA,UAClD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,2BAA2B,wBAAwB;AAAA,cACzE;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,WACF;AAAA,QACC,cAAc,oBAAC,MAAM,aAAN,EAAkB,IAAI,eAAgB,uBAAY,IAAuB;AAAA;AAAA;AAAA,EAC3F;AAEJ,CAAC;AACD,UAAU,cAAc;",
   "names": []
 }

package/dist/components/data-list.css

@@ -70,9 +70,16 @@
   --dsx-data-list-marker-size: 2.25em;
 }
 
+/* Unordered marker is a drawn dot, not a text glyph: a radial fill at a
+   fixed fraction of the marker box, so it scales with item size for free —
+   no compounding, no font-dependent glyph rendering. Ordered numerals stay
+   text (counter) at natural size. */
 .dsx-data-list[data-list-type='unordered'] > .dsx-data-list__item::before {
-  content: '\2022';
-  font-size: 1.1em;
+  content: '';
+  background: radial-gradient(circle closest-side, currentColor 100%, transparent 100%);
+  background-size: 32% 32%;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 .dsx-data-list[data-list-type='ordered'] > .dsx-data-list__item::before {
@@ -83,8 +90,10 @@
 /* ── Item body — offset for marker breathing room ──────── */
 
 .dsx-data-list__item-body {
+  box-sizing: border-box;
   display: flex;
-  align-items: flex-start;
+  flex-wrap: wrap;
+  align-items: center;
   gap: var(--dsx-space-md);
   padding: var(--dsx-space-sm) var(--dsx-space-md);
   padding-inline-start: var(--dsx-space-2xl);
@@ -99,6 +108,7 @@
 
 .dsx-data-list__media {
   flex-shrink: 0;
+  align-self: flex-start;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -117,6 +127,7 @@
 }
 
 .dsx-data-list__item[data-size='xs'] > .dsx-data-list__item-body {
+  padding-block: var(--dsx-space-xs);
   min-height: var(--dsx-size-lg);
 }
 
@@ -125,10 +136,12 @@
 }
 
 .dsx-data-list__item[data-size='md'] > .dsx-data-list__item-body {
+  padding-block: var(--dsx-space-md);
   min-height: var(--dsx-size-2xl);
 }
 
 .dsx-data-list__item[data-size='lg'] > .dsx-data-list__item-body {
+  padding-block: var(--dsx-space-lg);
   min-height: var(--dsx-size-3xl);
 }
 
@@ -148,11 +161,12 @@
 .dsx-data-list__content {
   display: grid;
   gap: var(--dsx-space-xs);
-  flex: 1;
+  flex: 1 1 8rem;
   min-width: 0;
 }
 
 .dsx-data-list__text {
+  overflow-wrap: anywhere;
   color: var(--dsx-color-on-surface);
   font-family: var(--dsx-typography-label-large-font-family), sans-serif;
   font-size: var(--dsx-typography-label-large-font-size);
@@ -162,6 +176,7 @@
 }
 
 .dsx-data-list__metadata {
+  overflow-wrap: anywhere;
   color: var(--dsx-color-on-surface-variant);
   font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
   font-size: var(--dsx-typography-body-medium-font-size);

package/dist/components/data-table.css

@@ -6,6 +6,7 @@
 
 .dsx-data-table {
   width: 100%;
+  min-width: 0;
   overflow: hidden;
   border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
   border-radius: var(--dsx-rounded-lg);
@@ -53,10 +54,90 @@
 /* ── Toolbar: shares container background, bottom separator ────────── */
 
 .dsx-data-table-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--dsx-space-md);
+  padding: var(--dsx-space-sm) var(--dsx-space-md);
   background: var(--dsx-color-surface);
   border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
 }
 
+.dsx-data-table-toolbar__search {
+  flex: 1 1 12rem;
+  min-width: 0;
+}
+
+.dsx-data-table__toolbar-region {
+  display: grid;
+}
+
+.dsx-data-table-toolbar__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--dsx-space-sm);
+  min-width: 0;
+  max-width: 100%;
+}
+
+.dsx-data-table-toolbar__row-count {
+  display: flex;
+  align-items: center;
+  gap: var(--dsx-space-xs);
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-body-small-font-family);
+  font-size: var(--dsx-typography-body-small-font-size);
+  font-weight: var(--dsx-typography-body-small-font-weight);
+  white-space: nowrap;
+}
+
+.dsx-data-table__sort-button {
+  position: relative;
+  border-radius: var(--dsx-rounded-sm);
+  transition:
+    color var(--dsx-motion-duration-fast) var(--dsx-motion-easing-standard),
+    background-color var(--dsx-motion-duration-fast) var(--dsx-motion-easing-standard);
+}
+
+.dsx-data-table__sort-button::before {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  top: 50%;
+  height: max(100%, var(--dsx-size-md));
+  transform: translateY(-50%);
+}
+
+.dsx-data-table__sort-button:hover {
+  background: var(--dsx-effect-hover-ghost);
+  color: var(--dsx-color-on-surface);
+}
+
+.dsx-data-table__sort-button:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
+}
+
+.dsx-data-table__sort-indicator {
+  display: inline-grid;
+  place-items: center;
+  width: var(--dsx-size-sm);
+  height: var(--dsx-size-sm);
+  flex: 0 0 var(--dsx-size-sm);
+  color: var(--dsx-color-on-surface-variant);
+}
+
+.dsx-data-table__sort-indicator:where([data-direction='none']) {
+  opacity: 0.55;
+}
+
+.dsx-data-table__sort-indicator:where([data-direction='asc']),
+.dsx-data-table__sort-indicator:where([data-direction='desc']) {
+  color: var(--dsx-color-accent-indicator);
+}
+
 /* ── Pagination: shares container background, top separator ────────── */
 
 .dsx-data-table-pagination {
@@ -64,14 +145,123 @@
   border-top: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
 }
 
+.dsx-data-table-pagination__info,
+.dsx-data-table-pagination__page-size {
+  display: flex;
+  align-items: center;
+  gap: var(--dsx-space-xs);
+  color: var(--dsx-color-on-surface-variant);
+  font-size: var(--dsx-typography-label-small-font-size);
+  white-space: nowrap;
+}
+
+.dsx-data-table-pagination__navigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  min-width: 0;
+  gap: var(--dsx-space-xs);
+}
+
+.dsx-data-table-pagination__page-size {
+  flex-wrap: wrap;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.dsx-data-table-pagination__navigation .dsx-pagination__list {
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+}
+
+.dsx-data-table-pagination__page-status {
+  color: var(--dsx-color-on-surface-variant);
+  font-size: var(--dsx-typography-label-small-font-size);
+  white-space: nowrap;
+}
+
+/* ── Bulk-selection action bar ─────────────────────────────────────── */
+
+.dsx-data-table__bulk-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--dsx-space-sm);
+  padding: var(--dsx-space-sm) var(--dsx-space-md);
+  background: var(--dsx-color-surface-raised);
+  color: var(--dsx-color-on-surface);
+  border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+}
+
+.dsx-data-table__bulk-bar-count {
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--dsx-size-md);
+  padding: 0 var(--dsx-space-sm);
+  border-radius: var(--dsx-rounded-md);
+  background: var(--dsx-color-accent-surface);
+  color: var(--dsx-color-accent-indicator);
+  font-size: var(--dsx-typography-label-small-font-size);
+  font-weight: var(--dsx-typography-label-large-font-weight);
+  white-space: nowrap;
+}
+
+.dsx-data-table__bulk-bar-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--dsx-space-xs);
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.dsx-data-table__bulk-bar-clear {
+  margin-inline-start: auto;
+}
+
+/* ── Pagination placement ──────────────────────────────────────────── */
+/* Bottom is the default (border-top separator). Top flips the border. */
+
+.dsx-data-table-pagination.dsx-data-table__pagination-top {
+  border-top: 0;
+  border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+}
+
 /* ── Empty state ───────────────────────────────────────────────────── */
 
 .dsx-data-table__empty {
   height: var(--dsx-data-table-empty-height);
   text-align: center;
+  vertical-align: middle;
   color: var(--dsx-color-on-surface-variant);
 }
 
+.dsx-data-table__empty-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--dsx-space-xs);
+  padding: var(--dsx-space-lg) var(--dsx-space-md);
+}
+
+.dsx-data-table__empty-content strong {
+  color: var(--dsx-color-on-surface);
+  font-family: var(--dsx-typography-label-large-font-family);
+  font-size: var(--dsx-typography-label-large-font-size);
+  font-weight: var(--dsx-typography-label-large-font-weight);
+}
+
+.dsx-data-table__empty-content span {
+  font-family: var(--dsx-typography-body-small-font-family);
+  font-size: var(--dsx-typography-body-small-font-size);
+}
+
 /* ── Expanded detail row ───────────────────────────────────────────── */
 
 .dsx-data-table [data-expanded-detail='true'] {