@latty-ds/web 0.8.1 → 0.10.0

package/dist/index.js

@@ -40,7 +40,7 @@ import { css } from "lit";
 var accordionStyles = css`
   :host {
     display: block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
     width: 100%;
   }
 
@@ -196,67 +196,103 @@ var textStyles = css2`
   [part='base'] {
     margin: 0;
     color: inherit;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   /* ── 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;
@@ -295,7 +331,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;
   }
 
@@ -472,7 +508,7 @@ import { css as css3 } from "lit";
 var buttonStyles = css3`
   :host {
     display: inline-block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
 
     /* Internal state props — set per variant/appearance below */
     --_color: var(--lt-text-on-primary);
@@ -706,6 +742,30 @@ var buttonStyles = css3`
     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;
@@ -871,6 +931,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;
@@ -933,6 +994,9 @@ __decorateClass([
 __decorateClass([
   property5({ reflect: true })
 ], Button.prototype, "appearance", 2);
+__decorateClass([
+  property5({ type: Boolean, reflect: true })
+], Button.prototype, "bordered", 2);
 __decorateClass([
   property5({ reflect: true })
 ], Button.prototype, "size", 2);
@@ -980,7 +1044,7 @@ import { css as css5 } from "lit";
 var chipStyles = css5`
   :host {
     display: inline-flex;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
     vertical-align: middle;
   }
 
@@ -1239,7 +1303,7 @@ import { css as css6 } from "lit";
 var checkboxStyles = css6`
   :host {
     display: inline-block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   .checkbox-wrapper {
@@ -1535,7 +1599,7 @@ import { customElement as customElement9, property as property10, query as query
 import { css as css7 } from "lit";
 var dialogStyles = css7`
   :host {
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   /* Backdrop */
@@ -1894,6 +1958,30 @@ var iconButtonStyles = css9`
     --_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%;
@@ -1910,6 +1998,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 = "";
@@ -1956,6 +2045,9 @@ __decorateClass([
 __decorateClass([
   property8({ reflect: true })
 ], IconButton.prototype, "appearance", 2);
+__decorateClass([
+  property8({ type: Boolean, reflect: true })
+], IconButton.prototype, "bordered", 2);
 __decorateClass([
   property8({ reflect: true })
 ], IconButton.prototype, "size", 2);
@@ -1988,7 +2080,7 @@ import { css as css10 } from "lit";
 var surfaceStyles = css10`
   :host {
     display: block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   .surface {
@@ -2078,6 +2170,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();
@@ -2155,7 +2249,8 @@ var Dialog = class extends ThemeableElement {
     return html9`
       <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"
@@ -2222,6 +2317,12 @@ __decorateClass([
 __decorateClass([
   property10({ type: Boolean, reflect: true, attribute: "backdrop-blur" })
 ], Dialog.prototype, "backdropBlur", 2);
+__decorateClass([
+  property10({ reflect: true })
+], Dialog.prototype, "elevation", 2);
+__decorateClass([
+  property10({ reflect: true })
+], Dialog.prototype, "appearance", 2);
 __decorateClass([
   query3("lt-surface")
 ], Dialog.prototype, "dialogElement", 2);
@@ -2239,7 +2340,7 @@ import { css as css11 } from "lit";
 var listStyles = css11`
   :host {
     display: block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
     --list-marker-color: var(--lt-color-neutral-500);
   }
 
@@ -2541,7 +2642,7 @@ import { css as css13 } from "lit";
 var radioStyles = css13`
   :host {
     display: inline-block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   .radio-wrapper {
@@ -2819,7 +2920,7 @@ import { css as css14 } from "lit";
 var radioGroupStyles = css14`
   :host {
     display: block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   .radio-group {
@@ -4384,7 +4485,7 @@ var selectStyles = [
   css16`
     :host {
       display: inline-block;
-      font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+      font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
       position: relative;
       width: 100%;
     }
@@ -4744,7 +4845,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) => html14`
@@ -4821,7 +4930,7 @@ import { css as css17 } from "lit";
 var switchStyles = css17`
   :host {
     display: inline-block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   .switch-wrapper {
@@ -5098,7 +5207,7 @@ import { css as css18 } from "lit";
 var tabStyles = css18`
   :host {
     display: inline-block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   .tab {
@@ -5312,7 +5421,7 @@ import { css as css20 } from "lit";
 var tabGroupStyles = css20`
   :host {
     display: block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   .tab-group {
@@ -5505,7 +5614,7 @@ import { css as css21 } from "lit";
 var tableStyles = css21`
   :host {
     display: block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
     overflow: hidden;
     width: 100%;
   }
@@ -6048,7 +6157,7 @@ import { css as css22 } from "lit";
 var textfieldStyles = css22`
   :host {
     display: inline-block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
     width: 100%;
   }
 
@@ -6602,7 +6711,7 @@ var avatarStyles = css23`
   }
 
   .initials {
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
     font-weight: 600;
     letter-spacing: 0.02em;
     line-height: 1;
@@ -6765,7 +6874,7 @@ import { css as css24 } from "lit";
 var badgeStyles = css24`
   :host {
     display: inline-flex;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
     vertical-align: middle;
   }
 
@@ -7203,7 +7312,7 @@ var snackbarStyles = css26`
     align-items: center;
     color: var(--lt-text-inverse);
     display: flex;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
     font-size: 0.875rem;
     gap: var(--lt-spacing-2);
     line-height: 1.4;
@@ -7289,6 +7398,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() {
@@ -7341,7 +7452,7 @@ var Snackbar = class extends ThemeableElement {
   render() {
     const iconName = this._resolvedIcon;
     return html24`
-      <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 ? html24`<lt-icon class="variant-icon" name=${iconName} part="icon"></lt-icon>` : ""}
           <span class="message" part="message">
@@ -7388,6 +7499,12 @@ __decorateClass([
 __decorateClass([
   property25({ reflect: true })
 ], Snackbar.prototype, "icon", 2);
+__decorateClass([
+  property25({ reflect: true })
+], Snackbar.prototype, "elevation", 2);
+__decorateClass([
+  property25({ reflect: true })
+], Snackbar.prototype, "appearance", 2);
 Snackbar = __decorateClass([
   customElement24("lt-snackbar")
 ], Snackbar);
@@ -7402,7 +7519,7 @@ import { css as css27 } from "lit";
 var alertStyles = css27`
   :host {
     display: block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
     opacity: 1;
     transform: translateY(0);
     transition:
@@ -7625,7 +7742,7 @@ import { css as css28 } from "lit";
 var sliderStyles = css28`
   :host {
     display: block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
     width: 100%;
   }
 
@@ -7896,7 +8013,7 @@ var dropdownStyles = [
   css29`
     :host {
       display: inline-block;
-      font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+      font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
     }
 
     .trigger-wrap {
@@ -7911,6 +8028,7 @@ var dropdownStyles = [
 
     lt-surface.menu::part(surface) {
       overflow: hidden;
+      padding-block: var(--lt-dropdown-menu-padding, var(--lt-spacing-2));
     }
   `
 ];
@@ -7934,7 +8052,7 @@ var dropdownItemStyles = css30`
     color: var(--lt-text-default);
     cursor: pointer;
     display: flex;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
     font-size: 0.875rem;
     gap: var(--lt-spacing-2);
     padding: var(--lt-spacing-2) var(--lt-spacing-4);
@@ -8630,7 +8748,7 @@ var breadcrumbItemStyles = css34`
   :host {
     align-items: center;
     display: inline-flex;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
     font-size: 0.875rem;
   }
 
@@ -8790,7 +8908,7 @@ var dividerStyles = css35`
 
   [part='label'] {
     color: var(--lt-text-subtle);
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
     font-size: 0.75rem;
     font-weight: 600;
     padding-inline: var(--lt-spacing-3);
@@ -9109,28 +9227,28 @@ var sidepanelStyles = css38`
     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 ────────────── */
@@ -9171,6 +9289,7 @@ var sidepanelStyles = css38`
   .body {
     flex: 1;
     overflow-y: auto;
+    padding: var(--lt-spacing-5);
   }
 
   /* ── Reduced motion ─────────────────────────────────────────────────────── */
@@ -9422,7 +9541,7 @@ import { css as css40 } from "lit";
 var paginationStyles = css40`
   :host {
     display: inline-flex;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   nav {
@@ -9592,7 +9711,7 @@ import { css as css41 } from "lit";
 var datepickerStyles = css41`
   :host {
     display: block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   .wrapper {
@@ -9822,7 +9941,7 @@ import { css as css42 } from "lit";
 var calendarStyles = css42`
   :host {
     display: inline-block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   .calendar {
@@ -10737,7 +10856,7 @@ var dateInputStyles = [
   css43`
     :host {
       display: block;
-      font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+      font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
     }
 
     .wrapper {
@@ -11092,7 +11211,7 @@ var comboboxStyles = [
   css44`
     :host {
       display: block;
-      font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+      font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
       position: relative;
     }
 
@@ -11487,7 +11606,7 @@ import { css as css45 } from "lit";
 var colorInputStyles = css45`
   :host {
     display: inline-block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
     width: 100%;
   }
 

package/dist/manifest.json

@@ -430,6 +430,12 @@
         ],
         "default": "filled"
       },
+      {
+        "name": "bordered",
+        "description": "Adds a variant-colored border on top of the current appearance. A no-op on\n`outlined` (which already has one); adds a border to `filled`/`ghost`.",
+        "type": "boolean",
+        "default": false
+      },
       {
         "name": "size",
         "description": "Size of the button (affects height, font size, and padding).",
@@ -1114,6 +1120,18 @@
         "description": "Apply a frosted-glass blur effect to the backdrop.",
         "type": "boolean",
         "default": false
+      },
+      {
+        "name": "elevation",
+        "description": "Elevation level of the internal surface, matching `lt-surface`'s scale.",
+        "type": "text",
+        "default": "4"
+      },
+      {
+        "name": "appearance",
+        "description": "Visual appearance of the internal surface, matching `lt-surface`'s vocabulary.",
+        "type": "text",
+        "default": "filled"
       }
     ]
   },
@@ -1243,6 +1261,12 @@
         ],
         "default": "ghost"
       },
+      {
+        "name": "bordered",
+        "description": "Adds a variant-colored border on top of the current appearance. A no-op on\n`outlined` (which already has one); adds a border to `filled`/`ghost`.",
+        "type": "boolean",
+        "default": false
+      },
       {
         "name": "size",
         "description": "Size of the button.",
@@ -1954,6 +1978,18 @@
         "description": "Icon to show before the message. Leave empty for auto (shows variant icon for status variants),\nset to `\"none\"` to suppress, or pass any icon name to override.",
         "type": "icon",
         "default": ""
+      },
+      {
+        "name": "elevation",
+        "description": "Elevation level of the internal surface, matching `lt-surface`'s scale.",
+        "type": "text",
+        "default": "5"
+      },
+      {
+        "name": "appearance",
+        "description": "Visual appearance of the internal surface, matching `lt-surface`'s vocabulary.",
+        "type": "text",
+        "default": "filled"
       }
     ]
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latty-ds/web",
-  "version": "0.8.1",
+  "version": "0.10.0",
   "description": "Web Components for the Latty design system — framework-agnostic UI components built with Lit",
   "license": "MIT",
   "repository": {
@@ -224,8 +224,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@latty-ds/icons": "0.8.1"
+    "@latty-ds/icons": "0.10.0"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "ad7b350db7869de83099eb299f659a254b224570"
+  "gitHead": "7b0b9856be6755a573abf02c0b7cbdb1a6db4fef"
 }