@latty-ds/web 0.10.4 → 1.0.0

package/dist/components/datepicker/index.js

@@ -9,6 +9,10 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 
+// src/components/shared/form-field.ts
+var fieldCount = 0;
+var createFieldIds = () => ({ helper: `lt-field-${fieldCount++}-helper` });
+
 // src/components/datepicker/datepicker.ts
 import { html as html2, nothing } from "lit";
 
@@ -59,7 +63,7 @@ var datepickerStyles = css`
   }
 
   .required-indicator {
-    color: var(--lt-color-error-500);
+    color: var(--lt-text-error);
   }
 
   input {
@@ -120,7 +124,7 @@ var datepickerStyles = css`
     box-shadow: 0 0 0 3px var(--lt-bg-warning-subtle);
   }
   :host([variant='error']) input {
-    border-color: var(--lt-color-error-500);
+    border-color: var(--lt-text-error);
   }
   :host([variant='error']) input:focus {
     box-shadow: 0 0 0 3px var(--lt-bg-error-subtle);
@@ -132,19 +136,80 @@ var datepickerStyles = css`
   }
 
   :host([variant='error']) .helper-text {
-    color: var(--lt-color-error-600);
+    color: var(--lt-text-error);
   }
   :host([variant='success']) .helper-text {
-    color: var(--lt-color-success-600);
+    color: var(--lt-text-success);
   }
   :host([variant='warning']) .helper-text {
-    color: var(--lt-color-warning-700);
+    color: var(--lt-text-warning);
+  }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    input {
+      transition: none;
+    }
   }
 `;
 
 // src/utils/dispatch.ts
 var dispatch = (host, name, detail, init) => host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true, ...init }));
 
+// src/components/shared/form-default.ts
+var FormDefaultController = class {
+  constructor(host, get) {
+    this._captured = false;
+    this._get = get;
+    host.addController(this);
+  }
+  hostConnected() {
+    if (this._captured) return;
+    this._captured = true;
+    this.value = this._get();
+  }
+};
+
+// src/components/shared/form-disabled.ts
+var FormDisabledController = class {
+  constructor(host) {
+    this._fieldsetDisabled = false;
+    this._host = host;
+    host.addController(this);
+  }
+  // No-op — this controller has no connect-time work of its own (formDisabledCallback drives it instead), but
+  // ReactiveController's members are all optional, and a class satisfying an all-optional interface with no
+  // members in common is a TS error (TS2559); this gives it one.
+  hostConnected() {
+  }
+  /** Whether an ancestor `<fieldset>` is currently disabled. */
+  get fieldsetDisabled() {
+    return this._fieldsetDisabled;
+  }
+  setFieldsetDisabled(disabled) {
+    if (this._fieldsetDisabled === disabled) return;
+    this._fieldsetDisabled = disabled;
+    this._host.requestUpdate();
+  }
+};
+
+// src/components/shared/form-validity.ts
+function toValidityFlags(validity) {
+  return {
+    valueMissing: validity.valueMissing,
+    typeMismatch: validity.typeMismatch,
+    patternMismatch: validity.patternMismatch,
+    tooLong: validity.tooLong,
+    tooShort: validity.tooShort,
+    rangeUnderflow: validity.rangeUnderflow,
+    rangeOverflow: validity.rangeOverflow,
+    stepMismatch: validity.stepMismatch,
+    badInput: validity.badInput,
+    customError: validity.customError
+  };
+}
+
 // src/components/text/text.ts
 import { customElement, property as property2 } from "lit/decorators.js";
 import { html, unsafeStatic } from "lit/static-html.js";
@@ -314,6 +379,20 @@ var textStyles = css2`
 `;
 
 // src/components/text/text.ts
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "span",
+  "div",
+  "label",
+  "strong",
+  "em"
+]);
 var VARIANT_TAG = {
   "display-2xl": "p",
   "display-xl": "p",
@@ -338,7 +417,8 @@ var Text = class extends ThemeableElement {
     this.as = "";
   }
   render() {
-    const tag = unsafeStatic(this.as || VARIANT_TAG[this.variant] || "p");
+    const requested = this.as && ALLOWED_TAGS.has(this.as) ? this.as : "";
+    const tag = unsafeStatic(requested || VARIANT_TAG[this.variant] || "p");
     return html`<${tag} part="base"><slot></slot></${tag}>`;
   }
 };
@@ -357,12 +437,15 @@ Text = __decorateClass([
 var Datepicker = class extends ThemeableElement {
   constructor() {
     super();
+    this._default = new FormDefaultController(this, () => this.value);
+    this._fieldsetDisabled = new FormDisabledController(this);
     this.type = "date";
     this.value = "";
     this.min = "";
     this.max = "";
     this.label = "";
     this.helperText = "";
+    this._fieldIds = createFieldIds();
     this.variant = "default";
     this.size = "md";
     this.disabled = false;
@@ -372,17 +455,24 @@ var Datepicker = class extends ThemeableElement {
     this._internals = this.attachInternals();
   }
   updated(changed) {
-    if (changed.has("value") || changed.has("required")) {
+    if (changed.has("value") || changed.has("required") || changed.has("min") || changed.has("max")) {
       this._internals.setFormValue(this.value || null);
-      if (this.required && !this.value) {
-        this._internals.setValidity({ valueMissing: true }, "Please select a date", this.input);
+      if (!this.input.validity.valid) {
+        this._internals.setValidity(toValidityFlags(this.input.validity), this.input.validationMessage, this.input);
       } else {
         this._internals.setValidity({});
       }
     }
   }
   formResetCallback() {
-    this.value = "";
+    this.value = this._default.value;
+  }
+  formDisabledCallback(disabled) {
+    this._fieldsetDisabled.setFieldsetDisabled(disabled);
+  }
+  /** `this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`). */
+  get _isDisabled() {
+    return this.disabled || this._fieldsetDisabled.fieldsetDisabled;
   }
   checkValidity() {
     return this._internals.checkValidity();
@@ -390,11 +480,13 @@ var Datepicker = class extends ThemeableElement {
   reportValidity() {
     return this._internals.reportValidity();
   }
-  handleChange() {
+  handleChange(e) {
+    e.stopPropagation();
     this.value = this.input.value;
     dispatch(this, "change", { value: this.value });
   }
-  handleInput() {
+  handleInput(e) {
+    e.stopPropagation();
     this.value = this.input.value;
     dispatch(this, "input", { value: this.value });
   }
@@ -405,8 +497,9 @@ var Datepicker = class extends ThemeableElement {
         .value=${this.value}
         min=${this.min || nothing}
         max=${this.max || nothing}
-        ?disabled=${this.disabled}
+        ?disabled=${this._isDisabled}
         ?required=${this.required}
+        aria-describedby=${this.helperText ? this._fieldIds.helper : nothing}
         ?readonly=${this.readonly}
         @change=${this.handleChange}
         @input=${this.handleInput}
@@ -418,7 +511,7 @@ var Datepicker = class extends ThemeableElement {
               <lt-text variant="label" as="span">${this.label}</lt-text>
               ${this.required ? html2`<span class="required-indicator">*</span>` : nothing} ${inputEl}
             </label>` : inputEl}
-        ${this.helperText ? html2`<span class="helper-text">${this.helperText}</span>` : nothing}
+        ${this.helperText ? html2`<span id=${this._fieldIds.helper} class="helper-text">${this.helperText}</span>` : nothing}
       </div>
     `;
   }
@@ -429,7 +522,7 @@ __decorateClass([
   property3({ reflect: true })
 ], Datepicker.prototype, "type", 2);
 __decorateClass([
-  property3({ reflect: true })
+  property3()
 ], Datepicker.prototype, "value", 2);
 __decorateClass([
   property3({ reflect: true })

package/dist/components/dialog/dialog.d.ts

@@ -1,37 +1,41 @@
+import { type PropertyValues } from 'lit';
 import { ThemeableElement } from '../../base';
-import { DialogSize } from './dialog.types';
+import { DialogSize, type DialogLabels } from './dialog.types';
 import type { SurfaceElevation, SurfaceAppearance } from '../surface/surface.types';
 import '../icon-button/icon-button';
 import '../surface/surface';
 import '../text/text';
 /**
- * Dialog component (modal) with backdrop, animations, and accessibility features.
+ * Dialog component (modal) built on the native `<dialog>` element, with a backdrop, animations, and full
+ * accessibility features for free — top-layer stacking, a real focus trap, an inert page background, and
+ * Escape-to-close all come from the platform (`showModal()`), not from anything this component builds itself
+ * (DLG-1). Body scroll locking is the one thing native `<dialog>` doesn't do on its own — this component keeps
+ * its own ref-counted lock for that (DLG-3, see `shared/scroll-lock.ts`).
  *
  * @element lt-dialog
  *
  * Features:
  * - Multiple size options (sm, md, lg, xl, fullscreen)
  * - Backdrop overlay with configurable click-to-close
- * - Close on Escape key
- * - Header with optional title and close button
+ * - Close on Escape key (native; `close-on-escape="false"` prevents it)
+ * - Header with optional heading and close button
  * - Scrollable body content
  * - Optional footer for actions
- * - Focus trap and restoration
- * - Custom open/close events
- * - Accessible with aria-modal and role="dialog"
+ * - Native focus trap and restoration
+ * - `open` / `close` events
+ * - Accessible via the native `<dialog>` element's own implicit modal semantics
  *
  * @slot - Dialog body content
- * @slot header - Custom header content (overrides title prop)
+ * @slot header - Custom header content (overrides heading prop)
  * @slot footer - Footer content (typically for action buttons)
  *
  * @fires open - Fired when dialog opens
- * @fires close - Fired when dialog closes
- * @fires dialog-open - Fired when dialog opens (deprecated, use `open`)
- * @fires dialog-close - Fired when dialog closes (deprecated, use `close`)
+ * @fires close - Fired when dialog closes (however it closed — the close button, Escape, a backdrop click, or
+ * setting `open` to `false` directly)
  *
  * @example
  * ```html
- * <lt-dialog open title="Confirm Action">
+ * <lt-dialog open heading="Confirm Action">
  *   <p>Are you sure you want to proceed?</p>
  *   <div slot="footer">
  *     <lt-button variant="neutral">Cancel</lt-button>
@@ -42,7 +46,7 @@ import '../text/text';
  *
  * @example
  * ```html
- * <lt-dialog size="lg" open title="Settings" no-close-button>
+ * <lt-dialog size="lg" open heading="Settings" no-close-button>
  *   <p>Dialog content here...</p>
  * </lt-dialog>
  * ```
@@ -60,10 +64,19 @@ export declare class Dialog extends ThemeableElement {
      */
     open: boolean;
     /**
-     * Dialog title displayed in the header.
+     * Dialog heading displayed in the header.
      * @default ''
      */
-    title: string;
+    heading: string;
+    /**
+     * @deprecated Use `heading` instead. `title` collides with the browser's own native tooltip attribute — every
+     * HTML element has one regardless of custom-element status, so `<lt-dialog title="…">` made hovering anywhere
+     * over the dialog show a browser tooltip, and assistive tech could read it as a duplicate description (DLG-6).
+     * This alias keeps existing markup/JS working; the native `title` attribute is always stripped as soon as
+     * it's read, so the tooltip never appears.
+     */
+    get title(): string;
+    set title(value: string);
     /**
      * Suppress the built-in close button in the header.
      * @default false
@@ -80,7 +93,7 @@ export declare class Dialog extends ThemeableElement {
      */
     closeOnEscape: boolean;
     /**
-     * Renders the dialog title in small caps with wider letter spacing.
+     * Renders the dialog heading in small caps with wider letter spacing.
      * @default false
      */
     uppercase: boolean;
@@ -99,8 +112,13 @@ export declare class Dialog extends ThemeableElement {
      * @default 'filled'
      */
     appearance: SurfaceAppearance;
+    /** Overridable UI text (the close button's accessible name), for i18n. English defaults — override only the keys you need. */
+    labels: Partial<DialogLabels>;
+    private get _labels();
     private dialogElement?;
     private previouslyFocusedElement?;
+    private _scrollLocked;
+    private _skipNextOpenChange;
     /**
      * Opens the dialog.
      */
@@ -113,14 +131,16 @@ export declare class Dialog extends ThemeableElement {
      * Toggles the dialog open/closed state.
      */
     toggle(): void;
+    protected firstUpdated(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    updated(changedProperties: Map<string, unknown>): void;
+    updated(changedProperties: PropertyValues<this>): void;
     private handleOpen;
     private handleClose;
     private restoreFocus;
-    private handleKeydown;
-    private handleBackdropClick;
+    private _handleCancel;
+    private _handleNativeClose;
+    private _handleDialogClick;
     private handleCloseClick;
     render(): import("lit").TemplateResult<1>;
     private hasSlot;

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

@@ -9,3 +9,8 @@
  * - `fullscreen`: Full viewport width and height
  */
 export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
+/** Overridable UI text, for i18n — English defaults; override only the keys you need. */
+export interface DialogLabels {
+    /** Accessible label for the close button. */
+    close: string;
+}