@vialiq/web-components 0.20.0 → 0.22.0

package/index.d.ts

@@ -41,4 +41,11 @@ export type { SwitchSize, LabelPlacement } from './switch/vi-switch.js';
 export { ViSelect } from './select/vi-select.js';
 export { ViSelectOption } from './select/vi-select-option.js';
 export { ViSelectGroup } from './select/vi-select-group.js';
+export { ViCombobox } from './combobox/vi-combobox.js';
+export { ViComboboxItem } from './combobox/vi-combobox-item.js';
+export { ViDatePicker, VIALIQ_CHANGE } from './date-picker/vi-date-picker.js';
+export { ViDatePickerInput } from './date-picker/vi-date-picker-input.js';
+export type { DatePickerMode, DatePickerChangeDetail } from './date-picker/types.js';
+export { ViLabel } from './label/vi-label.js';
+export type { LabelSize } from './label/vi-label.js';
 //# sourceMappingURL=index.d.ts.map

package/index.js

@@ -23,3 +23,8 @@ export { ViSwitch } from './switch/vi-switch.js';
 export { ViSelect } from './select/vi-select.js';
 export { ViSelectOption } from './select/vi-select-option.js';
 export { ViSelectGroup } from './select/vi-select-group.js';
+export { ViCombobox } from './combobox/vi-combobox.js';
+export { ViComboboxItem } from './combobox/vi-combobox-item.js';
+export { VIALIQ_CHANGE, ViDatePicker } from './date-picker/vi-date-picker.js';
+export { ViDatePickerInput } from './date-picker/vi-date-picker-input.js';
+export { ViLabel } from './label/vi-label.js';

package/input/vi-input.js

@@ -5,7 +5,7 @@ import { V as ValidityMixin } from '../validity-mixin-DO0ycRH2.js';
 import { V as ViElement } from '../vi-element-C6GfDPs3.js';
 import { i as ifNonEmpty } from '../if-non-empty-DX8UGa-B.js';
 
-const inputStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.input-field{display:flex;flex-direction:column;gap:var(--vi-input-spacing-field-gap, var(--vi-spacing-xs, 8px));width:100%}.input-control{appearance:none;-webkit-appearance:none;display:block;width:100%;box-sizing:border-box;min-height:var(--vi-input-sizing-min-height, 40px);border:var(--vi-border-width-thin, 1px) solid var(--vi-input-border-color, var(--vi-outline, #e5e7eb));border-radius:var(--vi-input-shape-border-radius, var(--vi-border-radius-lg, 8px));padding:var(--vi-input-spacing-padding-block, var(--vi-spacing-xs, 8px)) var(--vi-input-spacing-padding-inline, var(--vi-spacing-sm, 16px));font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-input-typography-font-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-font-weight-normal, 400);line-height:var(--vi-input-typography-line-height, var(--vi-line-height-normal, 1.5));color:var(--vi-input-text-color, var(--vi-text-primary, #111827));background-color:var(--vi-input-background-color, var(--vi-color-background, #ffffff));transition:border-color .15s ease,box-shadow .15s ease}.input-control:hover:not(:focus-visible){border-color:var(--vi-input-border-color-hover, var(--vi-text-secondary, #4b5563))}.input-control:focus-visible,.input-control:focus{outline:var(--vi-border-width-base, 2px) solid var(--vi-input-focus-ring-color, var(--vi-focus, #3676d0));outline-offset:0;box-shadow:0 0 0 3px var(--vi-input-focus-ring-glow, var(--vi-color-blue-200, #cee6ff))}.input-control::placeholder{color:var(--vi-input-placeholder-color, var(--vi-text-secondary, #4b5563))}.input-helper{font-size:var(--vi-input-helper-size, var(--vi-font-size-xs, 12px));line-height:var(--vi-input-helper-leading, var(--vi-line-height-normal, 1.5));color:var(--vi-input-helper-color, var(--vi-text-helper, #9e9e9e))}.input-error{font-size:var(--vi-input-error-size, var(--vi-font-size-xs, 12px));line-height:var(--vi-input-error-leading, var(--vi-line-height-normal, 1.5));color:var(--vi-input-error-color, var(--vi-color-error, #ef4444))}@media(prefers-reduced-motion:reduce){.input-control{transition:none}}}:host{display:block;outline:none}:host([disabled]){opacity:.6;cursor:not-allowed;pointer-events:none}:host([status=invalid]){--vi-input-border-color: var(--vi-color-error, #ef4444);--vi-input-border-color-hover: var(--vi-color-error, #ef4444);--vi-input-focus-ring-color: var(--vi-color-error, #ef4444);--vi-input-focus-ring-glow: var(--vi-color-red-100, #ffccce);--vi-input-label-color: var(--vi-color-error, #ef4444)}:host([status=valid]){--vi-input-border-color: var(--vi-color-success, #489167);--vi-input-border-color-hover: var(--vi-color-success, #489167);--vi-input-focus-ring-color: var(--vi-color-success, #489167);--vi-input-focus-ring-glow: var(--vi-color-green-100, #e6f0eb)}.input-validation{font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-font-size-xs, 12px);line-height:var(--vi-line-height-normal, 1.5);letter-spacing:var(--vi-letter-spacing-wider, .05em);color:var(--vi-input-helper-color, var(--vi-text-helper, #9e9e9e))}.input-validation--invalid{color:var(--vi-input-error-color, var(--vi-color-error, #ef4444))}.input-validation--valid{color:var(--vi-input-success-color, var(--vi-color-success, #489167))}::slotted([slot=helper]){font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-font-size-xs, 12px);line-height:var(--vi-line-height-normal, 1.5);letter-spacing:var(--vi-letter-spacing-wider, .05em);color:var(--vi-input-helper-color, var(--vi-text-helper, #9e9e9e))}:host([size=xs]){--vi-input-spacing-padding-block: 2px;--vi-input-spacing-padding-inline: 8px;--vi-input-typography-font-size: var(--vi-font-size-xs, 12px)}:host([size=sm]){--vi-input-spacing-padding-block: 4px;--vi-input-spacing-padding-inline: 12px;--vi-input-typography-font-size: var(--vi-font-size-sm, 14px)}:host([size=lg]){--vi-input-spacing-padding-block: 12px;--vi-input-spacing-padding-inline: 20px;--vi-input-typography-font-size: var(--vi-font-size-lg, 18px)}";
+const inputStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.input-field{display:flex;flex-direction:column;gap:var(--vi-input-spacing-field-gap, var(--vi-spacing-xs, 8px));width:100%}.input-control{appearance:none;-webkit-appearance:none;display:block;width:100%;box-sizing:border-box;min-height:var(--vi-input-sizing-min-height, 40px);border:var(--vi-border-width-thin, 1px) solid var(--vi-input-border-color, var(--vi-outline, #e5e7eb));border-radius:var(--vi-input-shape-border-radius, var(--vi-border-radius-lg, 8px));padding:var(--vi-input-spacing-padding-block, var(--vi-spacing-xs, 8px)) var(--vi-input-spacing-padding-inline, var(--vi-spacing-sm, 16px));font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-input-typography-font-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-font-weight-normal, 400);line-height:var(--vi-input-typography-line-height, var(--vi-line-height-normal, 1.5));color:var(--vi-input-text-color, var(--vi-text-primary, #111827));background-color:var(--vi-input-background-color, var(--vi-color-background, #ffffff));transition:border-color .15s ease,box-shadow .15s ease}.input-control:hover:not(:focus-visible){border-color:var(--vi-input-border-color-hover, var(--vi-text-secondary, #4b5563))}.input-control:focus-visible,.input-control:focus{outline:var(--vi-border-width-base, 2px) solid var(--vi-input-focus-ring-color, var(--vi-focus, #3676d0));outline-offset:0;box-shadow:0 0 0 3px var(--vi-input-focus-ring-glow, var(--vi-color-blue-200, #cee6ff))}.input-control::placeholder{color:var(--vi-input-placeholder-color, var(--vi-text-secondary, #4b5563))}.input-control:disabled{cursor:not-allowed;background-color:var(--vi-input-bg-disabled, var(--vi-layer-disabled, #f3f4f6));color:var(--vi-input-text-disabled, var(--vi-text-disabled, #9e9e9e));border-color:var(--vi-input-border-disabled, var(--vi-border-02, #eeeeee))}.input-helper{font-size:var(--vi-input-helper-size, var(--vi-font-size-xs, 12px));line-height:var(--vi-input-helper-leading, var(--vi-line-height-normal, 1.5));color:var(--vi-input-helper-color, var(--vi-text-helper, #9e9e9e))}.input-error{font-size:var(--vi-input-error-size, var(--vi-font-size-xs, 12px));line-height:var(--vi-input-error-leading, var(--vi-line-height-normal, 1.5));color:var(--vi-input-error-color, var(--vi-color-error, #ef4444))}@media(prefers-reduced-motion:reduce){.input-control{transition:none}}}:host{display:block;outline:none}:host([disabled]){cursor:not-allowed}:host([status=invalid]){--vi-input-border-color: var(--vi-color-error, #ef4444);--vi-input-border-color-hover: var(--vi-color-error, #ef4444);--vi-input-focus-ring-color: var(--vi-color-error, #ef4444);--vi-input-focus-ring-glow: var(--vi-color-red-100, #ffccce);--vi-input-label-color: var(--vi-color-error, #ef4444)}:host([status=valid]){--vi-input-border-color: var(--vi-color-success, #489167);--vi-input-border-color-hover: var(--vi-color-success, #489167);--vi-input-focus-ring-color: var(--vi-color-success, #489167);--vi-input-focus-ring-glow: var(--vi-color-green-100, #e6f0eb)}.input-validation{font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-font-size-xs, 12px);line-height:var(--vi-line-height-normal, 1.5);letter-spacing:var(--vi-letter-spacing-wider, .05em);color:var(--vi-input-helper-color, var(--vi-text-helper, #9e9e9e))}.input-validation--invalid{color:var(--vi-input-error-color, var(--vi-color-error, #ef4444))}.input-validation--valid{color:var(--vi-input-success-color, var(--vi-color-success, #489167))}::slotted([slot=helper]){font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-font-size-xs, 12px);line-height:var(--vi-line-height-normal, 1.5);letter-spacing:var(--vi-letter-spacing-wider, .05em);color:var(--vi-input-helper-color, var(--vi-text-helper, #9e9e9e))}:host([size=xs]){--vi-input-spacing-padding-block: 2px;--vi-input-spacing-padding-inline: 8px;--vi-input-typography-font-size: var(--vi-font-size-xs, 12px)}:host([size=sm]){--vi-input-spacing-padding-block: 4px;--vi-input-spacing-padding-inline: 12px;--vi-input-typography-font-size: var(--vi-font-size-sm, 14px)}:host([size=lg]){--vi-input-spacing-padding-block: 12px;--vi-input-spacing-padding-inline: 20px;--vi-input-typography-font-size: var(--vi-font-size-lg, 18px)}";
 
 function applyDecs2203RFactory() {
     function createAddInitializerMethod(initializers, decoratorFinishedRef) {

package/{keyboard-controller-DqpJtUuK.js → keyboard-controller-D3htDhGR.js}

@@ -3,12 +3,12 @@ import { O as OverlayManager } from './overlay-manager-Ch_6fr_D.js';
 
 /**
  * FloatingController
- * 
+ *
  * A Lit Reactive Controller that manages `@floating-ui/dom` positioning logic.
- * It abstracts away the complex math and event listeners (autoUpdate) required to 
+ * It abstracts away the complex math and event listeners (autoUpdate) required to
  * keep a popup/dropdown anchored to a reference element during scrolling/resizing.
- * 
- * It also automatically registers the floating element with the `OverlayManager` 
+ *
+ * It also automatically registers the floating element with the `OverlayManager`
  * to ensure correct z-index stacking when `hoist` is true.
  */ class FloatingController {
     host;
@@ -26,7 +26,7 @@ import { O as OverlayManager } from './overlay-manager-Ch_6fr_D.js';
     /**
    * Starts the floating UI `autoUpdate` listener cycle.
    * This should be called when the popover physically opens (e.g., in `updated()`).
-   * 
+   *
    * If `hoist` is true, it also acquires a high z-index from the `OverlayManager`.
    */ start() {
         const ref = this.options.reference();
@@ -48,7 +48,7 @@ import { O as OverlayManager } from './overlay-manager-Ch_6fr_D.js';
     /**
    * Stops the floating UI `autoUpdate` listener cycle.
    * This should be called when the popover closes, or when the host component disconnects.
-   * 
+   *
    * It also releases its z-index back to the `OverlayManager`.
    */ stop() {
         if (this._cleanup) {
@@ -65,9 +65,9 @@ import { O as OverlayManager } from './overlay-manager-Ch_6fr_D.js';
     }
     /**
    * Imperatively calculates and applies the new coordinates (`x`, `y`) using Floating UI.
-   * 
-   * This method applies various CSS property resets (`margin`, `bottom`, `right`, `minWidth`) 
-   * to ensure that the base CSS of the floating element does not distort the absolute coordinates 
+   *
+   * This method applies various CSS property resets (`margin`, `bottom`, `right`, `minWidth`)
+   * to ensure that the base CSS of the floating element does not distort the absolute coordinates
    * provided by Floating UI.
    */ async updatePosition() {
         const ref = this.options.reference();
@@ -96,21 +96,23 @@ import { O as OverlayManager } from './overlay-manager-Ch_6fr_D.js';
             })
         ];
         const matchWidthVal = typeof this.options.matchWidth === 'function' ? this.options.matchWidth() : this.options.matchWidth;
-        middlewares.push(size({
-            apply: ({ rects })=>{
-                if (matchWidthVal !== false) {
-                    Object.assign(floating.style, {
-                        width: `${rects.reference.width}px`,
-                        minWidth: 'auto'
-                    });
-                } else {
-                    Object.assign(floating.style, {
-                        width: 'auto',
-                        minWidth: `${rects.reference.width}px`
-                    });
+        if (matchWidthVal !== 'none') {
+            middlewares.push(size({
+                apply: ({ rects })=>{
+                    if (matchWidthVal !== false) {
+                        Object.assign(floating.style, {
+                            width: `${rects.reference.width}px`,
+                            minWidth: 'auto'
+                        });
+                    } else {
+                        Object.assign(floating.style, {
+                            width: 'auto',
+                            minWidth: `${rects.reference.width}px`
+                        });
+                    }
                 }
-            }
-        }));
+            }));
+        }
         const { x, y, placement } = await computePosition(ref, floating, {
             placement: placementStr,
             strategy: hoist ? 'fixed' : 'absolute',

package/label/index.d.ts

@@ -0,0 +1,2 @@
+export * from './vi-label.js';
+//# sourceMappingURL=index.d.ts.map

package/label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/label/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/label/index.js

@@ -0,0 +1 @@
+export { ViLabel } from './vi-label.js';

package/label/vi-label.d.ts

@@ -0,0 +1,53 @@
+import { TemplateResult } from 'lit';
+import { ViElement } from '../base/vi-element.js';
+export type LabelSize = 'sm' | 'md' | 'lg';
+export type LabelLayout = 'stacked' | 'inline';
+export type LabelType = 'default' | 'primary' | 'secondary';
+/**
+ * `vi-label`
+ *
+ * A styled `<label>` element for associating visible text with form controls.
+ *
+ * @element vi-label
+ *
+ * @attr {string} for - ID of the associated control
+ * @attr {boolean} required - Show required `*` indicator
+ * @attr {boolean} optional - Show "(optional)" text
+ * @attr {boolean} disabled - Muted disabled styling
+ * @attr {string} size - Font size variant ('sm', 'md', 'lg')
+ *
+ * @slot - Default slot for label text
+ * @slot tooltip - Inline help icon that triggers a tooltip
+ *
+ * @csspart label - The `<label>` element
+ * @csspart required-indicator - The `*` asterisk `<span>`
+ * @csspart optional-indicator - The "(optional)" `<span>`
+ * @csspart tooltip-trigger - Tooltip icon wrapper
+ */
+export declare class ViLabel extends ViElement {
+    static styles: import('lit').CSSResult;
+    /** ID of the associated control */
+    accessor for: string;
+    /** Show required `*` indicator */
+    accessor required: boolean;
+    /** Show "(optional)" text */
+    accessor optional: boolean;
+    /** Muted disabled styling */
+    accessor disabled: boolean;
+    /** Font size variant */
+    accessor size: LabelSize;
+    /** Layout spacing behavior */
+    accessor layout: LabelLayout;
+    /** Semantic text color */
+    accessor type: LabelType;
+    private _hasTooltip;
+    private _handleSlotChange;
+    private _handleClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vi-label': ViLabel;
+    }
+}
+//# sourceMappingURL=vi-label.d.ts.map

package/label/vi-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vi-label.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/label/vi-label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzE,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,0BAEpB;IAEF,mCAAmC;IACP,QAAQ,CAAC,GAAG,SAAM;IAE9C,kCAAkC;IACL,QAAQ,CAAC,QAAQ,UAAS;IAEvD,6BAA6B;IACA,QAAQ,CAAC,QAAQ,UAAS;IAEvD,6BAA6B;IACe,QAAQ,CAAC,QAAQ,UAAS;IAEtE,wBAAwB;IACI,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAQ;IAE5D,8BAA8B;IACa,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAa;IAEpF,0BAA0B;IACiB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAa;IAEhF,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,YAAY;IAeX,MAAM,IAAI,cAAc;CA6BlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}