@latty-ds/web 0.7.0 → 0.8.0

package/dist/components/accordion/index.js

@@ -42,7 +42,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%;
   }
 
@@ -127,7 +127,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 {
@@ -147,7 +147,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 {
@@ -198,7 +198,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 ─────────────────────────────────────────────────────────── */

package/dist/components/alert/index.js

@@ -43,7 +43,7 @@ import { css } from "lit";
 var alertStyles = css`
   :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:
@@ -113,14 +113,14 @@ var alertStyles = css`
   :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);
   }
 
@@ -208,7 +208,7 @@ var iconButtonStyles = css2`
     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;
@@ -414,11 +414,45 @@ var iconButtonStyles = css2`
   }
 `;
 
+// 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";
@@ -513,7 +547,7 @@ var textStyles = css3`
   [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/avatar/index.js

@@ -64,7 +64,7 @@ var avatarStyles = css`
   }
 
   .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;

package/dist/components/badge/index.js

@@ -42,7 +42,7 @@ import { css } from "lit";
 var badgeStyles = css`
   :host {
     display: inline-flex;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     vertical-align: middle;
   }
 
@@ -50,7 +50,11 @@ var badgeStyles = css`
     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;

package/dist/components/breadcrumb/index.js

@@ -58,7 +58,7 @@ var breadcrumbItemStyles = css`
   :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;
   }
 

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

@@ -9,17 +9,21 @@ import '@latty-ds/icons';
  *
  * Features:
  * - Multiple visual variants (primary, secondary, neutral, success, warning, error, info)
- * - Two appearance styles (filled, outlined)
+ * - Three appearance styles (filled, outlined, ghost)
  * - Three size options (sm, md, lg)
  * - Loading state with spinner
  * - Icon support at start and end positions
  * - Disabled state
  * - Accessible with aria-busy for loading state
+ * - Forwards host `aria-pressed`, `aria-expanded`, `aria-haspopup`, `aria-controls`, and
+ *   `aria-current` onto the internal native control (e.g. for toggle buttons)
  * - Renders as `<a>` when `href` is provided (link button)
  * - Form-associated: `type="submit"` submits the containing form, `type="reset"` resets it
  *
  * @slot - Button label/content
  *
+ * @cssprop [--lt-button-min-width=88px] - Minimum width of the button; set to `0` for compact/inline buttons
+ *
  * @example
  * ```html
  * <lt-button variant="primary" size="md">Click me</lt-button>
@@ -39,6 +43,7 @@ export declare class Button extends ThemeableElement {
     static styles: import("lit").CSSResult;
     static formAssociated: boolean;
     private _internals;
+    private _ariaForwarding;
     constructor();
     /**
      * Visual variant that determines the button's color scheme.
@@ -46,7 +51,7 @@ export declare class Button extends ThemeableElement {
      */
     variant: ButtonVariant;
     /**
-     * Appearance style (filled or outlined).
+     * Appearance style (filled, outlined, or ghost).
      * @default 'filled'
      */
     appearance: ButtonAppearance;

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

@@ -13,12 +13,13 @@
 export type ButtonVariant = 'primary' | 'secondary' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
 /**
  * Appearance style of the button component.
- * Determines whether the button is filled or outlined.
+ * Determines whether the button is filled, outlined, or ghost.
  *
  * - `filled`: Solid background with the variant color (default)
  * - `outlined`: Transparent background with colored border and text
+ * - `ghost`: Transparent background with colored text and no border (low-emphasis text button)
  */
-export type ButtonAppearance = 'filled' | 'outlined';
+export type ButtonAppearance = 'filled' | 'outlined' | 'ghost';
 /**
  * Size variant of the button component.
  * Affects height, font size, and padding.

package/dist/components/button/index.js

@@ -43,7 +43,7 @@ import { css } from "lit";
 var buttonStyles = css`
   :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);
@@ -66,7 +66,7 @@ var buttonStyles = css`
     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;
@@ -76,7 +76,7 @@ var buttonStyles = css`
     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,
@@ -228,7 +228,52 @@ var buttonStyles = css`
     --_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;
   }
 
@@ -262,6 +307,39 @@ var buttonStyles = 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/spinner/spinner.ts
 import { html } from "lit";
 import { customElement, property as property2 } from "lit/decorators.js";
@@ -361,6 +439,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";

package/dist/components/calendar/index.js

@@ -43,13 +43,13 @@ import { css } from "lit";
 var calendarStyles = css`
   :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);
@@ -392,7 +392,7 @@ var calendarStyles = css`
   .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;

package/dist/components/checkbox/index.js

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

package/dist/components/chip/index.js

@@ -43,7 +43,7 @@ import { css } from "lit";
 var chipStyles = css`
   :host {
     display: inline-flex;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     vertical-align: middle;
   }
 
@@ -51,7 +51,11 @@ var chipStyles = css`
     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;

package/dist/components/color-input/index.js

@@ -11,6 +11,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/components/color-input/color-input.ts
 import { html as html2 } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { customElement as customElement2, property as property3 } from "lit/decorators.js";
 
 // src/base/themeable-element.ts
@@ -40,7 +41,7 @@ import { css } from "lit";
 var colorInputStyles = css`
   :host {
     display: inline-block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     width: 100%;
   }
 
@@ -65,7 +66,7 @@ var colorInputStyles = css`
     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:
@@ -211,7 +212,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 ─────────────────────────────────────────────────────────── */
@@ -451,6 +452,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(
@@ -474,6 +476,7 @@ var ColorInput = class extends ThemeableElement {
             type="color"
             class="native-picker"
             .value=${hex || "#000000"}
+            name=${ifDefined(this.name || void 0)}
             ?disabled=${this.disabled}
             aria-label=${this.label || this.placeholder}
             @change=${this._handleChange}

package/dist/components/combobox/index.js

@@ -1432,7 +1432,7 @@ var comboboxStyles = [
   css2`
     :host {
       display: block;
-      font-family: 'Hanken Grotesk', sans-serif;
+      font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
       position: relative;
     }
 
@@ -1455,7 +1455,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);
@@ -1550,7 +1550,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;
@@ -1648,7 +1648,7 @@ var textStyles = css3`
   [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/date-input/index.js

@@ -48,13 +48,13 @@ import { css } from "lit";
 var calendarStyles = css`
   :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);
@@ -397,7 +397,7 @@ var calendarStyles = css`
   .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;
@@ -992,7 +992,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 ─────────────────────────────────────────────────────────── */
@@ -2537,7 +2537,7 @@ var dateInputStyles = [
   css4`
     :host {
       display: block;
-      font-family: 'Hanken Grotesk', sans-serif;
+      font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     }
 
     .wrapper {
@@ -2566,7 +2566,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;

package/dist/components/datepicker/index.js

@@ -42,7 +42,7 @@ import { css } from "lit";
 var datepickerStyles = css`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .wrapper {
@@ -65,7 +65,7 @@ var datepickerStyles = css`
   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;
@@ -167,7 +167,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 ─────────────────────────────────────────────────────────── */