@kubex/zinc 1.1.120 → 1.1.122

package/docs/pages/components/button.md

@@ -187,6 +187,15 @@ Use the `square` attribute to create square-shaped buttons, useful for icon-only
 <zn-button icon="close" square color="error"></zn-button>
 ```
 
+### Pill Buttons
+
+Use the `pill` attribute for a label-like trigger rather than an action: fully rounded, sentence case and regular weight, so it reads as a value you can change rather than a command. Used for the filter chips in `zn-data-table-filter`.
+
+```html:preview
+<zn-button pill panel-bg icon="chevron-down@lu" icon-position="right">Role</zn-button>
+<zn-button pill panel-bg icon="chevron-down@lu" icon-position="right">Status: Active</zn-button>
+```
+
 ### Grow
 
 Use the `grow` attribute to make the button expand to fill its container width.

package/docs/pages/components/data-table-filter.md

@@ -1,7 +1,7 @@
 ---
 meta:
   title: Data Table Filter
-  description: A comprehensive filtering component that opens a slideout panel with a query builder interface. Supports text, number, date fields, dropdown options, and multiple filter operators.
+  description: An inline filter bar for data tables. Each active filter is a pill whose dropdown sets its value, alongside an add-filter control and a clear.
 layout: component
 ---
 
@@ -12,6 +12,56 @@ layout: component
 </zn-data-table-filter>
 ```
 
+Filters render inline rather than in a slideout. Each active filter is a pill showing its name, and its value once set; the pill's dropdown lists the filter's `options` as checkable values, or a text input for a filter that declares none. Each pill carries an X that drops that filter. `+ Add filter` lists the filters that are not yet active, and `Clear` removes them all.
+
+A filter starts on its **first declared operator**. Declare more than one and the pill offers a choice: a value editor gets a row of operator chips above it, an options menu lists the operators above its values, and the pill then reads `Age ≥ 18` rather than `Age: 18`. Switching operator keeps the value — a date is re-encoded for the new comparator.
+
+Declare `in` or `nin` to let a filter hold several values at once — the pill then counts them, e.g. `Role (2)`, and its dropdown stays open so you can pick more. Any other operator holds a single value: the dropdown closes on select, and picking the same value again clears it.
+
+Picking a filter from `+ Add filter` opens its pill straight away, with a text field focused, so naming a filter and giving it a value is one pass. A typed value is one value however many spaces it contains; only a comma starts another.
+
+`default-filters` takes a comma-separated list of filter ids to show a pill for up front. Inside a `zn-data-table` the bar is hidden until the header's filter toggle is clicked, and `activeCount` reports how many filters currently hold a value.
+
+```html:preview
+<zn-data-table-filter
+  default-filters="status"
+  filters='[
+    {"id":"status","name":"Status","options":{"open":"Open","closed":"Closed"},"operators":["eq"]},
+    {"id":"tag","name":"Tag","options":{"bug":"Bug","chore":"Chore","feature":"Feature"},"operators":["in"]},
+    {"id":"owner","name":"Owner","operators":["contains"]}
+  ]'>
+</zn-data-table-filter>
+```
+
+The component emits `zn-filter-change` and exposes the query on `value`, encoded exactly as `zn-query-builder` encodes it — base64 of `[{key, comparator, value}]` — so a backend built against the query builder needs no changes.
+
+### Long Option Lists
+
+An option list caps its height at 320px and scrolls inside the panel rather than running off the
+screen, with the scrollbar drawn rather than left to the platform's overlay one. Past eight options
+the pill also gains a search field, merged into the top of the panel and pinned there, that narrows
+the list case-insensitively.
+
+```html:preview
+<zn-data-table-filter
+  default-filters="category"
+  filters='[
+    {"id":"category","name":"Category","operators":["eq","in"],"options":{
+      "how-to":"How To","linux":"Linux","beta":"Beta","router":"Router","tv":"TV","other":"Other",
+      "mac":"Mac Hotspot Shield","general":"General","android":"Android Hotspot Shield",
+      "educational":"Educational","windows":"Windows Hotspot Shield","ios":"iOS",
+      "getting-started":"Getting Started","payments":"Payments & Subscriptions",
+      "accounts":"Manage Account & Devices","troubleshoot":"Troubleshoot issues",
+      "releases":"Release Notes","archived":"Archived Articles","internal":"Internal Information",
+      "tutorials":"Tutorials"}}
+  ]'>
+</zn-data-table-filter>
+```
+
+### Typeahead
+
+Inside a `zn-data-table` a text filter suggests values from the rows the table has already loaded, matched case-insensitively against what has been typed, keyed on the column whose name matches the filter's id. Set `suggestions` yourself — `{[filterId]: string[]}` — to offer something else.
+
 ## Examples
 
 ### Basic Text Filters
@@ -27,7 +77,8 @@ Create simple text-based filters with equality and fuzzy search operators.
 
 ### Number Filters with Operators
 
-Use number type filters with comparison operators like equal, greater than, less than.
+Use number type filters with comparison operators like equal, greater than, less than. The pill's
+editor shows a chip per operator; `>`, `≥`, `<` and `≤` keep their symbols, and the rest read as words.
 
 ```html:preview
 <zn-data-table-filter
@@ -38,11 +89,16 @@ Use number type filters with comparison operators like equal, greater than, less
 
 ### Date Filters
 
-Filter by dates with before, after, and equal operators.
+Filter by dates with before, after, and equal operators. A `date` pill opens a calendar and closes
+once a day is picked; a `dateTime` pill adds a time selector and stays open while it's set.
+
+Values are encoded the way `zn-query-builder` encodes them, so `dateSubmitFormat` picks the wire
+format: `legacy` (the default — seconds for `eq`/`neq`, otherwise minutes from now, negated for
+`before`), `timestamp` (milliseconds) or `iso`.
 
 ```html:preview
 <zn-data-table-filter
-  filters="[{&quot;id&quot;:&quot;created&quot;,&quot;name&quot;:&quot;Created Date&quot;,&quot;type&quot;:&quot;date&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;before&quot;,&quot;after&quot;]},{&quot;id&quot;:&quot;modified&quot;,&quot;name&quot;:&quot;Modified Date&quot;,&quot;type&quot;:&quot;date&quot;,&quot;operators&quot;:[&quot;before&quot;,&quot;after&quot;]},{&quot;id&quot;:&quot;due_date&quot;,&quot;name&quot;:&quot;Due Date&quot;,&quot;type&quot;:&quot;date&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;before&quot;,&quot;after&quot;]}]"
+  filters="[{&quot;id&quot;:&quot;created&quot;,&quot;name&quot;:&quot;Created Date&quot;,&quot;type&quot;:&quot;date&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;before&quot;,&quot;after&quot;]},{&quot;id&quot;:&quot;modified&quot;,&quot;name&quot;:&quot;Modified Date&quot;,&quot;type&quot;:&quot;date&quot;,&quot;operators&quot;:[&quot;before&quot;,&quot;after&quot;]},{&quot;id&quot;:&quot;due_date&quot;,&quot;name&quot;:&quot;Due Date&quot;,&quot;type&quot;:&quot;dateTime&quot;,&quot;dateSubmitFormat&quot;:&quot;iso&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;before&quot;,&quot;after&quot;]}]"
   name="date-filters">
 </zn-data-table-filter>
 ```

package/docs/pages/components/data-table-search.md

@@ -9,7 +9,7 @@ layout: component
 
 ### Basic Search
 
-Use the `zn-data-table-search` component to provide search functionality for data tables. The component includes a search input with a search icon prefix and is clearable by default.
+Use the `zn-data-table-search` component to provide search functionality for data tables. The component includes a search input with a trailing search icon and is clearable by default.
 
 ```html:preview
 <zn-data-table-search></zn-data-table-search>
@@ -401,7 +401,7 @@ Use the `getFormData()` method to retrieve all form data from the search compone
 The component is built with accessibility in mind:
 
 - Uses semantic HTML with proper input type (`search`)
-- Includes a visible search icon prefix for visual recognition
+- Includes a visible trailing search icon for visual recognition
 - Supports keyboard navigation and clearing via the clearable input
 - Integrates with form validation and submission
 - Provides proper labeling through the help-text attribute
@@ -448,4 +448,4 @@ The component is built with accessibility in mind:
 ## Dependencies
 
 - `zn-input` - Used for the search input field
-- `zn-icon` - Used for the search icon prefix
+- `zn-icon` - Used for the trailing search icon

package/docs/pages/components/data-table.md

@@ -116,7 +116,9 @@ Use `local-sort` to sort data client-side without making server requests. Best f
 
 ### Pagination
 
-Data tables automatically display pagination controls when the total number of records exceeds the per-page limit. Users can navigate between pages and adjust rows per page.
+Data tables automatically display pagination controls when the total number of records exceeds the per-page limit. Users can navigate between pages and adjust the rows per page.
+
+Pagination renders as a single joined control: first, previous, a sliding window of three page numbers, next, last. The window keeps the control a fixed width whatever the dataset — the same at 30 pages as at 3000 — while the first and last buttons cover jumping to either end. On narrow widths the footer wraps so pagination sits above the rows selector.
 
 :::tip
 Pagination controls appear based on the `total` and `perPage` values in the response. In this preview, changing pages re-fetches the same static data. With a real server, each page request would return the corresponding slice of data.
@@ -195,6 +197,8 @@ Use `hide-checkboxes` to disable row selection functionality.
 
 Add action buttons to the table header for performing operations on selected rows. Use the `delete-action`, `modify-action`, and `create-action` slots.
 
+`delete-action` and `modify-action` sit beside the caption alongside a select-all toggle, and only appear once rows are selected. `create-action` is a primary action rather than a selection one, so it renders at the end of the header's right-hand group, after the search field.
+
 ```html:preview
 <zn-data-table
   data-uri="/data/data-table.json"
@@ -240,9 +244,49 @@ Mark columns as secondary to hide them by default. Users can expand rows to view
 </zn-data-table>
 ```
 
+### Column Select
+
+The header carries a column select dropdown whenever the table has rows and more than one column can be toggled. Mark a header `"required": true` to pin it on, or `"default": false` to start it hidden. Set `hide-column-select` to remove the dropdown.
+
+```html:preview
+<zn-data-table
+  data-uri="/data/data-table.json"
+  method="GET"
+  standalone
+  caption="Customers"
+  headers='[
+    {"key":"name","label":"Name", "required":true},
+    {"key":"email","label":"Email"},
+    {"key":"status","label":"Status"},
+    {"key":"phone","label":"Phone"},
+    {"key":"address","label":"Address", "default":false}
+  ]'>
+</zn-data-table>
+```
+
+### Refresh
+
+Tables with a `data-uri` get a refresh button in the header, which reruns the current request. Set `hide-refresh` to remove it.
+
+Both the refresh and column select buttons are hidden while the table has no rows, so an empty state keeps just the caption and the slotted controls.
+
+```html:preview
+<zn-data-table
+  data-uri="/data/data-table.json"
+  method="GET"
+  standalone
+  caption="Customers"
+  hide-column-select
+  headers='[
+    {"key":"name","label":"Name"},
+    {"key":"email","label":"Email"}
+  ]'>
+</zn-data-table>
+```
+
 ### Hide Columns
 
-Use `hide-columns` to completely hide specific columns from the table.
+Use `hide-columns` to completely hide specific columns from the table. Unlike the column select, these columns cannot be turned back on.
 
 ```html:preview
 <zn-data-table
@@ -362,7 +406,9 @@ Or use the built-in empty state with custom text:
 
 ### Filtering
 
-Add advanced filtering with the `zn-data-table-filter` component. The filter opens a slideout with a query builder.
+Add filtering with the `zn-data-table-filter` component. The header carries a filter toggle beside the refresh button; clicking it reveals a row between the header and the rows holding the `filter` slot, where the filter component shows one pill per active filter alongside add-filter and clear controls. The row stays hidden until the toggle is clicked, and the toggle carries a count of the filters currently applied. Use `default-filters` to show a pill for a filter before the user adds it.
+
+The table also feeds the bar typeahead values for its text filters, taken from the rows it has loaded and keyed on the column whose name matches the filter's id.
 
 :::tip
 In this preview, filter parameters are sent with the request but the static data file returns the same results regardless. With a real server endpoint, results would be filtered based on the applied criteria.
@@ -370,6 +416,8 @@ In this preview, filter parameters are sent with the request but the static data
 
 ```html:preview
 <zn-data-table
+  standalone
+  caption="Users"
   data-uri="/data/data-table.json"
   method="GET"
   headers='[
@@ -382,9 +430,11 @@ In this preview, filter parameters are sent with the request but the static data
 
   <zn-data-table-filter
     slot="filter"
+    default-filters="status"
     filters='[
-      {"id":"name","name":"Name","operators":["eq","contains"]},
-      {"id":"status","name":"Status","options":{"active":"Active","inactive":"Inactive"},"operators":["eq"]}
+      {"id":"name","name":"Name","operators":["contains"]},
+      {"id":"status","name":"Status","options":{"active":"Active","inactive":"Inactive"},"operators":["eq"]},
+      {"id":"role","name":"Role","options":{"admin":"Admin","user":"User"},"operators":["in"]}
     ]'>
   </zn-data-table-filter>
 
@@ -395,6 +445,8 @@ In this preview, filter parameters are sent with the request but the static data
 
 Add complex filtering options above the table using the `filter-top` slot. Perfect for search forms and advanced filters.
 
+Content in this slot renders above the table's own panel rather than inside it, so wrap it in a `zn-panel` when it needs its own frame. It never contributes a header row to the table, and with `standalone` an empty state that has no caption or header controls is left unwrapped, so a `zn-panel` around the `empty-state` slot doesn't end up nested inside another.
+
 :::tip
 This example uses `no-initial-load` so the table starts empty. Submitting the filter form triggers a data load, but the static data file returns the same results regardless of filter values. With a real server, results would be filtered accordingly.
 :::
@@ -514,7 +566,9 @@ In this preview, the input values are sent as parameters with each request but t
 
 ### Grouping Data
 
-Group rows by a specific column using the `group-by` property. This loads all data and splits it into separate tables.
+Group rows by a specific column using the `group-by` property. This loads all data and splits it into groups.
+
+Groups render as header rows inside a single table, so every group shares the same column widths, one set of column headers and one horizontal scrollbar.
 
 ```html:preview
 <zn-data-table
@@ -591,17 +645,32 @@ Prevent automatic data loading on mount with `no-initial-load`. Call the `refres
 
 ### Standalone Mode
 
-Use `standalone` to render the table without a container wrapper, useful for embedding in other components.
+Use `standalone` when the table supplies its own panel rather than sitting inside one. It renders a `zn-panel`, passing `caption` through as the panel's caption, the header controls into its `actions` slot and the pagination into its `footer` slot, with the rows flush against the panel edges. Columns scroll under the panel's edges, so the border stays put on a wide table.
+
+The panel footer is only slotted when there is pagination to show, so an empty table or one with `hide-pagination` gets no footer bar.
+
+Leave `standalone` off when the table is already inside a `zn-panel`.
 
 ```html:preview
 <zn-data-table
   data-uri="/data/data-table.json"
   method="GET"
   standalone
+  caption="All Customers"
   headers='[
     {"key":"name","label":"Name"},
-    {"key":"email","label":"Email"}
+    {"key":"email","label":"Email"},
+    {"key":"status","label":"Status"},
+    {"key":"date","label":"Date Joined"},
+    {"key":"phone","label":"Phone"},
+    {"key":"address","label":"Address"},
+    {"key":"notes","label":"Notes"}
   ]'>
+
+  <zn-data-table-search slot="search" placeholder="Search"></zn-data-table-search>
+
+  <zn-button slot="create-action" icon="add">New Customer</zn-button>
+
 </zn-data-table>
 ```
 
@@ -730,7 +799,7 @@ Rows can have contextual actions that appear in a dropdown menu.
 
 ### Caption
 
-Add a caption to describe the table data.
+Add a caption to name the table. It renders as the title on the left of the header row, and supplies the wording for the default empty state.
 
 ```html:preview
 <zn-data-table

package/docs/pages/components/datepicker.md

@@ -428,6 +428,16 @@ Displays time.
 </zn-datepicker>
 ```
 
+### Inline Calendar
+
+`inline` renders the calendar in place and hides the text input, which suits a panel or dropdown that
+is already open. Set `--zn-datepicker-inline-border-color: transparent` when the surrounding panel
+already draws the edge.
+
+```html:preview
+<zn-datepicker inline></zn-datepicker>
+```
+
 ### Dialogs & Shadow DOM
 
 The calendar popup renders at the document level, so it is never clipped by ancestor shadow roots or

package/docs/pages/components/menu-item.md

@@ -24,8 +24,22 @@ layout: component
 <zn-menu-item color="warning">Menu item</zn-menu-item>
 ```
 
-### Second Example
+### Keeping the Dropdown Open
 
-TODO
+A menu item inside a `zn-dropdown` closes it on select. `keep-open` exempts a single item, for rows
+that change how the panel behaves rather than committing a choice — an operator picker above a list
+of values, say. `stay-open-on-select` on the dropdown itself still covers every item at once.
+
+```html:preview
+<zn-dropdown>
+  <zn-button slot="trigger" icon="chevron-down@lu" icon-position="right">Sort</zn-button>
+  <zn-menu>
+    <zn-menu-item type="checkbox" keep-open checked>Ascending</zn-menu-item>
+    <zn-menu-item type="checkbox" keep-open>Descending</zn-menu-item>
+    <zn-menu-item value="name">Name</zn-menu-item>
+    <zn-menu-item value="created">Created</zn-menu-item>
+  </zn-menu>
+</zn-dropdown>
+```
 
 

package/docs/pages/components/translation-group.md

@@ -62,8 +62,8 @@ select's accessible name — it is not shown, since the caption names the sectio
 ### Pre-filled Values
 
 Set initial translations on each child. A language every child has a value for is marked `Translated`; one only some
-children have is `Partial`; one no child has falls back to English. English itself is the source, so it is neither
-counted nor marked as a translation.
+children have is `Partial`; one no child has falls back to English. English itself is marked `Empty` rather than
+falling back, having nothing to fall back to, and counts towards the total like any other language.
 
 ```html:preview
 <zn-translation-group

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.120",
+  "version": "1.1.122",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/button/button.component.ts

@@ -84,6 +84,9 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
   @property({type: Boolean}) plain = false;
   /** Disables the hover background, for contexts where the tint doesn't fit. */
   @property({type: Boolean, attribute: 'no-hover'}) noHover = false;
+  /** Renders the button as a pill: fully rounded, sentence case and regular
+   * weight. For label-like triggers such as filter chips. */
+  @property({type: Boolean, reflect: true}) pill = false;
   @property({type: Boolean, attribute: 'panel-bg'}) panelBackground = false;
 
   @property({attribute: 'dropdown-closer', type: Boolean}) dropdownCloser = false;
@@ -386,6 +389,9 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
       '--icon-button-hover-color': this.getIconButtonColor(this.hoverColor || 'primary')
     } : {};
 
+    // A removed `notification` attribute lands here as null, not undefined
+    const notification = this.notification ?? undefined;
+
     const buttonContent = html`
       <${tag}
         part="base"
@@ -404,6 +410,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
           'button--text': (this.text && !this.outline),
           'button--icon-button': !!this.iconButton,
           'button--plain': !!this.iconButton && this.plain,
+          'button--pill': this.pill,
           'button--no-hover': this.noHover,
           'button--icon-button-small': this.iconButton === 'small',
           'button--icon-button-round': this.iconButton === 'round',
@@ -414,9 +421,9 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
           'button--icon-right': this.iconPosition === 'right',
           'button--with-content': this.hasSlotController.test('[default]') || this.content,
           'button--square': this.square,
-          'button--has-notification': this.notification !== undefined && this.notification !== 0,
-          'button--muted-notification': this.mutedNotifications || (this.notification !== undefined && this.notification === -2),
-          'button--notification-dot': this.notification !== undefined && this.notification < 0,
+          'button--has-notification': notification !== undefined && notification !== 0,
+          'button--muted-notification': this.mutedNotifications || notification === -2,
+          'button--notification-dot': notification !== undefined && notification < 0,
         })}"
         type="${ifDefined(this.type)}"
         href="${ifDefined(this.href)}"
@@ -425,7 +432,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
         rel="${ifDefined(isLink ? this.rel : undefined)}"
         gaid="${ifDefined(this.gaid)}"
         aria-label="${ifDefined(ariaLabel)}"
-        data-notification="${ifDefined(this.notification)}"
+        data-notification="${ifDefined(notification)}"
         disabled="${this.disabled || nothing}"
         style=${styleMap(iconButtonStyles)}
         @click="${this.handleClick}">

package/src/components/button/button.scss

@@ -462,7 +462,7 @@
   border-right: 0 !important;
 }
 
-:host([data-zn-button-group__button]:not([data-zn-button-group__button--first]):not(:hover)) {
+:host([data-zn-button-group__button]:not([data-zn-button-group__button--first])) {
   .button:after {
     content: '';
     position: absolute;
@@ -488,6 +488,17 @@
   border-left: 0 !important;
 }
 
+/* Pill: a label-like trigger (filter chips and similar) rather than an action */
+.button.button--pill {
+  border-radius: var(--zn-border-radius-pill);
+  padding: 0 var(--zn-spacing-small);
+  height: 32px;
+  min-height: 32px;
+  font-weight: var(--zn-font-weight-normal);
+  text-transform: none;
+  white-space: nowrap;
+}
+
 .button--panel-bg {
   background: rgb(var(--zn-panel));
   border-color: var(--zn-button-border-color, rgb(var(--zn-border-color)));