@latty-ds/web 0.7.0 → 0.8.0

package/dist/index.js

@@ -40,7 +40,7 @@ import { css } from "lit";
 var accordionStyles = css`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     width: 100%;
   }
 
@@ -125,7 +125,7 @@ var accordionStyles = css`
   /* Variant: default */
   :host([appearance='default']) details {
     background: var(--lt-bg-subtle);
-    border: 1px solid var(--lt-border-default);
+    border: var(--lt-border-width, 1px) solid var(--lt-border-default);
   }
 
   :host([appearance='default']) details:hover {
@@ -145,7 +145,7 @@ var accordionStyles = css`
   /* Variant: outlined */
   :host([appearance='outlined']) details {
     background: transparent;
-    border: 1px solid var(--lt-border-default);
+    border: var(--lt-border-width, 1px) solid var(--lt-border-default);
   }
 
   :host([appearance='outlined']) details:hover {
@@ -196,7 +196,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 ─────────────────────────────────────────────────────────── */
@@ -472,7 +472,7 @@ import { css as css3 } from "lit";
 var buttonStyles = css3`
   :host {
     display: inline-block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
 
     /* Internal state props — set per variant/appearance below */
     --_color: var(--lt-text-on-primary);
@@ -495,7 +495,7 @@ var buttonStyles = css3`
     align-items: center;
     background: var(--lt-button-bg, var(--_bg));
     border-radius: var(--lt-border-radius);
-    border: 1px solid var(--lt-button-border-color, var(--_border-color));
+    border: var(--lt-border-width, 1px) solid var(--lt-button-border-color, var(--_border-color));
     box-sizing: border-box;
     color: var(--lt-button-color, var(--_color));
     cursor: pointer;
@@ -505,7 +505,7 @@ var buttonStyles = css3`
     gap: var(--lt-spacing-2);
     justify-content: center;
     line-height: 1;
-    min-width: 88px;
+    min-width: var(--lt-button-min-width, 88px);
     user-select: none;
     transition:
       background-color 120ms ease,
@@ -657,7 +657,52 @@ var buttonStyles = css3`
     --_active-bg: var(--lt-bg-info-subtle);
   }
 
-  :host([appearance='outlined']) [part='base']:active:not([disabled]):not([aria-disabled='true']) {
+  /* ghost appearance — transparent background, no border, low-emphasis text button */
+  :host([appearance='ghost'][variant='primary']) {
+    --_bg: transparent;
+    --_color: var(--lt-text-primary);
+    --_hover-bg: var(--lt-bg-primary-subtle);
+    --_active-bg: var(--lt-bg-primary-subtle);
+  }
+  :host([appearance='ghost'][variant='secondary']) {
+    --_bg: transparent;
+    --_color: var(--lt-text-secondary);
+    --_hover-bg: var(--lt-bg-secondary-subtle);
+    --_active-bg: var(--lt-bg-secondary-subtle);
+  }
+  :host([appearance='ghost'][variant='neutral']) {
+    --_bg: transparent;
+    --_color: var(--lt-text-neutral);
+    --_hover-bg: var(--lt-bg-subtle);
+    --_active-bg: var(--lt-bg-surface);
+  }
+  :host([appearance='ghost'][variant='success']) {
+    --_bg: transparent;
+    --_color: var(--lt-text-success);
+    --_hover-bg: var(--lt-bg-success-subtle);
+    --_active-bg: var(--lt-bg-success-subtle);
+  }
+  :host([appearance='ghost'][variant='warning']) {
+    --_bg: transparent;
+    --_color: var(--lt-text-warning);
+    --_hover-bg: var(--lt-bg-warning-subtle);
+    --_active-bg: var(--lt-bg-warning-subtle);
+  }
+  :host([appearance='ghost'][variant='error']) {
+    --_bg: transparent;
+    --_color: var(--lt-text-error);
+    --_hover-bg: var(--lt-bg-error-subtle);
+    --_active-bg: var(--lt-bg-error-subtle);
+  }
+  :host([appearance='ghost'][variant='info']) {
+    --_bg: transparent;
+    --_color: var(--lt-text-info);
+    --_hover-bg: var(--lt-bg-info-subtle);
+    --_active-bg: var(--lt-bg-info-subtle);
+  }
+
+  :host([appearance='outlined']) [part='base']:active:not([disabled]):not([aria-disabled='true']),
+  :host([appearance='ghost']) [part='base']:active:not([disabled]):not([aria-disabled='true']) {
     opacity: 0.8;
   }
 
@@ -691,6 +736,39 @@ var buttonStyles = 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/spinner/spinner.ts
 import { html as html3 } from "lit";
 import { customElement as customElement3, property as property4 } from "lit/decorators.js";
@@ -790,6 +868,7 @@ import "@latty-ds/icons";
 var Button = class extends ThemeableElement {
   constructor() {
     super();
+    this._ariaForwarding = new AriaForwardingController(this, () => this.shadowRoot?.querySelector('[part="base"]'));
     this.variant = "primary";
     this.appearance = "filled";
     this.size = "md";
@@ -901,7 +980,7 @@ import { css as css5 } from "lit";
 var chipStyles = css5`
   :host {
     display: inline-flex;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     vertical-align: middle;
   }
 
@@ -909,7 +988,11 @@ var chipStyles = css5`
     align-items: center;
     background: var(--lt-chip-bg);
     border-radius: 999px;
-    border: 1px solid var(--lt-chip-border-color, transparent);
+    /* Chips are small pills (as short as 20px tall at size="sm") — a "thick"
+       (4px) themed border eats too much of that height and reads as
+       compressed/squished, so cap what the chip actually renders at "medium"
+       (2px) regardless of the theme's configured border width. */
+    border: min(var(--lt-border-width, 1px), 2px) solid var(--lt-chip-border-color, transparent);
     color: var(--lt-chip-color);
     box-sizing: border-box;
     display: inline-flex;
@@ -1156,7 +1239,7 @@ import { css as css6 } from "lit";
 var checkboxStyles = css6`
   :host {
     display: inline-block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .checkbox-wrapper {
@@ -1356,6 +1439,7 @@ var Checkbox = class extends ThemeableElement {
    * @private
    */
   handleChange(e) {
+    e.stopPropagation();
     const target = e.target;
     this.checked = target.checked;
     this.indeterminate = false;
@@ -1451,7 +1535,7 @@ import { customElement as customElement9, property as property10, query as query
 import { css as css7 } from "lit";
 var dialogStyles = css7`
   :host {
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   /* Backdrop */
@@ -1610,7 +1694,7 @@ var iconButtonStyles = css9`
     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;
@@ -1821,6 +1905,7 @@ 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";
@@ -1903,7 +1988,7 @@ import { css as css10 } from "lit";
 var surfaceStyles = css10`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .surface {
@@ -1942,7 +2027,7 @@ var surfaceStyles = css10`
 
   :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 {
@@ -1959,7 +2044,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 html8`
       <div class="surface" part="surface" style=${styleMap2(style)}>
         <slot></slot>
@@ -2154,7 +2239,7 @@ import { css as css11 } from "lit";
 var listStyles = css11`
   :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);
   }
 
@@ -2264,6 +2349,7 @@ var listStyles = css11`
 // src/components/list/list-item.ts
 import { html as html10, nothing as nothing3 } from "lit";
 import { customElement as customElement10, property as property11 } from "lit/decorators.js";
+import { ifDefined as ifDefined3 } from "lit/directives/if-defined.js";
 
 // src/components/list/list-item.styles.ts
 import { css as css12 } from "lit";
@@ -2293,6 +2379,47 @@ var listItemStyles = css12`
     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
@@ -2302,19 +2429,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 html10`
-      <div class="inner">
-        ${this.iconStart ? html10`<lt-icon class="icon-start" name=${this.iconStart}></lt-icon>` : nothing3}
-        <span class="content"><slot></slot></span>
-        ${this.iconEnd ? html10`<lt-icon class="icon-end" name=${this.iconEnd}></lt-icon>` : nothing3}
-      </div>
+    const inner = html10`
+      ${this.iconStart ? html10`<lt-icon class="icon-start" name=${this.iconStart}></lt-icon>` : nothing3}
+      <span class="content"><slot></slot></span>
+      ${this.iconEnd ? html10`<lt-icon class="icon-end" name=${this.iconEnd}></lt-icon>` : nothing3}
     `;
+    if (this.href) {
+      const rel = this.rel || (this.target === "_blank" ? "noopener noreferrer" : void 0);
+      return html10`
+        <a
+          class="inner"
+          part="base"
+          href=${this.href}
+          target=${ifDefined3(this.target || void 0)}
+          rel=${ifDefined3(rel)}
+          aria-disabled=${this.disabled ? "true" : nothing3}
+          tabindex=${this.disabled ? "-1" : nothing3}
+          >${inner}</a
+        >
+      `;
+    }
+    if (this.clickable) {
+      return html10`<button class="inner" part="base" type="button" ?disabled=${this.disabled}>${inner}</button>`;
+    }
+    return html10`<div class="inner" part="base">${inner}</div>`;
   }
 };
 ListItem.styles = listItemStyles;
@@ -2324,6 +2473,21 @@ __decorateClass([
 __decorateClass([
   property11({ attribute: "icon-end" })
 ], ListItem.prototype, "iconEnd", 2);
+__decorateClass([
+  property11({ type: Boolean, reflect: true })
+], ListItem.prototype, "clickable", 2);
+__decorateClass([
+  property11()
+], ListItem.prototype, "href", 2);
+__decorateClass([
+  property11()
+], ListItem.prototype, "target", 2);
+__decorateClass([
+  property11()
+], ListItem.prototype, "rel", 2);
+__decorateClass([
+  property11({ type: Boolean, reflect: true })
+], ListItem.prototype, "disabled", 2);
 ListItem = __decorateClass([
   customElement10("lt-list-item")
 ], ListItem);
@@ -2377,7 +2541,7 @@ import { css as css13 } from "lit";
 var radioStyles = css13`
   :host {
     display: inline-block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .radio-wrapper {
@@ -2581,6 +2745,7 @@ var Radio = class extends ThemeableElement {
    * @private
    */
   handleChange(e) {
+    e.stopPropagation();
     const target = e.target;
     this.checked = target.checked;
     this.dispatchEvent(
@@ -2654,7 +2819,7 @@ import { css as css14 } from "lit";
 var radioGroupStyles = css14`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .radio-group {
@@ -3011,7 +3176,7 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   }
   return coords;
 }
-async function detectOverflow(state8, options) {
+async function detectOverflow(state9, options) {
   var _await$platform$isEle;
   if (options === void 0) {
     options = {};
@@ -3023,14 +3188,14 @@ async function detectOverflow(state8, options) {
     rects,
     elements,
     strategy
-  } = state8;
+  } = state9;
   const {
     boundary = "clippingAncestors",
     rootBoundary = "viewport",
     elementContext = "floating",
     altBoundary = false,
     padding = 0
-  } = evaluate(options, state8);
+  } = evaluate(options, state9);
   const paddingObject = getPaddingObject(padding);
   const altContext = elementContext === "floating" ? "reference" : "floating";
   const element = elements[altBoundary ? altContext : elementContext];
@@ -3162,7 +3327,7 @@ var flip = function(options) {
   return {
     name: "flip",
     options,
-    async fn(state8) {
+    async fn(state9) {
       var _middlewareData$arrow, _middlewareData$flip;
       const {
         placement,
@@ -3171,7 +3336,7 @@ var flip = function(options) {
         initialPlacement,
         platform: platform2,
         elements
-      } = state8;
+      } = state9;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = true,
@@ -3180,7 +3345,7 @@ var flip = function(options) {
         fallbackAxisSideDirection = "none",
         flipAlignment = true,
         ...detectOverflowOptions
-      } = evaluate(options, state8);
+      } = evaluate(options, state9);
       if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
         return {};
       }
@@ -3194,7 +3359,7 @@ var flip = function(options) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements2 = [initialPlacement, ...fallbackPlacements];
-      const overflow = await platform2.detectOverflow(state8, detectOverflowOptions);
+      const overflow = await platform2.detectOverflow(state9, detectOverflowOptions);
       const overflows = [];
       let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
       if (checkMainAxis) {
@@ -3265,19 +3430,19 @@ var flip = function(options) {
   };
 };
 var originSides = /* @__PURE__ */ new Set(["left", "top"]);
-async function convertValueToCoords(state8, options) {
+async function convertValueToCoords(state9, options) {
   const {
     placement,
     platform: platform2,
     elements
-  } = state8;
+  } = state9;
   const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
   const side = getSide(placement);
   const alignment = getAlignment(placement);
   const isVertical = getSideAxis(placement) === "y";
   const mainAxisMulti = originSides.has(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
-  const rawValue = evaluate(options, state8);
+  const rawValue = evaluate(options, state9);
   let {
     mainAxis,
     crossAxis,
@@ -3309,15 +3474,15 @@ var offset = function(options) {
   return {
     name: "offset",
     options,
-    async fn(state8) {
+    async fn(state9) {
       var _middlewareData$offse, _middlewareData$arrow;
       const {
         x,
         y,
         placement,
         middlewareData
-      } = state8;
-      const diffCoords = await convertValueToCoords(state8, options);
+      } = state9;
+      const diffCoords = await convertValueToCoords(state9, options);
       if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
         return {};
       }
@@ -3339,13 +3504,13 @@ var shift = function(options) {
   return {
     name: "shift",
     options,
-    async fn(state8) {
+    async fn(state9) {
       const {
         x,
         y,
         placement,
         platform: platform2
-      } = state8;
+      } = state9;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = false,
@@ -3362,12 +3527,12 @@ var shift = function(options) {
           }
         },
         ...detectOverflowOptions
-      } = evaluate(options, state8);
+      } = evaluate(options, state9);
       const coords = {
         x,
         y
       };
-      const overflow = await platform2.detectOverflow(state8, detectOverflowOptions);
+      const overflow = await platform2.detectOverflow(state9, detectOverflowOptions);
       const crossAxis = getSideAxis(getSide(placement));
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
@@ -3387,7 +3552,7 @@ var shift = function(options) {
         crossAxisCoord = clamp(min2, crossAxisCoord, max2);
       }
       const limitedCoords = limiter.fn({
-        ...state8,
+        ...state9,
         [mainAxis]: mainAxisCoord,
         [crossAxis]: crossAxisCoord
       });
@@ -4219,7 +4384,7 @@ var selectStyles = [
   css16`
     :host {
       display: inline-block;
-      font-family: 'Hanken Grotesk', sans-serif;
+      font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
       position: relative;
       width: 100%;
     }
@@ -4248,7 +4413,7 @@ var selectStyles = [
       align-items: center;
       background: var(--lt-bg-subtle);
       border-radius: var(--lt-border-radius);
-      border: 1px solid var(--lt-border-default);
+      border: var(--lt-border-width, 1px) solid var(--lt-border-default);
       box-sizing: border-box;
       cursor: pointer;
       display: flex;
@@ -4656,7 +4821,7 @@ import { css as css17 } from "lit";
 var switchStyles = css17`
   :host {
     display: inline-block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .switch-wrapper {
@@ -4857,6 +5022,7 @@ var Switch = class extends ThemeableElement {
     return this._internals.reportValidity();
   }
   handleChange(e) {
+    e.stopPropagation();
     const target = e.target;
     this.checked = target.checked;
     this.dispatchEvent(
@@ -4932,7 +5098,7 @@ import { css as css18 } from "lit";
 var tabStyles = css18`
   :host {
     display: inline-block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .tab {
@@ -5146,7 +5312,7 @@ import { css as css20 } from "lit";
 var tabGroupStyles = css20`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .tab-group {
@@ -5339,7 +5505,7 @@ import { css as css21 } from "lit";
 var tableStyles = css21`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     overflow: hidden;
     width: 100%;
   }
@@ -5500,7 +5666,7 @@ var tableStyles = css21`
 
   /* Border styling */
   :host([bordered]) table {
-    border: 1px solid var(--lt-border-default);
+    border: var(--lt-border-width, 1px) solid var(--lt-border-default);
   }
 
   :host([bordered]) th,
@@ -5556,7 +5722,7 @@ var tableStyles = css21`
     :host([responsive-mode='stack']) tr {
       background: var(--lt-bg-subtle);
       border-radius: var(--lt-border-radius);
-      border: 1px solid var(--lt-border-default);
+      border: var(--lt-border-width, 1px) solid var(--lt-border-default);
       margin-bottom: var(--lt-spacing-3);
       padding: var(--lt-spacing-4);
     }
@@ -5874,7 +6040,7 @@ Table = __decorateClass([
 
 // src/components/textfield/textfield.ts
 import { html as html20 } from "lit";
-import { ifDefined as ifDefined3 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined4 } from "lit/directives/if-defined.js";
 import { customElement as customElement20, property as property21, state as state3 } from "lit/decorators.js";
 
 // src/components/textfield/textfield.styles.ts
@@ -5882,7 +6048,7 @@ import { css as css22 } from "lit";
 var textfieldStyles = css22`
   :host {
     display: inline-block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     width: 100%;
   }
 
@@ -5952,7 +6118,7 @@ var textfieldStyles = css22`
   textarea {
     background: var(--lt-bg-subtle);
     border-radius: var(--lt-border-radius);
-    border: 1px solid var(--lt-border-default);
+    border: var(--lt-border-width, 1px) solid var(--lt-border-default);
     box-sizing: border-box;
     color: var(--lt-text-default);
     font-family: inherit;
@@ -6184,6 +6350,7 @@ var Textfield = class extends ThemeableElement {
     return true;
   }
   handleInput(e) {
+    e.stopPropagation();
     const input = e.target;
     this.value = input.value;
     if (this._touched) this._autoError = !this._validate();
@@ -6203,6 +6370,7 @@ var Textfield = class extends ThemeableElement {
    * @private
    */
   handleChange(e) {
+    e.stopPropagation();
     const input = e.target;
     this.value = input.value;
     this.dispatchEvent(
@@ -6289,10 +6457,11 @@ var Textfield = class extends ThemeableElement {
           ${isMultiline ? html20`
                 <textarea
                   .value=${this.value}
+                  name=${ifDefined4(this.name || void 0)}
                   placeholder=${this.placeholder}
                   rows=${this.rows}
-                  minlength=${ifDefined3(this.min !== null ? this.min : void 0)}
-                  maxlength=${ifDefined3(this.max !== null ? this.max : void 0)}
+                  minlength=${ifDefined4(this.min !== null ? this.min : void 0)}
+                  maxlength=${ifDefined4(this.max !== null ? this.max : void 0)}
                   ?disabled=${this.disabled}
                   ?required=${this.required}
                   ?readonly=${this.readonly}
@@ -6308,11 +6477,12 @@ var Textfield = class extends ThemeableElement {
                 <input
                   type=${actualInputType}
                   .value=${this.value}
+                  name=${ifDefined4(this.name || void 0)}
                   placeholder=${this.placeholder}
-                  min=${ifDefined3(isNumber && this.min !== null ? this.min : void 0)}
-                  max=${ifDefined3(isNumber && this.max !== null ? this.max : void 0)}
-                  minlength=${ifDefined3(!isNumber && this.min !== null ? this.min : void 0)}
-                  maxlength=${ifDefined3(!isNumber && this.max !== null ? this.max : void 0)}
+                  min=${ifDefined4(isNumber && this.min !== null ? this.min : void 0)}
+                  max=${ifDefined4(isNumber && this.max !== null ? this.max : void 0)}
+                  minlength=${ifDefined4(!isNumber && this.min !== null ? this.min : void 0)}
+                  maxlength=${ifDefined4(!isNumber && this.max !== null ? this.max : void 0)}
                   ?disabled=${this.disabled}
                   ?required=${this.required}
                   ?readonly=${this.readonly}
@@ -6432,7 +6602,7 @@ var avatarStyles = css23`
   }
 
   .initials {
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     font-weight: 600;
     letter-spacing: 0.02em;
     line-height: 1;
@@ -6595,7 +6765,7 @@ import { css as css24 } from "lit";
 var badgeStyles = css24`
   :host {
     display: inline-flex;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     vertical-align: middle;
   }
 
@@ -6603,7 +6773,11 @@ var badgeStyles = css24`
     align-items: center;
     background: var(--lt-badge-bg);
     border-radius: 999px;
-    border: 1px solid var(--lt-badge-border-color, transparent);
+    /* Badges are even smaller than chips (as short as 18px at size="sm") — a
+       "thick" (4px) themed border reads as compressed, so cap what the badge
+       actually renders at "medium" (2px) regardless of the theme's configured
+       border width. */
+    border: min(var(--lt-border-width, 1px), 2px) solid var(--lt-badge-border-color, transparent);
     color: var(--lt-badge-color);
     box-sizing: border-box;
     display: inline-flex;
@@ -7029,7 +7203,7 @@ var snackbarStyles = css26`
     align-items: center;
     color: var(--lt-text-inverse);
     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);
     line-height: 1.4;
@@ -7228,7 +7402,7 @@ import { css as css27 } from "lit";
 var alertStyles = css27`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     opacity: 1;
     transform: translateY(0);
     transition:
@@ -7298,14 +7472,14 @@ var alertStyles = css27`
   :host([appearance='filled']) .inner,
   :host(:not([appearance])) .inner {
     background: var(--_bg-subtle);
-    border: 1px solid var(--_border);
+    border: var(--lt-border-width, 1px) solid var(--_border);
     color: var(--_color);
   }
 
   /* outlined — white bg + colored border */
   :host([appearance='outlined']) .inner {
     background: var(--lt-bg-default);
-    border: 1px solid var(--_border);
+    border: var(--lt-border-width, 1px) solid var(--_border);
     color: var(--_color);
   }
 
@@ -7451,7 +7625,7 @@ import { css as css28 } from "lit";
 var sliderStyles = css28`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     width: 100%;
   }
 
@@ -7722,7 +7896,7 @@ var dropdownStyles = [
   css29`
     :host {
       display: inline-block;
-      font-family: 'Hanken Grotesk', sans-serif;
+      font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     }
 
     .trigger-wrap {
@@ -7760,7 +7934,7 @@ var dropdownItemStyles = css30`
     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);
@@ -8165,7 +8339,7 @@ var navItemStyles = css32`
     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),
@@ -8232,13 +8406,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;
@@ -8258,10 +8434,22 @@ var NavItem = class extends ThemeableElement {
       <span class="label">${this.label}</span>
       ${showChevron ? html30`<lt-icon class="chevron" name="caret-down" size="sm"></lt-icon>` : nothing6}
     `;
+    const ariaCurrent = this.active ? "page" : nothing6;
     if (this.href && !this._hasChildren) {
-      return html30`<a class="item-trigger" href=${this.href} @click=${this._handleTriggerClick}>${inner}</a>`;
-    }
-    return html30`<button class="item-trigger" @click=${this._handleTriggerClick} ?disabled=${this.disabled}>
+      return html30`<a
+        class="item-trigger"
+        href=${this.href}
+        aria-current=${ariaCurrent}
+        @click=${this._handleTriggerClick}
+        >${inner}</a
+      >`;
+    }
+    return html30`<button
+      class="item-trigger"
+      aria-current=${ariaCurrent}
+      @click=${this._handleTriggerClick}
+      ?disabled=${this.disabled}
+    >
       ${inner}
     </button>`;
   }
@@ -8442,7 +8630,7 @@ var breadcrumbItemStyles = css34`
   :host {
     align-items: center;
     display: inline-flex;
-    font-family: var(--lt-typography-fontfamily);
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     font-size: 0.875rem;
   }
 
@@ -8602,7 +8790,7 @@ var dividerStyles = css35`
 
   [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);
@@ -9120,7 +9308,8 @@ SidePanel = __decorateClass([
 
 // src/components/image/image.ts
 import { html as html38 } from "lit";
-import { customElement as customElement38, property as property39 } from "lit/decorators.js";
+import { customElement as customElement38, property as property39, state as state5 } from "lit/decorators.js";
+import { ifDefined as ifDefined5 } from "lit/directives/if-defined.js";
 
 // src/components/image/image.styles.ts
 import { css as css39 } from "lit";
@@ -9157,15 +9346,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 html38`<slot name="fallback"></slot>`;
+    }
     const radius = this._borderRadius;
     return html38`
-      <img part="image" src=${this.src} alt=${this.alt} style=${radius ? `border-radius: ${radius}` : ""} />
+      <img
+        part="image"
+        src=${this.src}
+        alt=${this.alt}
+        loading=${ifDefined5(this.loading || void 0)}
+        style=${radius ? `border-radius: ${radius}` : ""}
+        @load=${this._handleLoad}
+        @error=${this._handleError}
+      />
     `;
   }
 };
@@ -9182,6 +9403,12 @@ __decorateClass([
 __decorateClass([
   property39({ type: Boolean, reflect: true })
 ], Image.prototype, "responsive", 2);
+__decorateClass([
+  property39({ reflect: true })
+], Image.prototype, "loading", 2);
+__decorateClass([
+  state5()
+], Image.prototype, "_errored", 2);
 Image = __decorateClass([
   customElement38("lt-image")
 ], Image);
@@ -9195,7 +9422,7 @@ import { css as css40 } from "lit";
 var paginationStyles = css40`
   :host {
     display: inline-flex;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   nav {
@@ -9365,7 +9592,7 @@ import { css as css41 } from "lit";
 var datepickerStyles = css41`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .wrapper {
@@ -9388,7 +9615,7 @@ var datepickerStyles = css41`
   input {
     background: var(--lt-bg-surface);
     border-radius: var(--lt-border-radius);
-    border: 1px solid var(--lt-border-default);
+    border: var(--lt-border-width, 1px) solid var(--lt-border-default);
     color: var(--lt-text-default);
     font-family: inherit;
     font-size: 0.9375rem;
@@ -9582,12 +9809,12 @@ Datepicker = __decorateClass([
 
 // src/components/date-input/date-input.ts
 import { html as html42, nothing as nothing12 } from "lit";
-import { customElement as customElement42, property as property43, state as state6 } from "lit/decorators.js";
+import { customElement as customElement42, property as property43, state as state7 } from "lit/decorators.js";
 import "@latty-ds/icons";
 
 // src/components/calendar/calendar.ts
 import { html as html41 } from "lit";
-import { customElement as customElement41, property as property42, state as state5 } from "lit/decorators.js";
+import { customElement as customElement41, property as property42, state as state6 } from "lit/decorators.js";
 import "@latty-ds/icons";
 
 // src/components/calendar/calendar.styles.ts
@@ -9595,13 +9822,13 @@ import { css as css42 } from "lit";
 var calendarStyles = css42`
   :host {
     display: inline-block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .calendar {
     background: var(--lt-bg-default);
     border-radius: var(--lt-border-radius);
-    border: 1px solid var(--lt-border-default);
+    border: var(--lt-border-width, 1px) solid var(--lt-border-default);
     display: flex;
     flex-direction: column;
     gap: var(--lt-spacing-2);
@@ -9944,7 +10171,7 @@ var calendarStyles = css42`
   .today-btn {
     background: transparent;
     border-radius: var(--lt-border-radius);
-    border: 1px solid var(--lt-border-default);
+    border: var(--lt-border-width, 1px) solid var(--lt-border-default);
     color: var(--lt-text-subtle);
     cursor: pointer;
     font-family: inherit;
@@ -10482,22 +10709,22 @@ __decorateClass([
   property42({ type: Number, reflect: true })
 ], Calendar.prototype, "months", 2);
 __decorateClass([
-  state5()
+  state6()
 ], Calendar.prototype, "_viewYear", 2);
 __decorateClass([
-  state5()
+  state6()
 ], Calendar.prototype, "_viewMonth", 2);
 __decorateClass([
-  state5()
+  state6()
 ], Calendar.prototype, "_focusedDate", 2);
 __decorateClass([
-  state5()
+  state6()
 ], Calendar.prototype, "_hoverDate", 2);
 __decorateClass([
-  state5()
+  state6()
 ], Calendar.prototype, "_pickingMonthYear", 2);
 __decorateClass([
-  state5()
+  state6()
 ], Calendar.prototype, "_pickerYear", 2);
 Calendar = __decorateClass([
   customElement41("lt-calendar")
@@ -10510,7 +10737,7 @@ var dateInputStyles = [
   css43`
     :host {
       display: block;
-      font-family: 'Hanken Grotesk', sans-serif;
+      font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     }
 
     .wrapper {
@@ -10539,7 +10766,7 @@ var dateInputStyles = [
       align-items: center;
       background: var(--lt-bg-surface);
       border-radius: var(--lt-border-radius);
-      border: 1px solid var(--lt-border-default);
+      border: var(--lt-border-width, 1px) solid var(--lt-border-default);
       color: var(--lt-text-default);
       cursor: pointer;
       display: flex;
@@ -10848,7 +11075,7 @@ __decorateClass([
   property43({ reflect: true })
 ], DateInput.prototype, "name", 2);
 __decorateClass([
-  state6()
+  state7()
 ], DateInput.prototype, "_open", 2);
 DateInput = __decorateClass([
   customElement42("lt-date-input")
@@ -10856,7 +11083,7 @@ DateInput = __decorateClass([
 
 // src/components/combobox/combobox.ts
 import { html as html43, nothing as nothing13 } from "lit";
-import { customElement as customElement43, property as property44, state as state7 } from "lit/decorators.js";
+import { customElement as customElement43, property as property44, state as state8 } from "lit/decorators.js";
 
 // src/components/combobox/combobox.styles.ts
 import { css as css44 } from "lit";
@@ -10865,7 +11092,7 @@ var comboboxStyles = [
   css44`
     :host {
       display: block;
-      font-family: 'Hanken Grotesk', sans-serif;
+      font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
       position: relative;
     }
 
@@ -10888,7 +11115,7 @@ var comboboxStyles = [
       align-items: center;
       background: var(--lt-bg-surface);
       border-radius: var(--lt-border-radius);
-      border: 1px solid var(--lt-border-default);
+      border: var(--lt-border-width, 1px) solid var(--lt-border-default);
       cursor: text;
       display: flex;
       gap: var(--lt-spacing-2);
@@ -10983,7 +11210,7 @@ var comboboxStyles = [
     .dropdown {
       background: var(--lt-bg-surface);
       border-radius: var(--lt-border-radius);
-      border: 1px solid var(--lt-border-default);
+      border: var(--lt-border-width, 1px) solid var(--lt-border-default);
       box-shadow: var(--lt-shadow-md);
       max-height: 240px;
       overflow-y: auto;
@@ -11238,13 +11465,13 @@ __decorateClass([
   property44({ reflect: true })
 ], Combobox.prototype, "name", 2);
 __decorateClass([
-  state7()
+  state8()
 ], Combobox.prototype, "query", 2);
 __decorateClass([
-  state7()
+  state8()
 ], Combobox.prototype, "open", 2);
 __decorateClass([
-  state7()
+  state8()
 ], Combobox.prototype, "activeIndex", 2);
 Combobox = __decorateClass([
   customElement43("lt-combobox")
@@ -11252,6 +11479,7 @@ Combobox = __decorateClass([
 
 // src/components/color-input/color-input.ts
 import { html as html44 } from "lit";
+import { ifDefined as ifDefined6 } from "lit/directives/if-defined.js";
 import { customElement as customElement44, property as property45 } from "lit/decorators.js";
 
 // src/components/color-input/color-input.styles.ts
@@ -11259,7 +11487,7 @@ import { css as css45 } from "lit";
 var colorInputStyles = css45`
   :host {
     display: inline-block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     width: 100%;
   }
 
@@ -11284,7 +11512,7 @@ var colorInputStyles = css45`
     display: flex;
     align-items: center;
     background: var(--lt-bg-subtle);
-    border: 1px solid var(--lt-border-default);
+    border: var(--lt-border-width, 1px) solid var(--lt-border-default);
     border-radius: var(--lt-border-radius);
     box-sizing: border-box;
     transition:
@@ -11496,6 +11724,7 @@ var ColorInput = class extends ThemeableElement {
     return this._internals.reportValidity();
   }
   _handleChange(e) {
+    e.stopPropagation();
     const pickerHex = e.target.value;
     this.value = formatColor(pickerHex, this.format);
     this.dispatchEvent(
@@ -11519,6 +11748,7 @@ var ColorInput = class extends ThemeableElement {
             type="color"
             class="native-picker"
             .value=${hex || "#000000"}
+            name=${ifDefined6(this.name || void 0)}
             ?disabled=${this.disabled}
             aria-label=${this.label || this.placeholder}
             @change=${this._handleChange}