@hashicorp/design-system-components 5.0.0 → 5.1.0-rc-20251106155636

package/dist/components/hds/filter-bar/tabs/tab.js

@@ -0,0 +1,99 @@
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+import { action } from '@ember/object';
+import { modifier } from 'ember-modifier';
+import { precompileTemplate } from '@ember/template-compilation';
+import { n } from 'decorator-transforms/runtime';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n{{! template-lint-disable require-context-role no-invalid-role }}\n{{! template-lint-disable require-presentational-children }}\n<li class={{this.classNames}} ...attributes role=\"presentation\">\n  <button\n    class=\"hds-filter-bar__tabs__tab__button\"\n    id={{this._tabId}}\n    type=\"button\"\n    role=\"tab\"\n    aria-controls={{this.coupledPanelId}}\n    aria-selected={{if this.isSelected \"true\" \"false\"}}\n    tabindex={{unless this.isSelected \"-1\"}}\n    {{on \"click\" this.onClick}}\n    {{on \"keyup\" this.onKeyUp}}\n    {{this._setUpTab this.didInsertNode this.willDestroyNode}}\n  >\n    <Hds::Text::Body @size=\"200\" @weight=\"medium\">{{yield}}</Hds::Text::Body>\n    <Hds::Icon @name=\"chevron-right\" />\n  </button>\n</li>\n{{! template-lint-enable require-presentational-children }}\n{{! template-lint-enable require-context-role no-invalid-role }}");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+class HdsFilterBarTabsTab extends Component {
+  _tabId = 'tab-' + guidFor(this);
+  _elementId;
+  _setUpTab = modifier((element, [insertCallbackFunction, destroyCallbackFunction]) => {
+    if (typeof insertCallbackFunction === 'function') {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      insertCallbackFunction(element);
+    }
+    return () => {
+      if (typeof destroyCallbackFunction === 'function') {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        destroyCallbackFunction(element);
+      }
+    };
+  });
+  get nodeIndex() {
+    return this.args.tabIds?.indexOf(this._tabId);
+  }
+  get coupledPanelId() {
+    return this.nodeIndex !== undefined ? this.args.panelIds?.[this.nodeIndex] : undefined;
+  }
+  get isSelected() {
+    return this.nodeIndex !== undefined && this.nodeIndex === this.args.selectedTabIndex;
+  }
+  didInsertNode(element) {
+    const {
+      didInsertNode
+    } = this.args;
+    if (typeof didInsertNode === 'function') {
+      this._elementId = element.id;
+      didInsertNode();
+    }
+  }
+  static {
+    n(this.prototype, "didInsertNode", [action]);
+  }
+  willDestroyNode(element) {
+    const {
+      willDestroyNode
+    } = this.args;
+    if (typeof willDestroyNode === 'function') {
+      willDestroyNode(element);
+    }
+  }
+  static {
+    n(this.prototype, "willDestroyNode", [action]);
+  }
+  onClick(event) {
+    const {
+      onClick
+    } = this.args;
+    console.log('onClick event in Tab:', event);
+    if (this.nodeIndex !== undefined && typeof onClick === 'function') {
+      onClick(event, this.nodeIndex);
+    } else {
+      return false;
+    }
+  }
+  static {
+    n(this.prototype, "onClick", [action]);
+  }
+  onKeyUp(event) {
+    const {
+      onKeyUp
+    } = this.args;
+    if (this.nodeIndex !== undefined && typeof onKeyUp === 'function') {
+      onKeyUp(event, this.nodeIndex);
+    }
+  }
+  static {
+    n(this.prototype, "onKeyUp", [action]);
+  }
+  get classNames() {
+    const classes = ['hds-filter-bar__tabs__tab'];
+    if (this.isSelected) {
+      classes.push(`hds-filter-bar__tabs__tab--is-selected`);
+    }
+    return classes.join(' ');
+  }
+}
+setComponentTemplate(TEMPLATE, HdsFilterBarTabsTab);
+
+export { HdsFilterBarTabsTab as default };
+//# sourceMappingURL=tab.js.map

package/dist/components/hds/filter-bar/tabs/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sources":["../../../../../src/components/hds/filter-bar/tabs/tab.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { guidFor } from '@ember/object/internals';\nimport { action } from '@ember/object';\nimport { modifier } from 'ember-modifier';\n\nexport interface HdsFilterBarTabsTabSignature {\n  Args: {\n    selectedTabIndex?: number;\n    tabIds?: string[];\n    panelIds?: string[];\n    didInsertNode?: () => void;\n    willDestroyNode?: (element: HTMLButtonElement) => void;\n    onClick?: (event: MouseEvent, nodeIndex: number) => void;\n    onKeyUp?: (event: KeyboardEvent, nodeIndex: number) => void;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLElement;\n}\n\nexport default class HdsFilterBarTabsTab extends Component<HdsFilterBarTabsTabSignature> {\n  private _tabId = 'tab-' + guidFor(this);\n  private _elementId?: string;\n\n  private _setUpTab = modifier(\n    (\n      element: HTMLElement,\n      [insertCallbackFunction, destroyCallbackFunction]\n    ) => {\n      if (typeof insertCallbackFunction === 'function') {\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n        insertCallbackFunction(element);\n      }\n\n      return () => {\n        if (typeof destroyCallbackFunction === 'function') {\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n          destroyCallbackFunction(element);\n        }\n      };\n    }\n  );\n\n  get nodeIndex(): number | undefined {\n    return this.args.tabIds?.indexOf(this._tabId);\n  }\n\n  get coupledPanelId(): string | undefined {\n    return this.nodeIndex !== undefined\n      ? this.args.panelIds?.[this.nodeIndex]\n      : undefined;\n  }\n\n  get isSelected(): boolean {\n    return (\n      this.nodeIndex !== undefined &&\n      this.nodeIndex === this.args.selectedTabIndex\n    );\n  }\n\n  @action\n  didInsertNode(element: HTMLButtonElement): void {\n    const { didInsertNode } = this.args;\n\n    if (typeof didInsertNode === 'function') {\n      this._elementId = element.id;\n      didInsertNode();\n    }\n  }\n\n  @action\n  willDestroyNode(element: HTMLButtonElement): void {\n    const { willDestroyNode } = this.args;\n\n    if (typeof willDestroyNode === 'function') {\n      willDestroyNode(element);\n    }\n  }\n\n  @action\n  onClick(event: MouseEvent): false | undefined {\n    const { onClick } = this.args;\n\n    console.log('onClick event in Tab:', event);\n\n    if (this.nodeIndex !== undefined && typeof onClick === 'function') {\n      onClick(event, this.nodeIndex);\n    } else {\n      return false;\n    }\n  }\n\n  @action\n  onKeyUp(event: KeyboardEvent): void {\n    const { onKeyUp } = this.args;\n\n    if (this.nodeIndex !== undefined && typeof onKeyUp === 'function') {\n      onKeyUp(event, this.nodeIndex);\n    }\n  }\n\n  get classNames(): string {\n    const classes = ['hds-filter-bar__tabs__tab'];\n\n    if (this.isSelected) {\n      classes.push(`hds-filter-bar__tabs__tab--is-selected`);\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["HdsFilterBarTabsTab","Component","_tabId","guidFor","_elementId","_setUpTab","modifier","element","insertCallbackFunction","destroyCallbackFunction","nodeIndex","args","tabIds","indexOf","coupledPanelId","undefined","panelIds","isSelected","selectedTabIndex","didInsertNode","id","n","prototype","action","willDestroyNode","onClick","event","console","log","onKeyUp","classNames","classes","push","join","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/components/hds/filter-bar/types.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+let HdsFilterBarFilterTypeValues = /*#__PURE__*/function (HdsFilterBarFilterTypeValues) {
+  HdsFilterBarFilterTypeValues["multiSelect"] = "multi-select";
+  HdsFilterBarFilterTypeValues["singleSelect"] = "single-select";
+  HdsFilterBarFilterTypeValues["range"] = "range";
+  HdsFilterBarFilterTypeValues["generic"] = "generic";
+  HdsFilterBarFilterTypeValues["search"] = "search";
+  return HdsFilterBarFilterTypeValues;
+}({});
+let HdsFilterBarRangeFilterSelectorValues = /*#__PURE__*/function (HdsFilterBarRangeFilterSelectorValues) {
+  HdsFilterBarRangeFilterSelectorValues["lessThan"] = "less-than";
+  HdsFilterBarRangeFilterSelectorValues["lessThanOrEqualTo"] = "less-than-or-equal-to";
+  HdsFilterBarRangeFilterSelectorValues["equalTo"] = "equal-to";
+  HdsFilterBarRangeFilterSelectorValues["greaterThanOrEqualTo"] = "greater-than-or-equal-to";
+  HdsFilterBarRangeFilterSelectorValues["greaterThan"] = "greater-than";
+  return HdsFilterBarRangeFilterSelectorValues;
+}({});
+
+export { HdsFilterBarFilterTypeValues, HdsFilterBarRangeFilterSelectorValues };
+//# sourceMappingURL=types.js.map

package/dist/components/hds/filter-bar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../src/components/hds/filter-bar/types.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nexport enum HdsFilterBarFilterTypeValues {\n  multiSelect = 'multi-select',\n  singleSelect = 'single-select',\n  range = 'range',\n  generic = 'generic',\n  search = 'search',\n}\n\nexport type HdsFilterBarFilterType = `${HdsFilterBarFilterTypeValues}`;\n\nexport interface HdsFilterBarGenericFilterData {\n  value: unknown;\n}\n\nexport interface HdsFilterBarRangeFilterData {\n  selector: HdsFilterBarRangeFilterSelector;\n  value: number;\n}\n\nexport type HdsFilterBarData =\n  | HdsFilterBarGenericFilterData[]\n  | HdsFilterBarGenericFilterData\n  | HdsFilterBarRangeFilterData;\n\nexport interface HdsFilterBarSingleSelectFilter {\n  type: 'single-select';\n  text?: string;\n  data: HdsFilterBarGenericFilterData;\n}\n\nexport interface HdsFilterBarMultiSelectFilter {\n  type: 'multi-select';\n  text?: string;\n  data: HdsFilterBarGenericFilterData[];\n}\n\nexport interface HdsFilterBarRangeFilter {\n  type: 'range';\n  text?: string;\n  data: HdsFilterBarRangeFilterData;\n}\n\nexport interface HdsFilterBarSearchFilter {\n  type: 'search';\n  text?: string;\n  data: HdsFilterBarGenericFilterData;\n}\n\nexport type HdsFilterBarFilter =\n  | HdsFilterBarSingleSelectFilter\n  | HdsFilterBarMultiSelectFilter\n  | HdsFilterBarRangeFilter\n  | HdsFilterBarSearchFilter;\n\nexport interface HdsFilterBarFilters {\n  [name: string]: HdsFilterBarFilter;\n}\n\nexport enum HdsFilterBarRangeFilterSelectorValues {\n  lessThan = 'less-than',\n  lessThanOrEqualTo = 'less-than-or-equal-to',\n  equalTo = 'equal-to',\n  greaterThanOrEqualTo = 'greater-than-or-equal-to',\n  greaterThan = 'greater-than',\n}\n\nexport type HdsFilterBarRangeFilterSelector =\n  `${HdsFilterBarRangeFilterSelectorValues}`;\n"],"names":["HdsFilterBarFilterTypeValues","HdsFilterBarRangeFilterSelectorValues"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA,IAAYA,4BAA4B,0BAA5BA,4BAA4B,EAAA;EAA5BA,4BAA4B,CAAA,aAAA,CAAA,GAAA,cAAA;EAA5BA,4BAA4B,CAAA,cAAA,CAAA,GAAA,eAAA;EAA5BA,4BAA4B,CAAA,OAAA,CAAA,GAAA,OAAA;EAA5BA,4BAA4B,CAAA,SAAA,CAAA,GAAA,SAAA;EAA5BA,4BAA4B,CAAA,QAAA,CAAA,GAAA,QAAA;AAAA,EAAA,OAA5BA,4BAA4B;AAAA,CAAA,CAAA,EAAA;AA0DxC,IAAYC,qCAAqC,0BAArCA,qCAAqC,EAAA;EAArCA,qCAAqC,CAAA,UAAA,CAAA,GAAA,WAAA;EAArCA,qCAAqC,CAAA,mBAAA,CAAA,GAAA,uBAAA;EAArCA,qCAAqC,CAAA,SAAA,CAAA,GAAA,UAAA;EAArCA,qCAAqC,CAAA,sBAAA,CAAA,GAAA,0BAAA;EAArCA,qCAAqC,CAAA,aAAA,CAAA,GAAA,cAAA;AAAA,EAAA,OAArCA,qCAAqC;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/components.js

@@ -83,6 +83,16 @@ export { default as HdsDropdownToggleIcon } from './components/hds/dropdown/togg
 export { HdsDropdownListItemInteractiveColorValues } from './components/hds/dropdown/list-item/types.js';
 export { HdsDropdownToggleButtonColorValues, HdsDropdownToggleButtonSizeValues, HdsDropdownToggleIconAllowedIconValues, HdsDropdownToggleIconSizeValues } from './components/hds/dropdown/toggle/types.js';
 export { HdsDropdownPositionToPlacementValues, HdsDropdownPositionValues } from './components/hds/dropdown/types.js';
+export { default as HdsFilterBar } from './components/hds/filter-bar/index.js';
+export { default as HdsFilterBarCheckbox } from './components/hds/filter-bar/checkbox.js';
+export { default as HdsFilterBarFiltersDropdown } from './components/hds/filter-bar/filters-dropdown.js';
+export { default as HdsFilterBarFilterGroup } from './components/hds/filter-bar/filter-group.js';
+export { default as HdsFilterBarRadio } from './components/hds/filter-bar/radio.js';
+export { default as HdsFilterBarRange } from './components/hds/filter-bar/range.js';
+export { default as HdsFilterBarTabs } from './components/hds/filter-bar/tabs/index.js';
+export { default as HdsFilterBarTabsPanel } from './components/hds/filter-bar/tabs/panel.js';
+export { default as HdsFilterBarTabsTab } from './components/hds/filter-bar/tabs/tab.js';
+export { HdsFilterBarFilterTypeValues, HdsFilterBarRangeFilterSelectorValues } from './components/hds/filter-bar/types.js';
 export { default as HdsFlyout } from './components/hds/flyout/index.js';
 export { HdsFlyoutSizesValues } from './components/hds/flyout/types.js';
 export { default as HdsForm } from './components/hds/form/index.js';

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styles/@hashicorp/design-system-components.css

@@ -1366,7 +1366,8 @@
   background-color: var(--token-color-surface-interactive);
 }
 
-.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon {
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon,
+.hds-advanced-table__th-filter-menu .hds-dropdown-toggle-icon {
   width: 24px;
   height: 24px;
   margin: -2px 0;
@@ -1376,14 +1377,19 @@
   border: 1px solid transparent;
   border-radius: var(--token-border-radius-x-small);
 }
-.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:hover, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-hover {
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:hover, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-hover,
+.hds-advanced-table__th-filter-menu .hds-dropdown-toggle-icon:hover,
+.hds-advanced-table__th-filter-menu .hds-dropdown-toggle-icon.mock-hover {
   color: var(--token-color-foreground-primary);
   background-color: var(--token-color-surface-interactive);
   border-color: var(--token-color-border-strong);
   box-shadow: var(--token-elevation-low-box-shadow);
 }
 .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus::before,
-.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon .hds-dropdown-toggle-icon--is-open::before {
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon .hds-dropdown-toggle-icon--is-open::before,
+.hds-advanced-table__th-filter-menu .hds-dropdown-toggle-icon:focus::before,
+.hds-advanced-table__th-filter-menu .hds-dropdown-toggle-icon.mock-focus::before,
+.hds-advanced-table__th-filter-menu .hds-dropdown-toggle-icon .hds-dropdown-toggle-icon--is-open::before {
   top: 0;
   right: 0;
   bottom: 0;
@@ -1465,6 +1471,24 @@
   align-self: flex-start;
 }
 
+.hds-advanced-table__th-filter-menu--active {
+  position: relative;
+}
+.hds-advanced-table__th-filter-menu--active::before {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  width: 6px;
+  height: 6px;
+  background-color: var(--token-color-foreground-action);
+  border-radius: 50%;
+  content: "";
+}
+
+.hds-advanced-table__clear-filters-button {
+  margin-bottom: 16px;
+}
+
 .hds-advanced-table__tbody {
   display: grid;
   grid-column: 1/-1;
@@ -1672,6 +1696,42 @@
   box-shadow: var(--token-elevation-mid-box-shadow);
 }
 
+.hds-advanced-table__actions .hds-filter-bar {
+  border-bottom: none;
+  border-radius: var(--token-border-radius-medium) var(--token-border-radius-medium) 0 0;
+}
+
+.hds-advanced-table__actions + .hds-advanced-table__container {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.hds-advanced-table__actions + .hds-advanced-table__container .hds-advanced-table__thead .hds-advanced-table__tr:first-of-type .hds-advanced-table__th:first-child {
+  border-top-left-radius: 0;
+}
+.hds-advanced-table__actions + .hds-advanced-table__container .hds-advanced-table__thead .hds-advanced-table__tr:first-of-type .hds-advanced-table__th:last-child {
+  border-top-right-radius: 0;
+}
+
+.hds-advanced-table__empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+  background-color: var(--token-color-surface-primary);
+  border: 1px solid var(--token-color-border-primary);
+  border-bottom-right-radius: var(--token-border-radius-medium);
+  border-bottom-left-radius: var(--token-border-radius-medium);
+}
+
+.hds-advanced-table__empty-state__content {
+  max-width: 450px;
+}
+
+.hds-advanced-table:not(:has(+ .hds-advanced-table__empty-state)) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
@@ -5455,6 +5515,141 @@ button.hds-button[href]::after {
   vertical-align: bottom;
 }
 
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+.hds-filter-bar {
+  display: grid;
+  gap: 8px;
+  padding: 8px;
+  background-color: var(--token-color-surface-faint);
+  border: 1px solid var(--token-color-border-primary);
+  border-radius: var(--token-border-radius-medium);
+}
+.hds-filter-bar .hds-filter-bar__filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: end;
+  padding-top: 8px;
+  border-top: 1px solid var(--token-color-border-primary);
+}
+.hds-filter-bar .hds-filter-bar__filters .hds-dropdown__list .hds-form-text-input {
+  width: auto;
+}
+.hds-filter-bar .hds-filter-bar__actions {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: end;
+}
+
+.hds-filter-bar__actions__right {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.hds-filter-bar__search {
+  --token-form-control-padding: 4px;
+}
+
+.hds-filter-bar__filters-dropdown__filter-group .hds-form-field--layout-flag {
+  padding: 8px 12px;
+}
+
+.hds-filter-bar__filters-dropdown .hds-dropdown__list,
+.hds-filter-bar__filters-dropdown .hds-dropdown-list-item {
+  padding: 0;
+}
+
+.hds-filter-bar__filters-dropdown .hds-layout-flex {
+  margin: 8px 0;
+}
+
+.hds-filter-bar__filters-dropdown .hds-button-set {
+  gap: 8px;
+}
+
+.hds-filter-bar__filters-dropdown__filter-group__list {
+  flex: 1 1 auto;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+  overscroll-behavior: contain;
+}
+
+.hds-filter-bar__filters-dropdown__filters-count,
+.hds-filter-bar__filters-dropdown__filter-group__filters-count {
+  margin-left: 8px;
+}
+
+.hds-filter-bar__filters-dropdown__filter-option {
+  display: block;
+  padding: 8px 0;
+}
+.hds-filter-bar__filters-dropdown__filter-option--hidden {
+  display: none;
+}
+
+.hds-filter-bar__tabs {
+  display: flex;
+}
+
+.hds-filter-bar__tabs__list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 50%;
+  padding: 8px;
+  list-style: none;
+  background-color: var(--token-color-surface-faint);
+  border-right: 1px solid var(--token-color-border-primary);
+  border-top-left-radius: var(--token-border-radius-medium);
+}
+
+.hds-filter-bar__tabs__panel:not([hidden]) {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 50%;
+  padding: 16px;
+  background-color: var(--token-color-surface-primary);
+  border-top-right-radius: var(--token-border-radius-medium);
+}
+
+.hds-filter-bar__tabs__tab__button {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px 12px;
+  color: var(--token-color-foreground-primary);
+  text-align: left;
+  background-color: transparent;
+  border: none;
+  border-radius: var(--token-border-radius-small);
+}
+.hds-filter-bar__tabs__tab__button .hds-icon {
+  fill: var(--token-color-foreground-primary);
+}
+.hds-filter-bar__tabs__tab__button.mock-hover, .hds-filter-bar__tabs__tab__button:hover, .hds-filter-bar__tabs__tab__button.mock-focus, .hds-filter-bar__tabs__tab__button:focus {
+  background-color: var(--token-color-surface-interactive-hover);
+  cursor: pointer;
+}
+
+.hds-filter-bar__tabs__tab--is-selected .hds-filter-bar__tabs__tab__button {
+  color: var(--token-color-foreground-strong);
+  background-color: var(--token-color-surface-interactive-active);
+}
+.hds-filter-bar__tabs__tab--is-selected .hds-filter-bar__tabs__tab__button .hds-icon {
+  fill: var(--token-color-foreground-strong);
+}
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0

package/dist/styles/@hashicorp/design-system-components.scss

@@ -36,6 +36,7 @@
 @use "../components/disclosure-primitive";
 @use "../components/dismiss-button";
 @use "../components/dropdown";
+@use "../components/filter-bar";
 @use "../components/flyout";
 @use "../components/form"; // multiple components
 @use "../components/icon";

package/dist/styles/components/advanced-table.scss

@@ -415,7 +415,8 @@ $hds-advanced-table-drag-preview-background-color: rgba(204, 227, 254, 30%);
   }
 }
 
-.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon {
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon,
+.hds-advanced-table__th-filter-menu .hds-dropdown-toggle-icon {
   width: $hds-advanced-table-button-size;
   height: $hds-advanced-table-button-size;
   margin: -2px 0;
@@ -504,6 +505,25 @@ $hds-advanced-table-drag-preview-background-color: rgba(204, 227, 254, 30%);
   align-self: flex-start;
 }
 
+.hds-advanced-table__th-filter-menu--active {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    width: 6px;
+    height: 6px;
+    background-color: var(--token-color-foreground-action);
+    border-radius: 50%;
+    content: "";
+  }
+}
+
+.hds-advanced-table__clear-filters-button {
+  margin-bottom: 16px;
+}
+
 // ----------------------------------------------------------------
 
 // TABLE BODY
@@ -745,3 +765,49 @@ $hds-advanced-table-drag-preview-background-color: rgba(204, 227, 254, 30%);
   border-radius: var(--token-border-radius-medium);
   box-shadow: var(--token-elevation-mid-box-shadow);
 }
+
+// ----------------------------------------------------------------
+
+// FILTER BAR
+.hds-advanced-table__actions .hds-filter-bar {
+  border-bottom: none;
+  border-radius: $hds-advanced-table-border-radius $hds-advanced-table-border-radius 0 0;
+}
+
+.hds-advanced-table__actions + .hds-advanced-table__container {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+
+  .hds-advanced-table__thead .hds-advanced-table__tr:first-of-type .hds-advanced-table__th {
+    &:first-child {
+      border-top-left-radius: 0;
+    }
+
+    &:last-child {
+      border-top-right-radius: 0;
+    }
+  }
+}
+
+/// ----------------------------------------------------------------
+
+// EMPTY STATE
+.hds-advanced-table__empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+  background-color: var(--token-color-surface-primary);
+  border: 1px solid var(--token-color-border-primary);
+  border-bottom-right-radius: $hds-advanced-table-border-radius;
+  border-bottom-left-radius: $hds-advanced-table-border-radius;
+}
+
+.hds-advanced-table__empty-state__content {
+  max-width: 450px;
+}
+
+.hds-advanced-table:not(:has(+ .hds-advanced-table__empty-state)) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}

package/dist/styles/components/filter-bar.scss

@@ -0,0 +1,155 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// FILTER BAR
+//
+
+.hds-filter-bar {
+  display: grid;
+  gap: 8px;
+  padding: 8px;
+  background-color: var(--token-color-surface-faint);
+  border: 1px solid var(--token-color-border-primary);
+  border-radius: var(--token-border-radius-medium);
+
+  .hds-filter-bar__filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+    align-items: end;
+    padding-top: 8px;
+    border-top: 1px solid var(--token-color-border-primary);
+
+    .hds-dropdown__list .hds-form-text-input {
+      width: auto;
+    }
+  }
+
+  .hds-filter-bar__actions {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: end;
+  }
+}
+
+.hds-filter-bar__actions__right {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.hds-filter-bar__search {
+  --token-form-control-padding: 4px;
+}
+
+// FILTERS DROPDOWN
+//
+
+.hds-filter-bar__filters-dropdown__filter-group .hds-form-field--layout-flag {
+  padding: 8px 12px;
+}
+
+.hds-filter-bar__filters-dropdown .hds-dropdown__list,
+.hds-filter-bar__filters-dropdown .hds-dropdown-list-item {
+  padding: 0;
+}
+
+.hds-filter-bar__filters-dropdown .hds-layout-flex {
+  margin: 8px 0;
+}
+
+.hds-filter-bar__filters-dropdown .hds-button-set {
+  gap: 8px;
+}
+
+.hds-filter-bar__filters-dropdown__filter-group__list {
+  flex: 1 1 auto;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+  overscroll-behavior: contain;
+}
+
+.hds-filter-bar__filters-dropdown__filters-count,
+.hds-filter-bar__filters-dropdown__filter-group__filters-count {
+  margin-left: 8px;
+}
+
+.hds-filter-bar__filters-dropdown__filter-option {
+  display: block;
+  padding: 8px 0;
+
+  &--hidden {
+    display: none;
+  }
+}
+
+// TABS
+//
+
+.hds-filter-bar__tabs {
+  display: flex;
+}
+
+.hds-filter-bar__tabs__list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 50%;
+  padding: 8px;
+  list-style: none;
+  background-color: var(--token-color-surface-faint);
+  border-right: 1px solid var(--token-color-border-primary);
+  border-top-left-radius: var(--token-border-radius-medium);
+}
+
+.hds-filter-bar__tabs__panel:not([hidden]) {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 50%;
+  padding: 16px;
+  background-color: var(--token-color-surface-primary);
+  border-top-right-radius: var(--token-border-radius-medium);
+}
+
+.hds-filter-bar__tabs__tab__button {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px 12px;
+  color: var(--token-color-foreground-primary);
+  text-align: left;
+  background-color: transparent;
+  border: none;
+  border-radius: var(--token-border-radius-small);
+
+  .hds-icon {
+    fill: var(--token-color-foreground-primary);
+  }
+
+  &.mock-hover,
+  &:hover,
+  &.mock-focus,
+  &:focus {
+    background-color: var(--token-color-surface-interactive-hover);
+    cursor: pointer;
+  }
+}
+
+.hds-filter-bar__tabs__tab--is-selected .hds-filter-bar__tabs__tab__button {
+  color: var(--token-color-foreground-strong);
+  background-color: var(--token-color-surface-interactive-active);
+
+  .hds-icon {
+    fill: var(--token-color-foreground-strong);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "5.0.0",
+  "version": "5.1.0-rc-20251106155636",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -219,6 +219,15 @@
       "./components/hds/dropdown/toggle/button.js": "./dist/_app_/components/hds/dropdown/toggle/button.js",
       "./components/hds/dropdown/toggle/chevron.js": "./dist/_app_/components/hds/dropdown/toggle/chevron.js",
       "./components/hds/dropdown/toggle/icon.js": "./dist/_app_/components/hds/dropdown/toggle/icon.js",
+      "./components/hds/filter-bar/checkbox.js": "./dist/_app_/components/hds/filter-bar/checkbox.js",
+      "./components/hds/filter-bar/filter-group.js": "./dist/_app_/components/hds/filter-bar/filter-group.js",
+      "./components/hds/filter-bar/filters-dropdown.js": "./dist/_app_/components/hds/filter-bar/filters-dropdown.js",
+      "./components/hds/filter-bar.js": "./dist/_app_/components/hds/filter-bar.js",
+      "./components/hds/filter-bar/radio.js": "./dist/_app_/components/hds/filter-bar/radio.js",
+      "./components/hds/filter-bar/range.js": "./dist/_app_/components/hds/filter-bar/range.js",
+      "./components/hds/filter-bar/tabs.js": "./dist/_app_/components/hds/filter-bar/tabs.js",
+      "./components/hds/filter-bar/tabs/panel.js": "./dist/_app_/components/hds/filter-bar/tabs/panel.js",
+      "./components/hds/filter-bar/tabs/tab.js": "./dist/_app_/components/hds/filter-bar/tabs/tab.js",
       "./components/hds/flyout.js": "./dist/_app_/components/hds/flyout.js",
       "./components/hds/form/character-count.js": "./dist/_app_/components/hds/form/character-count.js",
       "./components/hds/form/checkbox/base.js": "./dist/_app_/components/hds/form/checkbox/base.js",