xv-webcomponents 1.16.8-qa.0 → 1.17.2-qa.0

package/dist/collection/components/xv-content-switcher/xv-content-switcher.css

@@ -0,0 +1,275 @@
+.xv-container {
+  width: 100%;
+  max-width: 1170px;
+  margin-inline: auto;
+}
+@media (min-width: 576px) {
+  .xv-container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .xv-container {
+    max-width: 720px;
+  }
+}
+@media (min-width: 992px) {
+  .xv-container {
+    max-width: 960px;
+    padding-inline: var(--bs-gutter-x, 0.75rem);
+  }
+}
+@media (min-width: 1200px) {
+  .xv-container {
+    max-width: 1140px;
+  }
+}
+@media (min-width: 1400px) {
+  .xv-container {
+    max-width: 1320px;
+  }
+}
+
+.xv-tooltip[role=tooltip] {
+  position: absolute;
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-sm);
+  z-index: 999;
+  min-width: min(150px, 90vw);
+  max-width: min(400px, 90vw);
+}
+.xv-tooltip[role=tooltip]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
+  bottom: -5px;
+  left: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
+  bottom: -5px;
+  right: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
+  top: -5px;
+  left: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
+  top: -5px;
+  right: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
+  top: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
+  bottom: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
+  top: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
+  bottom: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+
+:host {
+  display: inline-block;
+  text-align: left;
+  font-family: var(--ff-body, Work Sans), sans-serif;
+}
+
+:host([block]) {
+  display: block;
+}
+:host([block]) .switcher {
+  display: grid;
+}
+
+.switcher {
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: stretch;
+  border: 1px solid var(--border-inverse, #131313);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.switcher_item {
+  all: unset;
+  box-sizing: border-box;
+  position: relative;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--spacing-03, 8px);
+  cursor: pointer;
+  color: var(--text-secondary, #515151);
+  background-color: transparent;
+  font-family: inherit;
+  font-size: var(--fz-md, 14px);
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.16px;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+.switcher_item + .switcher_item::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1px;
+  height: 16px;
+  background-color: var(--border-subtle-01, #d1d1d1);
+}
+.switcher_item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  line-height: 1;
+  color: var(--icon-primary, #131313);
+}
+.switcher_item-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.switcher_item:hover:not(.selected):not(:disabled) {
+  background-color: var(--background-hover, rgba(139, 139, 139, 0.12));
+}
+.switcher_item:focus-visible {
+  outline: 2px solid var(--focus, #0f62fe);
+  outline-offset: -2px;
+}
+.switcher_item.selected {
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-inverse, #fff);
+}
+.switcher_item.selected .switcher_item-icon {
+  color: var(--icon-on-color, #fff);
+}
+.switcher_item.selected:hover {
+  background-color: var(--background-inverse-hover, #515151);
+}
+.switcher_item.selected::before, .switcher_item.selected + .switcher_item::before {
+  display: none;
+}
+.switcher_item:disabled {
+  cursor: not-allowed;
+  color: var(--text-disabled, rgba(19, 19, 19, 0.25));
+}
+.switcher_item:disabled .switcher_item-icon {
+  color: var(--icon-disabled, rgba(19, 19, 19, 0.25));
+}
+.switcher_item:disabled.selected {
+  background-color: var(--button-disabled, #d1d1d1);
+  color: var(--text-disabled, rgba(19, 19, 19, 0.25));
+}
+.switcher_item:disabled.selected .switcher_item-icon {
+  color: var(--icon-on-color-disabled, #8b8b8b);
+}
+.switcher_content:focus {
+  outline: none;
+}
+
+:host([disabled]) .switcher {
+  border-color: var(--border-disabled, #d1d1d1);
+}
+:host([disabled]) .switcher .switcher_item::before {
+  background-color: var(--border-disabled, #d1d1d1);
+}
+
+::slotted(xv-content-switcher-item-v2) {
+  display: none;
+}
+
+::slotted(xv-content-switcher-item-v2.active) {
+  display: block;
+}
+
+:host([size=sm]) .switcher_item {
+  padding: 7px var(--spacing-05, 16px);
+}
+
+:host(:not([size])) .switcher_item,
+:host([size=md]) .switcher_item {
+  padding: 11px var(--spacing-05, 16px);
+}
+
+:host([size=lg]) .switcher_item {
+  padding: 15px var(--spacing-05, 16px);
+}
+
+:host([icon-only]) .switcher_item {
+  justify-content: center;
+  gap: 0;
+}
+
+:host([icon-only][size=sm]) .switcher_item {
+  padding: 8px;
+}
+
+:host([icon-only]:not([size])) .switcher_item,
+:host([icon-only][size=md]) .switcher_item {
+  padding: 12px;
+}
+
+:host([icon-only][size=lg]) .switcher_item {
+  padding: 14px;
+}

package/dist/collection/components/xv-content-switcher/xv-content-switcher.js

@@ -0,0 +1,310 @@
+import { Host, h } from "@stencil/core";
+import { CONTENT_SWITCHER_NAV_KEYS, CONTENT_SWITCHER_TAGS } from "./_vars";
+import { SIZE_VAR } from "../../types/enum";
+/**
+ * xv-content-switcher-v2
+ *
+ * Carbon-style content switcher: a single-select segmented control that toggles
+ * between mutually exclusive sections of content.
+ * @see https://carbondesignsystem.com/components/content-switcher/usage/
+ *
+ * The buttons are derived from the `xv-content-switcher-item-v2` children, so the
+ * group can manage shared borders, dividers and rounded corners in one place.
+ * Each item may also hold slotted content that is shown only while it is selected.
+ *
+ * IMPORTANT — slotted panels are only HIDDEN (CSS `display: none`), never unmounted.
+ * Slotted content lives in the consumer's light DOM, so the framework instantiates
+ * it (and runs lifecycle hooks like Angular's `ngOnInit`, subscriptions, requests)
+ * regardless of which item is selected — the switcher cannot prevent that. Use this
+ * slotted convenience only for cheap, static markup. For panels with lifecycle or
+ * side effects, do NOT slot them: keep the switcher as a pure selection control and
+ * render the active panel yourself via a framework conditional (e.g. Angular `@if`
+ * on `selectedChange`), so only the selected panel is ever instantiated.
+ *
+ * @slot - One or more `xv-content-switcher-item-v2` elements.
+ */
+export class XvContentSwitcher {
+    constructor() {
+        /**
+         * Control size. Only `sm`, `md` and `lg` are supported (defaults to `md`).
+         */
+        this.size = SIZE_VAR.MD;
+        /**
+         * Render items as icon-only buttons (the item `label` is used as the accessible name).
+         */
+        this.iconOnly = false;
+        /**
+         * Disable the whole switcher.
+         */
+        this.disabled = false;
+        /**
+         * Stretch the switcher to the full width of its container.
+         */
+        this.block = false;
+        /**
+         * Controlled mode. When `true`, clicking/keyboard navigation does NOT change
+         * the selection on its own — it only emits `selectedChange` with the requested
+         * value. The consumer fully owns `selected` and decides whether to commit it
+         * (e.g. after an async confirmation), so a switch can be vetoed without flicker.
+         */
+        this.controlled = false;
+        /**
+         * Collected `xv-content-switcher-item-v2` children.
+         */
+        this.items = [];
+        this.collectItems = () => {
+            this.items = Array.from(this.el.querySelectorAll(CONTENT_SWITCHER_TAGS.ITEM));
+            // Default to the first item when nothing valid is selected yet.
+            if (!this.isSelectionValid()) {
+                const firstEnabled = this.items.findIndex((item) => !this.isItemDisabled(item));
+                if (firstEnabled !== -1)
+                    this.selected = this.getItemKey(this.items[firstEnabled], firstEnabled);
+            }
+        };
+        this.handleKeyDown = (event, index) => {
+            var _a, _b;
+            const { NEXT, PREV, FIRST, LAST } = CONTENT_SWITCHER_NAV_KEYS;
+            let nextIndex = null;
+            if (NEXT.includes(event.key))
+                nextIndex = this.findEnabled(index + 1, 1);
+            else if (PREV.includes(event.key))
+                nextIndex = this.findEnabled(index - 1, -1);
+            else if (FIRST.includes(event.key))
+                nextIndex = this.findEnabled(0, 1);
+            else if (LAST.includes(event.key))
+                nextIndex = this.findEnabled(this.items.length - 1, -1);
+            else
+                return;
+            event.preventDefault();
+            if (nextIndex === null)
+                return;
+            this.select(this.getItemKey(this.items[nextIndex], nextIndex));
+            // Move focus to the newly selected button (roving tabindex).
+            const buttons = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.switcher_item');
+            (_b = buttons === null || buttons === void 0 ? void 0 : buttons[nextIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+        };
+    }
+    componentWillLoad() {
+        // `slotchange` handles dynamic updates; collect once up front for the
+        // items present at load so the first render already has its buttons.
+        this.collectItems();
+    }
+    componentDidRender() {
+        // Mirror the selected state onto the slotted items so their content panels
+        // show/hide (see `::slotted(...active)` in the stylesheet).
+        this.updateItemsState();
+    }
+    getItemKey(item, index) {
+        const value = item.getAttribute('value');
+        return value !== null && value !== '' ? value : index;
+    }
+    isItemDisabled(item) {
+        return this.disabled || item.hasAttribute('disabled');
+    }
+    isSelected(item, index) {
+        return this.selected !== undefined && `${this.getItemKey(item, index)}` === `${this.selected}`;
+    }
+    isSelectionValid() {
+        return this.items.some((item, index) => this.isSelected(item, index));
+    }
+    select(key) {
+        if (this.disabled || `${key}` === `${this.selected}`)
+            return;
+        // In controlled mode the consumer owns `selected`; only announce the intent.
+        if (!this.controlled)
+            this.selected = key;
+        this.selectedChange.emit(key);
+    }
+    /** Reflect the `active` class on items so their slotted content shows/hides. */
+    updateItemsState() {
+        this.items.forEach((item, index) => {
+            if (this.isSelected(item, index))
+                item.classList.add('active');
+            else
+                item.classList.remove('active');
+        });
+    }
+    /** Find the next non-disabled item starting at `from`, walking by `step`. */
+    findEnabled(from, step) {
+        for (let i = from; i >= 0 && i < this.items.length; i += step) {
+            if (!this.isItemDisabled(this.items[i]))
+                return i;
+        }
+        return null;
+    }
+    render() {
+        return (h(Host, { key: '2f783317e906b04632e2666b27956c3d772f2979' }, h("div", { key: '9f008bfcd3a6e8e075a14b13dbcb406d97db7fff', class: "switcher", role: "tablist", "aria-orientation": "horizontal" }, this.items.map((item, index) => {
+            const key = this.getItemKey(item, index);
+            const selected = this.isSelected(item, index);
+            const itemDisabled = this.isItemDisabled(item);
+            const label = item.getAttribute('label') || '';
+            const icon = item.getAttribute('icon');
+            return (h("button", { type: "button", role: "tab", class: { switcher_item: true, selected }, "aria-selected": selected ? 'true' : 'false', "aria-label": this.iconOnly ? label || undefined : undefined, title: this.iconOnly ? label || undefined : undefined, disabled: itemDisabled, tabIndex: selected ? 0 : -1, onClick: () => this.select(key), onKeyDown: (event) => this.handleKeyDown(event, index) }, icon && h("i", { class: `switcher_item-icon ${icon}`, "aria-hidden": "true" }), !this.iconOnly && label && h("span", { class: "switcher_item-label" }, label)));
+        })), h("div", { key: 'ab00606b5b8d464ef1eb564030478191128319ae', class: "switcher_content", role: "tabpanel", tabindex: -1 }, h("slot", { key: '3977d4f17947f12f586fe4bbe0f1f9c81ef1ad18', onSlotchange: this.collectItems }))));
+    }
+    static get is() { return "xv-content-switcher-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-content-switcher.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-content-switcher.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selected": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected item \u2014 matched against each item's `value` attribute,\nor its zero-based index when it has no `value`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SIZE_VAR_STR",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "SIZE_VAR_STR": {
+                            "location": "import",
+                            "path": "../../types/enum",
+                            "id": "src/types/enum.ts::SIZE_VAR_STR"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Control size. Only `sm`, `md` and `lg` are supported (defaults to `md`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "SIZE_VAR.MD"
+            },
+            "iconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render items as icon-only buttons (the item `label` is used as the accessible name)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "icon-only",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the whole switcher."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "block": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stretch the switcher to the full width of its container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "block",
+                "defaultValue": "false"
+            },
+            "controlled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled mode. When `true`, clicking/keyboard navigation does NOT change\nthe selection on its own \u2014 it only emits `selectedChange` with the requested\nvalue. The consumer fully owns `selected` and decides whether to commit it\n(e.g. after an async confirmation), so a switch can be vetoed without flicker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "controlled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "items": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selectedChange",
+                "name": "selectedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the selection changes (value, or index when the item has no value).\nIn `controlled` mode this carries the *requested* value before any commit."
+                },
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/xv-data-table/xv-data-table-cell/xv-data-table-cell.js

@@ -22,7 +22,7 @@ export class XvDataTableCell {
     }
     ;
     render() {
-        return (h(Host, { key: 'aad24baff63999cfcabbb17b8d323821847a8dca', role: "cell", style: { width: this.width }, class: {
+        return (h(Host, { key: '4c47f740484cd42899ed300c2300a4955767e494', role: "cell", style: { width: this.width }, class: {
                 multiline: this.multiline !== undefined,
                 [`align--${this.align}`]: !!this.align
             } }, !this.multiline || isNaN(this.multiline) ? this.__renderWithTooltip() : (h("div", { class: "line-clamp", style: { ['-webkit-line-clamp']: `${this.multiline}` } }, this.__renderWithTooltip()))));

package/dist/collection/components/xv-data-table/xv-data-table-collapse/xv-data-table-collapse.js

@@ -15,7 +15,7 @@ export class XvDataTableCollapse {
         rows.forEach((row) => row === null || row === void 0 ? void 0 : row.setAttribute('collapsable', ''));
     }
     render() {
-        return (h(Host, { key: '17a7f3df09a12f38b7b634a09ac136107b2c8c63', id: this.el.id, part: "xv-collapse", class: this.el.className, collapsed: this.collapsed, expanded: !this.collapsed }, h("slot", { key: '5e70be82424d129f3757977c9a7c13d9d71f1b98' })));
+        return (h(Host, { key: 'b4b9610e77edd0a4eb5669784a12df6c06d57398', id: this.el.id, part: "xv-collapse", class: this.el.className, collapsed: this.collapsed, expanded: !this.collapsed }, h("slot", { key: 'b6aa331515b8bcd5884f9b72e6fd46515adadf3c' })));
     }
     static get is() { return "xv-data-table-collapse"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-data-table/xv-data-table-row/xv-data-table-row.js

@@ -74,7 +74,7 @@ export class XvDataTableRow {
         const isGroup = !!this.collapse || !!this.group;
         const isDraggableRow = this.reorderable && !isHeader && !isFooter && !this.group;
         const showHandleCell = this.reorderable && this.reorderHandleMode === 'icon';
-        return (h(Host, { key: '74ea5e91d4423b4f5751fcaf5bce50e11843805c', role: "row", part: "xv-row", class: {
+        return (h(Host, { key: '220e41fb2db763b39ac56de16fa305226fef268b', role: "row", part: "xv-row", class: {
                 checked: this.checked,
                 hover: this.hover,
                 disabled: this.disabled,
@@ -82,7 +82,7 @@ export class XvDataTableRow {
                 header: isHeader,
                 footer: isFooter,
                 'reorder-row': isDraggableRow && this.reorderHandleMode === 'row',
-            } }, showHandleCell && (h("xv-data-table-cell", { key: '806087b882248f7f1317a3ad23c64f3e0d550d76', width: "16px", class: "cell-control cell-control--drag" }, isDraggableRow && (h("span", { key: 'ad6ab54599047674f535397f705bf78f5169e3fc', class: `cell-control_drag ${XV_ROW_DRAG_HANDLE_CLASS}`, "aria-label": "Drag to reorder" }, h("svg", { key: 'b6c038a701bf7b24f3639eca9c772c46485b6007', viewBox: "0 0 8 14", width: "8", height: "14", fill: "currentColor", "aria-hidden": "true" }, h("circle", { key: '6a036769cc49e19fb5cf53d41b03d9822c057857', cx: "2", cy: "2", r: "1.2" }), h("circle", { key: '20b8ee5561fe23f75db9b9d98e1c7211b43986dc', cx: "6", cy: "2", r: "1.2" }), h("circle", { key: '6f685e7cb62f3093d51b92be0519841aac132a41', cx: "2", cy: "7", r: "1.2" }), h("circle", { key: 'e93f642c885bb32dd68fd7ffe38c528b0f06f5e6', cx: "6", cy: "7", r: "1.2" }), h("circle", { key: '4ed95d06db9caff9b7f672be9faba43c62b5f10e', cx: "2", cy: "12", r: "1.2" }), h("circle", { key: 'ad4574700d5497d8dd2b050a438ebe45c9d0554a', cx: "6", cy: "12", r: "1.2" })))))), (!!this.variant || this.collapsable) && (h("xv-data-table-cell", { key: '96bc6bb3c9b05147940691f57b222e3b984d4597', width: !!this.variant ? '16px' : '0', class: "cell-control" }, !!this.collapse && (h("button", { key: '79c7b71873a2f07decb6fc71fb8842b8f94f7f4d', class: { 'cell-control_collapse': true, open: !this.collapsed }, onClick: this.collapseClick })), this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: '950ab4b841ea1c1f71ca968db8c3e88827a420e1', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, readonly: this.readonly, required: this.required, onEventChange: this.checkedChangeHandle, class: "cell-control_checkbox" })))), h("slot", { key: 'aa156d42a6c407d7fe213d165d8a4abab3b3aed8', onSlotchange: this.setInitialState })));
+            } }, showHandleCell && (h("xv-data-table-cell", { key: 'c9d60451fb1781b94c2df312713173953c77998c', width: "16px", class: "cell-control cell-control--drag" }, isDraggableRow && (h("span", { key: '06f681f0aa1fad4d798aa84ad7123b55f5aaa7c5', class: `cell-control_drag ${XV_ROW_DRAG_HANDLE_CLASS}`, "aria-label": "Drag to reorder" }, h("svg", { key: '5f6bd2e58cd7dca1f1843c4b8868409cb7144023', viewBox: "0 0 8 14", width: "8", height: "14", fill: "currentColor", "aria-hidden": "true" }, h("circle", { key: '87b663ee0b2ac198cb69476814a2c097d6b1d2c9', cx: "2", cy: "2", r: "1.2" }), h("circle", { key: '3917cefb67ebcd2b8c26df7b9d4a2e1ad5023bc0', cx: "6", cy: "2", r: "1.2" }), h("circle", { key: '1f1778da1585511f8d9dd0ca4bcc8558e0610574', cx: "2", cy: "7", r: "1.2" }), h("circle", { key: '3e090df05f5eef959e4237213d2df95cd2c758c6', cx: "6", cy: "7", r: "1.2" }), h("circle", { key: 'f2c3c6e39482536f968fb3dfe2da518035388189', cx: "2", cy: "12", r: "1.2" }), h("circle", { key: 'be761faf2e9741c520e89e84b3c6d5c71d44826e', cx: "6", cy: "12", r: "1.2" })))))), (!!this.variant || this.collapsable) && (h("xv-data-table-cell", { key: '8d028993f15499799658c5c3f34be69b1eee807f', width: !!this.variant ? '16px' : '0', class: "cell-control" }, !!this.collapse && (h("button", { key: '29e7e558765f1c9b034b37f2cee10784662924c4', class: { 'cell-control_collapse': true, open: !this.collapsed }, onClick: this.collapseClick })), this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: '062b73dfe88f5591975a5996e5bfa5b76faec1c0', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, readonly: this.readonly, required: this.required, onEventChange: this.checkedChangeHandle, class: "cell-control_checkbox" })))), h("slot", { key: 'c9011f9b8ef09affaf7c707e554fdeff6e28943e', onSlotchange: this.setInitialState })));
     }
     static get is() { return "xv-data-table-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-data-table/xv-data-table.js

@@ -104,7 +104,7 @@ export class XvDataTable {
         this.initSortable();
     }
     render() {
-        return (h(Host, { key: '46b0c11ca4a13dbded5d7b5e3e44650f370a8711', class: "xv-data-table" }, h("caption", { key: 'aebf6cae0ea46563440ba971624635fa8cbadb72' }, h("slot", { key: 'af920f9c9705d1811c3980201c5bc4f9bb0bc84c', name: "title" })), h("div", { key: '89c886de25873e4d514e77572be7ca6de329f096', class: "bar" }, h("div", { key: '688b92cfc93878847e6925e3120ef3f59696cafd', class: "bar_batch" }, h("slot", { key: '8909114bda82194459f0338a23db76b527a1fe5a', name: "batch" })), h("div", { key: '555c3b65badfd9645767e89714a9d2c97dc9f7c1', class: "bar_toolbar" }, h("slot", { key: '9946f62bd101f59e3622321dfe86efaff2c0574b', name: "toolbar" }))), h("table", { key: 'a998f83af603ceef8b26667b117eeee99627ed54', role: "table" }, this.columnWidths.length > 0 && (h("colgroup", { key: '3e46d94f2ed815a4980928f65fefe724d39cd23c' }, this.columnWidths.map((width = 'auto') => h("col", { style: { width } })))), h("thead", { key: 'cb1a3b8db2ef9acbf1258e927612f092b8cf9a74' }, h("slot", { key: '9f18a1f0c2e08be4e6234f6b92184673afb6deb9', name: "header" })), h("tbody", { key: 'deb98974530349fb5d07edbc64e5d41de7a1ff64' }, h("slot", { key: 'a9c85de5cdcd0aee2685003775797ef70f0a08f9' })), h("tfoot", { key: '0e94add0841b8dfe2c47fc50c6ac0e517a8e55af' }, h("slot", { key: 'd7c33b811006d6b8bac137bded4a9c44a7ea0dc0', name: "footer" }))), !!this.loading && (h("div", { key: 'a699818d55901f79fabefbd33f5c97f9058fb348', class: "loading" }, h("xv-loader-v2", { key: 'e8a137029a7f418fe82a21aff761d9c737d05310', size: SIZE_VAR.LG })))));
+        return (h(Host, { key: 'aef386c711cc3ae043d1228cac0b87737f9b70f1', class: "xv-data-table" }, h("caption", { key: 'a6577aba4dbbc50f6c953e25b533585b01d188ac' }, h("slot", { key: '02b1c865868d5fae89a558d35f7f7047cfd3ed3e', name: "title" })), h("div", { key: '19466d4e9e89a628d9df5ced1ac73c72d77650d2', class: "bar" }, h("div", { key: 'ec12712ac2b23d1f5ec2efe97cc5f5849e22808d', class: "bar_batch" }, h("slot", { key: '88e51529ecaffbda842b143e59caf60250ea3f66', name: "batch" })), h("div", { key: '3d7faf0d529a73e62a7e6e9ba567b9359c1ad795', class: "bar_toolbar" }, h("slot", { key: '1b4b5d8309eb02c98319be1b5b2c2fb9bf3b4b71', name: "toolbar" }))), h("table", { key: '7a3fc93e97d5e0cdc6a6a913609732e17f28aa01', role: "table" }, this.columnWidths.length > 0 && (h("colgroup", { key: '3ba295f8bfd44c1cc38c20c00131ce9ecb72e531' }, this.columnWidths.map((width = 'auto') => h("col", { style: { width } })))), h("thead", { key: 'a559bfeb5663ffcc0e4498a4efb667c85cb4b38d' }, h("slot", { key: 'aa87d90376a00bff11290ff41798162fae2a56a5', name: "header" })), h("tbody", { key: 'b8c6f100aa44110756317925b63fefbd44592e6b' }, h("slot", { key: 'e80e2461de26f46ccdef560d3bbd4357403a3a2e' })), h("tfoot", { key: '7a456ccbc039cd954417e7eb4880947e6199a8b3' }, h("slot", { key: 'ad358cf3e113802cf297bcd01d02ced5bbcd9cdf', name: "footer" }))), !!this.loading && (h("div", { key: 'f4b8dad2f9dea6da37797a41c3258c08b5d98761', class: "loading" }, h("xv-loader-v2", { key: '49d3273a7b869bb94584e3dac6f4099a404d1697', size: SIZE_VAR.LG })))));
     }
     static get is() { return "xv-data-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-datepicker/xv-datepicker.css

@@ -142,7 +142,7 @@
 :host .control_label {
   color: var(--text-secondary, #515151);
   font-size: 0.8571428571em;
-  font-weight: 700;
+  font-weight: 400;
 }
 :host .control_field {
   position: relative;
@@ -154,7 +154,7 @@
   flex: 1 1 0;
   border-radius: 3px;
   color: var(--text-primary, #333);
-  font-family: var(--ff-body);
+  font-family: var(--ff-body), sans-serif;
   font-size: 1em;
   background-color: transparent;
   font-style: normal;
@@ -287,7 +287,7 @@
   text-transform: capitalize;
   color: var(--text-primary, #333);
   text-align: center;
-  font-family: var(--ff-body);
+  font-family: var(--ff-body), sans-serif;
   font-size: 1em;
   font-weight: 700;
   letter-spacing: 0.16px;
@@ -332,7 +332,7 @@
   padding: 0;
   box-sizing: border-box;
   color: var(--text-primary, #333);
-  font-family: var(--ff-body);
+  font-family: var(--ff-body), sans-serif;
   font-size: 1em;
   letter-spacing: 0.16px;
   user-select: none;