@lmvz-ds/components 0.26.0 → 0.27.0

package/collection/components/lmvz-tab/lmvz-tab.css

@@ -0,0 +1,148 @@
+
+@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;
+/**
+ * This defines the order of our lmvz-ds' CSS layers. See readme.md for details.
+ * Important: Always import this file _before_ layering your own styles!
+ */
+@layer lmvz-ds.reset {
+body {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+*[hidden] {
+  display: none !important;
+}
+
+}
+:host {
+  display: inline-block;
+  flex: none;
+}
+:host([disabled]) {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+button {
+  --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000);
+  --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);
+
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--lmvz-component-component-spacing-0-default, 4px);
+
+  padding-top: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  padding-bottom: var(--lmvz-dimension-8-14, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem));
+  padding-inline: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
+
+  border: none;
+  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
+  background: var(--lmvz-tab-background);
+  color: var(--lmvz-tab-color);
+
+  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+button:focus-visible {
+  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
+  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
+  z-index: 1;
+}
+button:disabled {
+  opacity: var(--lmvz-component-input-disabled-opacity, 40%);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+button:hover {
+  --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
+  --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000);
+}
+button:active {
+  --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);
+  --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000);
+}
+:host([has-media]) {
+  --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);
+  --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);
+}
+:host([has-media]) button {
+  padding-top: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
+  padding-bottom: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  padding-inline: var(--lmvz-dimension-40-48, clamp(2.5rem, 2.38rem + 0.52vw, 3rem));
+  border-radius: var(--lmvz-semantic-border-radius-lg, 14px);
+}
+:host([has-media]) button:hover {
+  --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000);
+}
+:host([has-media]) button:active {
+  --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000);
+}
+:host([selected]) button {
+  --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
+  --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe);
+}
+:host([selected][has-media]) button:hover,
+:host([selected][has-media]) button:active {
+  --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
+}
+.indicator {
+  /* TODO: replace with a design token if one is introduced for tab indicator border */
+  --lmvz-tab-indicator-size: 4px;
+
+  position: absolute;
+  background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4));
+  opacity: 0;
+  transition: opacity 0.15s ease;
+
+  /* Horizontal: full-width bar at bottom */
+  inset-block-end: 0;
+  inset-inline: 0;
+  block-size: var(--lmvz-tab-indicator-size);
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: var(--lmvz-tab-indicator-size);
+  border-end-end-radius: var(--lmvz-tab-indicator-size);
+}
+:host([selected][has-media]) .indicator {
+  opacity: 1;
+}
+:host([vertical]) button {
+  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
+}
+:host([vertical]) .indicator {
+  /* Vertical: narrow bar at inline-start edge */
+  inset-block: 0;
+  inset-inline: 0 auto;
+  inline-size: var(--lmvz-tab-indicator-size);
+  block-size: auto;
+  border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0;
+  background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4));
+}
+::slotted(*) {
+  --lmvz-component-color: var(--lmvz-tab-color);
+}
+::slotted(lmvz-icon) {
+  --lmvz-component-size: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
+}
+:host([has-media]) ::slotted(lmvz-icon) {
+  --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem));
+}
+.label {
+  display: contents;
+}

package/collection/components/lmvz-tab/lmvz-tab.js

@@ -0,0 +1,125 @@
+import { Host, h } from "@stencil/core";
+export class LmvzTab {
+    el;
+    mediaSlotEl;
+    value;
+    disabled = false;
+    selected = false;
+    vertical = false;
+    handleMediaSlotChange = () => {
+        this.el.toggleAttribute('has-media', (this.mediaSlotEl?.assignedElements() ?? []).length > 0);
+    };
+    componentDidLoad() {
+        this.handleMediaSlotChange();
+        this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
+    }
+    render() {
+        return (h(Host, { key: 'f02b0624ac752f25e3996071ab88be1364dd27c3' }, h("button", { key: '1666fea6a68c66d5bf88141660067a66e0164891', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, h("slot", { key: '23d1ef98da2a72efa3a5ec1563298fc4c08da441', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), h("span", { key: 'bd96765d2228817c621a2ad4fd4f3b05fcdb3a21', class: "label" }, h("slot", { key: 'ef51c25169a1d993797a86b89fa296218e264969' })), h("span", { key: '28dda1631d62325a29e285909ee3f1c0ea9da3ad', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
+    }
+    static get is() { return "lmvz-tab"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lmvz-tab.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique value that identifies this tab within its `lmvz-tabs` parent.\nThe parent uses this to track the selected tab."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the tab is disabled.\nDisabled tabs are not activatable and are skipped by arrow-key navigation in `lmvz-tabs`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether this tab is currently selected.\nSet by the parent `lmvz-tabs` component \u2014 do not set manually."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "vertical": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Vertical orientation context.\nSet by the parent `lmvz-tabs` when `orientation=\"vertical\"` \u2014 do not set manually.\nWhen true the selection indicator moves to the inline-start edge."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "vertical",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/collection/components/lmvz-tabs/lmvz-tabs.css

@@ -0,0 +1,58 @@
+
+@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;
+/**
+ * This defines the order of our lmvz-ds' CSS layers. See readme.md for details.
+ * Important: Always import this file _before_ layering your own styles!
+ */
+@layer lmvz-ds.reset {
+body {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+*[hidden] {
+  display: none !important;
+}
+
+}
+:host {
+  display: inline-block;
+}
+.tablist {
+  display: inline-flex;
+  flex-direction: row;
+  background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);
+  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
+  /* Horizontal overflow: tabs scroll when they overflow the container */
+  overflow: auto hidden;
+  /* Hide scrollbar visually while keeping scroll functionality */
+  scrollbar-width: none; /* Firefox */
+}
+.tablist::-webkit-scrollbar {
+  display: none; /* Chrome/Safari */
+}
+:host([has-icon-tabs]) .tablist {
+  gap: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
+  background: none;
+  border-radius: 0;
+}
+/* ── Vertical orientation ────────────────────────────────────────────────── */
+:host([orientation='vertical']) .tablist {
+  flex-direction: column;
+  overflow: visible auto;
+}
+/* The panels slot renders inline; individual panels control their own display */
+::slotted([role='tabpanel']) {
+  display: block;
+}
+::slotted([role='tabpanel'][hidden]) {
+  display: none;
+}