@vialiq/web-components 0.21.0 → 0.22.0

package/index.d.ts

@@ -46,4 +46,6 @@ 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

@@ -27,3 +27,4 @@ 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/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"}

package/label/vi-label.js

@@ -0,0 +1,552 @@
+import { unsafeCSS, css, nothing, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { V as ViElement } from '../vi-element-C6GfDPs3.js';
+
+const labelStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.vi-label{--vi-label-font-size: var(--vi-font-size-sm, var(--vi-font-size-sm, 14px));--vi-label-font-weight: var(--vi-font-weight-medium, var(--vi-font-weight-medium, 500));--vi-label-color: var(--vi-text-primary, var(--vi-text-primary, #111827));--vi-label-color-disabled: var(--vi-text-disabled, var(--vi-text-disabled, #9e9e9e));--vi-label-required-color: var(--vi-color-error, var(--vi-color-error, #ef4444));--vi-label-optional-color: var(--vi-text-helper, var(--vi-text-helper, #9e9e9e));--vi-label-gap: 4px}.vi-label{display:inline-flex;align-items:center;gap:var(--vi-label-gap);font-size:var(--vi-label-font-size);font-weight:var(--vi-label-font-weight);color:var(--vi-label-color);line-height:1.5;margin:0}.vi-label.size-sm{--vi-label-font-size: var(--vi-font-size-xs, var(--vi-font-size-xs, 12px))}.vi-label.size-lg{--vi-label-font-size: var(--vi-font-size-base, var(--vi-font-size-base, 16px))}.vi-label.is-disabled{color:var(--vi-label-color-disabled);cursor:default}.vi-label-required{color:var(--vi-label-required-color)}.vi-label-optional{color:var(--vi-label-optional-color);font-weight:400}}:host{vertical-align:middle}:host([layout=stacked]){display:block;margin-bottom:var(--vi-label-margin-bottom, 8px)}:host([layout=inline]){display:inline-flex;align-items:center;margin-right:var(--vi-label-margin-inline, 12px);margin-bottom:0}:host([type=primary]) .vi-label{--vi-label-color: var(--vi-color-text-primary, var(--vi-text-primary, #111827))}:host([type=secondary]) .vi-label{--vi-label-color: var(--vi-color-text-secondary, var(--vi-text-secondary, #4b5563))}";
+
+function applyDecs2203RFactory() {
+    function createAddInitializerMethod(initializers, decoratorFinishedRef) {
+        return function addInitializer(initializer) {
+            assertNotFinished(decoratorFinishedRef, "addInitializer");
+            assertCallable(initializer, "An initializer");
+            initializers.push(initializer);
+        };
+    }
+    function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value) {
+        var kindStr;
+        switch(kind){
+            case 1:
+                kindStr = "accessor";
+                break;
+            case 2:
+                kindStr = "method";
+                break;
+            case 3:
+                kindStr = "getter";
+                break;
+            case 4:
+                kindStr = "setter";
+                break;
+            default:
+                kindStr = "field";
+        }
+        var ctx = {
+            kind: kindStr,
+            name: isPrivate ? "#" + name : name,
+            static: isStatic,
+            private: isPrivate,
+            metadata: metadata
+        };
+        var decoratorFinishedRef = {
+            v: false
+        };
+        ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef);
+        var get, set;
+        if (kind === 0) {
+            if (isPrivate) {
+                get = desc.get;
+                set = desc.set;
+            } else {
+                get = function() {
+                    return this[name];
+                };
+                set = function(v) {
+                    this[name] = v;
+                };
+            }
+        } else if (kind === 2) {
+            get = function() {
+                return desc.value;
+            };
+        } else {
+            if (kind === 1 || kind === 3) {
+                get = function() {
+                    return desc.get.call(this);
+                };
+            }
+            if (kind === 1 || kind === 4) {
+                set = function(v) {
+                    desc.set.call(this, v);
+                };
+            }
+        }
+        ctx.access = get && set ? {
+            get: get,
+            set: set
+        } : get ? {
+            get: get
+        } : {
+            set: set
+        };
+        try {
+            return dec(value, ctx);
+        } finally{
+            decoratorFinishedRef.v = true;
+        }
+    }
+    function assertNotFinished(decoratorFinishedRef, fnName) {
+        if (decoratorFinishedRef.v) {
+            throw new Error("attempted to call " + fnName + " after decoration was finished");
+        }
+    }
+    function assertCallable(fn, hint) {
+        if (typeof fn !== "function") {
+            throw new TypeError(hint + " must be a function");
+        }
+    }
+    function assertValidReturnValue(kind, value) {
+        var type = typeof value;
+        if (kind === 1) {
+            if (type !== "object" || value === null) {
+                throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+            }
+            if (value.get !== undefined) {
+                assertCallable(value.get, "accessor.get");
+            }
+            if (value.set !== undefined) {
+                assertCallable(value.set, "accessor.set");
+            }
+            if (value.init !== undefined) {
+                assertCallable(value.init, "accessor.init");
+            }
+        } else if (type !== "function") {
+            var hint;
+            if (kind === 0) {
+                hint = "field";
+            } else if (kind === 10) {
+                hint = "class";
+            } else {
+                hint = "method";
+            }
+            throw new TypeError(hint + " decorators must return a function or void 0");
+        }
+    }
+    function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata) {
+        var decs = decInfo[0];
+        var desc, init, value;
+        if (isPrivate) {
+            if (kind === 0 || kind === 1) {
+                desc = {
+                    get: decInfo[3],
+                    set: decInfo[4]
+                };
+            } else if (kind === 3) {
+                desc = {
+                    get: decInfo[3]
+                };
+            } else if (kind === 4) {
+                desc = {
+                    set: decInfo[3]
+                };
+            } else {
+                desc = {
+                    value: decInfo[3]
+                };
+            }
+        } else if (kind !== 0) {
+            desc = Object.getOwnPropertyDescriptor(base, name);
+        }
+        if (kind === 1) {
+            value = {
+                get: desc.get,
+                set: desc.set
+            };
+        } else if (kind === 2) {
+            value = desc.value;
+        } else if (kind === 3) {
+            value = desc.get;
+        } else if (kind === 4) {
+            value = desc.set;
+        }
+        var newValue, get, set;
+        if (typeof decs === "function") {
+            newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
+            if (newValue !== void 0) {
+                assertValidReturnValue(kind, newValue);
+                if (kind === 0) {
+                    init = newValue;
+                } else if (kind === 1) {
+                    init = newValue.init;
+                    get = newValue.get || value.get;
+                    set = newValue.set || value.set;
+                    value = {
+                        get: get,
+                        set: set
+                    };
+                } else {
+                    value = newValue;
+                }
+            }
+        } else {
+            for(var i = decs.length - 1; i >= 0; i--){
+                var dec = decs[i];
+                newValue = memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
+                if (newValue !== void 0) {
+                    assertValidReturnValue(kind, newValue);
+                    var newInit;
+                    if (kind === 0) {
+                        newInit = newValue;
+                    } else if (kind === 1) {
+                        newInit = newValue.init;
+                        get = newValue.get || value.get;
+                        set = newValue.set || value.set;
+                        value = {
+                            get: get,
+                            set: set
+                        };
+                    } else {
+                        value = newValue;
+                    }
+                    if (newInit !== void 0) {
+                        if (init === void 0) {
+                            init = newInit;
+                        } else if (typeof init === "function") {
+                            init = [
+                                init,
+                                newInit
+                            ];
+                        } else {
+                            init.push(newInit);
+                        }
+                    }
+                }
+            }
+        }
+        if (kind === 0 || kind === 1) {
+            if (init === void 0) {
+                init = function(instance, init) {
+                    return init;
+                };
+            } else if (typeof init !== "function") {
+                var ownInitializers = init;
+                init = function(instance, init) {
+                    var value = init;
+                    for(var i = 0; i < ownInitializers.length; i++){
+                        value = ownInitializers[i].call(instance, value);
+                    }
+                    return value;
+                };
+            } else {
+                var originalInitializer = init;
+                init = function(instance, init) {
+                    return originalInitializer.call(instance, init);
+                };
+            }
+            ret.push(init);
+        }
+        if (kind !== 0) {
+            if (kind === 1) {
+                desc.get = value.get;
+                desc.set = value.set;
+            } else if (kind === 2) {
+                desc.value = value;
+            } else if (kind === 3) {
+                desc.get = value;
+            } else if (kind === 4) {
+                desc.set = value;
+            }
+            if (isPrivate) {
+                if (kind === 1) {
+                    ret.push(function(instance, args) {
+                        return value.get.call(instance, args);
+                    });
+                    ret.push(function(instance, args) {
+                        return value.set.call(instance, args);
+                    });
+                } else if (kind === 2) {
+                    ret.push(value);
+                } else {
+                    ret.push(function(instance, args) {
+                        return value.call(instance, args);
+                    });
+                }
+            } else {
+                Object.defineProperty(base, name, desc);
+            }
+        }
+    }
+    function applyMemberDecs(Class, decInfos, metadata) {
+        var ret = [];
+        var protoInitializers;
+        var staticInitializers;
+        var existingProtoNonFields = new Map();
+        var existingStaticNonFields = new Map();
+        for(var i = 0; i < decInfos.length; i++){
+            var decInfo = decInfos[i];
+            if (!Array.isArray(decInfo)) continue;
+            var kind = decInfo[1];
+            var name = decInfo[2];
+            var isPrivate = decInfo.length > 3;
+            var isStatic = kind >= 5;
+            var base;
+            var initializers;
+            if (isStatic) {
+                base = Class;
+                kind = kind - 5;
+                staticInitializers = staticInitializers || [];
+                initializers = staticInitializers;
+            } else {
+                base = Class.prototype;
+                protoInitializers = protoInitializers || [];
+                initializers = protoInitializers;
+            }
+            if (kind !== 0 && !isPrivate) {
+                var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields;
+                var existingKind = existingNonFields.get(name) || 0;
+                if (existingKind === true || existingKind === 3 && kind !== 4 || existingKind === 4 && kind !== 3) {
+                    throw new Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + name);
+                } else if (!existingKind && kind > 2) {
+                    existingNonFields.set(name, kind);
+                } else {
+                    existingNonFields.set(name, true);
+                }
+            }
+            applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata);
+        }
+        pushInitializers(ret, protoInitializers);
+        pushInitializers(ret, staticInitializers);
+        return ret;
+    }
+    function pushInitializers(ret, initializers) {
+        if (initializers) {
+            ret.push(function(instance) {
+                for(var i = 0; i < initializers.length; i++){
+                    initializers[i].call(instance);
+                }
+                return instance;
+            });
+        }
+    }
+    function applyClassDecs(targetClass, classDecs, metadata) {
+        if (classDecs.length > 0) {
+            var initializers = [];
+            var newClass = targetClass;
+            var name = targetClass.name;
+            for(var i = classDecs.length - 1; i >= 0; i--){
+                var decoratorFinishedRef = {
+                    v: false
+                };
+                try {
+                    var nextNewClass = classDecs[i](newClass, {
+                        kind: "class",
+                        name: name,
+                        addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef),
+                        metadata
+                    });
+                } finally{
+                    decoratorFinishedRef.v = true;
+                }
+                if (nextNewClass !== undefined) {
+                    assertValidReturnValue(10, nextNewClass);
+                    newClass = nextNewClass;
+                }
+            }
+            return [
+                defineMetadata(newClass, metadata),
+                function() {
+                    for(var i = 0; i < initializers.length; i++){
+                        initializers[i].call(newClass);
+                    }
+                }
+            ];
+        }
+    }
+    function defineMetadata(Class, metadata) {
+        return Object.defineProperty(Class, Symbol.metadata || Symbol.for("Symbol.metadata"), {
+            configurable: true,
+            enumerable: true,
+            value: metadata
+        });
+    }
+    return function applyDecs2203R(targetClass, memberDecs, classDecs, parentClass) {
+        if (parentClass !== void 0) {
+            var parentMetadata = parentClass[Symbol.metadata || Symbol.for("Symbol.metadata")];
+        }
+        var metadata = Object.create(parentMetadata === void 0 ? null : parentMetadata);
+        var e = applyMemberDecs(targetClass, memberDecs, metadata);
+        if (!classDecs.length) defineMetadata(targetClass, metadata);
+        return {
+            e: e,
+            get c () {
+                return applyClassDecs(targetClass, classDecs, metadata);
+            }
+        };
+    };
+}
+function _apply_decs_2203_r(targetClass, memberDecs, classDecs, parentClass) {
+    return (_apply_decs_2203_r = applyDecs2203RFactory())(targetClass, memberDecs, classDecs, parentClass);
+}
+function _identity(x) {
+    return x;
+}
+var _dec, _initClass, _ViElement, _dec1, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, /** ID of the associated control */ _init_for, /** Show required `*` indicator */ _init_required, /** Show "(optional)" text */ _init_optional, /** Muted disabled styling */ _init_disabled, /** Font size variant */ _init_size, /** Layout spacing behavior */ _init_layout, /** Semantic text color */ _init_type, _initProto;
+let _ViLabel;
+_dec = customElement('vi-label'), _dec1 = property({
+    type: String
+}), _dec2 = property({
+    type: Boolean
+}), _dec3 = property({
+    type: Boolean
+}), _dec4 = property({
+    type: Boolean,
+    reflect: true
+}), _dec5 = property({
+    type: String
+}), _dec6 = property({
+    type: String,
+    reflect: true
+}), _dec7 = property({
+    type: String,
+    reflect: true
+});
+new class extends _identity {
+    constructor(){
+        super(_ViLabel), _initClass();
+    }
+    static{
+        class ViLabel extends (_ViElement = ViElement) {
+            static{
+                ({ e: [_init_for, _init_required, _init_optional, _init_disabled, _init_size, _init_layout, _init_type, _initProto], c: [_ViLabel, _initClass] } = _apply_decs_2203_r(this, [
+                    [
+                        _dec1,
+                        1,
+                        "for"
+                    ],
+                    [
+                        _dec2,
+                        1,
+                        "required"
+                    ],
+                    [
+                        _dec3,
+                        1,
+                        "optional"
+                    ],
+                    [
+                        _dec4,
+                        1,
+                        "disabled"
+                    ],
+                    [
+                        _dec5,
+                        1,
+                        "size"
+                    ],
+                    [
+                        _dec6,
+                        1,
+                        "layout"
+                    ],
+                    [
+                        _dec7,
+                        1,
+                        "type"
+                    ]
+                ], [
+                    _dec
+                ], _ViElement));
+            }
+            static styles = css`
+    ${unsafeCSS(labelStyles)}
+  `;
+            #___private_for_1 = (_initProto(this), _init_for(this, ''));
+            get for() {
+                return this.#___private_for_1;
+            }
+            set for(_v) {
+                this.#___private_for_1 = _v;
+            }
+            #___private_required_2 = _init_required(this, false);
+            get required() {
+                return this.#___private_required_2;
+            }
+            set required(_v) {
+                this.#___private_required_2 = _v;
+            }
+            #___private_optional_3 = _init_optional(this, false);
+            get optional() {
+                return this.#___private_optional_3;
+            }
+            set optional(_v) {
+                this.#___private_optional_3 = _v;
+            }
+            #___private_disabled_4 = _init_disabled(this, false);
+            get disabled() {
+                return this.#___private_disabled_4;
+            }
+            set disabled(_v) {
+                this.#___private_disabled_4 = _v;
+            }
+            #___private_size_5 = _init_size(this, 'md');
+            get size() {
+                return this.#___private_size_5;
+            }
+            set size(_v) {
+                this.#___private_size_5 = _v;
+            }
+            #___private_layout_6 = _init_layout(this, 'stacked');
+            get layout() {
+                return this.#___private_layout_6;
+            }
+            set layout(_v) {
+                this.#___private_layout_6 = _v;
+            }
+            #___private_type_7 = _init_type(this, 'default');
+            get type() {
+                return this.#___private_type_7;
+            }
+            set type(_v) {
+                this.#___private_type_7 = _v;
+            }
+            _hasTooltip = false;
+            _handleSlotChange(e) {
+                const slot = e.target;
+                const nodes = slot.assignedNodes({
+                    flatten: true
+                });
+                this._hasTooltip = nodes.some((node)=>node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim()));
+                this.requestUpdate();
+            }
+            _handleClick(e) {
+                if (this.disabled || !this.for) return;
+                e.preventDefault();
+                // Cross shadow boundary workaround
+                const rootNode = this.getRootNode();
+                const target = rootNode.getElementById(this.for);
+                if (target) {
+                    target.focus();
+                    if ('click' in target && typeof target.click === 'function') {
+                        target.click();
+                    }
+                }
+            }
+            render() {
+                const classes = {
+                    'vi-label': true,
+                    [`size-${this.size}`]: true,
+                    'is-disabled': this.disabled
+                };
+                return html`
+      <label part="label" class=${classMap(classes)} for=${this.for || nothing} @click=${this._handleClick}>
+        <slot></slot>
+
+        ${this.required ? html`
+              <span part="required-indicator" class="vi-label-required" aria-hidden="true">*</span>
+            ` : nothing}
+
+        ${this.optional && !this.required ? html`
+              <span part="optional-indicator" class="vi-label-optional">(optional)</span>
+            ` : nothing}
+
+        <span part="tooltip-trigger" style=${!this._hasTooltip ? 'display: none;' : nothing}>
+          <slot name="tooltip" @slotchange=${this._handleSlotChange}></slot>
+        </span>
+      </label>
+    `;
+            }
+        }
+    }
+}();
+
+export { _ViLabel as ViLabel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vialiq/web-components",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -111,12 +111,20 @@
     "./date-picker/vi-date-picker-input": {
       "types": "./date-picker/vi-date-picker-input.d.ts",
       "default": "./date-picker/vi-date-picker-input.js"
+    },
+    "./label": {
+      "types": "./label/index.d.ts",
+      "default": "./label/index.js"
+    },
+    "./label/vi-label": {
+      "types": "./label/vi-label.d.ts",
+      "default": "./label/vi-label.js"
     }
   },
   "peerDependencies": {
     "@floating-ui/dom": ">=1.0.0",
-    "@vialiq/flux-ui": "^0.17.0",
-    "@vialiq/icons": "^0.4.0",
+    "@vialiq/flux-ui": "^0.18.0",
+    "@vialiq/icons": "^0.4.1",
     "flatpickr": ">=4.6.0",
     "lit": "^3.0.0"
   },
@@ -140,6 +148,7 @@
     "tooltip/",
     "badge/",
     "date-picker/",
+    "label/",
     "README.md"
   ],
   "peerDependenciesMeta": {