@kubex/zinc 1.1.123 → 1.1.125

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.125",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/scss/themes/_light.scss

@@ -204,8 +204,8 @@
   --zn-input-height-large: 40px; // 50px // 43.75px
 
   /* Input background colors */
-  --zn-input-background-color: var(--zn-color-neutral-50);
-  --zn-input-background-color-hover: var(--zn-color-neutral-100);
+  --zn-input-background-color: rgb(var(--zn-color-body));
+  --zn-input-background-color-hover: color-mix(in srgb, rgb(var(--zn-color-body)) 98%, black);
   --zn-input-background-color-focus: var(--zn-color-neutral-100);
   --zn-input-background-color-disabled: var(--zn-color-neutral-400);
 

package/src/components/checkbox/checkbox.scss

@@ -112,7 +112,6 @@
   justify-content: center;
   width: var(--toggle-size);
   height: var(--toggle-size);
-  box-shadow: var(--zn-shadow-x-small);
   border: solid var(--zn-input-border-width) var(--checkbox-border-color);
   background-color: var(--checkbox-bg-color);
   border-radius: var(--zn-border-radius-small);

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-filter/data-table-filter.scss

@@ -2,7 +2,6 @@
 
 // Fields inside a panel that already draws its own edge
 @mixin flush-input {
-  --zn-input-box-shadow: none;
   --zn-input-background-color: transparent;
   --zn-input-background-color-hover: transparent;
   --zn-input-background-color-focus: transparent;

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/datepicker/datepicker.scss

@@ -12,7 +12,6 @@
   justify-content: start;
   position: relative;
   width: 100%;
-  box-shadow: var(--zn-shadow-x-small);
   font-family: var(--zn-input-font-family), sans-serif;
   font-weight: var(--zn-input-font-weight);
   letter-spacing: var(--zn-input-letter-spacing);

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

@@ -68,7 +68,6 @@ import styles from './input.scss';
  * @csspart password-toggle-button - The password toggle button.
  * @csspart suffix - The container that wraps the suffix.
  *
- * @cssproperty --zn-input-box-shadow - Shadow cast by the field; set to `none` inside a panel that draws its own edge.
  * @cssproperty --zn-range-track-height - The height of a range input's track.
  * @cssproperty --zn-range-track-color - The color of a range input's track.
  * @cssproperty --zn-range-thumb-size - The diameter of a range input's thumb.
@@ -1064,7 +1063,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/input/input.scss

@@ -11,7 +11,6 @@
   justify-content: start;
   position: relative;
   width: 100%;
-  box-shadow: var(--zn-input-box-shadow, var(--zn-shadow-x-small));
   font-family: var(--zn-input-font-family), sans-serif;
   font-weight: var(--zn-input-font-weight);
   letter-spacing: var(--zn-input-letter-spacing);

package/src/components/radio/radio.scss

@@ -55,7 +55,6 @@
   justify-content: center;
   width: var(--toggle-size);
   height: var(--toggle-size);
-  box-shadow: var(--zn-shadow-x-small);
   border: solid var(--zn-input-border-width) var(--zn-input-border-color);
   border-radius: 50%;
   background-color: var(--zn-input-background-color);

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>`
                 : ''}

package/src/components/select/select.scss

@@ -37,7 +37,6 @@
   font-family: var(--zn-input-font-family);
   font-weight: var(--zn-input-font-weight);
   letter-spacing: var(--zn-input-letter-spacing);
-  box-shadow: var(--zn-shadow-x-small);
   vertical-align: middle;
   overflow: hidden;
   cursor: pointer;

package/src/components/textarea/textarea.scss

@@ -15,7 +15,6 @@
   align-items: center;
   position: relative;
   width: 100%;
-  box-shadow: var(--zn-shadow-x-small);
   font-family: var(--zn-input-font-family);
   font-weight: var(--zn-input-font-weight);
   line-height: var(--zn-line-height-normal);
@@ -78,7 +77,6 @@
   color: var(--zn-input-color);
   border: none;
   background: none;
-  box-shadow: var(--zn-shadow-x-small);
   cursor: inherit;
   -webkit-appearance: none;
   height: 100%;

package/src/components/toggle/toggle.scss

@@ -102,8 +102,6 @@
   height: 20.32px;
   border-radius: 50%;
   background: #fff;
-  box-shadow: 0 2px 4px 0 rgba(var(--zn-color-text), 0.1);
-
   transform: translateY(-50%);
   transition: left .3s ease-in-out, background-color .4s ease-in-out;
   outline: none;