@kubex/zinc 1.1.123 → 1.1.124

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

@@ -29,7 +29,8 @@ Use the `placeholder` attribute to customize the input placeholder text.
 
 ### Help Text
 
-Add descriptive help text to guide users with the `help-text` attribute.
+Use the `help-text` attribute to explain what can be searched. It shows an information icon inside the search field,
+before the search icon, and reads out as a tooltip on hover or focus.
 
 ```html:preview
 <zn-data-table-search
@@ -404,7 +405,7 @@ The component is built with accessibility in mind:
 - 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
+- Explains what is searchable through the help-text attribute, shown from an information icon
 
 ## Properties
 
@@ -413,7 +414,7 @@ The component is built with accessibility in mind:
 | `name`         | `name`           | `string` | `'search'`   | The name of the search input field for form submission |
 | `value`        | `value`          | `string` | `''`         | The current search value |
 | `placeholder`  | `placeholder`    | `string` | `'Search...'`| The placeholder text for the search input |
-| `helpText`     | `help-text`      | `string` | `''`         | Help text displayed below the search input |
+| `helpText`     | `help-text`      | `string` | `''`         | Help text, shown from an information icon inside the search input |
 | `searchUri`    | `search-uri`     | `string` | `undefined`  | Optional URI to use for search operations |
 | `debounceDelay`| `debounce-delay` | `number` | `350`        | The delay in milliseconds before triggering a search after the user stops typing |
 

package/package.json

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

package/src/components/data-table/data-table.scss

@@ -227,7 +227,7 @@ table {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: flex-start;
+    align-items: center;
     padding: var(--zn-spacing-x-small) var(--zn-spacing-medium);
     gap: var(--zn-spacing-small);
 
@@ -246,20 +246,16 @@ table {
     &__caption {
       @include wc.text-style(h1);
 
-      // Sits on the same 36px line as the controls opposite it
-      line-height: 36px;
       margin: 0;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
     }
 
-    // Controls are a uniform 36px, so topping them out keeps them on one line while
-    // a search's help text grows the header downwards
     &__right {
       display: flex;
       flex-direction: row;
-      align-items: flex-start;
+      align-items: center;
       gap: var(--zn-spacing-x-small);
       margin-left: auto;
     }

package/src/components/data-table-search/data-table-search.component.ts

@@ -1,8 +1,9 @@
-import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
 import {FormControlController, validValidityState} from "../../internal/form";
 import {property} from 'lit/decorators.js';
 import ZincElement, {type ZincFormControl} from '../../internal/zinc-element';
 import ZnInput from "../input";
+import ZnTooltip from "../tooltip";
 import type ZnDataSelect from "../data-select";
 import type ZnQueryBuilder from "../query-builder";
 import type ZnSelect from "../select";
@@ -25,6 +26,7 @@ type AllowedInputElement =
  * @since 1.0
  *
  * @dependency zn-input
+ * @dependency zn-tooltip
  *
  * @event zn-search-change - Emitted when the search value changes (debounced).
  *
@@ -35,7 +37,7 @@ type AllowedInputElement =
  * @property {string} name - The name of the search input field (default: "search").
  * @property {string} value - The current search value.
  * @property {string} placeholder - The placeholder text for the search input (default: "Search...").
- * @property {string} helpText - Help text displayed below the search input.
+ * @property {string} helpText - Help text, shown from an information icon inside the search input.
  * @property {string} searchUri - Optional URI to use for search operations.
  * @property {number} debounceDelay - The delay in milliseconds before triggering a search (default: 500).
  */
@@ -43,6 +45,7 @@ export default class ZnDataTableSearch extends ZincElement implements ZincFormCo
   static styles: CSSResultGroup = unsafeCSS(styles);
   static dependencies = {
     'zn-input': ZnInput,
+    'zn-tooltip': ZnTooltip,
   };
 
   private _formController: FormControlController = new FormControlController(this, {});
@@ -187,6 +190,10 @@ export default class ZnDataTableSearch extends ZincElement implements ZincFormCo
           clearable
           @zn-input="${this.handleInput}"
           @zn-clear="${this.handleClear}">
+          ${this.helpText ? html`
+            <zn-tooltip slot="suffix" class="data-table-search__tooltip" content="${this.helpText}">
+              <zn-icon src="info@lu" size="20"></zn-icon>
+            </zn-tooltip>` : nothing}
           <zn-icon slot="suffix" src="search@lu" size="20"></zn-icon>
         </zn-input>
         <slot style="display: none"></slot>

package/src/components/data-table-search/data-table-search.scss

@@ -11,12 +11,36 @@
   min-width: 200px;
 }
 
-// Flush so the input box is exactly the 36px control height the toolbar tops align on
+// Keeps the focus ring inside the component's own box, so a toolbar or header that
+// hugs the input can't clip it
 zn-input::part(form-control-input) {
-  margin: 0;
+  margin: var(--zn-focus-ring-width);
 }
 
+// The help text is shown from the info icon instead, but zn-input still points the
+// input's aria-describedby at it, so hide it rather than dropping it
 zn-input::part(form-control-help-text) {
-  font-size: var(--zn-input-help-text-font-size-small);
-  padding-left: var(--zn-spacing-2x-small);
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+
+// zn-input pads the clear button out to 1em + 2 * --zn-input-spacing-medium, which
+// leaves it sitting further from its neighbour than the suffix icons are from theirs
+zn-input::part(clear-button) {
+  width: auto;
+  margin-inline-end: var(--zn-spacing-small);
+}
+
+// Slotted into the input's suffix, out of reach of zn-input's own icon rules
+.data-table-search__tooltip {
+  display: flex;
+  align-items: center;
+
+  zn-icon {
+    color: var(--zn-input-icon-color);
+    cursor: help;
+  }
 }

package/src/components/header/header.scss

@@ -131,6 +131,8 @@
     flex-grow: 1;
     flex-shrink: 1;
     overflow-x: clip;
+    // Enough slack for a focused control's ring to sit outside its box uncut
+    overflow-clip-margin: var(--zn-focus-ring-width);
     overflow-y: visible;
     min-width: 20px;
   }

package/src/components/input/input.component.ts

@@ -1064,7 +1064,7 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
                   @click=${this.handleClearClick}
                   tabindex="-1">
                   <slot name="clear-icon">
-                    <zn-icon src="cancel"></zn-icon>
+                    <zn-icon src="circle-x@lu" size="20"></zn-icon>
                   </slot>
                 </button>`
               : ''}

package/src/components/select/select.component.ts

@@ -1934,7 +1934,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
                     @click=${this.handleClearClick}
                     tabindex="-1">
                     <slot name="clear-icon">
-                      <zn-icon src="cancel"></zn-icon>
+                      <zn-icon src="circle-x@lu" size="20"></zn-icon>
                     </slot>
                   </button>`
                 : ''}