@vialiq/web-components 0.4.0 → 0.5.0

package/input/vi-input.js

@@ -443,9 +443,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 +464,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 +476,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 +526,16 @@ new class extends _identity {
                         _dec10,
                         1,
                         "readonly"
+                    ],
+                    [
+                        _dec11,
+                        1,
+                        "ariaLabel"
+                    ],
+                    [
+                        _dec12,
+                        1,
+                        "ariaLabelledby"
                     ]
                 ], [
                     _dec
@@ -605,6 +619,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
@@ -720,6 +748,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.5.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -47,11 +47,28 @@
     "./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"
+    },
+    "./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",
-    "@vialiq/icons": ">=0.0.3 <0.1.0",
+    "@floating-ui/dom": ">=1.0.0",
+    "@vialiq/flux-ui": "^0.4.0",
+    "@vialiq/icons": ">=0.0.8 <0.1.0",
     "lit": "^3.0.0"
   },
   "keywords": [
@@ -69,6 +86,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;IAU/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"}