@latty-ds/web 0.6.0 → 0.8.0

package/dist/index.cjs

@@ -1331,7 +1331,7 @@ __decorateClass([
 var accordionStyles = i`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     width: 100%;
   }
 
@@ -1416,7 +1416,7 @@ var accordionStyles = i`
   /* 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 {
@@ -1436,7 +1436,7 @@ var accordionStyles = i`
   /* 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 {
@@ -1508,7 +1508,7 @@ var textStyles = i`
   [part='base'] {
     margin: 0;
     color: inherit;
-    font-family: var(--lt-typography-fontfamily);
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   /* ── Display ─────────────────────────────────────────────────────────── */
@@ -1781,7 +1781,7 @@ var o8 = (o10) => o10 ?? A;
 var buttonStyles = i`
   :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);
@@ -1804,7 +1804,7 @@ var buttonStyles = i`
     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;
@@ -1814,7 +1814,7 @@ var buttonStyles = i`
     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,
@@ -1966,7 +1966,52 @@ var buttonStyles = i`
     --_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;
   }
 
@@ -2000,6 +2045,39 @@ var buttonStyles = i`
   }
 `;
 
+// 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.styles.ts
 var spinnerStyles = i`
   :host {
@@ -2094,6 +2172,7 @@ var import_icons2 = require("@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";
@@ -2248,7 +2327,7 @@ var o9 = e5(class extends i4 {
 var chipStyles = i`
   :host {
     display: inline-flex;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     vertical-align: middle;
   }
 
@@ -2256,7 +2335,11 @@ var chipStyles = i`
     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;
@@ -2498,7 +2581,7 @@ Chip = __decorateClass([
 var checkboxStyles = i`
   :host {
     display: inline-block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .checkbox-wrapper {
@@ -2698,6 +2781,7 @@ var Checkbox = class extends ThemeableElement {
    * @private
    */
   handleChange(e7) {
+    e7.stopPropagation();
     const target = e7.target;
     this.checked = target.checked;
     this.indeterminate = false;
@@ -2788,7 +2872,7 @@ Checkbox = __decorateClass([
 // src/components/dialog/dialog.styles.ts
 var dialogStyles = i`
   :host {
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   /* Backdrop */
@@ -2940,7 +3024,7 @@ var iconButtonStyles = i`
     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;
@@ -3151,6 +3235,7 @@ var import_icons5 = require("@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";
@@ -3227,7 +3312,7 @@ IconButton = __decorateClass([
 var surfaceStyles = i`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .surface {
@@ -3266,7 +3351,7 @@ var surfaceStyles = i`
 
   :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 {
@@ -3283,7 +3368,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 T`
       <div class="surface" part="surface" style=${o9(style)}>
         <slot></slot>
@@ -3472,7 +3557,7 @@ Dialog = __decorateClass([
 var listStyles = i`
   :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);
   }
 
@@ -3593,11 +3678,60 @@ var listItemStyles = i`
     gap: var(--lt-spacing-2);
   }
 
+  /* Keep the slotted content as a single flex item so rich inline markup
+     (strong, code, multiple text runs) flows as normal prose instead of each
+     node becoming its own shrunk flex item. min-width: 0 lets it wrap. */
+  .content {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
   lt-icon {
     flex-shrink: 0;
     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
@@ -3607,19 +3741,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 T`
-      <div class="inner">
-        ${this.iconStart ? T`<lt-icon class="icon-start" name=${this.iconStart}></lt-icon>` : A}
-        <slot></slot>
-        ${this.iconEnd ? T`<lt-icon class="icon-end" name=${this.iconEnd}></lt-icon>` : A}
-      </div>
+    const inner = T`
+      ${this.iconStart ? T`<lt-icon class="icon-start" name=${this.iconStart}></lt-icon>` : A}
+      <span class="content"><slot></slot></span>
+      ${this.iconEnd ? T`<lt-icon class="icon-end" name=${this.iconEnd}></lt-icon>` : A}
     `;
+    if (this.href) {
+      const rel = this.rel || (this.target === "_blank" ? "noopener noreferrer" : void 0);
+      return T`
+        <a
+          class="inner"
+          part="base"
+          href=${this.href}
+          target=${o8(this.target || void 0)}
+          rel=${o8(rel)}
+          aria-disabled=${this.disabled ? "true" : A}
+          tabindex=${this.disabled ? "-1" : A}
+          >${inner}</a
+        >
+      `;
+    }
+    if (this.clickable) {
+      return T`<button class="inner" part="base" type="button" ?disabled=${this.disabled}>${inner}</button>`;
+    }
+    return T`<div class="inner" part="base">${inner}</div>`;
   }
 };
 ListItem.styles = listItemStyles;
@@ -3629,6 +3785,21 @@ __decorateClass([
 __decorateClass([
   n4({ attribute: "icon-end" })
 ], ListItem.prototype, "iconEnd", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], ListItem.prototype, "clickable", 2);
+__decorateClass([
+  n4()
+], ListItem.prototype, "href", 2);
+__decorateClass([
+  n4()
+], ListItem.prototype, "target", 2);
+__decorateClass([
+  n4()
+], ListItem.prototype, "rel", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], ListItem.prototype, "disabled", 2);
 ListItem = __decorateClass([
   t3("lt-list-item")
 ], ListItem);
@@ -3677,7 +3848,7 @@ List = __decorateClass([
 var radioStyles = i`
   :host {
     display: inline-block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .radio-wrapper {
@@ -3881,6 +4052,7 @@ var Radio = class extends ThemeableElement {
    * @private
    */
   handleChange(e7) {
+    e7.stopPropagation();
     const target = e7.target;
     this.checked = target.checked;
     this.dispatchEvent(
@@ -3949,7 +4121,7 @@ Radio = __decorateClass([
 var radioGroupStyles = i`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .radio-group {
@@ -5506,7 +5678,7 @@ var selectStyles = [
   i`
     :host {
       display: inline-block;
-      font-family: 'Hanken Grotesk', sans-serif;
+      font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
       position: relative;
       width: 100%;
     }
@@ -5535,7 +5707,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;
@@ -5938,7 +6110,7 @@ Select = __decorateClass([
 var switchStyles = i`
   :host {
     display: inline-block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .switch-wrapper {
@@ -6139,6 +6311,7 @@ var Switch = class extends ThemeableElement {
     return this._internals.reportValidity();
   }
   handleChange(e7) {
+    e7.stopPropagation();
     const target = e7.target;
     this.checked = target.checked;
     this.dispatchEvent(
@@ -6209,7 +6382,7 @@ Switch = __decorateClass([
 var tabStyles = i`
   :host {
     display: inline-block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .tab {
@@ -6413,7 +6586,7 @@ TabPanel = __decorateClass([
 var tabGroupStyles = i`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .tab-group {
@@ -6708,7 +6881,7 @@ var c5 = e5(class extends i4 {
 var tableStyles = i`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     overflow: hidden;
     width: 100%;
   }
@@ -6869,7 +7042,7 @@ var tableStyles = i`
 
   /* 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,
@@ -6925,7 +7098,7 @@ var tableStyles = i`
     :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);
     }
@@ -7245,7 +7418,7 @@ Table = __decorateClass([
 var textfieldStyles = i`
   :host {
     display: inline-block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     width: 100%;
   }
 
@@ -7315,7 +7488,7 @@ var textfieldStyles = i`
   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;
@@ -7547,6 +7720,7 @@ var Textfield = class extends ThemeableElement {
     return true;
   }
   handleInput(e7) {
+    e7.stopPropagation();
     const input = e7.target;
     this.value = input.value;
     if (this._touched) this._autoError = !this._validate();
@@ -7566,6 +7740,7 @@ var Textfield = class extends ThemeableElement {
    * @private
    */
   handleChange(e7) {
+    e7.stopPropagation();
     const input = e7.target;
     this.value = input.value;
     this.dispatchEvent(
@@ -7652,6 +7827,7 @@ var Textfield = class extends ThemeableElement {
           ${isMultiline ? T`
                 <textarea
                   .value=${this.value}
+                  name=${o8(this.name || void 0)}
                   placeholder=${this.placeholder}
                   rows=${this.rows}
                   minlength=${o8(this.min !== null ? this.min : void 0)}
@@ -7671,6 +7847,7 @@ var Textfield = class extends ThemeableElement {
                 <input
                   type=${actualInputType}
                   .value=${this.value}
+                  name=${o8(this.name || void 0)}
                   placeholder=${this.placeholder}
                   min=${o8(isNumber && this.min !== null ? this.min : void 0)}
                   max=${o8(isNumber && this.max !== null ? this.max : void 0)}
@@ -7790,7 +7967,7 @@ var avatarStyles = i`
   }
 
   .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;
@@ -7948,7 +8125,7 @@ Avatar = __decorateClass([
 var badgeStyles = i`
   :host {
     display: inline-flex;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     vertical-align: middle;
   }
 
@@ -7956,7 +8133,11 @@ var badgeStyles = i`
     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;
@@ -8371,7 +8552,7 @@ var snackbarStyles = i`
     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;
@@ -8564,7 +8745,7 @@ Snackbar = __decorateClass([
 var alertStyles = i`
   :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:
@@ -8634,14 +8815,14 @@ var alertStyles = i`
   :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);
   }
 
@@ -8782,7 +8963,7 @@ Alert = __decorateClass([
 var sliderStyles = i`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     width: 100%;
   }
 
@@ -9048,7 +9229,7 @@ var dropdownStyles = [
   i`
     :host {
       display: inline-block;
-      font-family: 'Hanken Grotesk', sans-serif;
+      font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     }
 
     .trigger-wrap {
@@ -9081,7 +9262,7 @@ var dropdownItemStyles = i`
     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);
@@ -9476,7 +9657,7 @@ var navItemStyles = i`
     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),
@@ -9541,13 +9722,15 @@ var NavItem = class extends ThemeableElement {
   }
   _handleTriggerClick(e7) {
     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) e7.preventDefault();
     if (this._hasChildren) {
       e7.preventDefault();
       this.open = !this.open;
@@ -9567,10 +9750,22 @@ var NavItem = class extends ThemeableElement {
       <span class="label">${this.label}</span>
       ${showChevron ? T`<lt-icon class="chevron" name="caret-down" size="sm"></lt-icon>` : A}
     `;
+    const ariaCurrent = this.active ? "page" : A;
     if (this.href && !this._hasChildren) {
-      return T`<a class="item-trigger" href=${this.href} @click=${this._handleTriggerClick}>${inner}</a>`;
-    }
-    return T`<button class="item-trigger" @click=${this._handleTriggerClick} ?disabled=${this.disabled}>
+      return T`<a
+        class="item-trigger"
+        href=${this.href}
+        aria-current=${ariaCurrent}
+        @click=${this._handleTriggerClick}
+        >${inner}</a
+      >`;
+    }
+    return T`<button
+      class="item-trigger"
+      aria-current=${ariaCurrent}
+      @click=${this._handleTriggerClick}
+      ?disabled=${this.disabled}
+    >
       ${inner}
     </button>`;
   }
@@ -9743,7 +9938,7 @@ var breadcrumbItemStyles = i`
   :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;
   }
 
@@ -9898,7 +10093,7 @@ var dividerStyles = i`
 
   [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);
@@ -10432,15 +10627,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 T`<slot name="fallback"></slot>`;
+    }
     const radius = this._borderRadius;
     return T`
-      <img part="image" src=${this.src} alt=${this.alt} style=${radius ? `border-radius: ${radius}` : ""} />
+      <img
+        part="image"
+        src=${this.src}
+        alt=${this.alt}
+        loading=${o8(this.loading || void 0)}
+        style=${radius ? `border-radius: ${radius}` : ""}
+        @load=${this._handleLoad}
+        @error=${this._handleError}
+      />
     `;
   }
 };
@@ -10457,6 +10684,12 @@ __decorateClass([
 __decorateClass([
   n4({ type: Boolean, reflect: true })
 ], Image.prototype, "responsive", 2);
+__decorateClass([
+  n4({ reflect: true })
+], Image.prototype, "loading", 2);
+__decorateClass([
+  r5()
+], Image.prototype, "_errored", 2);
 Image = __decorateClass([
   t3("lt-image")
 ], Image);
@@ -10465,7 +10698,7 @@ Image = __decorateClass([
 var paginationStyles = i`
   :host {
     display: inline-flex;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   nav {
@@ -10630,7 +10863,7 @@ Pagination = __decorateClass([
 var datepickerStyles = i`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .wrapper {
@@ -10653,7 +10886,7 @@ var datepickerStyles = i`
   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;
@@ -10855,13 +11088,13 @@ var import_icons16 = require("@latty-ds/icons");
 var calendarStyles = i`
   :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);
@@ -11204,7 +11437,7 @@ var calendarStyles = i`
   .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;
@@ -11769,7 +12002,7 @@ var dateInputStyles = [
   i`
     :host {
       display: block;
-      font-family: 'Hanken Grotesk', sans-serif;
+      font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     }
 
     .wrapper {
@@ -11798,7 +12031,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;
@@ -12119,7 +12352,7 @@ var comboboxStyles = [
   i`
     :host {
       display: block;
-      font-family: 'Hanken Grotesk', sans-serif;
+      font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
       position: relative;
     }
 
@@ -12142,7 +12375,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);
@@ -12237,7 +12470,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;
@@ -12508,7 +12741,7 @@ Combobox = __decorateClass([
 var colorInputStyles = i`
   :host {
     display: inline-block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     width: 100%;
   }
 
@@ -12533,7 +12766,7 @@ var colorInputStyles = i`
     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:
@@ -12745,6 +12978,7 @@ var ColorInput = class extends ThemeableElement {
     return this._internals.reportValidity();
   }
   _handleChange(e7) {
+    e7.stopPropagation();
     const pickerHex = e7.target.value;
     this.value = formatColor(pickerHex, this.format);
     this.dispatchEvent(
@@ -12768,6 +13002,7 @@ var ColorInput = class extends ThemeableElement {
             type="color"
             class="native-picker"
             .value=${hex || "#000000"}
+            name=${o8(this.name || void 0)}
             ?disabled=${this.disabled}
             aria-label=${this.label || this.placeholder}
             @change=${this._handleChange}