@latty-ds/web 0.9.0 → 0.10.0

package/dist/components/text/index.js

@@ -59,61 +59,97 @@ var textStyles = css`
   /* ── Display ─────────────────────────────────────────────────────────── */
 
   :host([variant='display-2xl']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2.5rem, 6vw, 4.5rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.1;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='display-xl']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2rem, 5vw, 3.75rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.1;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='display-lg']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.15;
-    letter-spacing: -0.01em;
+    letter-spacing: var(--lt-text-tracking, -0.01em);
   }
 
   /* ── Headings ─────────────────────────────────────────────────────────── */
 
   :host([variant='h1']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.2;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='h2']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.25;
-    letter-spacing: -0.01em;
+    letter-spacing: var(--lt-text-tracking, -0.01em);
   }
 
   :host([variant='h3']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.3;
   }
 
   :host([variant='h4']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1.25rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.35;
   }
 
   :host([variant='h5']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1.125rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.4;
   }
 
   :host([variant='h6']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.4;
@@ -152,7 +188,7 @@ var textStyles = css`
     font-size: 0.6875rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.2;
-    letter-spacing: 0.08em;
+    letter-spacing: var(--lt-text-tracking, 0.08em);
     text-transform: uppercase;
   }
 

package/dist/components/text/text.d.ts

@@ -13,6 +13,7 @@ import type { TextVariant, TextTag } from './text.types';
  *
  * @element lt-text
  * @cssprop [--lt-text-weight] - Overrides the default font-weight for the variant.
+ * @cssprop [--lt-text-tracking] - Overrides the default letter-spacing for the variant.
  *
  * @example
  * ```html

package/dist/components/textfield/index.js

@@ -313,61 +313,97 @@ var textStyles = css2`
   /* ── Display ─────────────────────────────────────────────────────────── */
 
   :host([variant='display-2xl']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2.5rem, 6vw, 4.5rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.1;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='display-xl']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2rem, 5vw, 3.75rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.1;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='display-lg']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.15;
-    letter-spacing: -0.01em;
+    letter-spacing: var(--lt-text-tracking, -0.01em);
   }
 
   /* ── Headings ─────────────────────────────────────────────────────────── */
 
   :host([variant='h1']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.2;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='h2']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.25;
-    letter-spacing: -0.01em;
+    letter-spacing: var(--lt-text-tracking, -0.01em);
   }
 
   :host([variant='h3']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.3;
   }
 
   :host([variant='h4']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1.25rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.35;
   }
 
   :host([variant='h5']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1.125rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.4;
   }
 
   :host([variant='h6']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.4;
@@ -406,7 +442,7 @@ var textStyles = css2`
     font-size: 0.6875rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.2;
-    letter-spacing: 0.08em;
+    letter-spacing: var(--lt-text-tracking, 0.08em);
     text-transform: uppercase;
   }
 

package/dist/components/tooltip/index.js

@@ -176,61 +176,97 @@ var textStyles = css2`
   /* ── Display ─────────────────────────────────────────────────────────── */
 
   :host([variant='display-2xl']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2.5rem, 6vw, 4.5rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.1;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='display-xl']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2rem, 5vw, 3.75rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.1;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='display-lg']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.15;
-    letter-spacing: -0.01em;
+    letter-spacing: var(--lt-text-tracking, -0.01em);
   }
 
   /* ── Headings ─────────────────────────────────────────────────────────── */
 
   :host([variant='h1']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.2;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='h2']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.25;
-    letter-spacing: -0.01em;
+    letter-spacing: var(--lt-text-tracking, -0.01em);
   }
 
   :host([variant='h3']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.3;
   }
 
   :host([variant='h4']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1.25rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.35;
   }
 
   :host([variant='h5']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1.125rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.4;
   }
 
   :host([variant='h6']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.4;
@@ -269,7 +305,7 @@ var textStyles = css2`
     font-size: 0.6875rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.2;
-    letter-spacing: 0.08em;
+    letter-spacing: var(--lt-text-tracking, 0.08em);
     text-transform: uppercase;
   }
 

package/dist/index.cjs

@@ -1514,61 +1514,97 @@ var textStyles = i`
   /* ── Display ─────────────────────────────────────────────────────────── */
 
   :host([variant='display-2xl']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2.5rem, 6vw, 4.5rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.1;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='display-xl']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2rem, 5vw, 3.75rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.1;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='display-lg']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.15;
-    letter-spacing: -0.01em;
+    letter-spacing: var(--lt-text-tracking, -0.01em);
   }
 
   /* ── Headings ─────────────────────────────────────────────────────────── */
 
   :host([variant='h1']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.2;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='h2']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.25;
-    letter-spacing: -0.01em;
+    letter-spacing: var(--lt-text-tracking, -0.01em);
   }
 
   :host([variant='h3']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.3;
   }
 
   :host([variant='h4']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1.25rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.35;
   }
 
   :host([variant='h5']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1.125rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.4;
   }
 
   :host([variant='h6']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.4;
@@ -1607,7 +1643,7 @@ var textStyles = i`
     font-size: 0.6875rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.2;
-    letter-spacing: 0.08em;
+    letter-spacing: var(--lt-text-tracking, 0.08em);
     text-transform: uppercase;
   }
 
@@ -2015,6 +2051,30 @@ var buttonStyles = i`
     opacity: 0.8;
   }
 
+  /* bordered — adds a border on top of whatever appearance is active; a no-op on
+     outlined, which already sets the same border color. */
+  :host([bordered][variant='primary']) {
+    --_border-color: var(--lt-border-primary-strong);
+  }
+  :host([bordered][variant='secondary']) {
+    --_border-color: var(--lt-border-secondary-strong);
+  }
+  :host([bordered][variant='neutral']) {
+    --_border-color: var(--lt-border-strong);
+  }
+  :host([bordered][variant='success']) {
+    --_border-color: var(--lt-border-success-strong);
+  }
+  :host([bordered][variant='warning']) {
+    --_border-color: var(--lt-border-warning-strong);
+  }
+  :host([bordered][variant='error']) {
+    --_border-color: var(--lt-border-error-strong);
+  }
+  :host([bordered][variant='info']) {
+    --_border-color: var(--lt-border-info-strong);
+  }
+
   /* loading */
   .spinner {
     animation: spin 700ms linear infinite;
@@ -2175,6 +2235,7 @@ var Button = class extends ThemeableElement {
     this._ariaForwarding = new AriaForwardingController(this, () => this.shadowRoot?.querySelector('[part="base"]'));
     this.variant = "primary";
     this.appearance = "filled";
+    this.bordered = false;
     this.size = "md";
     this.disabled = false;
     this.loading = false;
@@ -2237,6 +2298,9 @@ __decorateClass([
 __decorateClass([
   n4({ reflect: true })
 ], Button.prototype, "appearance", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], Button.prototype, "bordered", 2);
 __decorateClass([
   n4({ reflect: true })
 ], Button.prototype, "size", 2);
@@ -3224,6 +3288,30 @@ var iconButtonStyles = i`
     --_active-bg: var(--lt-bg-info-subtle);
   }
 
+  /* bordered — adds a border on top of whatever appearance is active; a no-op on
+     outlined, which already sets the same border color. */
+  :host([bordered][variant='primary']) {
+    --_border-color: var(--lt-border-primary-strong);
+  }
+  :host([bordered][variant='secondary']) {
+    --_border-color: var(--lt-border-secondary-strong);
+  }
+  :host([bordered][variant='neutral']) {
+    --_border-color: var(--lt-border-strong);
+  }
+  :host([bordered][variant='success']) {
+    --_border-color: var(--lt-border-success-strong);
+  }
+  :host([bordered][variant='warning']) {
+    --_border-color: var(--lt-border-warning-strong);
+  }
+  :host([bordered][variant='error']) {
+    --_border-color: var(--lt-border-error-strong);
+  }
+  :host([bordered][variant='info']) {
+    --_border-color: var(--lt-border-info-strong);
+  }
+
   /* round shape */
   :host([round]) [part='base'] {
     border-radius: 50%;
@@ -3240,6 +3328,7 @@ var IconButton = class extends ThemeableElement {
     this.label = "";
     this.variant = "neutral";
     this.appearance = "ghost";
+    this.bordered = false;
     this.size = "md";
     this.disabled = false;
     this.href = "";
@@ -3286,6 +3375,9 @@ __decorateClass([
 __decorateClass([
   n4({ reflect: true })
 ], IconButton.prototype, "appearance", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], IconButton.prototype, "bordered", 2);
 __decorateClass([
   n4({ reflect: true })
 ], IconButton.prototype, "size", 2);
@@ -3402,6 +3494,8 @@ var Dialog = class extends ThemeableElement {
     this.closeOnEscape = true;
     this.uppercase = false;
     this.backdropBlur = false;
+    this.elevation = "4";
+    this.appearance = "filled";
     this.handleKeydown = (event) => {
       if (this.open && this.closeOnEscape && event.key === "Escape") {
         event.preventDefault();
@@ -3479,7 +3573,8 @@ var Dialog = class extends ThemeableElement {
     return T`
       <div class="backdrop" ?inert=${!this.open} @click=${this.handleBackdropClick} part="backdrop">
         <lt-surface
-          elevation="4"
+          elevation=${this.elevation}
+          appearance=${this.appearance}
           role="dialog"
           aria-modal="true"
           aria-labelledby="dialog-title"
@@ -3546,6 +3641,12 @@ __decorateClass([
 __decorateClass([
   n4({ type: Boolean, reflect: true, attribute: "backdrop-blur" })
 ], Dialog.prototype, "backdropBlur", 2);
+__decorateClass([
+  n4({ reflect: true })
+], Dialog.prototype, "elevation", 2);
+__decorateClass([
+  n4({ reflect: true })
+], Dialog.prototype, "appearance", 2);
 __decorateClass([
   e4("lt-surface")
 ], Dialog.prototype, "dialogElement", 2);
@@ -6038,7 +6139,15 @@ var Select = class extends ThemeableElement {
             </span>
             <lt-icon class="icon-end" name="caret-down"></lt-icon>
           </div>
-          <lt-surface class="dropdown" popover="manual" elevation="2" role="listbox">
+          <lt-surface
+            class="dropdown"
+            popover="manual"
+            elevation="2"
+            appearance="outlined"
+            background="--lt-bg-default"
+            role="listbox"
+            part="listbox"
+          >
             <div class="options-container">
               ${this.options.map(
       (option) => T`
@@ -8638,6 +8747,8 @@ var Snackbar = class extends ThemeableElement {
     this.closable = true;
     this.actionLabel = "";
     this.icon = "";
+    this.elevation = "5";
+    this.appearance = "filled";
   }
   /** Shows the snackbar and starts the auto-dismiss timer. */
   show() {
@@ -8690,7 +8801,7 @@ var Snackbar = class extends ThemeableElement {
   render() {
     const iconName = this._resolvedIcon;
     return T`
-      <lt-surface elevation="5" background=${Snackbar._bgMap[this.variant]}>
+      <lt-surface elevation=${this.elevation} appearance=${this.appearance} background=${Snackbar._bgMap[this.variant]}>
         <div class="inner" role="status" aria-live="polite" part="base">
           ${iconName ? T`<lt-icon class="variant-icon" name=${iconName} part="icon"></lt-icon>` : ""}
           <span class="message" part="message">
@@ -8737,6 +8848,12 @@ __decorateClass([
 __decorateClass([
   n4({ reflect: true })
 ], Snackbar.prototype, "icon", 2);
+__decorateClass([
+  n4({ reflect: true })
+], Snackbar.prototype, "elevation", 2);
+__decorateClass([
+  n4({ reflect: true })
+], Snackbar.prototype, "appearance", 2);
 Snackbar = __decorateClass([
   t3("lt-snackbar")
 ], Snackbar);
@@ -9244,6 +9361,7 @@ var dropdownStyles = [
 
     lt-surface.menu::part(surface) {
       overflow: hidden;
+      padding-block: var(--lt-dropdown-menu-padding, var(--lt-spacing-2));
     }
   `
 ];
@@ -10396,28 +10514,28 @@ var sidepanelStyles = i`
     inset-block: 0;
     left: 0;
     transform: translateX(-100%);
-    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--lt-sidepanel-shadow, 4px 0 24px rgba(0, 0, 0, 0.12));
   }
 
   :host([anchor='right']) [part='panel'] {
     inset-block: 0;
     right: 0;
     transform: translateX(100%);
-    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--lt-sidepanel-shadow, -4px 0 24px rgba(0, 0, 0, 0.12));
   }
 
   :host([anchor='top']) [part='panel'] {
     inset-inline: 0;
     top: 0;
     transform: translateY(-100%);
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--lt-sidepanel-shadow, 0 4px 24px rgba(0, 0, 0, 0.12));
   }
 
   :host([anchor='bottom']) [part='panel'] {
     inset-inline: 0;
     bottom: 0;
     transform: translateY(100%);
-    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--lt-sidepanel-shadow, 0 -4px 24px rgba(0, 0, 0, 0.12));
   }
 
   /* ── Open state — must come after anchors to win the cascade ────────────── */
@@ -10458,6 +10576,7 @@ var sidepanelStyles = i`
   .body {
     flex: 1;
     overflow-y: auto;
+    padding: var(--lt-spacing-5);
   }
 
   /* ── Reduced motion ─────────────────────────────────────────────────────── */