@vialiq/web-components 0.23.0 → 0.25.0

package/README.md

@@ -298,6 +298,79 @@ vi-input {
 
 ---
 
+### Label ([vi-label](./src/label/vi-label.ts))
+
+The [ViLabel](./src/label/vi-label.ts) is a styled `<label>` component for associating visible text with form controls. It supports required/optional indicators and inline help tooltips. Because it uses Shadow DOM, it automatically maps click and focus events to target controls and manages `aria-labelledby` across the Shadow boundary for accessibility.
+
+#### Properties & Attributes
+
+| Attribute  | Property   | Type                               | Default     | Description                                |
+| :--------- | :--------- | :--------------------------------- | :---------- | :----------------------------------------- |
+| `for`      | `for`      | `string`                           | `''`        | ID of the target control to focus/click.   |
+| `required` | `required` | `boolean`                          | `false`     | Shows a `*` indicator.                     |
+| `optional` | `optional` | `boolean`                          | `false`     | Shows "(optional)" text.                   |
+| `disabled` | `disabled` | `boolean`                          | `false`     | Muted disabled styling.                    |
+| `size`     | `size`     | `'sm'\|'md'\|'lg'`                 | `'md'`      | Font size variant.                         |
+| `layout`   | `layout`   | `'stacked'\|'inline'`              | `'stacked'` | Controls margin and inline-flex spacing.   |
+| `type`     | `type`     | `'default'\|'primary'\|'secondary'`| `'default'` | Semantic text color for emphasis.          |
+
+#### Slots
+
+- **Default Slot**: Label text content.
+- **`tooltip` Slot**: Optional icon/element that triggers an inline tooltip (renders to the right of the label text).
+
+#### CSS Shadow Parts
+
+Since `vi-label` uses Shadow DOM, you can override its internal styles using CSS shadow parts (`::part`):
+
+```css
+vi-label::part(label) {
+  --vi-label-font-size: var(--vi-font-size-sm);
+  --vi-label-font-weight: var(--vi-font-weight-medium);
+  --vi-label-color: var(--vi-text-primary);
+  /* Other styles... */
+}
+
+vi-label::part(required-indicator) {
+  color: red;
+}
+```
+
+The available parts are:
+- `label`: The internal `<label>` container.
+- `required-indicator`: The `*` span.
+- `optional-indicator`: The `(optional)` span.
+- `tooltip-trigger`: The wrapper around the tooltip slot.
+
+#### Snippets
+
+**Basic Standard Usage:**
+```html
+<vi-label for="first-name" required>First Name</vi-label>
+<vi-input id="first-name" name="firstName"></vi-input>
+```
+
+**Optional & Inline:**
+```html
+<div style="display: flex; align-items: center;">
+  <vi-label for="promo-code" layout="inline" optional>Promo Code</vi-label>
+  <vi-input id="promo-code" name="promoCode"></vi-input>
+</div>
+```
+
+**With Semantic Type and Tooltip:**
+```html
+<vi-label for="cvv-input" type="primary">
+  Card Security Code
+  <vi-tooltip slot="tooltip" content="3 digits on back of card">
+    <vi-icon name="info-circle"></vi-icon>
+  </vi-tooltip>
+</vi-label>
+<vi-input id="cvv-input" type="password"></vi-input>
+```
+
+---
+
 ### Select ([vi-select](./src/select/vi-select.ts))
 
 > [!NOTE]
@@ -1141,6 +1214,66 @@ The `<vi-switch>` component is a form-associated toggle switch used for boolean
 
 ---
 
+### Tabs ([vi-tabs](./src/tabs/vi-tabs.ts))
+
+The Tabs component is a composite of `<vi-tabs>`, `<vi-tab>`, and `<vi-tab-panel>` used to organize content into separate views where only one view is visible at a time. It follows the WAI-ARIA tabs pattern and includes robust support for responsive overflow, dynamic closable tabs, and advanced layout variants.
+
+#### Properties & Attributes
+
+| Attribute    | Property   | Type                                 | Default        | Description                                            |
+| :----------- | :--------- | :----------------------------------- | :------------- | :----------------------------------------------------- |
+| `active`     | `active`   | `string`                             | `''`           | The `tab-id` of the currently active tab.              |
+| `orientation`| `orientation` | `'horizontal'\|'vertical'`          | `'horizontal'` | The layout direction of the tablist.                   |
+| `variant`    | `variant`  | `'line'\|'pill'\|'card'\|'enclosed'` | `'line'`       | Visual design variant of the tabs.                     |
+| `overflow`   | `overflow` | `'scroll'\|'menu'\|'wrap'`           | `'scroll'`     | Defines behavior when tabs exceed container width.     |
+
+#### Events & Architecture Note
+
+Tabs use a mutually exclusive state (only one can be active at a time). Because of this, tabs are **"activated"** rather than "opened". There is no `vi-tab-before-open` event; instead, you intercept the activation of a tab at the container level using `vi-tabs-before-change`.
+
+If you need to prevent a user from switching to a specific tab (e.g., due to unsaved changes or missing permissions), simply call `e.preventDefault()` on the `vi-tabs-before-change` event:
+
+```javascript
+tabs.addEventListener('vi-tabs-before-change', (e) => {
+  if (e.detail.toTabId === 'restricted-tab' && !userHasAccess) {
+    e.preventDefault(); // Stops the tab from "opening"
+    alert('You do not have access to this tab!');
+  }
+});
+```
+
+For more detailed documentation, including slots, CSS parts, and custom properties, see the [Full Tabs Documentation](./docs/components/vi-tabs.md).
+
+#### Snippets
+
+**Standard Line Tabs:**
+
+```html
+<vi-tabs active="tab-1">
+  <vi-tab tab-id="tab-1">Account</vi-tab>
+  <vi-tab tab-id="tab-2">Security</vi-tab>
+  
+  <vi-tab-panel for="tab-1">Account settings content...</vi-tab-panel>
+  <vi-tab-panel for="tab-2">Security settings content...</vi-tab-panel>
+</vi-tabs>
+```
+
+**Variants & Overflow:**
+
+```html
+<vi-tabs variant="pill" overflow="menu" active="t1">
+  <vi-tab tab-id="t1">Overview</vi-tab>
+  <vi-tab tab-id="t2">Analytics</vi-tab>
+  <vi-tab tab-id="t3" closable>Reports</vi-tab>
+  
+  <vi-tab-panel for="t1">...</vi-tab-panel>
+  <vi-tab-panel for="t2">...</vi-tab-panel>
+  <vi-tab-panel for="t3">...</vi-tab-panel>
+</vi-tabs>
+```
+
+---
+
 ## Storybook
 
 The project uses **Storybook 10** with the `@storybook/web-components-vite` framework.

package/date-picker/plugins/vi-month-year-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vi-month-year-plugin.d.ts","sourceRoot":"","sources":["../../../../../libs/web-components/src/date-picker/plugins/vi-month-year-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,2BAA2B,CAAC;AAEnC,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;CACH;AAED,wBAAgB,iBAAiB,CAAC,MAAM,GAAE,uBAA4B,IACnD,IAAI,QAAQ;;;;;EA6M9B"}
+{"version":3,"file":"vi-month-year-plugin.d.ts","sourceRoot":"","sources":["../../../../../libs/web-components/src/date-picker/plugins/vi-month-year-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,2BAA2B,CAAC;AAEnC,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;CACH;AAED,wBAAgB,iBAAiB,CAAC,MAAM,GAAE,uBAA4B,IACnD,IAAI,QAAQ;;;;;EAgN9B"}

package/date-picker/vi-date-picker.js

@@ -798,7 +798,9 @@ function ViMonthYearPlugin(config = {}) {
             if (config.ariaLabels?.prevMonth) {
                 prevBtn.setAttribute('aria-label', config.ariaLabels.prevMonth);
             }
-            prevBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>`;
+            const parser = new DOMParser();
+            const prevDoc = parser.parseFromString(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>`, 'image/svg+xml');
+            prevBtn.appendChild(prevDoc.documentElement);
             prevBtn.addEventListener('click', (e)=>{
                 e.preventDefault();
                 fp.changeMonth(-1);
@@ -809,7 +811,8 @@ function ViMonthYearPlugin(config = {}) {
             if (config.ariaLabels?.nextMonth) {
                 nextBtn.setAttribute('aria-label', config.ariaLabels.nextMonth);
             }
-            nextBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>`;
+            const nextDoc = parser.parseFromString(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>`, 'image/svg+xml');
+            nextBtn.appendChild(nextDoc.documentElement);
             nextBtn.addEventListener('click', (e)=>{
                 e.preventDefault();
                 fp.changeMonth(1);

package/index.d.ts

@@ -19,14 +19,14 @@ export type { TooltipPlacement, TooltipTrigger } from './tooltip/vi-tooltip.js';
 export { ViTextarea } from './textarea/vi-textarea.js';
 export type { TextareaResize } from './textarea/vi-textarea.js';
 export { ViAccordion } from './accordion/vi-accordion.js';
-export type { AccordionVariant, AccordionSize } from './accordion/vi-accordion.js';
+export type { AccordionVariant, AccordionSize, } from './accordion/vi-accordion.js';
 export { ViAccordionItem } from './accordion/vi-accordion-item.js';
 export { ViBadge } from './badge/vi-badge.js';
 export type { BadgeVariant, BadgeSize } from './badge/vi-badge.js';
 export { ViAlert } from './alert/vi-alert.js';
 export type { AlertVariant } from './alert/vi-alert.js';
 export { ViModal } from './modal/vi-modal.js';
-export type { ModalVariant, DrawerPlacement, ModalSize } from './modal/vi-modal.js';
+export type { ModalVariant, DrawerPlacement, ModalSize, } from './modal/vi-modal.js';
 export { ViModalHeader } from './modal/vi-modal-header.js';
 export { ViModalFooter } from './modal/vi-modal-footer.js';
 export { ViChip } from './chip/vi-chip.js';
@@ -45,7 +45,11 @@ export { ViCombobox } from './combobox/vi-combobox.js';
 export { ViComboboxItem } from './combobox/vi-combobox-item.js';
 export { ViDatePicker, VIALIQ_CHANGE } from './date-picker/vi-date-picker.js';
 export { ViDatePickerInput } from './date-picker/vi-date-picker-input.js';
-export type { DatePickerMode, DatePickerChangeDetail } from './date-picker/types.js';
+export type { DatePickerMode, DatePickerChangeDetail, } from './date-picker/types.js';
 export { ViLabel } from './label/vi-label.js';
 export type { LabelSize } from './label/vi-label.js';
+export { ViLink } from './link/index.js';
+export type { TabsOrientation, TabsVariant, TabsActivation, TabsOverflow, } from './tabs/vi-tabs.js';
+export { ViTab } from './tabs/vi-tab.js';
+export { ViTabPanel } from './tabs/vi-tab-panel.js';
 //# sourceMappingURL=index.d.ts.map

package/index.js

@@ -28,3 +28,6 @@ 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';
+export { ViLink } from './link/vi-link.js';
+export { ViTab } from './tabs/vi-tab.js';
+export { ViTabPanel } from './tabs/vi-tab-panel.js';

package/link/index.d.ts

@@ -0,0 +1,2 @@
+export { ViLink } from './vi-link.js';
+//# sourceMappingURL=index.d.ts.map

package/link/index.d.ts.map

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

package/link/index.js

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

package/link/vi-link.d.ts

@@ -0,0 +1,30 @@
+import { nothing } from 'lit';
+import { ViElement } from '../base/vi-element.js';
+type LinkVariant = 'primary' | 'secondary' | 'muted';
+type LinkSize = 'inherit' | 'sm' | 'md' | 'lg';
+type LinkUnderline = 'always' | 'hover' | 'none';
+declare const ViLink_base: typeof ViElement & (new (...args: any[]) => import('../base/focusable-mixin.js').FocusableInterface);
+export declare class ViLink extends ViLink_base {
+    static styles: import('lit').CSSResult;
+    accessor href: string;
+    accessor target: string;
+    accessor rel: string;
+    accessor download: string;
+    accessor variant: LinkVariant;
+    accessor size: LinkSize;
+    accessor underline: LinkUnderline;
+    accessor disabled: boolean;
+    accessor external: boolean;
+    protected get _focusableElement(): HTMLElement;
+    protected get _effectiveTarget(): string;
+    protected get _effectiveRel(): string | typeof nothing;
+    accessor ariaLabel: string | null;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vi-link': ViLink;
+    }
+}
+export {};
+//# sourceMappingURL=vi-link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vi-link.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/link/vi-link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,OAAO,EAAa,MAAM,KAAK,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,OAAO,qBAAqB,CAAC;AAG7B,KAAK,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AACrD,KAAK,QAAQ,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/C,KAAK,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;;AAEjD,qBACa,MAAO,SAAQ,WAAyB;IACnD,OAAgB,MAAM,0BAEpB;IAE0B,QAAQ,CAAC,IAAI,SAAM;IACnB,QAAQ,CAAC,MAAM,SAAW;IAC1B,QAAQ,CAAC,GAAG,SAAM;IAClB,QAAQ,CAAC,QAAQ,SAAM;IACR,QAAQ,CAAC,OAAO,EAAE,WAAW,CAC5D;IACgB,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAa;IACpC,QAAQ,CAAC,SAAS,EAAE,aAAa,CAAW;IAC5B,QAAQ,CAAC,QAAQ,UAAS;IACzC,QAAQ,CAAC,QAAQ,UAAS;IAEvD,cAAuB,iBAAiB,IACQ,WAAW,CAC1D;IAED,SAAS,KAAK,gBAAgB,WAE7B;IAED,SAAS,KAAK,aAAa,4BAS1B;IAEsC,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEvE,MAAM;CA+BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/link/vi-link.js

@@ -0,0 +1,591 @@
+import { unsafeCSS, css, nothing, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { V as ViElement } from '../vi-element-C6GfDPs3.js';
+import { F as FocusableMixin } from '../focusable-mixin-CmxOyPX5.js';
+import '../icons/vi-icon.js';
+
+const linkStyles = "@charset \"UTF-8\";@layer reset,components,utilities;:host{display:inline-block}.link{color:var(--vi-link-color, var(--vi-link-color, var(--vi-color-primary, #3676d0)));text-decoration-thickness:1px;text-underline-offset:var(--vi-link-underline-offset, 2px);cursor:pointer;transition:color .2s ease,text-decoration-color .2s ease;outline:none;text-decoration:underline}.link.underline-none,.link.underline-hover{text-decoration:none}.link.underline-hover:hover{text-decoration:underline}.link.size-inherit{font-size:inherit}.link.size-sm{font-size:var(--vi-font-size-sm, var(--vi-font-size-sm, 14px))}.link.size-md{font-size:var(--vi-font-size-base, var(--vi-font-size-base, 16px))}.link.size-lg{font-size:var(--vi-font-size-lg, var(--vi-font-size-lg, 18px))}.link.variant-secondary{--vi-link-color: var(--vi-link-color-secondary, var(--vi-link-color-secondary, var(--vi-color-grey-700, #616161)));--vi-link-color-hover: var(--vi-link-color-secondary-hover, var(--vi-color-grey-800, #424242));--vi-link-color-active: var(--vi-link-color-secondary-active, var(--vi-color-grey-900, #212121));--vi-link-color-visited: var(--vi-link-color-secondary-visited, var(--vi-color-grey-700, #616161))}.link.variant-muted{--vi-link-color: var(--vi-link-color-muted, var(--vi-link-color-muted, var(--vi-color-grey-500, #9e9e9e)));--vi-link-color-hover: var(--vi-link-color-muted-hover, var(--vi-color-grey-600, #757575));--vi-link-color-active: var(--vi-link-color-muted-active, var(--vi-color-grey-700, #616161));--vi-link-color-visited: var(--vi-link-color-muted-visited, var(--vi-color-grey-500, #9e9e9e))}.link:visited{color:var(--vi-link-color-visited, var(--vi-link-color-visited, var(--vi-color-purple-600, #6507c9)))}.link:hover{color:var(--vi-link-color-hover, var(--vi-link-color-hover, var(--vi-color-blue-800, #2d5fa8)))}.link:active{color:var(--vi-link-color-active, var(--vi-link-color-active, var(--vi-color-blue-900, #254882)))}.link:focus-visible{outline:var(--vi-border-width-base, 2px) solid var(--vi-focus-ring-color, var(--vi-link-color, var(--vi-color-primary, #3676d0)));outline-offset:0;box-shadow:0 0 0 3px var(--vi-focus-ring-glow, transparent)}.link[aria-disabled=true],.link.disabled{color:var(--vi-link-color-disabled, var(--vi-link-color-disabled, var(--vi-color-grey-400, #bdbdbd)));pointer-events:none;cursor:not-allowed;text-decoration:none}.link{display:inline-flex;align-items:center}::slotted([slot=icon]){display:inline-flex;margin-inline-end:.25rem}[part=external-icon]{display:inline-flex;align-items:center;margin-inline-start:.25rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}";
+
+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, _FocusableMixin, _dec1, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _dec10, _init_href, _init_target, _init_rel, _init_download, _init_variant, _init_size, _init_underline, _init_disabled, _init_external, _init_ariaLabel, _initProto;
+let _ViLink;
+_dec = customElement('vi-link'), _dec1 = property({
+    type: String
+}), _dec2 = property({
+    type: String
+}), _dec3 = property({
+    type: String
+}), _dec4 = property({
+    type: String
+}), _dec5 = property({
+    type: String,
+    reflect: true
+}), _dec6 = property({
+    type: String
+}), _dec7 = property({
+    type: String
+}), _dec8 = property({
+    type: Boolean,
+    reflect: true
+}), _dec9 = property({
+    type: Boolean
+}), _dec10 = property({
+    attribute: 'aria-label'
+});
+new class extends _identity {
+    constructor(){
+        super(_ViLink), _initClass();
+    }
+    static{
+        class ViLink extends (_FocusableMixin = FocusableMixin(ViElement)) {
+            static{
+                ({ e: [_init_href, _init_target, _init_rel, _init_download, _init_variant, _init_size, _init_underline, _init_disabled, _init_external, _init_ariaLabel, _initProto], c: [_ViLink, _initClass] } = _apply_decs_2203_r(this, [
+                    [
+                        _dec1,
+                        1,
+                        "href"
+                    ],
+                    [
+                        _dec2,
+                        1,
+                        "target"
+                    ],
+                    [
+                        _dec3,
+                        1,
+                        "rel"
+                    ],
+                    [
+                        _dec4,
+                        1,
+                        "download"
+                    ],
+                    [
+                        _dec5,
+                        1,
+                        "variant"
+                    ],
+                    [
+                        _dec6,
+                        1,
+                        "size"
+                    ],
+                    [
+                        _dec7,
+                        1,
+                        "underline"
+                    ],
+                    [
+                        _dec8,
+                        1,
+                        "disabled"
+                    ],
+                    [
+                        _dec9,
+                        1,
+                        "external"
+                    ],
+                    [
+                        _dec10,
+                        1,
+                        "ariaLabel"
+                    ]
+                ], [
+                    _dec
+                ], _FocusableMixin));
+            }
+            static styles = css`
+    ${unsafeCSS(linkStyles)}
+  `;
+            #___private_href_1 = (_initProto(this), _init_href(this, ''));
+            get href() {
+                return this.#___private_href_1;
+            }
+            set href(_v) {
+                this.#___private_href_1 = _v;
+            }
+            #___private_target_2 = _init_target(this, '_self');
+            get target() {
+                return this.#___private_target_2;
+            }
+            set target(_v) {
+                this.#___private_target_2 = _v;
+            }
+            #___private_rel_3 = _init_rel(this, '');
+            get rel() {
+                return this.#___private_rel_3;
+            }
+            set rel(_v) {
+                this.#___private_rel_3 = _v;
+            }
+            #___private_download_4 = _init_download(this, '');
+            get download() {
+                return this.#___private_download_4;
+            }
+            set download(_v) {
+                this.#___private_download_4 = _v;
+            }
+            #___private_variant_5 = _init_variant(this, 'primary');
+            get variant() {
+                return this.#___private_variant_5;
+            }
+            set variant(_v) {
+                this.#___private_variant_5 = _v;
+            }
+            #___private_size_6 = _init_size(this, 'inherit');
+            get size() {
+                return this.#___private_size_6;
+            }
+            set size(_v) {
+                this.#___private_size_6 = _v;
+            }
+            #___private_underline_7 = _init_underline(this, 'hover');
+            get underline() {
+                return this.#___private_underline_7;
+            }
+            set underline(_v) {
+                this.#___private_underline_7 = _v;
+            }
+            #___private_disabled_8 = _init_disabled(this, false);
+            get disabled() {
+                return this.#___private_disabled_8;
+            }
+            set disabled(_v) {
+                this.#___private_disabled_8 = _v;
+            }
+            #___private_external_9 = _init_external(this, false);
+            get external() {
+                return this.#___private_external_9;
+            }
+            set external(_v) {
+                this.#___private_external_9 = _v;
+            }
+            get _focusableElement() {
+                return this.shadowRoot?.querySelector('a');
+            }
+            get _effectiveTarget() {
+                return this.external ? '_blank' : this.target;
+            }
+            get _effectiveRel() {
+                const isExternal = this.external || this.target === '_blank';
+                if (!isExternal) {
+                    return this.rel || nothing;
+                }
+                const rels = new Set((this.rel || '').split(' ').filter(Boolean));
+                rels.add('noopener');
+                rels.add('noreferrer');
+                return Array.from(rels).join(' ');
+            }
+            #___private_ariaLabel_10 = _init_ariaLabel(this, null);
+            get ariaLabel() {
+                return this.#___private_ariaLabel_10;
+            }
+            set ariaLabel(_v) {
+                this.#___private_ariaLabel_10 = _v;
+            }
+            render() {
+                const effectiveTarget = this._effectiveTarget;
+                const effectiveRel = this._effectiveRel;
+                const ariaDisabled = this.disabled ? 'true' : null;
+                const href = this.disabled || !this.href ? nothing : this.href;
+                const ariaLabel = this.ariaLabel ?? nothing;
+                return html`
+      <a
+        part="link"
+        class="link ${this.disabled ? 'disabled' : ''} variant-${this.variant} size-${this.size} underline-${this.underline}"
+        href=${href}
+        target=${effectiveTarget}
+        rel=${effectiveRel}
+        download=${this.download || nothing}
+        aria-disabled=${ariaDisabled}
+        aria-label=${ariaLabel}
+        tabindex=${this.disabled ? '-1' : '0'}
+      >
+        <slot name="icon" part="icon"></slot>
+        <slot></slot>
+        ${this.external ? html`<span part="external-icon">
+              <vi-icon name="external-link" size="14"></vi-icon>
+              <span class="sr-only">(opens in new tab)</span>
+            </span>` : nothing}
+      </a>
+    `;
+            }
+        }
+    }
+}();
+
+export { _ViLink as ViLink };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vialiq/web-components",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -119,12 +119,36 @@
     "./label/vi-label": {
       "types": "./label/vi-label.d.ts",
       "default": "./label/vi-label.js"
+    },
+    "./link": {
+      "types": "./link/index.d.ts",
+      "default": "./link/index.js"
+    },
+    "./link/vi-link": {
+      "types": "./link/vi-link.d.ts",
+      "default": "./link/vi-link.js"
+    },
+    "./tabs": {
+      "types": "./tabs/index.d.ts",
+      "default": "./tabs/index.js"
+    },
+    "./tabs/vi-tabs": {
+      "types": "./tabs/vi-tabs.d.ts",
+      "default": "./tabs/vi-tabs.js"
+    },
+    "./tabs/vi-tab": {
+      "types": "./tabs/vi-tab.d.ts",
+      "default": "./tabs/vi-tab.js"
+    },
+    "./tabs/vi-tab-panel": {
+      "types": "./tabs/vi-tab-panel.d.ts",
+      "default": "./tabs/vi-tab-panel.js"
     }
   },
   "peerDependencies": {
     "@floating-ui/dom": ">=1.0.0",
-    "@vialiq/flux-ui": ">=0.0.4 <0.1.0",
-    "@vialiq/icons": ">=0.0.3 <0.1.0",
+    "@vialiq/flux-ui": "^0.20.0",
+    "@vialiq/icons": "^0.5.0",
     "flatpickr": ">=4.6.0",
     "lit": "^3.0.0"
   },
@@ -149,6 +173,7 @@
     "badge/",
     "date-picker/",
     "label/",
+    "link/",
     "README.md"
   ],
   "peerDependenciesMeta": {