@latty-ds/web 0.2.0

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

@@ -0,0 +1,48 @@
+import { type PropertyValues } from 'lit';
+import { ThemeableElement } from '../../base';
+import type { SidePanelAnchor } 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.
+ *
+ * @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
+ * @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
+ */
+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. */
+    anchor: SidePanelAnchor;
+    /** Panel width (left/right anchors) or height (top/bottom anchors). */
+    size: string;
+    /** Title shown in the panel header. When empty, the header is hidden. */
+    label: string;
+    /** Suppress the built-in close button. */
+    noCloseButton: boolean;
+    /** Apply a frosted-glass blur effect to the backdrop. */
+    backdropBlur: boolean;
+    /** Backdrop darkness as an alpha value from 0 (transparent) to 1 (opaque). */
+    overlayOpacity: number;
+    /** 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;
+    private get _offScreenTransform();
+    private get _panelStyle();
+    private _renderHeader;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1 @@
+export declare const sidepanelStyles: import("lit").CSSResult;

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

@@ -0,0 +1 @@
+export type SidePanelAnchor = 'left' | 'right' | 'top' | 'bottom';

package/dist/components/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { Skeleton } from './skeleton';
+export type { SkeletonShape } from './skeleton.types';

package/dist/components/skeleton/index.js

@@ -0,0 +1,129 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/components/skeleton/skeleton.ts
+import { html } from "lit";
+
+// src/base/themeable-element.ts
+import { LitElement } from "lit";
+import { property } from "lit/decorators.js";
+var ThemeableElement = class extends LitElement {
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("theme")) {
+      this._syncThemeAttribute();
+    }
+  }
+  _syncThemeAttribute() {
+    if (this.theme === "dark" || this.theme === "light") {
+      this.setAttribute("data-theme", this.theme);
+    } else {
+      this.removeAttribute("data-theme");
+    }
+  }
+};
+__decorateClass([
+  property({ reflect: true })
+], ThemeableElement.prototype, "theme", 2);
+
+// src/components/skeleton/skeleton.ts
+import { customElement, property as property2 } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+// src/components/skeleton/skeleton.styles.ts
+import { css } from "lit";
+var skeletonStyles = css`
+  :host {
+    display: block;
+  }
+
+  [part='base'] {
+    background: var(--lt-color-neutral-200);
+    border-radius: var(--lt-border-radius);
+    height: 1.25rem;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  :host([shape='text']) [part='base'] {
+    border-radius: 4px;
+    height: 1em;
+  }
+
+  :host([shape='circle']) [part='base'] {
+    border-radius: 50%;
+    height: 2.5rem;
+    width: 2.5rem;
+  }
+
+  :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-size: 200% 100%;
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host([animated]) [part='base'] {
+      animation: none;
+      background: var(--lt-color-neutral-200);
+    }
+  }
+`;
+
+// src/components/skeleton/skeleton.ts
+var Skeleton = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.shape = "rect";
+    this.width = "";
+    this.height = "";
+    this.animated = true;
+  }
+  render() {
+    const style = {};
+    if (this.width) style.width = this.width;
+    if (this.height) style.height = this.height;
+    return html`<div part="base" style=${styleMap(style)} aria-hidden="true"></div>`;
+  }
+};
+Skeleton.styles = skeletonStyles;
+__decorateClass([
+  property2({ reflect: true })
+], Skeleton.prototype, "shape", 2);
+__decorateClass([
+  property2()
+], Skeleton.prototype, "width", 2);
+__decorateClass([
+  property2()
+], Skeleton.prototype, "height", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Skeleton.prototype, "animated", 2);
+Skeleton = __decorateClass([
+  customElement("lt-skeleton")
+], Skeleton);
+export {
+  Skeleton
+};

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,39 @@
+import { ThemeableElement } from '../../base';
+import type { SkeletonShape } from './skeleton.types';
+/**
+ * A loading placeholder that mimics the shape of content while data is being fetched.
+ *
+ * @element lt-skeleton
+ *
+ * @example
+ * ```html
+ * <lt-skeleton></lt-skeleton>
+ * <lt-skeleton shape="text" width="60%"></lt-skeleton>
+ * <lt-skeleton shape="circle" width="48px" height="48px"></lt-skeleton>
+ * <lt-skeleton shape="rect" height="200px"></lt-skeleton>
+ * ```
+ */
+export declare class Skeleton extends ThemeableElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Shape of the skeleton placeholder.
+     * @default 'rect'
+     */
+    shape: SkeletonShape;
+    /**
+     * Width of the skeleton. Accepts any CSS length value (e.g. '100%', '200px').
+     * @default ''
+     */
+    width: string;
+    /**
+     * Height of the skeleton. Accepts any CSS length value (e.g. '1rem', '200px').
+     * @default ''
+     */
+    height: string;
+    /**
+     * Whether to show the shimmer animation.
+     * @default true
+     */
+    animated: boolean;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/skeleton/skeleton.styles.d.ts

@@ -0,0 +1 @@
+export declare const skeletonStyles: import("lit").CSSResult;

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

@@ -0,0 +1 @@
+export type SkeletonShape = 'text' | 'circle' | 'rect';

package/dist/components/slider/index.d.ts

@@ -0,0 +1,2 @@
+export { Slider } from './slider';
+export type { SliderSize } from './slider.types';