@vialiq/web-components 0.11.0 → 0.13.0

package/badge/vi-badge.d.ts

@@ -1,4 +1,4 @@
-import { type TemplateResult } from 'lit';
+import { TemplateResult } from 'lit';
 import { ViElement } from '../base/vi-element.js';
 export type BadgeVariant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
 export type BadgeSize = 'sm' | 'md' | 'lg';
@@ -23,7 +23,7 @@ export type BadgeSize = 'sm' | 'md' | 'lg';
  * @csspart icon  - Icon slot wrapper
  */
 export declare class ViBadge extends ViElement {
-    static styles: import("lit").CSSResult;
+    static styles: import('lit').CSSResult;
     /** Colour semantic */
     accessor variant: BadgeVariant;
     /** Size */

package/base/controllers/floating-controller.d.ts

@@ -0,0 +1,44 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { Placement } from '@floating-ui/dom';
+export interface FloatingControllerOptions {
+    /** Function returning the reference element (e.g. trigger/input). */
+    reference: () => HTMLElement | null;
+    /** Function returning the floating element (e.g. popover/listbox). */
+    floating: () => HTMLElement | null;
+    /** Function returning the desired placement. */
+    placement?: () => Placement;
+    /** Space in px between reference and floating. */
+    offset?: number;
+    /** Whether to use fixed positioning instead of absolute. */
+    hoist?: () => boolean;
+    /** Element or selector string to constrain flipping. */
+    boundary?: () => HTMLElement | string | null;
+    /** Whether the floating element should be forced to match the reference element's width. */
+    matchWidth?: boolean;
+}
+/**
+ * A Reactive Controller that manages @floating-ui/dom positioning.
+ * Abstracts away the autoUpdate and positioning logic from complex components.
+ */
+export declare class FloatingController implements ReactiveController {
+    private host;
+    private options;
+    private _cleanup?;
+    constructor(host: ReactiveControllerHost, options: FloatingControllerOptions);
+    hostDisconnected(): void;
+    /**
+     * Starts the floating UI auto-update listener.
+     * Call this when the popover opens.
+     */
+    start(): void;
+    /**
+     * Stops the floating UI auto-update listener.
+     * Call this when the popover closes.
+     */
+    stop(): void;
+    /**
+     * Imperatively update position.
+     */
+    updatePosition(): Promise<void>;
+}
+//# sourceMappingURL=floating-controller.d.ts.map

package/base/controllers/floating-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-controller.d.ts","sourceRoot":"","sources":["../../../../../libs/web-components/src/base/controllers/floating-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AACjE,OAAO,EAAmD,KAAK,SAAS,EAAmB,MAAM,kBAAkB,CAAC;AAEpH,MAAM,WAAW,yBAAyB;IACxC,qEAAqE;IACrE,SAAS,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACpC,sEAAsE;IACtE,QAAQ,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,SAAS,CAAC;IAC5B,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,OAAO,CAAC;IACtB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7C,4FAA4F;IAC5F,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;GAGG;AACH,qBAAa,kBAAmB,YAAW,kBAAkB;IAIzD,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,OAAO;IAJjB,OAAO,CAAC,QAAQ,CAAC,CAAa;gBAGpB,IAAI,EAAE,sBAAsB,EAC5B,OAAO,EAAE,yBAAyB;IAK5C,gBAAgB;IAIhB;;;OAGG;IACH,KAAK;IAgBL;;;OAGG;IACH,IAAI;IAOJ;;OAEG;IACG,cAAc,IAAI,OAAO,CAAC,IAAI,CAAC;CA+CtC"}

package/base/if-non-empty.d.ts

@@ -58,5 +58,5 @@
  *     - You need the attribute to literally be "" (rare, document when intentional)
  *     - The binding is to a custom element property — use .prop=${val} instead
  */
-export declare const ifNonEmpty: (value: string | null | undefined) => string | typeof import("lit-html").nothing;
+export declare const ifNonEmpty: (value: string | null | undefined) => string | typeof import('lit-html').nothing;
 //# sourceMappingURL=if-non-empty.d.ts.map

package/button/vi-button.d.ts

@@ -1,4 +1,4 @@
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { ViElement } from '../base/vi-element.js';
 /**
  * Button visual variant.
@@ -18,7 +18,7 @@ export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
  * Controlled via CSS `order` — no extra wrapper elements needed.
  */
 export type ButtonIconPlacement = 'start' | 'end';
-declare const ViButton_base: typeof ViElement & (new (...args: any[]) => import("../base/focusable-mixin.js").FocusableInterface);
+declare const ViButton_base: typeof ViElement & (new (...args: any[]) => import('../base/focusable-mixin.js').FocusableInterface);
 /**
  * vi-button
  * Self-styled button component using Flux UI token fallbacks.
@@ -39,7 +39,7 @@ declare const ViButton_base: typeof ViElement & (new (...args: any[]) => import(
  * @csspart label  - The label span
  */
 export declare class ViButton extends ViButton_base {
-    static styles: import("lit").CSSResult;
+    static styles: import('lit').CSSResult;
     protected get _focusableElement(): HTMLButtonElement | null;
     /** Visual variant. */
     accessor variant: ButtonVariant;

package/checkbox/vi-checkbox.d.ts

@@ -1,8 +1,8 @@
-import { type PropertyValues, type TemplateResult } from 'lit';
-import { type ControlStatus } from '../base/validity-mixin.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { ControlStatus } from '../base/validity-mixin.js';
 import { ViElement } from '../base/vi-element.js';
 export type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg';
-declare const ViCheckbox_base: typeof ViElement & (new (...args: any[]) => import("../base/focusable-mixin.js").FocusableInterface) & (new (...args: any[]) => import("../base/validity-mixin.js").ValidityInterface<unknown>);
+declare const ViCheckbox_base: typeof ViElement & (new (...args: any[]) => import('../base/focusable-mixin.js').FocusableInterface) & (new (...args: any[]) => import('../base/validity-mixin.js').ValidityInterface<unknown>);
 /**
  * vi-checkbox
  * Form-associated checkbox control using Flux UI tokens.
@@ -29,7 +29,7 @@ declare const ViCheckbox_base: typeof ViElement & (new (...args: any[]) => impor
  * @csspart label - The label text wrapper.
  */
 export declare class ViCheckbox extends ViCheckbox_base {
-    static styles: import("lit").CSSResult;
+    static styles: import('lit').CSSResult;
     private _initialChecked;
     protected get _focusableElement(): HTMLInputElement | null;
     accessor status: ControlStatus;

package/icons/vi-icon.d.ts

@@ -1,4 +1,4 @@
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { ViElement } from '../base/vi-element.js';
 /**
  * vi-icon
@@ -17,7 +17,7 @@ import { ViElement } from '../base/vi-element.js';
  * @attr label - Accessible label; omit for decorative icons
  */
 export declare class ViIcon extends ViElement {
-    static styles: import("lit").CSSResult;
+    static styles: import('lit').CSSResult;
     /**
      * The registered icon name to render.
      * @attr

package/icons/vi-icon.js

@@ -444,7 +444,7 @@ new class extends _identity {
       width: 100%;
       height: 100%;
       fill: none;
-      stroke: currentColor;
+      stroke: var(--vi-icon-color, currentColor);
       stroke-width: 2;
       stroke-linecap: round;
       stroke-linejoin: round;

package/index.js

@@ -13,6 +13,7 @@ export { ViAccordion } from './accordion/vi-accordion.js';
 export { ViAccordionItem } from './accordion/vi-accordion-item.js';
 import { unsafeCSS, css, html } from 'lit';
 import { customElement, property, state, queryAssignedElements } from 'lit/decorators.js';
+import { checkCircleIcon, triangleWarningIcon, infoIcon, xIcon, lockIcon } from '@vialiq/icons';
 import { F as FocusableMixin } from './focusable-mixin-CmxOyPX5.js';
 import { V as ValidityMixin } from './validity-mixin-H4aOFJEr.js';
 
@@ -998,29 +999,9 @@ var _dec$3, _initClass$3, _ViElement$1, _dec1$3, _dec2$3, _dec3$3, _dec4$3, _dec
    * Alias for auto-hide-duration in milliseconds.
    * Setting a positive duration enables auto-hiding automatically.
    */ _init_duration$1, /** Override the default status icon name */ _init_icon, /** Controls whether the alert is displayed */ _init_open$1, /** Position alert absolutely over parent container without pushing layout */ _init_floating, /** Hide the icon */ _init_noIcon, _init__hasTitleSlot, _init__hasActionsSlot, _initProto$3;
-const checkCircleIcon = {
-    name: 'check-circle',
-    data: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>`
-};
-const alertTriangleIcon = {
-    name: 'alert-triangle',
-    data: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`
-};
-const infoIcon = {
-    name: 'info',
-    data: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>`
-};
-const xIcon = {
-    name: 'x',
-    data: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`
-};
-const lockIcon = {
-    name: 'lock',
-    data: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>`
-};
 registerIcons([
     checkCircleIcon,
-    alertTriangleIcon,
+    triangleWarningIcon,
     infoIcon,
     xIcon,
     lockIcon
@@ -1289,7 +1270,7 @@ new class extends _identity$3 {
                         return 'check-circle';
                     case 'warning':
                     case 'danger':
-                        return 'alert-triangle';
+                        return 'triangle-warning';
                     case 'info':
                     default:
                         return 'info';

package/input/vi-input.d.ts

@@ -1,5 +1,5 @@
-import { type PropertyValues, type TemplateResult } from 'lit';
-import { type ControlStatus } from '../base/validity-mixin.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { ControlStatus } from '../base/validity-mixin.js';
 import { ViElement } from '../base/vi-element.js';
 /**
  * Supported input types.
@@ -9,7 +9,7 @@ import { ViElement } from '../base/vi-element.js';
  */
 export type InputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number';
 export type InputSize = 'xs' | 'sm' | 'md' | 'lg';
-declare const ViInput_base: typeof ViElement & (new (...args: any[]) => import("../base/focusable-mixin.js").FocusableInterface) & (new (...args: any[]) => import("../base/validity-mixin.js").ValidityInterface<unknown>);
+declare const ViInput_base: typeof ViElement & (new (...args: any[]) => import('../base/focusable-mixin.js').FocusableInterface) & (new (...args: any[]) => import('../base/validity-mixin.js').ValidityInterface<unknown>);
 /**
  * vi-input
  * Form-associated single-line text input using Flux UI token fallbacks.
@@ -50,7 +50,7 @@ declare const ViInput_base: typeof ViElement & (new (...args: any[]) => import("
  * @cssprop [--vi-input-typography-font-size]      - Font size (default: `$font-size-base`)
  */
 export declare class ViInput extends ViInput_base {
-    static styles: import("lit").CSSResult;
+    static styles: import('lit').CSSResult;
     protected get _focusableElement(): HTMLInputElement | null;
     accessor status: ControlStatus;
     accessor required: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vialiq/web-components",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -103,8 +103,8 @@
   },
   "peerDependencies": {
     "@floating-ui/dom": ">=1.0.0",
-    "@vialiq/flux-ui": "^0.9.0",
-    "@vialiq/icons": ">=0.0.3 <0.1.0",
+    "@vialiq/flux-ui": "^0.11.0",
+    "@vialiq/icons": "^0.1.1",
     "lit": "^3.0.0"
   },
   "keywords": [

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

@@ -1,9 +1,9 @@
-import { type PropertyValues, type TemplateResult } from 'lit';
-import { type ControlStatus } from '../base/validity-mixin.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { ControlStatus } from '../base/validity-mixin.js';
 import { ViElement } from '../base/vi-element.js';
-import { type RadioSize } from './vi-radio.js';
+import { 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<unknown>);
+declare const ViRadioGroup_base: typeof ViElement & (new (...args: any[]) => import('../base/validity-mixin.js').ValidityInterface<unknown>);
 /**
  * vi-radio-group
  * Form-associated radio button group container.
@@ -27,7 +27,7 @@ declare const ViRadioGroup_base: typeof ViElement & (new (...args: any[]) => imp
  * @fires {Event}                        invalid       - Fired when validation check fails.
  */
 export declare class ViRadioGroup extends ViRadioGroup_base {
-    static styles: import("lit").CSSResult;
+    static styles: import('lit').CSSResult;
     accessor status: ControlStatus;
     accessor required: boolean;
     accessor validityMessage: string;

package/radio/vi-radio.d.ts

@@ -1,7 +1,7 @@
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { ViElement } from '../base/vi-element.js';
 export type RadioSize = 'xs' | 'sm' | 'md' | 'lg';
-declare const ViRadio_base: typeof ViElement & (new (...args: any[]) => import("../base/focusable-mixin.js").FocusableInterface);
+declare const ViRadio_base: typeof ViElement & (new (...args: any[]) => import('../base/focusable-mixin.js').FocusableInterface);
 /**
  * vi-radio
  * Individual radio option within a vi-radio-group.
@@ -18,7 +18,7 @@ declare const ViRadio_base: typeof ViElement & (new (...args: any[]) => import("
  * @csspart label - The label text span.
  */
 export declare class ViRadio extends ViRadio_base {
-    static styles: import("lit").CSSResult;
+    static styles: import('lit').CSSResult;
     protected get _focusableElement(): HTMLInputElement | null;
     /** The value this radio represents. */
     accessor value: string;

package/tooltip/vi-tooltip.d.ts

@@ -1,6 +1,6 @@
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { ViElement } from '../base/vi-element.js';
-import { type ComputePositionConfig } from '@floating-ui/dom';
+import { ComputePositionConfig } from '@floating-ui/dom';
 export type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
 export type TooltipTrigger = 'hover focus' | 'hover' | 'focus' | 'click';
 /**
@@ -25,7 +25,7 @@ export type TooltipTrigger = 'hover focus' | 'hover' | 'focus' | 'click';
  * @csspart arrow - Arrow pointer
  */
 export declare class ViTooltip extends ViElement {
-    static styles: import("lit").CSSResult;
+    static styles: import('lit').CSSResult;
     accessor content: string;
     accessor placement: TooltipPlacement;
     accessor trigger: TooltipTrigger;