@latty-ds/web 0.10.4 → 1.0.0

package/dist/components/sidepanel/index.js

@@ -10,7 +10,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 
 // src/components/sidepanel/sidepanel.ts
-import { html as html3 } from "lit";
+import { html as html3, nothing as nothing2 } from "lit";
 
 // src/base/themeable-element.ts
 import { LitElement } from "lit";
@@ -35,80 +35,145 @@ __decorateClass([
 ], ThemeableElement.prototype, "theme", 2);
 
 // src/components/sidepanel/sidepanel.ts
-import { customElement as customElement3, property as property4 } from "lit/decorators.js";
+import { customElement as customElement3, property as property4, query } from "lit/decorators.js";
 
 // src/components/sidepanel/sidepanel.styles.ts
 import { css } from "lit";
 var sidepanelStyles = css`
   :host {
     display: contents;
+    /* translateX/box-shadow offsets have no logical-property equivalent, unlike the inset-inline-*
+       positioning below (which resolves automatically) — these carry the direction-dependent sign instead,
+       flipped under :dir(rtl), so the off-screen slide direction and shadow side both stay correct without
+       any JS reading computed direction at all. */
+    --_start-x: -100%;
+    --_end-x: 100%;
+    --_dir-sign: 1;
   }
 
-  /* ── Overlay ────────────────────────────────────────────────────────────── */
+  :host(:dir(rtl)) {
+    --_start-x: 100%;
+    --_end-x: -100%;
+    --_dir-sign: -1;
+  }
+
+  /* ── Panel — the native <dialog> itself now provides the overlay too, via ::backdrop; a closed dialog is
+     display:none automatically, so unlike the old transform-only-hidden div, a closed panel is genuinely
+     non-interactive and out of the accessibility tree, with no extra JS needed (SPL-1). ────────────────────── */
 
-  [part='overlay'] {
+  dialog {
+    background: var(--lt-bg-default);
+    border: none;
+    color: var(--lt-text-default);
+    margin: 0;
+    max-height: none;
+    max-width: none;
+    padding: 0;
     position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, var(--lt-sidepanel-overlay-opacity, 0.45));
-    z-index: 400;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 200ms ease;
+    /* display is deliberately NOT set here — a closed dialog must stay display:none (the native default) for
+       SPL-1's fix to actually hold (genuinely non-interactive, out of the accessibility tree); it's set to flex
+       only for the open state, below. display/overlay need transition-behavior: allow-discrete so close()
+       doesn't remove the panel (and its ::backdrop) from rendering instantly, cutting the slide-out transform
+       transition off partway through — same reasoning as lt-dialog. */
+    transition:
+      transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+      display 250ms allow-discrete,
+      overlay 250ms allow-discrete;
   }
 
-  /* ── Panel ──────────────────────────────────────────────────────────────── */
+  dialog::backdrop {
+    background: rgba(0, 0, 0, 0);
+    transition:
+      background-color 200ms ease,
+      display 250ms allow-discrete,
+      overlay 250ms allow-discrete;
+  }
 
-  [part='panel'] {
-    position: fixed;
-    background: var(--lt-bg-default);
-    display: flex;
-    flex-direction: column;
-    z-index: 401;
-    pointer-events: none;
-    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  dialog[open]::backdrop {
+    background: rgba(0, 0, 0, var(--lt-sidepanel-overlay-opacity, 0.45));
   }
 
-  /* ── Anchors — initial off-screen positions ─────────────────────────────── */
+  /* ── Anchors — off-screen positions; dialog[open] (below) is the only thing that moves it on-screen. Fully
+     explicit inset-inline-start/end/top/bottom (not inset-block/inline shorthand, and not omitting the
+     opposite side to fall back to "auto") and an explicit height/width — a native <dialog>, even
+     position:fixed, does not stretch to fill top:0/bottom:0 the way a plain block box would; confirmed
+     empirically, it needs an explicit dimension on the axis inset alone doesn't constrain. ────────────────── */
 
-  :host([anchor='left']) [part='panel'],
-  :host(:not([anchor])) [part='panel'] {
-    inset-block: 0;
-    left: 0;
-    transform: translateX(-100%);
-    box-shadow: var(--lt-sidepanel-shadow, 4px 0 24px rgba(0, 0, 0, 0.12));
+  :host([anchor='start']) dialog,
+  :host(:not([anchor])) dialog {
+    top: 0;
+    inset-inline-end: auto;
+    bottom: auto;
+    inset-inline-start: 0;
+    height: 100vh;
+    transform: translateX(var(--_start-x));
+    box-shadow: var(--lt-sidepanel-shadow, calc(4px * var(--_dir-sign)) 0 24px rgba(0, 0, 0, 0.12));
   }
 
-  :host([anchor='right']) [part='panel'] {
-    inset-block: 0;
-    right: 0;
-    transform: translateX(100%);
-    box-shadow: var(--lt-sidepanel-shadow, -4px 0 24px rgba(0, 0, 0, 0.12));
+  :host([anchor='end']) dialog {
+    top: 0;
+    inset-inline-end: 0;
+    bottom: auto;
+    inset-inline-start: auto;
+    height: 100vh;
+    transform: translateX(var(--_end-x));
+    box-shadow: var(--lt-sidepanel-shadow, calc(-4px * var(--_dir-sign)) 0 24px rgba(0, 0, 0, 0.12));
   }
 
-  :host([anchor='top']) [part='panel'] {
-    inset-inline: 0;
+  :host([anchor='top']) dialog {
     top: 0;
+    inset-inline-end: auto;
+    bottom: auto;
+    inset-inline-start: 0;
+    width: 100vw;
     transform: translateY(-100%);
     box-shadow: var(--lt-sidepanel-shadow, 0 4px 24px rgba(0, 0, 0, 0.12));
   }
 
-  :host([anchor='bottom']) [part='panel'] {
-    inset-inline: 0;
+  :host([anchor='bottom']) dialog {
+    top: auto;
+    inset-inline-end: auto;
     bottom: 0;
+    inset-inline-start: 0;
+    width: 100vw;
     transform: translateY(100%);
     box-shadow: var(--lt-sidepanel-shadow, 0 -4px 24px rgba(0, 0, 0, 0.12));
   }
 
-  /* ── Open state — must come after anchors to win the cascade ────────────── */
-
-  :host([open]) [part='overlay'] {
-    opacity: 1;
-    pointer-events: auto;
+  dialog[open] {
+    display: flex;
+    flex-direction: column;
   }
 
-  :host([open]) [part='panel'] {
+  /* The transform override has to be scoped per anchor, not a bare dialog[open] — :host([anchor='end'])
+     dialog (above) has HIGHER specificity than a plain dialog[open] (one more attribute selector, from the
+     :host() argument), so a bare "dialog[open] { transform: translate(0,0); }" would lose the cascade to the
+     anchor rule's own closed-position transform regardless of source order, leaving the panel permanently
+     stuck off-screen. Matching each anchor rule's own specificity here guarantees the open state wins. */
+  :host([anchor='start']) dialog[open],
+  :host(:not([anchor])) dialog[open],
+  :host([anchor='end']) dialog[open],
+  :host([anchor='top']) dialog[open],
+  :host([anchor='bottom']) dialog[open] {
     transform: translate(0, 0);
-    pointer-events: auto;
+  }
+
+  /* A newly-shown dialog has no earlier rendered frame to transition from — @starting-style supplies one,
+     per anchor, so the slide-in actually animates instead of snapping straight to the open position. */
+  @starting-style {
+    :host([anchor='start']) dialog[open],
+    :host(:not([anchor])) dialog[open] {
+      transform: translateX(var(--_start-x));
+    }
+    :host([anchor='end']) dialog[open] {
+      transform: translateX(var(--_end-x));
+    }
+    :host([anchor='top']) dialog[open] {
+      transform: translateY(-100%);
+    }
+    :host([anchor='bottom']) dialog[open] {
+      transform: translateY(100%);
+    }
   }
 
   /* ── Header ─────────────────────────────────────────────────────────────── */
@@ -129,7 +194,7 @@ var sidepanelStyles = css`
 
   .close-button {
     flex-shrink: 0;
-    margin-left: auto;
+    margin-inline-start: auto;
   }
 
   /* ── Body ───────────────────────────────────────────────────────────────── */
@@ -143,8 +208,8 @@ var sidepanelStyles = css`
   /* ── Reduced motion ─────────────────────────────────────────────────────── */
 
   @media (prefers-reduced-motion: reduce) {
-    [part='overlay'],
-    [part='panel'] {
+    dialog,
+    dialog::backdrop {
       transition: none;
     }
   }
@@ -153,8 +218,7 @@ var sidepanelStyles = css`
 // src/components/shared/backdrop.styles.ts
 import { css as css2 } from "lit";
 var backdropFeatureStyles = css2`
-  :host([backdrop-blur]) .backdrop,
-  :host([backdrop-blur]) [part='overlay'] {
+  :host([backdrop-blur]) dialog::backdrop {
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
   }
@@ -163,6 +227,32 @@ var backdropFeatureStyles = css2`
 // src/utils/dispatch.ts
 var dispatch = (host, name, detail, init) => host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true, ...init }));
 
+// src/utils/dev-warn.ts
+var devWarn = (tag, message) => {
+  if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+    console.warn(`[${tag}] ${message}`);
+  }
+};
+
+// src/components/shared/scroll-lock.ts
+var lockCount = 0;
+var previousOverflow = null;
+function lockBodyScroll() {
+  if (lockCount === 0) {
+    previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  lockCount++;
+}
+function unlockBodyScroll() {
+  if (lockCount === 0) return;
+  lockCount--;
+  if (lockCount === 0) {
+    document.body.style.overflow = previousOverflow ?? "";
+    previousOverflow = null;
+  }
+}
+
 // src/components/icon-button/icon-button.ts
 import { html, nothing } from "lit";
 import { customElement, property as property2 } from "lit/decorators.js";
@@ -414,6 +504,14 @@ var iconButtonStyles = css3`
   :host([round]) [part='base'] {
     border-radius: 50%;
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='base'] {
+      transition: none;
+    }
+  }
 `;
 
 // src/components/shared/aria-forwarding.ts
@@ -422,7 +520,8 @@ var FORWARDED_ARIA_ATTRIBUTES = [
   "aria-expanded",
   "aria-haspopup",
   "aria-controls",
-  "aria-current"
+  "aria-current",
+  "aria-description"
 ];
 var AriaForwardingController = class {
   constructor(host, getTarget) {
@@ -462,11 +561,30 @@ var IconButton = class extends ThemeableElement {
     this.bordered = false;
     this.size = "md";
     this.disabled = false;
+    this._blockClickWhileDisabled = (e) => {
+      if (this.disabled) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
+    };
     this.href = "";
     this.target = "";
     this.rel = "";
     this.round = false;
   }
+  firstUpdated() {
+    if (!this.label && !this.textContent?.trim()) {
+      devWarn("lt-icon-button", "no label or visible text \u2014 set `label` so screen readers can name the button");
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this._blockClickWhileDisabled, { capture: true });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this._blockClickWhileDisabled, { capture: true });
+  }
   _inner() {
     return this.icon ? html`<lt-icon name=${this.icon}></lt-icon>` : html`<slot></slot>`;
   }
@@ -700,6 +818,20 @@ var textStyles = css4`
 `;
 
 // 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",
@@ -724,7 +856,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 html2`<${tag} part="base"><slot></slot></${tag}>`;
   }
 };
@@ -740,19 +873,45 @@ Text = __decorateClass([
 ], Text);
 
 // src/components/sidepanel/sidepanel.ts
+var DEFAULT_LABELS = {
+  close: "Close panel"
+};
 var SidePanel = class extends ThemeableElement {
   constructor() {
     super(...arguments);
     this.open = false;
-    this.anchor = "left";
+    this.anchor = "start";
     this.size = "320px";
     this.label = "";
     this.noCloseButton = false;
     this.backdropBlur = false;
     this.overlayOpacity = 0.45;
-    this._handleKeyDown = (e) => {
-      if (e.key === "Escape" && this.open) this.hide();
+    this.labels = {};
+    this._scrollLocked = false;
+    // Same first-update guard, for the same reason, as lt-dialog (DLG-2), lt-dropdown (DDN-1) and lt-snackbar
+    // (SNK-1): `updated()` also runs after the very first render, where `changed.has('open')` is true even though
+    // nothing was ever shown.
+    this._skipNextOpenChange = true;
+    // Unlike lt-dialog, this has no close-on-escape toggle, so there's nothing to preventDefault() on 'cancel' —
+    // Escape is left entirely to the native element, now scoped to whichever panel actually has focus, not a
+    // window-level listener that closed every open panel on one keypress regardless of which was focused (SPL-3).
+    // The native element's own 'close' event fires whenever IT closes, for any reason — sync `open` back so the
+    // two never drift apart. If we're the ones who just called close() (inside _handleClose(), above), `open` is
+    // already false and this is a no-op.
+    this._handleNativeClose = () => {
+      this.open = false;
     };
+    // The clicked-outside-the-content area of a shown <dialog> resolves e.target to the <dialog> element itself
+    // (::backdrop isn't a real node and can't be an event target) — clicking any actual descendant instead
+    // targets that descendant (same mechanism as lt-dialog's backdrop-click detection, confirmed in the spike).
+    this._handleDialogClick = (e) => {
+      if (e.target === this.dialogElement) {
+        this.hide();
+      }
+    };
+  }
+  get _labels() {
+    return { ...DEFAULT_LABELS, ...this.labels };
   }
   /** Open the panel. */
   show() {
@@ -761,24 +920,30 @@ var SidePanel = class extends ThemeableElement {
   /** Close the panel. */
   hide() {
     this.open = false;
-    dispatch(this, "close");
   }
   /** Toggle the panel open/closed. */
   toggle() {
-    if (this.open) this.hide();
-    else this.show();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener("keydown", this._handleKeyDown);
+    this.open = !this.open;
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    window.removeEventListener("keydown", this._handleKeyDown);
+    if (this._scrollLocked) {
+      unlockBodyScroll();
+      this._scrollLocked = false;
+    }
   }
   updated(changed) {
+    if (changed.has("open")) {
+      if (this._skipNextOpenChange) {
+        this._skipNextOpenChange = false;
+      } else if (this.open) {
+        this._handleOpen();
+      } else {
+        this._handleClose();
+      }
+    }
     if (!changed.has("anchor")) return;
-    const panel = this.shadowRoot?.querySelector('[part="panel"]');
+    const panel = this.dialogElement;
     if (!panel) return;
     panel.style.transition = "none";
     if (this.open) {
@@ -790,33 +955,60 @@ var SidePanel = class extends ThemeableElement {
       panel.style.transform = "";
     });
   }
+  _handleOpen() {
+    if (!this._scrollLocked) {
+      lockBodyScroll();
+      this._scrollLocked = true;
+    }
+    if (this.dialogElement && !this.dialogElement.open) {
+      this.dialogElement.showModal();
+    }
+    dispatch(this, "open");
+  }
+  _handleClose() {
+    if (this._scrollLocked) {
+      unlockBodyScroll();
+      this._scrollLocked = false;
+    }
+    if (this.dialogElement?.open) {
+      this.dialogElement.close();
+    }
+    dispatch(this, "close");
+  }
+  // translateX has no logical/direction-aware equivalent in CSS, unlike the positioning below (inset-inline-*
+  // resolves automatically) — var(--_start-x)/var(--_end-x) carry the direction-dependent sign instead (defined
+  // in the stylesheet, flipped under :host(:dir(rtl))), so this stays correct under RTL without reading
+  // getComputedStyle(this).direction here at all.
   get _offScreenTransform() {
     switch (this.anchor) {
-      case "right":
-        return "translateX(100%)";
+      case "end":
+        return "translateX(var(--_end-x, 100%))";
       case "top":
         return "translateY(-100%)";
       case "bottom":
         return "translateY(100%)";
       default:
-        return "translateX(-100%)";
+        return "translateX(var(--_start-x, -100%))";
     }
   }
   get _panelStyle() {
-    return this.anchor === "left" || this.anchor === "right" ? `width: ${this.size}` : `height: ${this.size}`;
+    const sizeStyle = this.anchor === "start" || this.anchor === "end" ? `width: ${this.size}` : `height: ${this.size}`;
+    return `${sizeStyle}; --lt-sidepanel-overlay-opacity: ${this.overlayOpacity}`;
+  }
+  get _hasLabel() {
+    return this.label.trim().length > 0;
   }
   _renderHeader() {
-    const hasLabel = this.label.trim().length > 0;
-    if (!hasLabel && this.noCloseButton) return "";
+    if (!this._hasLabel && this.noCloseButton) return "";
     return html3`
       <div part="header" class="header">
-        ${hasLabel ? html3`<lt-text variant="h6" class="panel-label">${this.label}</lt-text>` : ""}
+        ${this._hasLabel ? html3`<lt-text variant="h6" class="panel-label" id="sidepanel-label">${this.label}</lt-text>` : ""}
         ${!this.noCloseButton ? html3`
               <lt-icon-button
                 part="close-button"
                 class="close-button"
                 icon="xmark"
-                label="Close panel"
+                label=${this._labels.close}
                 size="sm"
                 @click=${this.hide}
               ></lt-icon-button>
@@ -826,13 +1018,18 @@ var SidePanel = class extends ThemeableElement {
   }
   render() {
     return html3`
-      <div part="overlay" style="--_overlay-opacity: ${this.overlayOpacity}" @click=${this.hide}></div>
-      <div part="panel" style=${this._panelStyle} role="dialog" aria-modal="true">
+      <dialog
+        part="panel"
+        style=${this._panelStyle}
+        aria-labelledby=${this._hasLabel ? "sidepanel-label" : nothing2}
+        @close=${this._handleNativeClose}
+        @click=${this._handleDialogClick}
+      >
         ${this._renderHeader()}
         <div part="body" class="body">
           <slot></slot>
         </div>
-      </div>
+      </dialog>
     `;
   }
 };
@@ -858,6 +1055,12 @@ __decorateClass([
 __decorateClass([
   property4({ type: Number, attribute: "overlay-opacity" })
 ], SidePanel.prototype, "overlayOpacity", 2);
+__decorateClass([
+  property4({ type: Object })
+], SidePanel.prototype, "labels", 2);
+__decorateClass([
+  query("dialog")
+], SidePanel.prototype, "dialogElement", 2);
 SidePanel = __decorateClass([
   customElement3("lt-sidepanel")
 ], SidePanel);

package/dist/components/sidepanel/sidepanel.d.ts

@@ -1,29 +1,42 @@
 import { type PropertyValues } from 'lit';
 import { ThemeableElement } from '../../base';
-import type { SidePanelAnchor } from './sidepanel.types';
+import type { SidePanelAnchor, SidePanelLabels } from './sidepanel.types';
 import '../icon-button/icon-button';
 import '../text/text';
 /**
- * A slide-in panel anchored to any edge of the viewport, with a backdrop overlay.
+ * A slide-in panel anchored to any edge of the viewport, built on the native `<dialog>` element — the same
+ * migration `lt-dialog` went through (DLG-1..4), applied here to fix the equivalent gaps (SPL-1/2/3): a closed
+ * panel is no longer just transformed off-screen while staying focusable and exposed to assistive tech
+ * (`display: none` when closed is native, automatic, and absolute); focus trap and restore on close both come
+ * from `showModal()`/`close()` for free — no manual focus-tracking code needed here at all, unlike `lt-dialog`,
+ * which still carries its own from before that component's migration; Escape closes only the panel that was
+ * actually focused, not every open panel on the page (no more `window`-level keydown listener); and `close`
+ * fires consistently from `updated()` whenever `open` becomes `false`, however it happened — not only when
+ * `hide()` was called directly.
  *
  * @element lt-sidepanel
  * @slot - Content rendered inside the panel body
- * @fires close - Fired when the user requests close (backdrop click, Escape key, or close button)
- * @part overlay - The backdrop scrim behind the panel
- * @part panel - The sliding panel container
+ * @fires open - Fired when the panel opens
+ * @fires close - Fired when the panel closes (however it closed — the close button, Escape, a backdrop click,
+ * or setting `open` to `false` directly)
+ * @part overlay - The backdrop scrim behind the panel (the native `<dialog>`'s own `::backdrop`, exposed as a
+ * part so consumers can still target it, even though it's not a real light-DOM-visible element)
+ * @part panel - The sliding panel container (the `<dialog>` element itself)
  * @part header - The header bar (contains label and close button)
  * @part close-button - The close button inside the header
  * @part body - The scrollable content area wrapping the default slot
  *
  * @cssprop [--lt-sidepanel-shadow] - Overrides the panel's box-shadow, for all anchor positions.
+ * @cssprop [--lt-sidepanel-overlay-opacity] - Backdrop darkness. Set via the `overlay-opacity` property/attribute
+ * instead of this custom property directly, unless you're overriding it from outside the component.
  */
 export declare class SidePanel extends ThemeableElement {
     static styles: import("lit").CSSResult[];
     /** Whether the panel is visible. */
     open: boolean;
-    /** Edge from which the panel slides in. */
+    /** Edge from which the panel slides in. `'start'`/`'end'` flip with reading direction. */
     anchor: SidePanelAnchor;
-    /** Panel width (left/right anchors) or height (top/bottom anchors). */
+    /** Panel width (start/end anchors) or height (top/bottom anchors). */
     size: string;
     /** Title shown in the panel header. When empty, the header is hidden. */
     label: string;
@@ -33,18 +46,27 @@ export declare class SidePanel extends ThemeableElement {
     backdropBlur: boolean;
     /** Backdrop darkness as an alpha value from 0 (transparent) to 1 (opaque). */
     overlayOpacity: number;
+    /** Overridable UI text (the close button's accessible name), for i18n. English defaults — override only the keys you need. */
+    labels: Partial<SidePanelLabels>;
+    private get _labels();
+    private dialogElement?;
+    private _scrollLocked;
+    private _skipNextOpenChange;
     /** Open the panel. */
     show(): void;
     /** Close the panel. */
     hide(): void;
     /** Toggle the panel open/closed. */
     toggle(): void;
-    connectedCallback(): void;
     disconnectedCallback(): void;
-    private _handleKeyDown;
-    protected updated(changed: PropertyValues): void;
+    updated(changed: PropertyValues<this>): void;
+    private _handleOpen;
+    private _handleClose;
+    private _handleNativeClose;
+    private _handleDialogClick;
     private get _offScreenTransform();
     private get _panelStyle();
+    private get _hasLabel();
     private _renderHeader;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -1 +1,10 @@
-export type SidePanelAnchor = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * Edge the panel slides in from. `'start'`/`'end'` are logical — they resolve to the left/right edge based on
+ * the page's reading direction (left/right in LTR, right/left in RTL), not a fixed physical side.
+ */
+export type SidePanelAnchor = 'start' | 'end' | 'top' | 'bottom';
+/** Overridable UI text, for i18n — English defaults; override only the keys you need. */
+export interface SidePanelLabels {
+    /** Accessible label for the close button. */
+    close: string;
+}

package/dist/components/skeleton/index.js

@@ -46,7 +46,7 @@ var skeletonStyles = css`
   }
 
   [part='base'] {
-    background: var(--lt-color-neutral-200);
+    background: var(--lt-bg-overlay);
     border-radius: var(--lt-border-radius);
     height: 1.25rem;
     overflow: hidden;
@@ -66,12 +66,7 @@ var skeletonStyles = css`
 
   :host([animated]) [part='base'] {
     animation: shimmer 1.5s ease-in-out infinite;
-    background: linear-gradient(
-      90deg,
-      var(--lt-color-neutral-100) 25%,
-      var(--lt-color-neutral-200) 50%,
-      var(--lt-color-neutral-100) 75%
-    );
+    background: linear-gradient(90deg, var(--lt-bg-surface) 25%, var(--lt-bg-overlay) 50%, var(--lt-bg-surface) 75%);
     background-size: 200% 100%;
   }
 
@@ -87,7 +82,7 @@ var skeletonStyles = css`
   @media (prefers-reduced-motion: reduce) {
     :host([animated]) [part='base'] {
       animation: none;
-      background: var(--lt-color-neutral-200);
+      background: var(--lt-bg-overlay);
     }
   }
 `;