@d4gger/design-system 2.7.0 → 3.0.1

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,23 +16,395 @@
   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); }
 .dsx-filter-bar__count { display: inline-flex; align-items: center; justify-content: center; min-width: var(--dsx-size-md); min-height: var(--dsx-size-md); border-radius: var(--dsx-rounded-full); background: var(--dsx-color-accent-surface); color: var(--dsx-color-accent-indicator); }
+.dsx-filter-bar__clear { flex: none; }
 
 .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);
+}