@latty-ds/web 0.7.0 → 0.8.1

package/dist/components/dialog/index.js

@@ -41,7 +41,7 @@ import { customElement as customElement4, property as property5, query } from "l
 import { css } from "lit";
 var dialogStyles = css`
   :host {
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   /* Backdrop */
@@ -200,7 +200,7 @@ var iconButtonStyles = css3`
     align-items: center;
     background: var(--lt-icon-button-bg, var(--_bg));
     border-radius: var(--lt-border-radius);
-    border: 1px solid var(--lt-icon-button-border-color, var(--_border-color));
+    border: var(--lt-border-width, 1px) solid var(--lt-icon-button-border-color, var(--_border-color));
     box-sizing: border-box;
     color: var(--lt-icon-button-color, var(--_color));
     cursor: pointer;
@@ -406,11 +406,45 @@ var iconButtonStyles = css3`
   }
 `;
 
+// src/components/shared/aria-forwarding.ts
+var FORWARDED_ARIA_ATTRIBUTES = [
+  "aria-pressed",
+  "aria-expanded",
+  "aria-haspopup",
+  "aria-controls",
+  "aria-current"
+];
+var AriaForwardingController = class {
+  constructor(host, getTarget) {
+    this._host = host;
+    this._getTarget = getTarget;
+    this._observer = new MutationObserver(() => this._host.requestUpdate());
+    host.addController(this);
+  }
+  hostConnected() {
+    this._observer.observe(this._host, { attributes: true, attributeFilter: [...FORWARDED_ARIA_ATTRIBUTES] });
+    this._host.requestUpdate();
+  }
+  hostDisconnected() {
+    this._observer.disconnect();
+  }
+  hostUpdated() {
+    const target = this._getTarget();
+    if (!target) return;
+    for (const attr of FORWARDED_ARIA_ATTRIBUTES) {
+      const value = this._host.getAttribute(attr);
+      if (value === null) target.removeAttribute(attr);
+      else if (target.getAttribute(attr) !== value) target.setAttribute(attr, value);
+    }
+  }
+};
+
 // src/components/icon-button/icon-button.ts
 import "@latty-ds/icons";
 var IconButton = class extends ThemeableElement {
   constructor() {
     super(...arguments);
+    this._ariaForwarding = new AriaForwardingController(this, () => this.shadowRoot?.querySelector('[part="base"]'));
     this.icon = "";
     this.label = "";
     this.variant = "neutral";
@@ -493,7 +527,7 @@ import { css as css4 } from "lit";
 var surfaceStyles = css4`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .surface {
@@ -532,7 +566,7 @@ var surfaceStyles = css4`
 
   :host([appearance='outlined']) .surface {
     background: var(--lt-surface-bg, transparent);
-    border: 1px solid var(--lt-border-default);
+    border: var(--lt-border-width, 1px) solid var(--lt-border-default);
   }
 
   :host([appearance='outlined']:hover) .surface {
@@ -552,7 +586,7 @@ var Surface = class extends ThemeableElement {
     this.background = "";
   }
   render() {
-    const style = this.background ? { "--_surface-bg": resolveColorValue(this.background) } : {};
+    const style = this.background ? { "--lt-surface-bg": resolveColorValue(this.background) } : {};
     return html2`
       <div class="surface" part="surface" style=${styleMap(style)}>
         <slot></slot>
@@ -596,7 +630,7 @@ var textStyles = css5`
   [part='base'] {
     margin: 0;
     color: inherit;
-    font-family: var(--lt-typography-fontfamily);
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   /* ── Display ─────────────────────────────────────────────────────────── */

package/dist/components/divider/index.js

@@ -90,7 +90,7 @@ var dividerStyles = css`
 
   [part='label'] {
     color: var(--lt-text-subtle);
-    font-family: var(--lt-typography-fontfamily);
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     font-size: 0.75rem;
     font-weight: 600;
     padding-inline: var(--lt-spacing-3);

package/dist/components/dropdown/index.js

@@ -1432,7 +1432,7 @@ var dropdownStyles = [
   css2`
     :host {
       display: inline-block;
-      font-family: 'Hanken Grotesk', sans-serif;
+      font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     }
 
     .trigger-wrap {
@@ -1487,7 +1487,7 @@ var dropdownItemStyles = css3`
     color: var(--lt-text-default);
     cursor: pointer;
     display: flex;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     font-size: 0.875rem;
     gap: var(--lt-spacing-2);
     padding: var(--lt-spacing-2) var(--lt-spacing-4);
@@ -1587,7 +1587,7 @@ import { css as css4 } from "lit";
 var surfaceStyles = css4`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .surface {
@@ -1626,7 +1626,7 @@ var surfaceStyles = css4`
 
   :host([appearance='outlined']) .surface {
     background: var(--lt-surface-bg, transparent);
-    border: 1px solid var(--lt-border-default);
+    border: var(--lt-border-width, 1px) solid var(--lt-border-default);
   }
 
   :host([appearance='outlined']:hover) .surface {
@@ -1643,7 +1643,7 @@ var Surface = class extends ThemeableElement {
     this.background = "";
   }
   render() {
-    const style = this.background ? { "--_surface-bg": resolveColorValue(this.background) } : {};
+    const style = this.background ? { "--lt-surface-bg": resolveColorValue(this.background) } : {};
     return html2`
       <div class="surface" part="surface" style=${styleMap(style)}>
         <slot></slot>

package/dist/components/icon-button/icon-button.d.ts

@@ -4,6 +4,9 @@ import '@latty-ds/icons';
 /**
  * Icon-only button. Requires `label` for screen readers since there is no visible text.
  *
+ * Forwards host `aria-pressed`, `aria-expanded`, `aria-haspopup`, `aria-controls`, and
+ * `aria-current` onto the internal native control (e.g. for dropdown triggers).
+ *
  * @element lt-icon-button
  *
  * @example
@@ -18,6 +21,7 @@ import '@latty-ds/icons';
  */
 export declare class IconButton extends ThemeableElement {
     static styles: import("lit").CSSResult;
+    private _ariaForwarding;
     /** Icon name from the icon library. */
     icon: string;
     /** Accessible label for screen readers. Required when there is no visible text. */

package/dist/components/icon-button/index.js

@@ -55,7 +55,7 @@ var iconButtonStyles = css`
     align-items: center;
     background: var(--lt-icon-button-bg, var(--_bg));
     border-radius: var(--lt-border-radius);
-    border: 1px solid var(--lt-icon-button-border-color, var(--_border-color));
+    border: var(--lt-border-width, 1px) solid var(--lt-icon-button-border-color, var(--_border-color));
     box-sizing: border-box;
     color: var(--lt-icon-button-color, var(--_color));
     cursor: pointer;
@@ -261,11 +261,45 @@ var iconButtonStyles = css`
   }
 `;
 
+// src/components/shared/aria-forwarding.ts
+var FORWARDED_ARIA_ATTRIBUTES = [
+  "aria-pressed",
+  "aria-expanded",
+  "aria-haspopup",
+  "aria-controls",
+  "aria-current"
+];
+var AriaForwardingController = class {
+  constructor(host, getTarget) {
+    this._host = host;
+    this._getTarget = getTarget;
+    this._observer = new MutationObserver(() => this._host.requestUpdate());
+    host.addController(this);
+  }
+  hostConnected() {
+    this._observer.observe(this._host, { attributes: true, attributeFilter: [...FORWARDED_ARIA_ATTRIBUTES] });
+    this._host.requestUpdate();
+  }
+  hostDisconnected() {
+    this._observer.disconnect();
+  }
+  hostUpdated() {
+    const target = this._getTarget();
+    if (!target) return;
+    for (const attr of FORWARDED_ARIA_ATTRIBUTES) {
+      const value = this._host.getAttribute(attr);
+      if (value === null) target.removeAttribute(attr);
+      else if (target.getAttribute(attr) !== value) target.setAttribute(attr, value);
+    }
+  }
+};
+
 // src/components/icon-button/icon-button.ts
 import "@latty-ds/icons";
 var IconButton = class extends ThemeableElement {
   constructor() {
     super(...arguments);
+    this._ariaForwarding = new AriaForwardingController(this, () => this.shadowRoot?.querySelector('[part="base"]'));
     this.icon = "";
     this.label = "";
     this.variant = "neutral";

package/dist/components/image/image.d.ts

@@ -1,9 +1,29 @@
+import { type PropertyValues } from 'lit';
 import { ThemeableElement } from '../../base';
+import type { ImageLoading } from './image.types';
 /**
- * A thin wrapper around `<img>` with rounded corners and responsive fill support.
+ * A thin wrapper around `<img>` with rounded corners, responsive fill support,
+ * native lazy loading, and an error fallback mechanism.
+ *
+ * Native `load`/`error` events don't cross the shadow boundary, so they are
+ * re-dispatched as composed `lt-load`/`lt-error` custom events. When a load
+ * fails, the `fallback` slot is shown in place of the broken image; setting a
+ * new `src` retries.
  *
  * @element lt-image
  * @part image - The underlying `<img>` element
+ *
+ * @slot fallback - Content shown in place of the image when loading fails
+ *
+ * @fires {CustomEvent<{ src: string }>} lt-load - Fired when the image loads successfully
+ * @fires {CustomEvent<{ src: string }>} lt-error - Fired when the image fails to load
+ *
+ * @example
+ * ```html
+ * <lt-image src="/cover.jpg" alt="Album cover" loading="lazy" rounded>
+ *   <div slot="fallback">No cover available</div>
+ * </lt-image>
+ * ```
  */
 export declare class Image extends ThemeableElement {
     static styles: import("lit").CSSResult;
@@ -21,6 +41,17 @@ export declare class Image extends ThemeableElement {
      * Size the `lt-image` element externally to define the crop box.
      */
     responsive: boolean;
+    /**
+     * Forwarded to the underlying `<img loading>` attribute.
+     * `lazy` defers loading until the image approaches the viewport.
+     */
+    loading: ImageLoading | '';
+    /** Whether the current `src` failed to load — shows the `fallback` slot. */
+    private _errored;
     private get _borderRadius();
+    willUpdate(changed: PropertyValues<this>): void;
+    private _dispatch;
+    private _handleLoad;
+    private _handleError;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/image/image.types.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Native lazy-loading behaviour forwarded to the underlying `<img loading>` attribute.
+ *
+ * - `eager`: Load immediately, regardless of viewport position (browser default)
+ * - `lazy`: Defer loading until the image approaches the viewport
+ */
+export type ImageLoading = 'eager' | 'lazy';

package/dist/components/image/index.js

@@ -35,7 +35,8 @@ __decorateClass([
 ], ThemeableElement.prototype, "theme", 2);
 
 // src/components/image/image.ts
-import { customElement, property as property2 } from "lit/decorators.js";
+import { customElement, property as property2, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 // src/components/image/image.styles.ts
 import { css } from "lit";
@@ -72,15 +73,47 @@ var Image = class extends ThemeableElement {
     this.alt = "";
     this.rounded = null;
     this.responsive = false;
+    this.loading = "";
+    this._errored = false;
   }
   get _borderRadius() {
     if (this.rounded === null) return void 0;
     return this.rounded || "var(--lt-border-radius)";
   }
+  willUpdate(changed) {
+    if (changed.has("src")) this._errored = false;
+  }
+  _dispatch(name) {
+    this.dispatchEvent(
+      new CustomEvent(name, {
+        detail: { src: this.src },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _handleLoad() {
+    this._dispatch("lt-load");
+  }
+  _handleError() {
+    this._errored = true;
+    this._dispatch("lt-error");
+  }
   render() {
+    if (this._errored) {
+      return html`<slot name="fallback"></slot>`;
+    }
     const radius = this._borderRadius;
     return html`
-      <img part="image" src=${this.src} alt=${this.alt} style=${radius ? `border-radius: ${radius}` : ""} />
+      <img
+        part="image"
+        src=${this.src}
+        alt=${this.alt}
+        loading=${ifDefined(this.loading || void 0)}
+        style=${radius ? `border-radius: ${radius}` : ""}
+        @load=${this._handleLoad}
+        @error=${this._handleError}
+      />
     `;
   }
 };
@@ -97,6 +130,12 @@ __decorateClass([
 __decorateClass([
   property2({ type: Boolean, reflect: true })
 ], Image.prototype, "responsive", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Image.prototype, "loading", 2);
+__decorateClass([
+  state()
+], Image.prototype, "_errored", 2);
 Image = __decorateClass([
   customElement("lt-image")
 ], Image);

package/dist/components/list/index.js

@@ -43,7 +43,7 @@ import { css } from "lit";
 var listStyles = css`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     --list-marker-color: var(--lt-color-neutral-500);
   }
 
@@ -153,6 +153,7 @@ var listStyles = css`
 // src/components/list/list-item.ts
 import { html, nothing } from "lit";
 import { customElement, property as property2 } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 // src/components/list/list-item.styles.ts
 import { css as css2 } from "lit";
@@ -182,6 +183,47 @@ var listItemStyles = css2`
     color: var(--lt-color-neutral-500);
     font-size: inherit;
   }
+
+  /* interactive rows — native button/anchor reset + states */
+  a.inner,
+  button.inner {
+    background: transparent;
+    border: none;
+    border-radius: var(--lt-border-radius);
+    box-sizing: border-box;
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    margin: 0;
+    padding: var(--lt-spacing-2);
+    text-align: start;
+    text-decoration: none;
+    transition: background-color 120ms ease;
+    width: 100%;
+  }
+
+  a.inner:hover:not([aria-disabled='true']),
+  button.inner:hover:not([disabled]) {
+    background: var(--lt-list-item-hover-bg, var(--lt-bg-subtle));
+  }
+
+  a.inner:active:not([aria-disabled='true']),
+  button.inner:active:not([disabled]) {
+    background: var(--lt-list-item-active-bg, var(--lt-bg-surface));
+  }
+
+  a.inner:focus-visible,
+  button.inner:focus-visible {
+    outline: 3px solid var(--lt-border-focus);
+    outline-offset: -3px;
+  }
+
+  button.inner[disabled],
+  a.inner[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+  }
 `;
 
 // src/components/list/list-item.ts
@@ -191,19 +233,41 @@ var ListItem = class extends ThemeableElement {
     super(...arguments);
     this.iconStart = "";
     this.iconEnd = "";
+    this.clickable = false;
+    this.href = "";
+    this.target = "";
+    this.rel = "";
+    this.disabled = false;
   }
   connectedCallback() {
     super.connectedCallback();
     if (!this.hasAttribute("role")) this.setAttribute("role", "listitem");
   }
   render() {
-    return html`
-      <div class="inner">
-        ${this.iconStart ? html`<lt-icon class="icon-start" name=${this.iconStart}></lt-icon>` : nothing}
-        <span class="content"><slot></slot></span>
-        ${this.iconEnd ? html`<lt-icon class="icon-end" name=${this.iconEnd}></lt-icon>` : nothing}
-      </div>
+    const inner = html`
+      ${this.iconStart ? html`<lt-icon class="icon-start" name=${this.iconStart}></lt-icon>` : nothing}
+      <span class="content"><slot></slot></span>
+      ${this.iconEnd ? html`<lt-icon class="icon-end" name=${this.iconEnd}></lt-icon>` : nothing}
     `;
+    if (this.href) {
+      const rel = this.rel || (this.target === "_blank" ? "noopener noreferrer" : void 0);
+      return html`
+        <a
+          class="inner"
+          part="base"
+          href=${this.href}
+          target=${ifDefined(this.target || void 0)}
+          rel=${ifDefined(rel)}
+          aria-disabled=${this.disabled ? "true" : nothing}
+          tabindex=${this.disabled ? "-1" : nothing}
+          >${inner}</a
+        >
+      `;
+    }
+    if (this.clickable) {
+      return html`<button class="inner" part="base" type="button" ?disabled=${this.disabled}>${inner}</button>`;
+    }
+    return html`<div class="inner" part="base">${inner}</div>`;
   }
 };
 ListItem.styles = listItemStyles;
@@ -213,6 +277,21 @@ __decorateClass([
 __decorateClass([
   property2({ attribute: "icon-end" })
 ], ListItem.prototype, "iconEnd", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], ListItem.prototype, "clickable", 2);
+__decorateClass([
+  property2()
+], ListItem.prototype, "href", 2);
+__decorateClass([
+  property2()
+], ListItem.prototype, "target", 2);
+__decorateClass([
+  property2()
+], ListItem.prototype, "rel", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], ListItem.prototype, "disabled", 2);
 ListItem = __decorateClass([
   customElement("lt-list-item")
 ], ListItem);

package/dist/components/list/list-item.d.ts

@@ -7,10 +7,16 @@ import '@latty-ds/icons';
  * cannot contain plain `<li>` elements due to browser parsing rules. By wrapping
  * the `<li>` in a custom element's shadow DOM, we can properly nest lists.
  *
+ * Items can also be interactive: set `clickable` to render the row as a native
+ * `<button>` (picker rows, settings rows), or `href` to render it as an `<a>`.
+ * Interactive rows get hover/active/focus states and a disabled state.
+ *
  * @element lt-list-item
  *
  * @slot - Default slot for list item content
  *
+ * @csspart base - The row container (`<div>`, `<button>` when `clickable`, or `<a>` when `href` is set)
+ *
  * @example
  * ```html
  * <lt-list>
@@ -29,6 +35,15 @@ import '@latty-ds/icons';
  *   <lt-list-item icon-start="info" icon-end="arrow-right">Details</lt-list-item>
  * </lt-list>
  * ```
+ *
+ * @example
+ * Interactive rows:
+ * ```html
+ * <lt-list>
+ *   <lt-list-item clickable>Pick me</lt-list-item>
+ *   <lt-list-item href="/settings/profile" icon-end="arrow-right">Profile</lt-list-item>
+ * </lt-list>
+ * ```
  */
 export declare class ListItem extends ThemeableElement {
     static styles: import("lit").CSSResult;
@@ -37,5 +52,25 @@ export declare class ListItem extends ThemeableElement {
     iconStart: string;
     /** Icon name to display after the item content. */
     iconEnd: string;
+    /**
+     * Renders the row as a native `<button>` with hover/active/focus states.
+     * Listen for `click` on the element to react. Ignored when `href` is set.
+     * @default false
+     */
+    clickable: boolean;
+    /** When set, renders the row as an `<a>` with hover/active/focus states. */
+    href: string;
+    /** Forwarded to the anchor's `target` attribute when `href` is set. */
+    target: string;
+    /**
+     * Forwarded to the anchor's `rel` attribute when `href` is set.
+     * Defaults to `noopener noreferrer` when `target="_blank"` and `rel` is not specified.
+     */
+    rel: string;
+    /**
+     * Disables the interactive row. Only relevant with `clickable` or `href`.
+     * @default false
+     */
+    disabled: boolean;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/nav/index.js

@@ -159,7 +159,7 @@ var navItemStyles = css`
     min-width: 160px;
     background: var(--lt-bg-default);
     color: var(--lt-color-neutral-700);
-    border: 1px solid var(--lt-color-neutral-200);
+    border: var(--lt-border-width, 1px) solid var(--lt-color-neutral-200);
     border-radius: 8px;
     box-shadow:
       0 4px 6px -1px rgb(0 0 0 / 0.08),
@@ -226,13 +226,15 @@ var NavItem = class extends ThemeableElement {
   }
   _handleTriggerClick(e) {
     if (this.disabled) return;
-    this.dispatchEvent(
+    const proceed = this.dispatchEvent(
       new CustomEvent("nav-item-click", {
         detail: { href: this.href, label: this.label },
         bubbles: true,
-        composed: true
+        composed: true,
+        cancelable: true
       })
     );
+    if (!proceed) e.preventDefault();
     if (this._hasChildren) {
       e.preventDefault();
       this.open = !this.open;
@@ -252,10 +254,22 @@ var NavItem = class extends ThemeableElement {
       <span class="label">${this.label}</span>
       ${showChevron ? html`<lt-icon class="chevron" name="caret-down" size="sm"></lt-icon>` : nothing}
     `;
+    const ariaCurrent = this.active ? "page" : nothing;
     if (this.href && !this._hasChildren) {
-      return html`<a class="item-trigger" href=${this.href} @click=${this._handleTriggerClick}>${inner}</a>`;
+      return html`<a
+        class="item-trigger"
+        href=${this.href}
+        aria-current=${ariaCurrent}
+        @click=${this._handleTriggerClick}
+        >${inner}</a
+      >`;
     }
-    return html`<button class="item-trigger" @click=${this._handleTriggerClick} ?disabled=${this.disabled}>
+    return html`<button
+      class="item-trigger"
+      aria-current=${ariaCurrent}
+      @click=${this._handleTriggerClick}
+      ?disabled=${this.disabled}
+    >
       ${inner}
     </button>`;
   }

package/dist/components/nav/nav-item.d.ts

@@ -9,10 +9,15 @@ import '@latty-ds/icons';
  * and nested children appear as a dropdown panel. In vertical mode, nested children
  * collapse/expand inline.
  *
+ * SPA router integration: `nav-item-click` is cancelable — call `event.preventDefault()`
+ * to stop the anchor's native navigation, navigate programmatically, and drive the
+ * highlighted item via the `active` property (which also sets `aria-current="page"`).
+ *
  * @element lt-nav-item
  *
  * @fires {CustomEvent<{ href: string; label: string }>} nav-item-click - Fired when the item
- *   is clicked (even when it has no href).
+ *   is clicked (even when it has no href). Cancelable: `preventDefault()` stops the native
+ *   anchor navigation so an SPA router can handle it.
  * @fires {CustomEvent<{ open: boolean }>} nav-collapse - Fired when a collapsible item
  *   is opened or closed.
  *
@@ -46,6 +51,7 @@ export declare class NavItem extends ThemeableElement {
     iconStart: string;
     /**
      * Whether this item is currently the active/selected page.
+     * Sets `aria-current="page"` on the internal trigger.
      * @default false
      */
     active: boolean;

package/dist/components/pagination/index.js

@@ -42,7 +42,7 @@ import { css } from "lit";
 var paginationStyles = css`
   :host {
     display: inline-flex;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   nav {

package/dist/components/radio/index.js

@@ -42,7 +42,7 @@ import { css } from "lit";
 var radioStyles = css`
   :host {
     display: inline-block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .radio-wrapper {
@@ -246,6 +246,7 @@ var Radio = class extends ThemeableElement {
    * @private
    */
   handleChange(e) {
+    e.stopPropagation();
     const target = e.target;
     this.checked = target.checked;
     this.dispatchEvent(

package/dist/components/radio-group/index.js

@@ -42,7 +42,7 @@ import { css } from "lit";
 var radioGroupStyles = css`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .radio-group {
@@ -111,7 +111,7 @@ var textStyles = css2`
   [part='base'] {
     margin: 0;
     color: inherit;
-    font-family: var(--lt-typography-fontfamily);
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   /* ── Display ─────────────────────────────────────────────────────────── */