@d4gger/design-system 3.0.0 → 3.0.1

package/dist/components/fileUpload/FileUpload.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/fileUpload/FileUpload.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { useDropzone, type Accept } from 'react-dropzone'\n\nimport { cn } from '../../_internal/cn'\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { Button } from '../button/Button'\nimport { CardRoot, type CardProps } from '../card/Card'\nimport { EmptyState, type EmptyStateProps } from '../emptyState/EmptyState'\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n  type ItemProps,\n} from '../item/Item'\nimport { Progress, type ProgressProps } from '../progress/Progress'\nimport {\n  fileUploadDropzonePropDefs,\n  fileUploadItemPropDefs,\n  fileUploadListPropDefs,\n  fileUploadProgressPropDefs,\n  fileUploadRootPropDefs,\n} from './fileUpload.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype FileUploadRootElement = React.ComponentRef<'div'>\ntype FileUploadListElement = React.ComponentRef<'div'>\ntype FileUploadProgressElement = React.ComponentRef<'div'>\ntype FileUploadRootOwnProps = GetPropDefTypes<typeof fileUploadRootPropDefs>\ntype FileUploadListOwnProps = GetPropDefTypes<typeof fileUploadListPropDefs>\ntype FileUploadDropzoneOwnProps = GetPropDefTypes<typeof fileUploadDropzonePropDefs> & {\n  accept?: Accept\n  action?: React.ReactNode\n  actionLabel?: React.ReactNode\n  description?: React.ReactNode\n  illustration?: React.ReactNode\n  multiple?: boolean\n  onActionClick?: React.MouseEventHandler<HTMLButtonElement>\n  onFiles?: (files: File[]) => void\n  title: React.ReactNode\n}\ntype FileUploadItemOwnProps = GetPropDefTypes<typeof fileUploadItemPropDefs> & {\n  actions?: React.ReactNode\n  description?: React.ReactNode\n  fileName: React.ReactNode\n  icon?: React.ReactNode\n  progress?: number\n  progressLabel?: React.ReactNode\n  status?: React.ReactNode\n}\ntype FileUploadProgressOwnProps = GetPropDefTypes<typeof fileUploadProgressPropDefs> & {\n  label?: React.ReactNode\n}\n\ninterface FileUploadRootProps extends CardProps, FileUploadRootOwnProps {}\n\ninterface FileUploadListProps extends React.ComponentPropsWithoutRef<'div'>, FileUploadListOwnProps {}\n\ninterface FileUploadDropzoneProps\n  extends Omit<EmptyStateProps, 'action' | 'description' | 'illustration' | 'title'>,\n    FileUploadDropzoneOwnProps {}\n\ninterface FileUploadItemProps extends Omit<ItemProps, 'children'>, FileUploadItemOwnProps {}\n\ninterface FileUploadProgressProps extends ProgressProps, FileUploadProgressOwnProps {}\n\nconst FileUploadRoot = React.forwardRef<FileUploadRootElement, FileUploadRootProps>((props, forwardedRef) => {\n  const { asChild, className, size = 'md', ...rootProps } = extractProps(props, fileUploadRootPropDefs)\n\n  return (\n    <CardRoot\n      {...rootProps}\n      ref={forwardedRef}\n      asChild={asChild}\n      className={cn('dsx-file-upload', className)}\n      data-size={size}\n    />\n  )\n})\nFileUploadRoot.displayName = 'FileUpload'\n\nconst FileUploadDropzone = React.forwardRef<React.ComponentRef<'section'>, FileUploadDropzoneProps>(\n  (props, forwardedRef) => {\n    const {\n      accept,\n      action,\n      actionLabel,\n      asChild,\n      className,\n      description,\n      dragging = false,\n      illustration,\n      multiple,\n      onActionClick,\n      onFiles,\n      title,\n      ...dropzoneProps\n    } = extractProps(props, fileUploadDropzonePropDefs)\n\n    const { getInputProps, getRootProps, isDragActive } = useDropzone({\n      accept,\n      disabled: onFiles === undefined,\n      multiple,\n      onDrop: (files) => {\n        onFiles?.(files)\n      },\n    })\n    const { ref: dropzoneRef, ...rootProps } = getRootProps()\n    const setRefs = React.useCallback(\n      (node: HTMLElement | null) => {\n        if (typeof dropzoneRef === 'function') dropzoneRef(node)\n        else if (dropzoneRef) dropzoneRef.current = node\n        if (typeof forwardedRef === 'function') forwardedRef(node)\n        else if (forwardedRef) forwardedRef.current = node as never\n      },\n      [dropzoneRef, forwardedRef],\n    )\n\n    const resolvedAction =\n      action\n      ?? (actionLabel ? (\n        <Button type=\"button\" variant=\"outline\" onClick={onActionClick}>\n          {actionLabel}\n        </Button>\n      ) : null)\n\n    return (\n      <>\n        {onFiles === undefined ? null : (\n          <input {...getInputProps({ 'aria-label': typeof title === 'string' ? title : 'Browse files' })} />\n        )}\n        <EmptyState\n          {...dropzoneProps}\n          {...rootProps}\n          ref={setRefs}\n          asChild={asChild}\n          action={resolvedAction}\n          className={cn('dsx-file-upload__dropzone', className)}\n          data-dragging={dragging || isDragActive ? 'true' : undefined}\n          description={description}\n          illustration={\n            illustration ?? <Icon name=\"upload\" size=\"lg\" className=\"dsx-file-upload__dropzone-icon\" />\n          }\n          title={title}\n        />\n      </>\n    )\n  },\n)\nFileUploadDropzone.displayName = 'FileUploadDropzone'\n\nconst FileUploadList = React.forwardRef<FileUploadListElement, FileUploadListProps>((props, forwardedRef) => {\n  const { asChild, className, ...listProps } = extractProps(props, fileUploadListPropDefs)\n  const Comp = asChild ? Slot : 'div'\n\n  return <Comp {...listProps} ref={forwardedRef} className={cn('dsx-file-upload__list', className)} />\n})\nFileUploadList.displayName = 'FileUploadList'\n\nconst FileUploadProgress = React.forwardRef<FileUploadProgressElement, FileUploadProgressProps>(\n  (props, forwardedRef) => {\n    const { className, label, showValueLabel = false, value, ...progressProps } = extractProps(\n      props,\n      fileUploadProgressPropDefs,\n    )\n    const resolvedLabel =\n      label ?? (showValueLabel && typeof value === 'number' ? `${Math.round(value)}%` : undefined)\n\n    return (\n      <div ref={forwardedRef} className={cn('dsx-file-upload__progress', className)}>\n        <Progress {...progressProps} value={value} className=\"dsx-file-upload__progress-track\" />\n        {resolvedLabel ? <span className=\"dsx-file-upload__progress-label\">{resolvedLabel}</span> : null}\n      </div>\n    )\n  },\n)\nFileUploadProgress.displayName = 'FileUploadProgress'\n\nconst FileUploadItem = React.forwardRef<React.ComponentRef<'div'>, FileUploadItemProps>((props, forwardedRef) => {\n  const {\n    actions,\n    asChild,\n    className,\n    description,\n    fileName,\n    icon,\n    progress,\n    progressLabel,\n    status,\n    statusTone = 'muted',\n    ...itemProps\n  } = extractProps(props, fileUploadItemPropDefs)\n\n  return (\n    <Item\n      {...itemProps}\n      ref={forwardedRef}\n      asChild={asChild}\n      className={cn('dsx-file-upload__item', className)}\n      data-status-tone={statusTone === 'muted' ? undefined : statusTone}\n    >\n      {icon === null ? null : (\n        <ItemMedia className=\"dsx-file-upload__media\">\n          {icon ?? <Icon name=\"file\" size=\"sm\" className=\"dsx-file-upload__icon\" />}\n        </ItemMedia>\n      )}\n      <ItemContent className=\"dsx-file-upload__content\">\n        <ItemTitle className=\"dsx-file-upload__title\">{fileName}</ItemTitle>\n        {description ? <ItemDescription>{description}</ItemDescription> : null}\n        {status ? <span className=\"dsx-file-upload__status\">{status}</span> : null}\n        {typeof progress === 'number' ? <FileUploadProgress value={progress} label={progressLabel} /> : null}\n      </ItemContent>\n      {actions ? (\n        <ItemActions className=\"dsx-file-upload__actions\">\n          {actions}\n        </ItemActions>\n      ) : null}\n    </Item>\n  )\n})\nFileUploadItem.displayName = 'FileUploadItem'\n\nconst FileUpload: typeof FileUploadRoot & {\n  Dropzone: typeof FileUploadDropzone\n  List: typeof FileUploadList\n  Item: typeof FileUploadItem\n  Progress: typeof FileUploadProgress\n} = Object.assign(FileUploadRoot, {\n  Dropzone: FileUploadDropzone,\n  List: FileUploadList,\n  Item: FileUploadItem,\n  Progress: FileUploadProgress,\n})\n\nexport { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadList, FileUploadProgress, FileUploadRoot }\nexport type {\n  FileUploadDropzoneProps,\n  FileUploadItemProps,\n  FileUploadListProps,\n  FileUploadProgressProps,\n  FileUploadRootProps,\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { useDropzone, type Accept } from 'react-dropzone'\n\nimport { cn } from '../../_internal/cn'\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { Button } from '../button/Button'\nimport { CardRoot, type CardProps } from '../card/Card'\nimport { EmptyState, type EmptyStateProps } from '../emptyState/EmptyState'\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n  type ItemProps,\n} from '../item/Item'\nimport { Progress, type ProgressProps } from '../progress/Progress'\nimport {\n  fileUploadDropzonePropDefs,\n  fileUploadItemPropDefs,\n  fileUploadListPropDefs,\n  fileUploadProgressPropDefs,\n  fileUploadRootPropDefs,\n} from './fileUpload.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype FileUploadRootElement = React.ComponentRef<'div'>\ntype FileUploadListElement = React.ComponentRef<'div'>\ntype FileUploadProgressElement = React.ComponentRef<'div'>\ntype FileUploadRootOwnProps = GetPropDefTypes<typeof fileUploadRootPropDefs>\ntype FileUploadListOwnProps = GetPropDefTypes<typeof fileUploadListPropDefs>\ntype FileUploadDropzoneOwnProps = GetPropDefTypes<typeof fileUploadDropzonePropDefs> & {\n  accept?: Accept\n  action?: React.ReactNode\n  actionLabel?: React.ReactNode\n  capture?: boolean | 'user' | 'environment'\n  description?: React.ReactNode\n  illustration?: React.ReactNode\n  multiple?: boolean\n  onActionClick?: React.MouseEventHandler<HTMLButtonElement>\n  onFiles?: (files: File[]) => void\n  title: React.ReactNode\n}\ntype FileUploadItemOwnProps = GetPropDefTypes<typeof fileUploadItemPropDefs> & {\n  actions?: React.ReactNode\n  description?: React.ReactNode\n  fileName: React.ReactNode\n  icon?: React.ReactNode\n  progress?: number\n  progressLabel?: React.ReactNode\n  status?: React.ReactNode\n}\ntype FileUploadProgressOwnProps = GetPropDefTypes<typeof fileUploadProgressPropDefs> & {\n  label?: React.ReactNode\n}\n\ninterface FileUploadRootProps extends CardProps, FileUploadRootOwnProps {}\n\ninterface FileUploadListProps extends React.ComponentPropsWithoutRef<'div'>, FileUploadListOwnProps {}\n\ninterface FileUploadDropzoneProps\n  extends Omit<EmptyStateProps, 'action' | 'description' | 'illustration' | 'title'>,\n    FileUploadDropzoneOwnProps {}\n\ninterface FileUploadItemProps extends Omit<ItemProps, 'children'>, FileUploadItemOwnProps {}\n\ninterface FileUploadProgressProps extends ProgressProps, FileUploadProgressOwnProps {}\n\nconst FileUploadRoot = React.forwardRef<FileUploadRootElement, FileUploadRootProps>((props, forwardedRef) => {\n  const { asChild, className, size = 'md', ...rootProps } = extractProps(props, fileUploadRootPropDefs)\n\n  return (\n    <CardRoot\n      {...rootProps}\n      ref={forwardedRef}\n      asChild={asChild}\n      className={cn('dsx-file-upload', className)}\n      data-size={size}\n    />\n  )\n})\nFileUploadRoot.displayName = 'FileUpload'\n\nconst FileUploadDropzone = React.forwardRef<React.ComponentRef<'section'>, FileUploadDropzoneProps>(\n  (props, forwardedRef) => {\n    const {\n      accept,\n      action,\n      actionLabel,\n      asChild,\n      capture,\n      className,\n      description,\n      dragging = false,\n      illustration,\n      multiple,\n      onActionClick,\n      onFiles,\n      title,\n      ...dropzoneProps\n    } = extractProps(props, fileUploadDropzonePropDefs)\n\n    const { getInputProps, getRootProps, isDragActive } = useDropzone({\n      accept,\n      disabled: onFiles === undefined,\n      multiple,\n      onDrop: (files) => {\n        onFiles?.(files)\n      },\n    })\n    const { ref: dropzoneRef, ...rootProps } = getRootProps()\n    const setRefs = React.useCallback(\n      (node: HTMLElement | null) => {\n        if (typeof dropzoneRef === 'function') dropzoneRef(node)\n        else if (dropzoneRef) dropzoneRef.current = node\n        if (typeof forwardedRef === 'function') forwardedRef(node)\n        else if (forwardedRef) forwardedRef.current = node as never\n      },\n      [dropzoneRef, forwardedRef],\n    )\n\n    const resolvedAction =\n      action\n      ?? (actionLabel ? (\n        <Button type=\"button\" variant=\"outline\" onClick={onActionClick}>\n          {actionLabel}\n        </Button>\n      ) : null)\n\n    return (\n      <>\n        {onFiles === undefined ? null : (\n          <input\n            {...getInputProps({\n              'aria-label': typeof title === 'string' ? title : 'Browse files',\n              ...(capture === undefined ? null : { capture }),\n            })}\n          />\n        )}\n        <EmptyState\n          {...dropzoneProps}\n          {...rootProps}\n          ref={setRefs}\n          asChild={asChild}\n          action={resolvedAction}\n          className={cn('dsx-file-upload__dropzone', className)}\n          data-dragging={dragging || isDragActive ? 'true' : undefined}\n          description={description}\n          illustration={\n            illustration ?? <Icon name=\"upload\" size=\"lg\" className=\"dsx-file-upload__dropzone-icon\" />\n          }\n          title={title}\n        />\n      </>\n    )\n  },\n)\nFileUploadDropzone.displayName = 'FileUploadDropzone'\n\nconst FileUploadList = React.forwardRef<FileUploadListElement, FileUploadListProps>((props, forwardedRef) => {\n  const { asChild, className, ...listProps } = extractProps(props, fileUploadListPropDefs)\n  const Comp = asChild ? Slot : 'div'\n\n  return <Comp {...listProps} ref={forwardedRef} className={cn('dsx-file-upload__list', className)} />\n})\nFileUploadList.displayName = 'FileUploadList'\n\nconst FileUploadProgress = React.forwardRef<FileUploadProgressElement, FileUploadProgressProps>(\n  (props, forwardedRef) => {\n    const { className, label, showValueLabel = false, value, ...progressProps } = extractProps(\n      props,\n      fileUploadProgressPropDefs,\n    )\n    const resolvedLabel =\n      label ?? (showValueLabel && typeof value === 'number' ? `${Math.round(value)}%` : undefined)\n\n    return (\n      <div ref={forwardedRef} className={cn('dsx-file-upload__progress', className)}>\n        <Progress {...progressProps} value={value} className=\"dsx-file-upload__progress-track\" />\n        {resolvedLabel ? <span className=\"dsx-file-upload__progress-label\">{resolvedLabel}</span> : null}\n      </div>\n    )\n  },\n)\nFileUploadProgress.displayName = 'FileUploadProgress'\n\nconst FileUploadItem = React.forwardRef<React.ComponentRef<'div'>, FileUploadItemProps>((props, forwardedRef) => {\n  const {\n    actions,\n    asChild,\n    className,\n    description,\n    fileName,\n    icon,\n    progress,\n    progressLabel,\n    status,\n    statusTone = 'muted',\n    ...itemProps\n  } = extractProps(props, fileUploadItemPropDefs)\n\n  return (\n    <Item\n      {...itemProps}\n      ref={forwardedRef}\n      asChild={asChild}\n      className={cn('dsx-file-upload__item', className)}\n      data-status-tone={statusTone === 'muted' ? undefined : statusTone}\n    >\n      {icon === null ? null : (\n        <ItemMedia className=\"dsx-file-upload__media\">\n          {icon ?? <Icon name=\"file\" size=\"sm\" className=\"dsx-file-upload__icon\" />}\n        </ItemMedia>\n      )}\n      <ItemContent className=\"dsx-file-upload__content\">\n        <ItemTitle className=\"dsx-file-upload__title\">{fileName}</ItemTitle>\n        {description ? <ItemDescription>{description}</ItemDescription> : null}\n        {status ? <span className=\"dsx-file-upload__status\">{status}</span> : null}\n        {typeof progress === 'number' ? <FileUploadProgress value={progress} label={progressLabel} /> : null}\n      </ItemContent>\n      {actions ? (\n        <ItemActions className=\"dsx-file-upload__actions\">\n          {actions}\n        </ItemActions>\n      ) : null}\n    </Item>\n  )\n})\nFileUploadItem.displayName = 'FileUploadItem'\n\nconst FileUpload: typeof FileUploadRoot & {\n  Dropzone: typeof FileUploadDropzone\n  List: typeof FileUploadList\n  Item: typeof FileUploadItem\n  Progress: typeof FileUploadProgress\n} = Object.assign(FileUploadRoot, {\n  Dropzone: FileUploadDropzone,\n  List: FileUploadList,\n  Item: FileUploadItem,\n  Progress: FileUploadProgress,\n})\n\nexport { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadList, FileUploadProgress, FileUploadRoot }\nexport type {\n  FileUploadDropzoneProps,\n  FileUploadItemProps,\n  FileUploadListProps,\n  FileUploadProgressProps,\n  FileUploadRootProps,\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/filter-bar.css

@@ -2,9 +2,10 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: var(--dsx-space-sm);
+  gap: var(--dsx-filter-bar-gap, var(--dsx-space-sm));
   width: 100%;
-  padding: var(--dsx-space-md);
+  min-width: 0;
+  padding: var(--dsx-filter-bar-padding, var(--dsx-space-md));
   border: var(--dsx-border-width-sm) solid var(--dsx-control-separator-color);
   border-radius: var(--dsx-rounded-lg);
   background: var(--dsx-color-surface-raised);
@@ -15,7 +16,15 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: var(--dsx-space-sm);
+  gap: var(--dsx-filter-bar-gap, var(--dsx-space-sm));
+  /* Narrow-container rule (TMA slice-1 2026-09-23): as flex items of the bar
+     these rows default to min-width:auto (= widest child), so a 350px
+     SegmentedControl props a 272px bar open and the control's own
+     max-width:100% resolves against the overflowed row — a no-op. Floor at 0
+     and cap at 100% so the row shrinks to the bar and fused children engage
+     their internal scroll instead. */
+  min-width: 0;
+  max-width: 100%;
 }
 .dsx-filter-bar__control { display: inline-flex; border-radius: var(--dsx-rounded-md); }
 .dsx-filter-bar__control[data-active='true'] { box-shadow: inset 0 0 0 var(--dsx-border-width-sm) var(--dsx-color-accent-indicator); }
@@ -25,14 +34,377 @@
 .dsx-filter-bar__summary {
   min-width: 0;
   color: var(--dsx-color-on-surface-variant);
-  font-family: var(--dsx-typography-body-small-font-family), sans-serif;
-  font-size: var(--dsx-typography-body-small-font-size);
-  line-height: var(--dsx-typography-body-small-line-height);
+  font-family: var(--dsx-filter-bar-summary-font-family, var(--dsx-typography-body-small-font-family)), sans-serif;
+  font-size: var(--dsx-filter-bar-summary-font-size, var(--dsx-typography-body-small-font-size));
+  font-weight: var(--dsx-filter-bar-summary-font-weight, var(--dsx-typography-body-small-font-weight));
+  line-height: var(--dsx-filter-bar-summary-line-height, var(--dsx-typography-body-small-line-height));
 }
 
 .dsx-filter-bar__actions {
   margin-inline-start: auto;
+  flex: none;
+}
+
+.dsx-filter-bar__search {
+  display: inline-flex;
+  flex: 1 1 12rem;
+  min-width: min(10rem, 100%);
+  max-width: 100%;
+}
+
+.dsx-filter-bar__rules {
+  min-width: 0;
+  max-width: 100%;
+  gap: var(--dsx-filter-bar-gap, var(--dsx-space-sm));
+  min-height: var(--dsx-filter-bar-control-height, var(--dsx-density-control-height));
+}
+
+.dsx-filter-bar__rule {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.dsx-filter-bar__rule-label {
+  position: relative;
+  display: inline-flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  text-align: start;
+  gap: var(--dsx-space-xs);
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.dsx-filter-bar__rule-label > span {
+  min-width: 0;
+  max-width: 100%;
+}
+
+button.dsx-filter-bar__rule-label::before {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  top: 50%;
+  height: max(100%, var(--dsx-size-md));
+  transform: translateY(-50%);
+}
+
+:where(.dsx-filter-bar__rule) > .dsx-pill__remove {
+  position: relative;
+  flex-shrink: 0;
+}
+
+:where(.dsx-filter-bar__rule) > .dsx-pill__remove::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: max(100%, var(--dsx-size-md));
+  height: max(100%, var(--dsx-size-md));
+  transform: translate(-50%, -50%);
+}
+
+span.dsx-filter-bar__rule-label {
+  cursor: default;
+}
+
+.dsx-filter-bar__rule-field {
+  font-weight: inherit;
+}
+
+.dsx-filter-bar__rule-operator {
+  color: var(--dsx-color-on-surface-variant);
+}
+
+.dsx-filter-bar__rule-value {
+  color: var(--dsx-color-on-surface);
+}
+
+.dsx-filter-bar__rule:where([data-active='true']) {
+  box-shadow: inset 0 0 0 var(--dsx-border-width-sm) var(--dsx-color-accent-indicator);
+}
+
+.dsx-filter-bar__builder {
+  display: grid;
+  gap: var(--dsx-space-md);
+  min-width: 16rem;
 }
 
-.dsx-filter-bar[data-size='sm'] { padding: var(--dsx-space-sm); }
-.dsx-filter-bar[data-size='lg'] { gap: var(--dsx-space-md); }
+.dsx-filter-bar__builder-anchor {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+}
+
+.dsx-filter-bar__condition-editor {
+  display: grid;
+  gap: var(--dsx-space-md);
+  width: 100%;
+  padding: var(--dsx-space-md);
+  border: var(--dsx-border-width-sm) solid var(--dsx-control-separator-color);
+  border-radius: var(--dsx-rounded-md);
+  background: var(--dsx-color-surface);
+}
+
+.dsx-filter-bar__condition-editor-title {
+  color: var(--dsx-color-on-surface);
+  font-family: var(--dsx-typography-label-medium-font-family, var(--dsx-typography-label-small-font-family)), sans-serif;
+  font-size: var(--dsx-typography-label-medium-font-size, var(--dsx-typography-label-small-font-size));
+  font-weight: var(--dsx-typography-label-medium-font-weight, var(--dsx-typography-label-small-font-weight));
+  line-height: var(--dsx-typography-label-medium-line-height, var(--dsx-typography-label-small-line-height));
+}
+
+.dsx-filter-bar__condition-editor-body {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dsx-space-md);
+}
+
+.dsx-filter-bar__condition-editor-fields {
+  display: flex;
+  flex-direction: column;
+  flex: 0 1 12rem;
+  gap: var(--dsx-space-xs);
+}
+
+.dsx-filter-bar__condition-editor-config {
+  display: grid;
+  flex: 1 1 16rem;
+  gap: var(--dsx-space-sm);
+  align-content: start;
+  min-width: 0;
+}
+
+.dsx-filter-bar__condition-editor-field {
+  display: grid;
+  gap: var(--dsx-space-xs);
+}
+
+.dsx-filter-bar__condition-editor-label {
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+  font-weight: var(--dsx-typography-label-small-font-weight);
+  line-height: var(--dsx-typography-label-small-line-height);
+}
+
+.dsx-filter-bar__condition-editor-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--dsx-space-sm);
+}
+
+.dsx-filter-bar__condition-grip {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  color: var(--dsx-color-on-surface-variant);
+  cursor: grab;
+}
+
+.dsx-filter-bar__condition-rows-label,
+.dsx-filter-bar__condition-match-label {
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+  font-weight: var(--dsx-typography-label-small-font-weight);
+  line-height: var(--dsx-typography-label-small-line-height);
+}
+
+.dsx-filter-bar__builder-field {
+  display: grid;
+  gap: var(--dsx-space-xs);
+}
+
+.dsx-filter-bar__builder-label {
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+  font-weight: var(--dsx-typography-label-small-font-weight);
+  line-height: var(--dsx-typography-label-small-line-height);
+}
+
+.dsx-filter-bar__builder-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--dsx-space-sm);
+}
+
+/* Builder selects ride the shared nested floating tier: the Builder popup is a
+   Popover host, so its option lists escalate automatically via
+   `dsx-menu__nested` (see `_internal/baseMenu.css`). The round-3 scoped
+   override (`.dsx-filter-bar__builder-select` at `modal + 2`) is retired. */
+
+.dsx-filter-bar__rule-count {
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+  font-weight: var(--dsx-typography-label-small-font-weight);
+  line-height: var(--dsx-typography-label-small-line-height);
+}
+
+.dsx-filter-bar__rules-overflow {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dsx-space-xs);
+}
+
+.dsx-filter-bar__condition-group {
+  display: grid;
+  gap: var(--dsx-filter-bar-gap, var(--dsx-space-sm));
+  width: 100%;
+  padding: var(--dsx-space-sm);
+  border: var(--dsx-border-width-sm) solid var(--dsx-control-separator-color);
+  border-radius: var(--dsx-rounded-md);
+}
+
+.dsx-filter-bar__condition-group .dsx-filter-bar__condition-group {
+  width: auto;
+  margin-inline-start: var(--dsx-space-md);
+  padding-inline-start: var(--dsx-space-md);
+  border-inline-start: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+  background: transparent;
+}
+
+.dsx-filter-bar__condition-group[data-empty='true'] {
+  border-style: dashed;
+}
+
+.dsx-filter-bar__condition-empty {
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+}
+
+.dsx-filter-bar__rule-value[data-empty='true'] {
+  padding: 0 var(--dsx-space-xs);
+  border: var(--dsx-border-width-sm) dashed var(--dsx-color-on-surface-variant);
+  border-radius: var(--dsx-rounded-sm);
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+}
+
+.dsx-filter-bar__condition-combinator {
+  display: flex;
+  align-items: center;
+  gap: var(--dsx-space-xs);
+}
+
+.dsx-filter-bar__condition-combinator-label {
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+  font-weight: var(--dsx-typography-label-small-font-weight);
+  line-height: var(--dsx-typography-label-small-line-height);
+}
+
+.dsx-filter-bar__condition-children {
+  display: grid;
+  gap: var(--dsx-space-sm);
+}
+
+.dsx-filter-bar__condition {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--dsx-space-sm);
+  width: 100%;
+}
+
+.dsx-filter-bar__condition-field {
+  flex: 0 1 10rem;
+  min-width: 0;
+}
+
+.dsx-filter-bar__condition-operator {
+  flex: 0 1 8rem;
+  min-width: 0;
+}
+
+.dsx-filter-bar__condition-value {
+  flex: 1 1 10rem;
+  min-width: 0;
+}
+
+.dsx-filter-bar__condition-gap {
+  display: flex;
+  align-items: center;
+  gap: var(--dsx-space-xs);
+  width: 100%;
+}
+
+.dsx-filter-bar__condition-label {
+  display: inline-flex;
+  flex: 1 1 auto;
+  align-items: baseline;
+  justify-content: flex-start;
+  gap: var(--dsx-space-xs);
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+span.dsx-filter-bar__condition-label {
+  cursor: default;
+}
+
+.dsx-filter-bar__rule-value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dsx-filter-bar__condition-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--dsx-space-sm);
+}
+
+.dsx-filter-bar:where([data-size='sm']) {
+  --dsx-filter-bar-padding: var(--dsx-space-sm);
+  --dsx-filter-bar-gap: var(--dsx-space-xs);
+  --dsx-filter-bar-control-height: var(--dsx-density-control-height-sm);
+  --dsx-filter-bar-summary-font-family: var(--dsx-typography-label-small-font-family);
+  --dsx-filter-bar-summary-font-size: var(--dsx-typography-label-small-font-size);
+  --dsx-filter-bar-summary-font-weight: var(--dsx-typography-label-small-font-weight);
+  --dsx-filter-bar-summary-line-height: var(--dsx-typography-label-small-line-height);
+}
+
+.dsx-filter-bar:where([data-size='md']) {
+  --dsx-filter-bar-padding: var(--dsx-space-md);
+  --dsx-filter-bar-gap: var(--dsx-space-sm);
+  --dsx-filter-bar-control-height: var(--dsx-density-control-height);
+  --dsx-filter-bar-summary-font-family: var(--dsx-typography-body-small-font-family);
+  --dsx-filter-bar-summary-font-size: var(--dsx-typography-body-small-font-size);
+  --dsx-filter-bar-summary-font-weight: var(--dsx-typography-body-small-font-weight);
+  --dsx-filter-bar-summary-line-height: var(--dsx-typography-body-small-line-height);
+}
+
+.dsx-filter-bar:where([data-size='lg']) {
+  --dsx-filter-bar-padding: var(--dsx-space-lg);
+  --dsx-filter-bar-gap: var(--dsx-space-md);
+  --dsx-filter-bar-control-height: var(--dsx-density-control-height-lg);
+  --dsx-filter-bar-summary-font-family: var(--dsx-typography-body-medium-font-family);
+  --dsx-filter-bar-summary-font-size: var(--dsx-typography-body-medium-font-size);
+  --dsx-filter-bar-summary-font-weight: var(--dsx-typography-body-medium-font-weight);
+  --dsx-filter-bar-summary-line-height: var(--dsx-typography-body-medium-line-height);
+}