@vialiq/web-components 0.24.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,8 +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

@@ -29,3 +29,5 @@ 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/vi-link.d.ts.map

@@ -1 +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;CA8BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"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

@@ -581,6 +581,7 @@ new class extends _identity {
               <vi-icon name="external-link" size="14"></vi-icon>
               <span class="sr-only">(opens in new tab)</span>
             </span>` : nothing}
+      </a>
     `;
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vialiq/web-components",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -127,12 +127,28 @@
     "./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.19.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"
   },