@latty-ds/web 0.8.1 → 0.10.0

package/dist/index.cjs

@@ -1331,7 +1331,7 @@ __decorateClass([
 var accordionStyles = i`
   :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%;
   }
 
@@ -1508,67 +1508,103 @@ var textStyles = i`
   [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;
@@ -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;
   }
 
@@ -1781,7 +1817,7 @@ var o8 = (o10) => o10 ?? A;
 var buttonStyles = i`
   :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);
@@ -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);
@@ -2327,7 +2391,7 @@ var o9 = e5(class extends i4 {
 var chipStyles = i`
   :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;
   }
 
@@ -2581,7 +2645,7 @@ Chip = __decorateClass([
 var checkboxStyles = i`
   :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 {
@@ -2872,7 +2936,7 @@ Checkbox = __decorateClass([
 // src/components/dialog/dialog.styles.ts
 var dialogStyles = i`
   :host {
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   /* Backdrop */
@@ -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);
@@ -3312,7 +3404,7 @@ IconButton = __decorateClass([
 var surfaceStyles = i`
   :host {
     display: block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   .surface {
@@ -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);
@@ -3557,7 +3658,7 @@ Dialog = __decorateClass([
 var listStyles = i`
   :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);
   }
 
@@ -3848,7 +3949,7 @@ List = __decorateClass([
 var radioStyles = i`
   :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 {
@@ -4121,7 +4222,7 @@ Radio = __decorateClass([
 var radioGroupStyles = i`
   :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 {
@@ -5678,7 +5779,7 @@ var selectStyles = [
   i`
     :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%;
     }
@@ -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`
@@ -6110,7 +6219,7 @@ Select = __decorateClass([
 var switchStyles = i`
   :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 {
@@ -6382,7 +6491,7 @@ Switch = __decorateClass([
 var tabStyles = i`
   :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 {
@@ -6586,7 +6695,7 @@ TabPanel = __decorateClass([
 var tabGroupStyles = i`
   :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 {
@@ -6881,7 +6990,7 @@ var c5 = e5(class extends i4 {
 var tableStyles = i`
   :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%;
   }
@@ -7418,7 +7527,7 @@ Table = __decorateClass([
 var textfieldStyles = i`
   :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%;
   }
 
@@ -7967,7 +8076,7 @@ var avatarStyles = i`
   }
 
   .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;
@@ -8125,7 +8234,7 @@ Avatar = __decorateClass([
 var badgeStyles = i`
   :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;
   }
 
@@ -8552,7 +8661,7 @@ var snackbarStyles = i`
     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;
@@ -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);
@@ -8745,7 +8862,7 @@ Snackbar = __decorateClass([
 var alertStyles = i`
   :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:
@@ -8963,7 +9080,7 @@ Alert = __decorateClass([
 var sliderStyles = i`
   :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%;
   }
 
@@ -9229,7 +9346,7 @@ var dropdownStyles = [
   i`
     :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 {
@@ -9244,6 +9361,7 @@ var dropdownStyles = [
 
     lt-surface.menu::part(surface) {
       overflow: hidden;
+      padding-block: var(--lt-dropdown-menu-padding, var(--lt-spacing-2));
     }
   `
 ];
@@ -9262,7 +9380,7 @@ var dropdownItemStyles = i`
     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);
@@ -9938,7 +10056,7 @@ var breadcrumbItemStyles = i`
   :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;
   }
 
@@ -10093,7 +10211,7 @@ var dividerStyles = i`
 
   [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);
@@ -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 ─────────────────────────────────────────────────────── */
@@ -10698,7 +10817,7 @@ Image = __decorateClass([
 var paginationStyles = i`
   :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 {
@@ -10863,7 +10982,7 @@ Pagination = __decorateClass([
 var datepickerStyles = i`
   :host {
     display: block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   .wrapper {
@@ -11088,7 +11207,7 @@ var import_icons16 = require("@latty-ds/icons");
 var calendarStyles = i`
   :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 {
@@ -12002,7 +12121,7 @@ var dateInputStyles = [
   i`
     :host {
       display: block;
-      font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+      font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
     }
 
     .wrapper {
@@ -12352,7 +12471,7 @@ var comboboxStyles = [
   i`
     :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;
     }
 
@@ -12741,7 +12860,7 @@ Combobox = __decorateClass([
 var colorInputStyles = i`
   :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%;
   }