@kerfjs/ui 5.0.0-beta.104 → 5.0.0-beta.106

package/ai/webawesome-jsx-signatures-v1.md

@@ -1,6 +1,6 @@
 # Web Awesome JSX signatures for the UI authoring corpus
 
-Generated from the emitted `@kerfjs/ui@5.0.0-beta.104` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
+Generated from the emitted `@kerfjs/ui@5.0.0-beta.106` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
 
 ```ts
 import { KerfCustomElement } from 'kerfjs/jsx-runtime';
@@ -94,11 +94,14 @@ declare module 'kerfjs/jsx-runtime' {
             'wa-slider': KerfCustomElement;
             'wa-spinner': KerfCustomElement;
             'wa-split-panel': KerfCustomElement;
+            'wa-step': KerfCustomElement;
+            'wa-stepper': KerfCustomElement;
             'wa-switch': KerfCustomElement;
             'wa-tab': KerfCustomElement;
             'wa-tab-group': KerfCustomElement;
             'wa-tab-panel': KerfCustomElement;
             'wa-tag': KerfCustomElement;
+            'wa-tag-input': KerfCustomElement;
             'wa-textarea': KerfCustomElement;
             'wa-time-input': KerfCustomElement;
             'wa-toast': KerfCustomElement;

package/dist/badge.d.ts

@@ -17,9 +17,17 @@ type BadgeRootAttributes = Readonly<Record<`data-${string}`, string | undefined>
     'data-size'?: never;
     'data-has-icon'?: never;
     'data-truncate'?: never;
+    'data-placement'?: never;
 }>;
+/**
+ * `inline` (default) flows with its content; `corner` pins the badge to the
+ * top-trailing corner of the control it sits in (an icon-only `Button`, or a
+ * button in a `ToolbarControlGroup`), out of the pointer's way.
+ */
+type BadgePlacement = 'inline' | 'corner';
 interface BadgeCommonProps {
     tone?: SemanticTone;
+    placement?: BadgePlacement;
     /** Native tooltip text that explains the badge on hover. */
     title?: string;
     /** Safe `data-*` identity, such as a status band, on the badge root. */
@@ -80,4 +88,4 @@ type BadgeProps = BadgeTextProps | BadgeDotProps;
 /** Compact, non-interactive metadata whose tone, emphasis, and shape are configured by props. */
 declare function Badge(props: BadgeProps): SafeHtml;
 
-export { Badge, type BadgeAppearance, type BadgeDotProps, type BadgeProps, type BadgeRootAttributes, type BadgeShape, type BadgeSize, type BadgeTextProps, type BadgeTone, SemanticTone };
+export { Badge, type BadgeAppearance, type BadgeDotProps, type BadgePlacement, type BadgeProps, type BadgeRootAttributes, type BadgeShape, type BadgeSize, type BadgeTextProps, type BadgeTone, SemanticTone };

package/dist/badge.js

@@ -1,4 +1,4 @@
-export { Badge } from './chunk-U6QYTMDB.js';
+export { Badge } from './chunk-RMWNO6BA.js';
 
 
 //# sourceMappingURL=badge.js.map

package/dist/browser/button.js

@@ -0,0 +1,5 @@
+import '../styles/foundation.css';
+import '../styles/badge.css';
+import '../styles/loading-spinner.css';
+import '../styles/button.css';
+export * from '../button.js';

package/dist/browser/catalog.js

@@ -1,4 +1,5 @@
 import '../styles/foundation.css';
+import '../styles/lucide-icon.css';
 import '../styles/popup-menu.css';
 import '../styles/loading-spinner.css';
 import '../styles/toolbar-control-group.css';
@@ -6,8 +7,7 @@ import '../styles/skeleton.css';
 import '../styles/toolbar-text.css';
 import '../styles/list-inset-control.css';
 import '../styles/list-inset-text.css';
-import '../styles/lucide-icon.css';
-import '../styles/token-search-field.css';
+import '../styles/search-field.css';
 import '../styles/resizable-region.css';
 import '../styles/toolbar.css';
 import '../styles/list.css';
@@ -20,6 +20,7 @@ import '../styles/row.css';
 import '../styles/badge.css';
 import '../styles/disclosure-arrow.css';
 import '../styles/list-header.css';
+import '../styles/switch.css';
 import '../styles/list-item.css';
 import '../styles/catalog/components/catalog-stage.css';
 import '../styles/catalog.css';

package/dist/browser/{icon-button.js → checkbox.js}

@@ -1,4 +1,4 @@
 import '../styles/foundation.css';
 import '../styles/lucide-icon.css';
-import '../styles/icon-button.css';
-export * from '../icon-button.js';
+import '../styles/checkbox.css';
+export * from '../checkbox.js';

package/dist/browser/color-field.js

@@ -0,0 +1,4 @@
+import '../styles/foundation.css';
+import '../styles/lucide-icon.css';
+import '../styles/color-field.css';
+export * from '../color-field.js';

package/dist/browser/color-picker.js

@@ -0,0 +1,5 @@
+import '../styles/foundation.css';
+import '../styles/lucide-icon.css';
+import '../styles/color-swatches.css';
+import '../styles/color-picker.css';
+export * from '../color-picker.js';

package/dist/browser/color-swatches.js

@@ -0,0 +1,3 @@
+import '../styles/foundation.css';
+import '../styles/color-swatches.css';
+export * from '../color-swatches.js';

package/dist/browser/disclosure.js

@@ -0,0 +1,5 @@
+import '../styles/foundation.css';
+import '../styles/lucide-icon.css';
+import '../styles/disclosure-arrow.css';
+import '../styles/disclosure.css';
+export * from '../disclosure.js';

package/dist/browser/list-action-row.js

@@ -1,4 +1,5 @@
 import '../styles/foundation.css';
+import '../styles/lucide-icon.css';
 import '../styles/popup-menu.css';
 import '../styles/loading-spinner.css';
 import '../styles/skeleton.css';

package/dist/browser/list-detail-dialog.js

@@ -0,0 +1,14 @@
+import '../styles/foundation.css';
+import '../styles/toolbar.css';
+import '../styles/loading-spinner.css';
+import '../styles/toolbar-control-group.css';
+import '../styles/skeleton.css';
+import '../styles/toolbar-text.css';
+import '../styles/pane.css';
+import '../styles/list.css';
+import '../styles/lucide-icon.css';
+import '../styles/nav-stack.css';
+import '../styles/resizable-region.css';
+import '../styles/split-view.css';
+import '../styles/surface-scaffold.css';
+export * from '../list-detail-dialog.js';

package/dist/browser/message-composer.js

@@ -0,0 +1,5 @@
+import '../styles/foundation.css';
+import '../styles/toolbar.css';
+import '../styles/text.css';
+import '../styles/message-composer.css';
+export * from '../message-composer.js';

package/dist/browser/popup-menu.js

@@ -1,3 +1,4 @@
 import '../styles/foundation.css';
+import '../styles/lucide-icon.css';
 import '../styles/popup-menu.css';
 export * from '../popup-menu.js';

package/dist/browser/progress-bar.js

@@ -0,0 +1,3 @@
+import '../styles/foundation.css';
+import '../styles/progress-bar.css';
+export * from '../progress-bar.js';

package/dist/browser/progress-ring.js

@@ -0,0 +1,3 @@
+import '../styles/foundation.css';
+import '../styles/progress-ring.css';
+export * from '../progress-ring.js';

package/dist/browser/radio-group.js

@@ -0,0 +1,3 @@
+import '../styles/foundation.css';
+import '../styles/radio-group.css';
+export * from '../radio-group.js';

package/dist/browser/search-field.js

@@ -0,0 +1,4 @@
+import '../styles/foundation.css';
+import '../styles/lucide-icon.css';
+import '../styles/search-field.css';
+export * from '../search-field.js';

package/dist/browser/slider.js

@@ -0,0 +1,3 @@
+import '../styles/foundation.css';
+import '../styles/slider.css';
+export * from '../slider.js';

package/dist/browser/surface-scaffold.js

@@ -1,3 +1,4 @@
 import '../styles/foundation.css';
+import '../styles/lucide-icon.css';
 import '../styles/surface-scaffold.css';
 export * from '../surface-scaffold.js';

package/dist/browser/switch.js

@@ -0,0 +1,3 @@
+import '../styles/foundation.css';
+import '../styles/switch.css';
+export * from '../switch.js';

package/dist/browser/tab-bar-item.js

@@ -0,0 +1,4 @@
+import '../styles/foundation.css';
+import '../styles/skeleton.css';
+import '../styles/tab-bar-item.css';
+export * from '../tab-bar-item.js';

package/dist/browser/tag-field.js

@@ -0,0 +1,5 @@
+import '../styles/foundation.css';
+import '../styles/lucide-icon.css';
+import '../styles/search-field.css';
+import '../styles/tag-field.css';
+export * from '../tag-field.js';

package/dist/browser/text-field.js

@@ -0,0 +1,4 @@
+import '../styles/foundation.css';
+import '../styles/lucide-icon.css';
+import '../styles/text-field.css';
+export * from '../text-field.js';

package/dist/browser/workbench-dialog.js

@@ -0,0 +1,15 @@
+import '../styles/foundation.css';
+import '../styles/loading-spinner.css';
+import '../styles/toolbar-control-group.css';
+import '../styles/skeleton.css';
+import '../styles/toolbar-text.css';
+import '../styles/resizable-region.css';
+import '../styles/toolbar.css';
+import '../styles/list.css';
+import '../styles/pane.css';
+import '../styles/lucide-icon.css';
+import '../styles/floating-toolbar.css';
+import '../styles/nav-stack.css';
+import '../styles/workbench.css';
+import '../styles/surface-scaffold.css';
+export * from '../workbench-dialog.js';

package/dist/button.d.ts

@@ -0,0 +1,108 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { BadgeTone } from './badge.js';
+import './css-values.js';
+import './semantic-tone-CdW013KF.js';
+
+/** The color family: `neutral` (default), `brand` for the main action, `danger` for a destructive one. */
+type ButtonTone = 'neutral' | 'brand' | 'danger';
+/**
+ * How loudly it asks: `primary` (default) fills the button, `secondary`
+ * outlines it, and `plain` shows only its text until hovered.
+ */
+type ButtonEmphasis = 'primary' | 'secondary' | 'plain';
+/** `default` is the 44px control height; `compact` is 33px with smaller text. */
+type ButtonSize = 'default' | 'compact';
+/** Corner shape: the shared `rounded` control radius (default) or a full `pill`. */
+type ButtonShape = 'rounded' | 'pill';
+/** What a form button does: `button` (default), `submit`, or `reset`. */
+type ButtonType = 'button' | 'submit' | 'reset';
+/** Application `data-*` metadata; the Button's own markers stay protected. */
+type ButtonRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+/** A Button's visible label: text or rendered content, never empty. */
+type ButtonLabel = string | Exclude<KerfUiContent, null | undefined | boolean>;
+/**
+ * A labeled button (its label names it; `ariaLabel` only when the label is
+ * not enough), or an icon-only square named by `ariaLabel`.
+ */
+type ButtonContent = {
+    /** The label. */
+    children: ButtonLabel;
+    /** A leading icon, such as a `LucideIcon`; it is decorative. */
+    icon?: KerfUiContent;
+    ariaLabel?: string;
+} | {
+    children?: undefined;
+    /** The icon of an icon-only square button. */
+    icon: KerfUiContent;
+    /** The accessible name an icon-only button needs. */
+    ariaLabel: string;
+};
+type ButtonProps = ButtonContent & ButtonOptions;
+interface ButtonOptions {
+    tone?: ButtonTone;
+    emphasis?: ButtonEmphasis;
+    size?: ButtonSize;
+    /** Corner shape (default `rounded`). */
+    shape?: ButtonShape;
+    /**
+     * Make it a toggle: `aria-pressed` reports the state, and a pressed look is
+     * drawn on top of the tone and emphasis. The application owns the state and
+     * flips it in its `action` handler. A link (`href`) cannot be a toggle.
+     */
+    pressed?: boolean;
+    /**
+     * Busy: a spinner replaces the label (which still names it) and the button
+     * reports `aria-busy`. Presses still reach it; the application decides
+     * what a press does while it is busy.
+     */
+    loading?: boolean;
+    disabled?: boolean;
+    /** A form button's behavior (default `button`, which never submits). */
+    type?: ButtonType;
+    name?: string;
+    value?: string;
+    /** The id of the form it belongs to, when it sits outside that form. */
+    form?: string;
+    /** Render a link with button styling instead of a `<button>`. */
+    href?: string;
+    /** Where a link opens. */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Delegated `data-action` the application handles. */
+    action?: string;
+    /**
+     * A count, short text, or `true` for a text-free dot over the button's
+     * top-trailing corner, such as how many items a filter hides. It stays out
+     * of the accessible name unless `badgeLabel` names it.
+     */
+    badge?: number | string | true;
+    /** Words for the badge ("3 hidden"), added to the button's name. */
+    badgeLabel?: string;
+    /** The badge's tone (default `danger`). */
+    badgeTone?: BadgeTone;
+    /**
+     * Native hover text that says more than the name, such as "More Actions
+     * for report.pdf". An icon-only Button already gets a help tag with its
+     * `ariaLabel` (with `@kerfjs/ui/help-tags-register`); a `title` replaces
+     * that tag.
+     */
+    title?: string;
+    id?: string;
+    className?: string;
+    /** Safe `data-*` metadata (a `data-key`, `data-dialog-close`). */
+    rootAttributes?: ButtonRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A standalone action button: a native `<button>` (or a link with `href`)
+ * in one of three tones and three emphases, at the 44px control height or
+ * compact, with a label or as an icon-only square, rounded or pill-shaped,
+ * and optionally a `pressed` toggle. Inside a
+ * `ToolbarControlGroup`, use a plain `<button>`, which the group styles; use
+ * Button for a dialog footer, a form, or a standalone action beside other
+ * content.
+ */
+declare function Button({ children, tone, emphasis, size, shape, pressed, icon, loading, disabled, type, name, value, form, href, target, action, badge, badgeLabel, badgeTone, ariaLabel, title, id, className, rootAttributes, slot, }: ButtonProps): kerfjs.SafeHtml;
+
+export { Button, type ButtonContent, type ButtonEmphasis, type ButtonLabel, type ButtonOptions, type ButtonProps, type ButtonRootAttributes, type ButtonShape, type ButtonSize, type ButtonTone, type ButtonType };

package/dist/button.js

@@ -0,0 +1,7 @@
+export { Button } from './chunk-UTCAOOXU.js';
+
+
+
+
+
+//# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"button.js"}

package/dist/catalog-resources.d.ts

@@ -1,4 +1,4 @@
-import { C as CatalogResource } from './types-CVgIwSdq.js';
+import { C as CatalogResource } from './types-DmHWkSd6.js';
 import './toolbar.js';
 import 'kerfjs';
 import './semantic-content-BbzjvSu9.js';

package/dist/catalog.d.ts

@@ -1,7 +1,7 @@
 import * as kerfjs from 'kerfjs';
 import { SafeHtml } from 'kerfjs';
-import { b as CatalogProps } from './types-CVgIwSdq.js';
-export { a as CatalogBackgroundStyle, c as CatalogBrand, d as CatalogEntry, e as CatalogRelated, C as CatalogResource, f as CatalogSecondaryGroup, g as CatalogSection, h as CatalogSettingsConfig, i as CatalogStageRootAttributes, j as CatalogUxReview } from './types-CVgIwSdq.js';
+import { b as CatalogProps } from './types-DmHWkSd6.js';
+export { a as CatalogBackgroundStyle, c as CatalogBrand, d as CatalogEntry, e as CatalogRelated, C as CatalogResource, f as CatalogSecondaryGroup, g as CatalogSection, h as CatalogSettingsConfig, i as CatalogStageRootAttributes, j as CatalogTagFilter, k as CatalogUxReview } from './types-DmHWkSd6.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 import './toolbar.js';
 import './sides-BPSWde0A.js';
@@ -28,7 +28,7 @@ import './resizable-region.js';
  * An entry's `settings` render in a right-rail settings pane beside the stage,
  * with the same toggle relocation and small-screen overlay.
  */
-declare function Catalog({ id, brand, sections, active, content, collapsed, theme, increasedContrast, reducedMotion, backgroundControl, headerActions, settings, settingsCollapsed, settingsPanel, uxReview, secondarySections, sidebarFooter, status, backgroundStyle, stageRootAttributes, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, toggleSettingsAction, headerPlacement, footerPlacement, sidebar, mainToolbar, footerToolbar, className, slot, }: CatalogProps): kerfjs.SafeHtml;
+declare function Catalog({ id, brand, sections, active, content, collapsed, theme, increasedContrast, reducedMotion, backgroundControl, headerActions, settings, settingsCollapsed, settingsPanel, uxReview, secondarySections, sidebarFooter, status, backgroundStyle, stageRootAttributes, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, toggleSecondaryFilterAction, toggleSettingsAction, headerPlacement, footerPlacement, sidebar, mainToolbar, footerToolbar, className, slot, }: CatalogProps): kerfjs.SafeHtml;
 
 /** How a specimen aligns its visible edge with its `ListHeader` label. */
 type CatalogExampleAlign = 'glyph' | 'inline-control' | 'text-trigger' | 'none';

package/dist/catalog.js

@@ -1,35 +1,38 @@
-import { Workbench } from './chunk-YBWQR2OK.js';
+import { Workbench } from './chunk-DDSCVEO5.js';
 import { uxReviewCaptureUrl } from './chunk-6C6DLP3W.js';
 export { UX_REVIEW_PROJECT_PATH, loadUxReviewProject, uxReviewCaptureUrl } from './chunk-6C6DLP3W.js';
 
+import { Switch } from './chunk-LTBVP6VN.js';
+import { Row } from './chunk-AMIHGFLP.js';
+import { SearchField } from './chunk-VEME3D7K.js';
+import { ListHeader } from './chunk-ECFCAKWE.js';
+import { ListInsetControl } from './chunk-AN5IWMTM.js';
+import { ListInsetText } from './chunk-S4Y3YTAI.js';
+import { ListItem } from './chunk-3GLYIIFR.js';
+import { Text } from './chunk-7K6U6FCN.js';
+
+import { PopupMenu } from './chunk-7W3GKMN4.js';
+
+
 
-import { TokenSearchField } from './chunk-ZJC5ND3M.js';
 
-import { Row } from './chunk-YQ2AC4E2.js';
-import { ListItem } from './chunk-ZYU5WRC3.js';
 import { ToolbarText } from './chunk-EKHDLBRP.js';
 
-import { PopupMenu } from './chunk-HQZYKJ56.js';
-import { ListHeader } from './chunk-3SKAEPPZ.js';
-import { ListInsetControl } from './chunk-AN5IWMTM.js';
-import { ListInsetText } from './chunk-S4Y3YTAI.js';
 
 
 
 
 import { ToolbarControlGroup, ToolbarActionLink } from './chunk-2PXZBFEC.js';
-import { Toolbar } from './chunk-CMLPFIC5.js';
-import { List } from './chunk-HZPHCSCS.js';
-
 
 
 import { ensureSunkenTexture } from './chunk-IKS72C6P.js';
-import { LucideIcon } from './chunk-LOSRXZAH.js';
+import { List } from './chunk-OY2MXIBB.js';
 
+import { Toolbar } from './chunk-CMLPFIC5.js';
 
-import { Text } from './chunk-LL45C7BB.js';
 
 
+import { LucideIcon } from './chunk-HJXVVFBT.js';
 
 import { filterDataAttributes } from './chunk-KH4KEMSP.js';
 import { Contrast, ZapOff, Moon, Sun, X, Waypoints, ExternalLink, Scan } from 'lucide';
@@ -151,11 +154,22 @@ function CatalogSectionEntries({
     )) })
   ] });
 }
+function visibleSections(group, active) {
+  const filter = group.tagFilter;
+  if (!filter || filter.show) return group.sections;
+  return group.sections.map((section) => ({
+    ...section,
+    entries: section.entries.filter(
+      (entry) => entry.id === active || !entry.tags?.includes(filter.tag)
+    )
+  })).filter((section) => section.entries.length > 0);
+}
 function CatalogSecondarySections({
   group,
   active,
   selectAction,
-  toggleAction
+  toggleAction,
+  filterAction
 }) {
   const open = !group.collapsible || Boolean(group.expanded);
   return /* @__PURE__ */ jsxs(
@@ -174,7 +188,7 @@ function CatalogSecondarySections({
             action: toggleAction
           }
         ) : /* @__PURE__ */ jsx(ListHeader, { label: group.label }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           List,
           {
             gap: "m",
@@ -182,14 +196,26 @@ function CatalogSecondarySections({
               "data-catalog-secondary": "",
               "data-catalog-secondary-collapsed": String(!open)
             },
-            children: group.sections.map((section) => /* @__PURE__ */ jsx(
-              CatalogSectionEntries,
-              {
-                section,
-                active,
-                selectAction
-              }
-            ))
+            children: [
+              group.tagFilter ? /* @__PURE__ */ jsx(List, { textInsets: "rl", children: /* @__PURE__ */ jsx(
+                Switch,
+                {
+                  label: group.tagFilter.label,
+                  checked: group.tagFilter.show,
+                  size: "compact",
+                  action: filterAction,
+                  rootAttributes: { "data-catalog-secondary-filter": "" }
+                }
+              ) }) : null,
+              visibleSections(group, active).map((section) => /* @__PURE__ */ jsx(
+                CatalogSectionEntries,
+                {
+                  section,
+                  active,
+                  selectAction
+                }
+              ))
+            ]
           }
         )
       ]
@@ -217,7 +243,8 @@ function CatalogSidebar({
   secondarySections,
   footer,
   selectAction,
-  toggleSecondaryAction
+  toggleSecondaryAction,
+  toggleSecondaryFilterAction
 }) {
   return /* @__PURE__ */ jsx("nav", { "aria-label": `${brand.title} Components`, "data-catalog-sidebar": true, children: /* @__PURE__ */ jsxs(List, { gap: "m", controlInsets: "b", children: [
     brand.subtitle ? /* @__PURE__ */ jsx(ListInsetText, { sides: "rl", children: /* @__PURE__ */ jsx(Text, { variant: "span", size: "compact", tone: "quiet", children: brand.subtitle }) }) : null,
@@ -235,7 +262,8 @@ function CatalogSidebar({
         group: secondarySections,
         active,
         selectAction,
-        toggleAction: toggleSecondaryAction
+        toggleAction: toggleSecondaryAction,
+        filterAction: toggleSecondaryFilterAction
       }
     ) : null,
     /* @__PURE__ */ jsx(
@@ -340,6 +368,7 @@ function Catalog({
   toggleMotionAction = "catalog-toggle-motion",
   selectBackgroundAction = "catalog-select-background",
   toggleSecondaryAction = "catalog-toggle-secondary",
+  toggleSecondaryFilterAction = "catalog-toggle-secondary-filter",
   toggleSettingsAction = "catalog-toggle-settings",
   headerPlacement = "auto",
   footerPlacement = "auto",
@@ -400,7 +429,7 @@ function Catalog({
               toggle: { action: toggleSidebarAction, name: catalogName }
             },
             header: /* @__PURE__ */ jsx(ListInsetControl, { sides: "rbl", children: /* @__PURE__ */ jsx(
-              TokenSearchField,
+              SearchField,
               {
                 id: `${id}-filter`,
                 label: "Filter Catalog",
@@ -422,7 +451,8 @@ function Catalog({
                 secondarySections,
                 footer: sidebarFooter,
                 selectAction,
-                toggleSecondaryAction
+                toggleSecondaryAction,
+                toggleSecondaryFilterAction
               }
             )
           },