@vialiq/web-components 0.4.0 → 0.6.0

package/if-non-empty-DX8UGa-B.js

@@ -0,0 +1,64 @@
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+/**
+ * ifNonEmpty — conditional attribute directive
+ *
+ * A wrapper around Lit's `ifDefined` that additionally removes the attribute
+ * when the value is an empty string. Use this for every optional string
+ * attribute on inner native elements where `""` and "absent" have different
+ * meaning for browsers and screen readers.
+ *
+ * Problem with raw `ifDefined`:
+ *   - `ifDefined(undefined)` → removes the attribute          ✅
+ *   - `ifDefined(null)`      → removes the attribute          ✅
+ *   - `ifDefined('')`        → sets attribute to ""            ❌
+ *
+ * With `ifNonEmpty`:
+ *   - `ifNonEmpty(undefined)` → removes the attribute         ✅
+ *   - `ifNonEmpty(null)`      → removes the attribute         ✅
+ *   - `ifNonEmpty('')`        → removes the attribute         ✅
+ *   - `ifNonEmpty('hello')`   → sets attribute to "hello"     ✅
+ *
+ * Why it matters — real screen reader / browser bugs caused by `=""`:
+ *   - `placeholder=""`   → JAWS/NVDA still announce it as an empty placeholder
+ *   - `aria-label=""`    → NVDA reads "blank" instead of deriving the name elsewhere
+ *   - `aria-describedby=""`→ browsers may still look for id="" element
+ *   - `title=""`         → browsers show an empty tooltip on hover in some engines
+ *
+ * ---
+ *
+ * USAGE
+ *
+ * Import in any shadow template that has optional string attributes:
+ *
+ *   import { ifNonEmpty } from '../base/if-non-empty.js';
+ *
+ * In the template:
+ *
+ *   // ✅ Use ifNonEmpty for optional string attributes on inner native elements
+ *   <input
+ *     placeholder=${ifNonEmpty(this.placeholder)}
+ *     aria-label=${ifNonEmpty(this.label)}
+ *     aria-describedby=${ifNonEmpty(this._descriptionId)}
+ *   />
+ *
+ *   // ❌ Do NOT use for boolean attributes — Lit has ?attr=${bool} for that
+ *   // ❌ Do NOT use for property bindings — Lit has .prop=${val} for that
+ *   // ❌ Do NOT use for event bindings — Lit has @event=${handler} for that
+ *
+ * ---
+ *
+ * WHEN TO USE vs NOT USE
+ *
+ *   Use ifNonEmpty when:
+ *     - The attribute is optional (component has a prop that defaults to '')
+ *     - The inner native element is a standard HTML element (input, button, a, etc.)
+ *     - The attribute has accessibility or UI meaning when absent vs present
+ *
+ *   Skip ifNonEmpty when:
+ *     - The attribute is always required (e.g. type="button" is never absent)
+ *     - You need the attribute to literally be "" (rare, document when intentional)
+ *     - The binding is to a custom element property — use .prop=${val} instead
+ */ const ifNonEmpty = (value)=>ifDefined(value === '' ? undefined : value ?? undefined);
+
+export { ifNonEmpty as i };

package/index.d.ts

@@ -2,7 +2,7 @@ export { ViElement } from './base/vi-element.js';
 export type { ViSize, ViStatus } from './base/vi-element.js';
 export type { ControlStatus } from './base/validity-mixin.js';
 export { ViButton } from './button/vi-button.js';
-export type { ButtonVariant, ButtonSize, ButtonIconPlacement } from './button/vi-button.js';
+export type { ButtonVariant, ButtonSize, ButtonIconPlacement, } from './button/vi-button.js';
 export { ViInput } from './input/vi-input.js';
 export type { InputType, InputSize } from './input/vi-input.js';
 export { ViIcon } from './icons/vi-icon.js';
@@ -14,4 +14,8 @@ export { ViRadioGroup } from './radio/vi-radio-group.js';
 export type { RadioGroupOrientation } from './radio/vi-radio-group.js';
 export { ViCheckbox } from './checkbox/vi-checkbox.js';
 export type { CheckboxSize } from './checkbox/vi-checkbox.js';
+export { ViTooltip } from './tooltip/vi-tooltip.js';
+export type { TooltipPlacement, TooltipTrigger } from './tooltip/vi-tooltip.js';
+export { ViTextarea } from './textarea/vi-textarea.js';
+export type { TextareaResize } from './textarea/vi-textarea.js';
 //# sourceMappingURL=index.d.ts.map

package/index.js

@@ -6,3 +6,5 @@ export { getIcon, registerIcons } from './icons/registry.js';
 export { ViRadio } from './radio/vi-radio.js';
 export { ViRadioGroup } from './radio/vi-radio-group.js';
 export { ViCheckbox } from './checkbox/vi-checkbox.js';
+export { ViTooltip } from './tooltip/vi-tooltip.js';
+export { ViTextarea } from './textarea/vi-textarea.js';

package/input/index.js

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

package/input/vi-input.d.ts

@@ -71,6 +71,10 @@ export declare class ViInput extends ViInput_base {
     accessor size: InputSize;
     /** When true, the value cannot be edited but is still submitted. */
     accessor readonly: boolean;
+    /** The accessibility label. */
+    accessor ariaLabel: string;
+    /** Reference to an element id containing the label. */
+    accessor ariaLabelledby: string;
     protected _testValidity(): Partial<ValidityStateFlags>;
     updated(changed: PropertyValues): void;
     /** Resets value and validation state when the associated form resets. */

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

@@ -1 +1 @@
-{"version":3,"file":"vi-input.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/input/vi-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,OAAO,GACP,UAAU,GACV,QAAQ,GACR,KAAK,GACL,KAAK,GACL,QAAQ,CAAC;AAEb,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,OAAQ,SAAQ,YAAwC;IACnE,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAgB,MAAM,0BAEpB;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,mBAA0B;IAEvD,cAAuB,iBAAiB,IAAI,gBAAgB,GAAG,IAAI,CAElE;IAI4B,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAa;IAC5B,QAAQ,CAAC,QAAQ,UAAS;IAC1D,QAAQ,CAAC,eAAe,SAAM;IAI1C,uFAAuF;IAC5C,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAU;IAE7E,qCAAqC;IACzB,QAAQ,CAAC,WAAW,SAAM;IAEtC,yDAAyD;IAC7C,QAAQ,CAAC,IAAI,SAAM;IAE/B,wEAAwE;IAC5D,QAAQ,CAAC,KAAK,SAAM;IAEhC,uEAAuE;IAC3B,QAAQ,CAAC,QAAQ,UAAS;IAEtE,mDAAmD;IACR,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAQ;IAE3E,oEAAoE;IACxB,QAAQ,CAAC,QAAQ,UAAS;IAOtE,SAAS,CAAC,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;IAmC7C,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAU/C,yEAAyE;IACzE,iBAAiB,IAAI,IAAI;IAMzB,6EAA6E;IAC7E,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAM7C,OAAO,CAAC,QAAQ;IAahB,OAAO,CAAC,SAAS;IAejB,OAAO,KAAK,cAAc,GAIzB;IAED,OAAO,KAAK,kBAAkB,GAgB7B;IAEQ,MAAM,IAAI,cAAc;CAkClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"vi-input.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/input/vi-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,OAAO,GACP,UAAU,GACV,QAAQ,GACR,KAAK,GACL,KAAK,GACL,QAAQ,CAAC;AAEb,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,OAAQ,SAAQ,YAAwC;IACnE,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAgB,MAAM,0BAEpB;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,mBAA0B;IAEvD,cAAuB,iBAAiB,IAAI,gBAAgB,GAAG,IAAI,CAElE;IAI4B,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAa;IAC5B,QAAQ,CAAC,QAAQ,UAAS;IAC1D,QAAQ,CAAC,eAAe,SAAM;IAI1C,uFAAuF;IAC5C,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAU;IAE7E,qCAAqC;IACzB,QAAQ,CAAC,WAAW,SAAM;IAEtC,yDAAyD;IAC7C,QAAQ,CAAC,IAAI,SAAM;IAE/B,wEAAwE;IAC5D,QAAQ,CAAC,KAAK,SAAM;IAEhC,uEAAuE;IAC3B,QAAQ,CAAC,QAAQ,UAAS;IAEtE,mDAAmD;IACR,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAQ;IAE3E,oEAAoE;IACxB,QAAQ,CAAC,QAAQ,UAAS;IAEtE,+BAA+B;IACQ,QAAQ,CAAC,SAAS,SAAM;IAE/D,uDAAuD;IACX,QAAQ,CAAC,cAAc,SAAM;IAOzE,SAAS,CAAC,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;IAqC7C,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAU/C,yEAAyE;IACzE,iBAAiB,IAAI,IAAI;IAMzB,6EAA6E;IAC7E,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAM7C,OAAO,CAAC,QAAQ;IAahB,OAAO,CAAC,SAAS;IAejB,OAAO,KAAK,cAAc,GAIzB;IAED,OAAO,KAAK,kBAAkB,GAgB7B;IAEQ,MAAM,IAAI,cAAc;CAoClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/input/vi-input.js

@@ -3,70 +3,9 @@ import { customElement, property } from 'lit/decorators.js';
 import { F as FocusableMixin } from '../focusable-mixin-CmxOyPX5.js';
 import { V as ValidityMixin } from '../validity-mixin-BjmXwgWk.js';
 import { V as ViElement } from '../vi-element-C6GfDPs3.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
+import { i as ifNonEmpty } from '../if-non-empty-DX8UGa-B.js';
 
-/**
- * ifNonEmpty — conditional attribute directive
- *
- * A wrapper around Lit's `ifDefined` that additionally removes the attribute
- * when the value is an empty string. Use this for every optional string
- * attribute on inner native elements where `""` and "absent" have different
- * meaning for browsers and screen readers.
- *
- * Problem with raw `ifDefined`:
- *   - `ifDefined(undefined)` → removes the attribute          ✅
- *   - `ifDefined(null)`      → removes the attribute          ✅
- *   - `ifDefined('')`        → sets attribute to ""            ❌
- *
- * With `ifNonEmpty`:
- *   - `ifNonEmpty(undefined)` → removes the attribute         ✅
- *   - `ifNonEmpty(null)`      → removes the attribute         ✅
- *   - `ifNonEmpty('')`        → removes the attribute         ✅
- *   - `ifNonEmpty('hello')`   → sets attribute to "hello"     ✅
- *
- * Why it matters — real screen reader / browser bugs caused by `=""`:
- *   - `placeholder=""`   → JAWS/NVDA still announce it as an empty placeholder
- *   - `aria-label=""`    → NVDA reads "blank" instead of deriving the name elsewhere
- *   - `aria-describedby=""`→ browsers may still look for id="" element
- *   - `title=""`         → browsers show an empty tooltip on hover in some engines
- *
- * ---
- *
- * USAGE
- *
- * Import in any shadow template that has optional string attributes:
- *
- *   import { ifNonEmpty } from '../base/if-non-empty.js';
- *
- * In the template:
- *
- *   // ✅ Use ifNonEmpty for optional string attributes on inner native elements
- *   <input
- *     placeholder=${ifNonEmpty(this.placeholder)}
- *     aria-label=${ifNonEmpty(this.label)}
- *     aria-describedby=${ifNonEmpty(this._descriptionId)}
- *   />
- *
- *   // ❌ Do NOT use for boolean attributes — Lit has ?attr=${bool} for that
- *   // ❌ Do NOT use for property bindings — Lit has .prop=${val} for that
- *   // ❌ Do NOT use for event bindings — Lit has @event=${handler} for that
- *
- * ---
- *
- * WHEN TO USE vs NOT USE
- *
- *   Use ifNonEmpty when:
- *     - The attribute is optional (component has a prop that defaults to '')
- *     - The inner native element is a standard HTML element (input, button, a, etc.)
- *     - The attribute has accessibility or UI meaning when absent vs present
- *
- *   Skip ifNonEmpty when:
- *     - The attribute is always required (e.g. type="button" is never absent)
- *     - You need the attribute to literally be "" (rare, document when intentional)
- *     - The binding is to a custom element property — use .prop=${val} instead
- */ const ifNonEmpty = (value)=>ifDefined(value === '' ? undefined : value ?? undefined);
-
-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-color-grey-300, #e0e0e0));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-color-foreground, #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-color-grey-500, #9e9e9e))}.input-control:focus-visible,.input-control:focus{outline:var(--vi-border-width-base, 2px) solid var(--vi-input-focus-ring-color, var(--vi-color-primary, #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-color-grey-500, #9e9e9e))}.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-color-grey-500, #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-color-grey-500, #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-color-grey-500, #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-color-grey-300, #e0e0e0));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-color-foreground, #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-color-grey-500, #9e9e9e))}.input-control:focus-visible,.input-control:focus{outline:var(--vi-border-width-base, 2px) solid var(--vi-input-focus-ring-color, var(--vi-color-primary, #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-color-grey-500, #9e9e9e))}.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)}";
 
 function applyDecs2203RFactory() {
     function createAddInitializerMethod(initializers, decoratorFinishedRef) {
@@ -443,9 +382,9 @@ function _apply_decs_2203_r(targetClass, memberDecs, classDecs, parentClass) {
 function _identity(x) {
     return x;
 }
-var _dec, _initClass, _ValidityMixin, _dec1, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _dec10, // ── ValidityMixin contract — must be declared as @property —————————————
+var _dec, _initClass, _ValidityMixin, _dec1, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _dec10, _dec11, _dec12, // ── ValidityMixin contract — must be declared as @property —————————————
 _init_status, _init_required, _init_validityMessage, // ── Public API ─────────────────────────────────────────────────────────────
-/** Input type. Controls the keyboard/picker on mobile and browser validation hints. */ _init_type, /** Native input placeholder text. */ _init_placeholder, /** Form field name. Submitted with the form when set. */ _init_name, /** Current value. Synced to ElementInternals for form participation. */ _init_value, /** When true, disables the input and removes it from the tab order. */ _init_disabled, /** Size scale — controls padding and font-size. */ _init_size, /** When true, the value cannot be edited but is still submitted. */ _init_readonly, _initProto;
+/** Input type. Controls the keyboard/picker on mobile and browser validation hints. */ _init_type, /** Native input placeholder text. */ _init_placeholder, /** Form field name. Submitted with the form when set. */ _init_name, /** Current value. Synced to ElementInternals for form participation. */ _init_value, /** When true, disables the input and removes it from the tab order. */ _init_disabled, /** Size scale — controls padding and font-size. */ _init_size, /** When true, the value cannot be edited but is still submitted. */ _init_readonly, /** The accessibility label. */ _init_ariaLabel, /** Reference to an element id containing the label. */ _init_ariaLabelledby, _initProto;
 let _ViInput;
 _dec = customElement('vi-input'), _dec1 = property({
     reflect: true
@@ -464,6 +403,10 @@ _dec = customElement('vi-input'), _dec1 = property({
 }), _dec10 = property({
     type: Boolean,
     reflect: true
+}), _dec11 = property({
+    attribute: 'aria-label'
+}), _dec12 = property({
+    attribute: 'aria-labelledby'
 });
 new class extends _identity {
     constructor(){
@@ -472,7 +415,7 @@ new class extends _identity {
     static{
         class ViInput extends (_ValidityMixin = ValidityMixin(FocusableMixin(ViElement))) {
             static{
-                ({ e: [_init_status, _init_required, _init_validityMessage, _init_type, _init_placeholder, _init_name, _init_value, _init_disabled, _init_size, _init_readonly, _initProto], c: [_ViInput, _initClass] } = _apply_decs_2203_r(this, [
+                ({ e: [_init_status, _init_required, _init_validityMessage, _init_type, _init_placeholder, _init_name, _init_value, _init_disabled, _init_size, _init_readonly, _init_ariaLabel, _init_ariaLabelledby, _initProto], c: [_ViInput, _initClass] } = _apply_decs_2203_r(this, [
                     [
                         _dec1,
                         1,
@@ -522,6 +465,16 @@ new class extends _identity {
                         _dec10,
                         1,
                         "readonly"
+                    ],
+                    [
+                        _dec11,
+                        1,
+                        "ariaLabel"
+                    ],
+                    [
+                        _dec12,
+                        1,
+                        "ariaLabelledby"
                     ]
                 ], [
                     _dec
@@ -605,6 +558,20 @@ new class extends _identity {
             set readonly(_v) {
                 this.#___private_readonly_10 = _v;
             }
+            #___private_ariaLabel_11 = _init_ariaLabel(this, '');
+            get ariaLabel() {
+                return this.#___private_ariaLabel_11;
+            }
+            set ariaLabel(_v) {
+                this.#___private_ariaLabel_11 = _v;
+            }
+            #___private_ariaLabelledby_12 = _init_ariaLabelledby(this, '');
+            get ariaLabelledby() {
+                return this.#___private_ariaLabelledby_12;
+            }
+            set ariaLabelledby(_v) {
+                this.#___private_ariaLabelledby_12 = _v;
+            }
             // ── ValidityMixin hook ─────────────────────────────────────────────────────
             // _testValidity is declared protected in ValidityInterface, but TypeScript's
             // mixin intersection type does not always surface protected members for
@@ -637,7 +604,9 @@ new class extends _identity {
                         };
                     }
                 } else if (this.required && !this.value) {
-                    this.validityMessage = 'Please fill out this field.';
+                    const temp = document.createElement('input');
+                    temp.required = true;
+                    this.validityMessage = temp.validationMessage;
                     return {
                         valueMissing: true
                     };
@@ -720,6 +689,8 @@ new class extends _identity {
           ?required=${required}
           aria-required=${ifNonEmpty(required ? 'true' : '')}
           aria-invalid=${this.status === 'invalid' ? 'true' : 'false'}
+          aria-label=${ifNonEmpty(this.ariaLabel)}
+          aria-labelledby=${ifNonEmpty(this.ariaLabelledby)}
           aria-describedby=${this.validityMessage ? 'helper-text validation-message' : 'helper-text'}
           aria-errormessage=${ifNonEmpty(this.status === 'invalid' && this.validityMessage ? 'validation-message' : '')}
           placeholder=${ifNonEmpty(placeholder)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vialiq/web-components",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -21,6 +21,10 @@
       "default": "./index.js"
     },
     "./button": {
+      "types": "./button/index.d.ts",
+      "default": "./button/index.js"
+    },
+    "./button/vi-button": {
       "types": "./button/vi-button.d.ts",
       "default": "./button/vi-button.js"
     },
@@ -33,6 +37,10 @@
       "default": "./icons/registry.js"
     },
     "./input": {
+      "types": "./input/index.d.ts",
+      "default": "./input/index.js"
+    },
+    "./input/vi-input": {
       "types": "./input/vi-input.d.ts",
       "default": "./input/vi-input.js"
     },
@@ -47,10 +55,35 @@
     "./radio": {
       "types": "./radio/index.d.ts",
       "default": "./radio/index.js"
+    },
+    "./checkbox": {
+      "types": "./checkbox/index.d.ts",
+      "default": "./checkbox/index.js"
+    },
+    "./checkbox/vi-checkbox": {
+      "types": "./checkbox/vi-checkbox.d.ts",
+      "default": "./checkbox/vi-checkbox.js"
+    },
+    "./textarea": {
+      "types": "./textarea/index.d.ts",
+      "default": "./textarea/index.js"
+    },
+    "./textarea/vi-textarea": {
+      "types": "./textarea/vi-textarea.d.ts",
+      "default": "./textarea/vi-textarea.js"
+    },
+    "./tooltip": {
+      "types": "./tooltip/index.d.ts",
+      "default": "./tooltip/index.js"
+    },
+    "./tooltip/vi-tooltip": {
+      "types": "./tooltip/vi-tooltip.d.ts",
+      "default": "./tooltip/vi-tooltip.js"
     }
   },
   "peerDependencies": {
-    "@vialiq/flux-ui": "^0.3.0",
+    "@floating-ui/dom": ">=1.0.0",
+    "@vialiq/flux-ui": "^0.5.0",
     "@vialiq/icons": ">=0.0.3 <0.1.0",
     "lit": "^3.0.0"
   },
@@ -69,6 +102,9 @@
     "button/",
     "icons/",
     "input/",
+    "radio/",
+    "checkbox/",
+    "tooltip/",
     "README.md"
   ]
 }

package/radio/index.d.ts

@@ -0,0 +1,5 @@
+export { ViRadio } from './vi-radio.js';
+export type { RadioSize } from './vi-radio.js';
+export { ViRadioGroup } from './vi-radio-group.js';
+export type { RadioGroupOrientation } from './vi-radio-group.js';
+//# sourceMappingURL=index.d.ts.map

package/radio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC"}

package/radio/index.js

@@ -0,0 +1,2 @@
+export { ViRadio } from './vi-radio.js';
+export { ViRadioGroup } from './vi-radio-group.js';

package/radio/vi-radio-group.d.ts

@@ -0,0 +1,72 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { type ControlStatus } from '../base/validity-mixin.js';
+import { ViElement } from '../base/vi-element.js';
+import { type RadioSize } from './vi-radio.js';
+export type RadioGroupOrientation = 'vertical' | 'horizontal';
+declare const ViRadioGroup_base: typeof ViElement & (new (...args: any[]) => import("../base/validity-mixin.js").ValidityInterface);
+/**
+ * vi-radio-group
+ * Form-associated radio button group container.
+ * Manages WAI-ARIA compliant keyboard roving tabindex and selection state.
+ *
+ * @element vi-radio-group
+ *
+ * @attr {string}                 value            - Value of the currently selected radio option.
+ * @attr {string}                 name             - Shared name for all child radios.
+ * @attr {boolean}                disabled         - Disables the entire radio group (reflected).
+ * @attr {boolean}                required         - Marks the group as requiring a selection (reflected).
+ * @attr {ControlStatus}          status           - Visual status: default | valid | invalid (reflected).
+ * @attr {string}                 validity-message - Error message shown when validation fails.
+ * @attr {RadioGroupOrientation}  orientation      - Layout direction: vertical | horizontal (reflected).
+ *
+ * @slot - Child vi-radio elements.
+ * @slot label - Text displayed above the group.
+ * @slot helper - Helper text displayed below the group.
+ *
+ * @fires {CustomEvent<{value: string}>} vialiq-change - Dispatched when selection changes. Bubbles, composed.
+ * @fires {Event}                        invalid       - Fired when validation check fails.
+ */
+export declare class ViRadioGroup extends ViRadioGroup_base {
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult;
+    protected readonly _internals: ElementInternals;
+    accessor status: ControlStatus;
+    accessor required: boolean;
+    accessor validityMessage: string;
+    /** Currently selected radio's value. */
+    accessor value: string;
+    /** Shared name for all child radios. */
+    accessor name: string;
+    /** Disables the entire group. */
+    accessor disabled: boolean;
+    /** Layout direction of the radio group. */
+    accessor orientation: RadioGroupOrientation;
+    /** Size scale — controls spacing and propagates to child radios. */
+    accessor size: RadioSize;
+    /** Allows clearing the selected radio button on double click. */
+    accessor allowDblclickClear: boolean;
+    private _observer?;
+    private _initialValue;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    /** Resets the value and validation state when the parent form resets. */
+    formResetCallback(): void;
+    /** Keeps disabled in sync when a containing fieldset/form is disabled. */
+    formDisabledCallback(disabled: boolean): void;
+    protected _testValidity(): Partial<ValidityStateFlags>;
+    private _getRadios;
+    private _updateRadios;
+    private _handleRadioChecked;
+    private _onKeydown;
+    private _onDblclick;
+    private get _validationMessage();
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vi-radio-group': ViRadioGroup;
+    }
+}
+export {};
+//# sourceMappingURL=vi-radio-group.d.ts.map

package/radio/vi-radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vi-radio-group.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/radio/vi-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAErF,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAExD,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG,YAAY,CAAC;;AAE9D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,YAAa,SAAQ,iBAAwB;IACxD,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAgB,MAAM,0BAEpB;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,mBAA0B;IAI1B,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAa;IAC5B,QAAQ,CAAC,QAAQ,UAAS;IACzB,QAAQ,CAAC,eAAe,SAAM;IAI3E,wCAAwC;IACX,QAAQ,CAAC,KAAK,SAAM;IAEjD,wCAAwC;IAC5B,QAAQ,CAAC,IAAI,SAAM;IAE/B,iCAAiC;IACW,QAAQ,CAAC,QAAQ,UAAS;IAEtE,2CAA2C;IACd,QAAQ,CAAC,WAAW,EAAE,qBAAqB,CAAc;IAEtF,oEAAoE;IACzB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAQ;IAE3E,iEAAiE;IAEjE,QAAQ,CAAC,kBAAkB,UAAS;IAEpC,OAAO,CAAC,SAAS,CAAC,CAAmB;IAErC,OAAO,CAAC,aAAa,CAAM;IAElB,iBAAiB,IAAI,IAAI;IAsBzB,oBAAoB,IAAI,IAAI;IAQ5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAkB/C,yEAAyE;IACzE,iBAAiB,IAAI,IAAI;IAOzB,0EAA0E;IAC1E,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;cAI1B,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;IA4B/D,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,aAAa;IA0CrB,OAAO,CAAC,mBAAmB;IAmB3B,OAAO,CAAC,UAAU;IA0DlB,OAAO,CAAC,WAAW,CAqBjB;IAIF,OAAO,KAAK,kBAAkB,GAmB7B;IAEQ,MAAM,IAAI,cAAc;CA+BlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}