@latty-ds/web 0.6.0 → 0.8.0

package/dist/components/select/index.js

@@ -1432,7 +1432,7 @@ var selectStyles = [
   css2`
     :host {
       display: inline-block;
-      font-family: 'Hanken Grotesk', sans-serif;
+      font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
       position: relative;
       width: 100%;
     }
@@ -1461,7 +1461,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;
@@ -1657,7 +1657,7 @@ import { css as css3 } from "lit";
 var surfaceStyles = css3`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .surface {
@@ -1696,7 +1696,7 @@ var surfaceStyles = css3`
 
   :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 {
@@ -1713,7 +1713,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 html`
       <div class="surface" part="surface" style=${styleMap(style)}>
         <slot></slot>
@@ -1757,7 +1757,7 @@ var textStyles = css4`
   [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/shared/aria-forwarding.d.ts

@@ -0,0 +1,43 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Host `aria-*` attributes forwarded onto the internal native control.
+ *
+ * Interactive components render their semantics on a native element inside the
+ * shadow DOM, so ARIA attributes set on the host (`<lt-button aria-pressed="true">`)
+ * never reach the element screen readers actually interact with. Components that
+ * install an {@link AriaForwardingController} mirror this documented subset onto
+ * their internal control and keep it in sync as the host attributes change.
+ *
+ * Note: `aria-controls` contains an idref — it can only resolve when the referenced
+ * element lives in the same tree as the internal control, so cross-shadow references
+ * are forwarded but may be ignored by assistive technology.
+ */
+export declare const FORWARDED_ARIA_ATTRIBUTES: readonly ["aria-pressed", "aria-expanded", "aria-haspopup", "aria-controls", "aria-current"];
+type AriaForwardingHost = ReactiveControllerHost & Element;
+/**
+ * Reactive controller that forwards {@link FORWARDED_ARIA_ATTRIBUTES} from the
+ * host element onto an internal target element (typically the native `<button>`
+ * or `<a>` rendered in the shadow DOM).
+ *
+ * A `MutationObserver` watches the host so dynamic changes (e.g. a framework
+ * toggling `aria-pressed`) are re-forwarded after every update. Attributes
+ * removed from the host are removed from the target — components should not
+ * render any of the forwarded attributes themselves.
+ *
+ * @example
+ * ```ts
+ * class Button extends LitElement {
+ *   private _aria = new AriaForwardingController(this, () => this.shadowRoot?.querySelector('[part="base"]'));
+ * }
+ * ```
+ */
+export declare class AriaForwardingController implements ReactiveController {
+    private _host;
+    private _getTarget;
+    private _observer;
+    constructor(host: AriaForwardingHost, getTarget: () => Element | null | undefined);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+}
+export {};

package/dist/components/sidepanel/index.js

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

@@ -42,7 +42,7 @@ import { css } from "lit";
 var sliderStyles = css`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     width: 100%;
   }
 
@@ -310,7 +310,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/snackbar/index.js

@@ -69,7 +69,7 @@ var snackbarStyles = css`
     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;
@@ -163,7 +163,7 @@ import { css as css2 } from "lit";
 var surfaceStyles = css2`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .surface {
@@ -202,7 +202,7 @@ var surfaceStyles = css2`
 
   :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 {
@@ -219,7 +219,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 html`
       <div class="surface" part="surface" style=${styleMap(style)}>
         <slot></slot>

package/dist/components/surface/index.js

@@ -43,7 +43,7 @@ import { css } from "lit";
 var surfaceStyles = css`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .surface {
@@ -82,7 +82,7 @@ var surfaceStyles = css`
 
   :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 {
@@ -102,7 +102,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 html`
       <div class="surface" part="surface" style=${styleMap(style)}>
         <slot></slot>

package/dist/components/switch/index.js

@@ -42,7 +42,7 @@ import { css } from "lit";
 var switchStyles = css`
   :host {
     display: inline-block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .switch-wrapper {
@@ -243,6 +243,7 @@ var Switch = class extends ThemeableElement {
     return this._internals.reportValidity();
   }
   handleChange(e) {
+    e.stopPropagation();
     const target = e.target;
     this.checked = target.checked;
     this.dispatchEvent(

package/dist/components/tab/index.js

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

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

@@ -42,7 +42,7 @@ import { css } from "lit";
 var tabGroupStyles = css`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .tab-group {
@@ -102,7 +102,7 @@ import { css as css2 } from "lit";
 var tabStyles = css2`
   :host {
     display: inline-block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
   }
 
   .tab {

package/dist/components/table/index.js

@@ -45,7 +45,7 @@ import { css } from "lit";
 var tableStyles = css`
   :host {
     display: block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     overflow: hidden;
     width: 100%;
   }
@@ -206,7 +206,7 @@ var tableStyles = css`
 
   /* 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,
@@ -262,7 +262,7 @@ var tableStyles = css`
     :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);
     }

package/dist/components/text/index.js

@@ -53,7 +53,7 @@ var textStyles = css`
   [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/textfield/index.js

@@ -43,7 +43,7 @@ import { css } from "lit";
 var textfieldStyles = css`
   :host {
     display: inline-block;
-    font-family: 'Hanken Grotesk', sans-serif;
+    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
     width: 100%;
   }
 
@@ -113,7 +113,7 @@ var textfieldStyles = css`
   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;
@@ -307,7 +307,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 ─────────────────────────────────────────────────────────── */
@@ -519,6 +519,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();
@@ -538,6 +539,7 @@ var Textfield = class extends ThemeableElement {
    * @private
    */
   handleChange(e) {
+    e.stopPropagation();
     const input = e.target;
     this.value = input.value;
     this.dispatchEvent(
@@ -624,6 +626,7 @@ var Textfield = class extends ThemeableElement {
           ${isMultiline ? html2`
                 <textarea
                   .value=${this.value}
+                  name=${ifDefined(this.name || void 0)}
                   placeholder=${this.placeholder}
                   rows=${this.rows}
                   minlength=${ifDefined(this.min !== null ? this.min : void 0)}
@@ -643,6 +646,7 @@ var Textfield = class extends ThemeableElement {
                 <input
                   type=${actualInputType}
                   .value=${this.value}
+                  name=${ifDefined(this.name || void 0)}
                   placeholder=${this.placeholder}
                   min=${ifDefined(isNumber && this.min !== null ? this.min : void 0)}
                   max=${ifDefined(isNumber && this.max !== null ? this.max : void 0)}

package/dist/components/tooltip/index.js

@@ -170,7 +170,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 ─────────────────────────────────────────────────────────── */