@lmvz-ds/components 0.26.0 → 0.27.1

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

@@ -45,24 +45,45 @@
   --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
   --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
   --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);
-  --input-border-color-focus: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
+  --input-border-color-focus: var(--lmvz-semantic-color-border-active, #0f8acc);
   --input-border-width: var(--lmvz-semantic-border-width-default, 1px);
-  --input-height: 48px; /* From Figma input-size=48 */
-  --input-padding-x: 16px;
+
+  /* Size defaults (md) */
+  --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));
+  --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
+  --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
 
   --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
   --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);
   --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
   --error-text-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
 
-  --label-floating-scale: 0.85; /* 14px -> 12px approx */
-  --label-minimized-top: -6px;
   --label-minimized-bg: var(--input-bg);
   --label-minimized-padding-x: 4px;
 
   /* Disabled state uses opacity token */
   --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%);
 }
+/* Size variants */
+:host([size='sm']) {
+  --input-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem));
+  --input-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  --input-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem));
+  --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem));
+}
+:host([size='md']) {
+  --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));
+  --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
+  --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
+}
+:host([size='lg']) {
+  --input-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem));
+  --input-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
+  --input-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+  --input-font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
+}
 .input-container {
   display: flex;
   flex-direction: column;
@@ -79,7 +100,7 @@
   padding: 0 var(--input-padding-x);
   position: relative;
   transition: border-color 0.2s ease;
-  gap: 8px; /* input-gap-x */
+  gap: var(--input-gap);
 }
 :host([disabled]) .input-wrapper {
   opacity: var(--input-disabled-opacity);
@@ -87,7 +108,7 @@
   pointer-events: none;
 }
 .input-container:focus-within .input-wrapper {
-  /* border-color: var(--input-border-color-focus); */
+  border-color: var(--input-border-color-focus);
   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
 }
@@ -95,10 +116,6 @@
 :host([error]) .input-wrapper {
   border-color: var(--error-text-color);
 }
-:host([error]):focus-within .input-wrapper {
-  border-color: var(--error-text-color);
-  outline-color: var(--error-text-color);
-}
 /* Hover State - Use CSS pseudo-selector instead of class */
 :host(:not([disabled])) .input-wrapper:hover {
   border-color: var(--input-border-color-hover);
@@ -116,26 +133,26 @@ label {
   top: 50%;
   transform: translateY(-50%);
   color: var(--label-color);
-  font-size: 14px; /* body-md size from Figma */
-  font-family: Router, sans-serif;
+  font-size: var(--input-font-size);
   font-weight: 400;
   pointer-events: none;
   transition: all 0.2s ease-out;
   background-color: transparent;
   padding: 0;
   margin: 0;
-  line-height: normal;
+  line-height: 1.5;
   white-space: nowrap;
 }
 label.floating {
-  top: 0; /* Align to top border area */
-  transform: translateY(-50%) scale(0.85); /* Scale down */
+  top: 0.5em;
+  transform: translateY(-100%);
   transform-origin: left top;
+  font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
   background-color: var(--label-minimized-bg);
   padding: 0 var(--label-minimized-padding-x);
   left: -2px; /* Adjust for padding/border visual alignment */
   color: var(--input-text-color); /* Darker when floating */
-  font-weight: 500; /* Medium weight when minimized */
+  font-weight: 400;
 }
 .required-indicator {
   color: var(--error-text-color);
@@ -148,11 +165,11 @@ input {
   height: 100%;
   color: var(--input-text-color);
   font-family: inherit;
-  font-size: 14px;
+  font-size: var(--input-font-size);
   outline: none;
   padding: 0;
   margin: 0;
-  font-weight: 400; /* Regular weight */
+  font-weight: 400;
 }
 input::placeholder {
   color: var(--label-color);
@@ -162,19 +179,17 @@ div:empty {
 }
 [role='status'] {
   padding-top: 8px; /* space-gap-component-input-helper-text */
-  padding-left: 12px; /* input-md-padding-x for helper text indent */
+  padding-left: var(--input-padding-x);
   font-size: 12px;
   color: var(--helper-text-color);
-  font-family: Router, sans-serif;
-  font-weight: 500; /* Medium weight */
+  font-weight: 400;
 }
 [role='alert'] {
   padding-top: 8px;
-  padding-left: 12px;
+  padding-left: var(--input-padding-x);
   font-size: 12px;
   color: var(--error-text-color);
-  font-family: Router, sans-serif;
-  font-weight: 500;
+  font-weight: 400;
 }
 ::slotted(lmvz-button) {
   /* Minimize padding for (icon) buttons due to height constraints */

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

@@ -56,6 +56,7 @@ export class LmvzInput extends ReactiveControllerHost {
     max;
     step;
     form;
+    size = 'md';
     get error() {
         return this.errorFromProp || this.nativeError;
     }
@@ -150,9 +151,9 @@ export class LmvzInput extends ReactiveControllerHost {
     render() {
         const hasValue = Boolean(this.value);
         const shouldFloatLabel = hasValue || Boolean(this.placeholder);
-        return (h("div", { key: 'b8c3aaccafb89725aaa157a72633c67ae8b4d58c', class: classNames('input-container', {
+        return (h("div", { key: '4be6846147fec950acad0c0cb8643bfa69233935', class: classNames('input-container', {
                 'interaction-filled': hasValue,
-            }) }, h("div", { key: '80261c486d3bfe61aa060d50e9a6774c961339a1', class: "input-wrapper" }, h("slot", { key: '6856dd64991251adc63d8064ed63e9cf7b1773a2', name: "before-input" }), h("div", { key: 'c975357079efef465c56fb50cbb404bd1cbe3fb1', class: "label-input-group" }, h("label", { key: '798417172f8411be97866edbffbd2bb98c308c69', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: '9fd59f3d93c984304e6c8ae6531df82bc0057243', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: 'a4e1133b4891c01044365eb3c97ee234c84c9bac', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), h("slot", { key: 'c774f03e704889b524f305c00d60c0902abdff5f', name: "after-input" })), h("div", { key: 'f513746541c71ce0d67c26eb220b54408fc3f136', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '197683e55807bf100ca1543f5b84b14e910e721f', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
+            }) }, h("div", { key: 'ae9bf8ffd91b73a86c2ebd21af051efe26a1d5fd', class: "input-wrapper" }, h("slot", { key: '36b3f7d97a11296aeead44c4d8ab4f0f8edf62d1', name: "before-input" }), h("div", { key: '4320f461ffa908730cd898863f43644aa3677081', class: "label-input-group" }, h("label", { key: '1dd51cf16f064303fd9c5249cbe3a357c7515ddc', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: '74bb8124b1126501201eb7c3361c6cf7f17dda5c', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: '9cff77bea65c50331a6804d7039672bbe01e710c', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), h("slot", { key: '689a3aa53e22f89173893adbc72eaf4953a2c7f6', name: "after-input" })), h("div", { key: 'd29b9ea209c138d0de09f71042f539a56ed4f9fa', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '8be227367abadb0e001d9475f0793aed31dbb64a', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
     }
     static get is() { return "lmvz-input"; }
     static get encapsulation() { return "scoped"; }
@@ -663,6 +664,36 @@ export class LmvzInput extends ReactiveControllerHost {
                 "reflect": false,
                 "attribute": "form"
             },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Input.Size",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "Input": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.d.ts::Input",
+                            "referenceLocation": "Input"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'md'"
+                        }],
+                    "text": "Size variant of the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
             "error": {
                 "type": "boolean",
                 "mutable": false,

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;
+}