@latty-ds/web 0.2.0

package/dist/components/sidepanel/index.js

@@ -0,0 +1,768 @@
+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/sidepanel/sidepanel.ts
+import { html as html3 } 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/sidepanel/sidepanel.ts
+import { customElement as customElement3, property as property4 } from "lit/decorators.js";
+
+// src/components/sidepanel/sidepanel.styles.ts
+import { css } from "lit";
+var sidepanelStyles = css`
+  :host {
+    display: contents;
+  }
+
+  /* ── Overlay ────────────────────────────────────────────────────────────── */
+
+  [part='overlay'] {
+    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;
+  }
+
+  /* ── Panel ──────────────────────────────────────────────────────────────── */
+
+  [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);
+  }
+
+  /* ── Anchors — initial off-screen positions ─────────────────────────────── */
+
+  :host([anchor='left']) [part='panel'],
+  :host(:not([anchor])) [part='panel'] {
+    inset-block: 0;
+    left: 0;
+    transform: translateX(-100%);
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
+  }
+
+  :host([anchor='right']) [part='panel'] {
+    inset-block: 0;
+    right: 0;
+    transform: translateX(100%);
+    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
+  }
+
+  :host([anchor='top']) [part='panel'] {
+    inset-inline: 0;
+    top: 0;
+    transform: translateY(-100%);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+  }
+
+  :host([anchor='bottom']) [part='panel'] {
+    inset-inline: 0;
+    bottom: 0;
+    transform: translateY(100%);
+    box-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;
+  }
+
+  :host([open]) [part='panel'] {
+    transform: translate(0, 0);
+    pointer-events: auto;
+  }
+
+  /* ── Header ─────────────────────────────────────────────────────────────── */
+
+  .header {
+    display: flex;
+    align-items: center;
+    gap: var(--lt-spacing-4);
+    padding: var(--lt-spacing-4) var(--lt-spacing-5);
+    border-bottom: 1px solid var(--lt-border-default);
+    flex-shrink: 0;
+  }
+
+  .panel-label {
+    flex: 1;
+    color: var(--lt-text-default);
+  }
+
+  .close-button {
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  /* ── Body ───────────────────────────────────────────────────────────────── */
+
+  .body {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='overlay'],
+    [part='panel'] {
+      transition: none;
+    }
+  }
+`;
+
+// src/components/shared/backdrop.styles.ts
+import { css as css2 } from "lit";
+var backdropFeatureStyles = css2`
+  :host([backdrop-blur]) .backdrop,
+  :host([backdrop-blur]) [part='overlay'] {
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+  }
+`;
+
+// src/utils/dispatch.ts
+var dispatch = (host, name, detail, init) => host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true, ...init }));
+
+// src/components/icon-button/icon-button.ts
+import { html, nothing } from "lit";
+import { customElement, property as property2 } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+// src/components/icon-button/icon-button.styles.ts
+import { css as css3 } from "lit";
+var iconButtonStyles = css3`
+  :host {
+    display: inline-flex;
+
+    /* Internal state props — set per variant/appearance below */
+    --_color: var(--lt-text-subtle);
+    --_bg: transparent;
+    --_border-color: transparent;
+    --_hover-bg: var(--lt-bg-subtle);
+    --_hover-color: var(--lt-text-default);
+    --_active-bg: var(--lt-bg-subtle);
+  }
+
+  [part='base'] {
+    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));
+    box-sizing: border-box;
+    color: var(--lt-icon-button-color, var(--_color));
+    cursor: pointer;
+    display: inline-flex;
+    justify-content: center;
+    padding: 0;
+    transition:
+      background-color 120ms ease,
+      border-color 120ms ease,
+      transform 50ms ease;
+    user-select: none;
+  }
+
+  [part='base']:hover:not([disabled]) {
+    background: var(--lt-icon-button-hover-bg, var(--_hover-bg));
+    color: var(--lt-icon-button-hover-color, var(--lt-icon-button-color, var(--_hover-color)));
+  }
+
+  [part='base']:active {
+    transform: translateY(1px);
+  }
+
+  [part='base']:active:not([disabled]) {
+    background: var(--lt-icon-button-hover-bg, var(--_active-bg));
+  }
+
+  [part='base']:focus-visible {
+    outline: 3px solid var(--lt-border-focus);
+    outline-offset: 2px;
+  }
+
+  [part='base'][disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+    transform: none;
+  }
+
+  a[part='base'] {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  /* sizes */
+  :host([size='sm']) [part='base'] {
+    height: 28px;
+    width: 28px;
+  }
+
+  :host([size='md']) [part='base'] {
+    height: 36px;
+    width: 36px;
+  }
+
+  :host([size='lg']) [part='base'] {
+    height: 44px;
+    width: 44px;
+  }
+
+  /* ── ghost ────────────────────────────────────────────────── */
+  :host([appearance='ghost'][variant='primary']) {
+    --_color: var(--lt-text-primary);
+    --_hover-bg: var(--lt-bg-primary-subtle);
+    --_hover-color: var(--lt-text-primary);
+    --_active-bg: var(--lt-bg-primary-subtle);
+  }
+  :host([appearance='ghost'][variant='secondary']) {
+    --_color: var(--lt-text-secondary);
+    --_hover-bg: var(--lt-bg-secondary-subtle);
+    --_hover-color: var(--lt-text-secondary);
+    --_active-bg: var(--lt-bg-secondary-subtle);
+  }
+  :host([appearance='ghost'][variant='success']) {
+    --_color: var(--lt-text-success);
+    --_hover-bg: var(--lt-bg-success-subtle);
+    --_hover-color: var(--lt-text-success);
+    --_active-bg: var(--lt-bg-success-subtle);
+  }
+  :host([appearance='ghost'][variant='warning']) {
+    --_color: var(--lt-text-warning);
+    --_hover-bg: var(--lt-bg-warning-subtle);
+    --_hover-color: var(--lt-text-warning);
+    --_active-bg: var(--lt-bg-warning-subtle);
+  }
+  :host([appearance='ghost'][variant='error']) {
+    --_color: var(--lt-text-error);
+    --_hover-bg: var(--lt-bg-error-subtle);
+    --_hover-color: var(--lt-text-error);
+    --_active-bg: var(--lt-bg-error-subtle);
+  }
+  :host([appearance='ghost'][variant='info']) {
+    --_color: var(--lt-text-info);
+    --_hover-bg: var(--lt-bg-info-subtle);
+    --_hover-color: var(--lt-text-info);
+    --_active-bg: var(--lt-bg-info-subtle);
+  }
+
+  /* ── filled ───────────────────────────────────────────────── */
+  :host([appearance='filled'][variant='primary']) {
+    --_bg: var(--lt-interactive-primary-bg);
+    --_color: var(--lt-text-on-primary);
+    --_hover-bg: var(--lt-interactive-primary-bg-hover);
+    --_hover-color: var(--lt-text-on-primary);
+    --_active-bg: var(--lt-interactive-primary-bg-active);
+  }
+  :host([appearance='filled'][variant='secondary']) {
+    --_bg: var(--lt-interactive-secondary-bg);
+    --_color: var(--lt-text-on-secondary);
+    --_hover-bg: var(--lt-interactive-secondary-bg-hover);
+    --_hover-color: var(--lt-text-on-secondary);
+    --_active-bg: var(--lt-interactive-secondary-bg-active);
+  }
+  :host([appearance='filled'][variant='neutral']) {
+    --_bg: var(--lt-color-neutral-500);
+    --_color: var(--lt-color-neutral-50);
+    --_hover-bg: var(--lt-color-neutral-700);
+    --_hover-color: var(--lt-color-neutral-50);
+    --_active-bg: var(--lt-color-neutral-800);
+  }
+  :host([appearance='filled'][variant='success']) {
+    --_bg: var(--lt-interactive-success-bg);
+    --_color: var(--lt-text-on-success);
+    --_hover-bg: var(--lt-interactive-success-bg-hover);
+    --_hover-color: var(--lt-text-on-success);
+    --_active-bg: var(--lt-interactive-success-bg-active);
+  }
+  :host([appearance='filled'][variant='warning']) {
+    --_bg: var(--lt-interactive-warning-bg);
+    --_color: var(--lt-text-on-warning);
+    --_hover-bg: var(--lt-interactive-warning-bg-hover);
+    --_hover-color: var(--lt-text-on-warning);
+    --_active-bg: var(--lt-interactive-warning-bg-active);
+  }
+  :host([appearance='filled'][variant='error']) {
+    --_bg: var(--lt-interactive-error-bg);
+    --_color: var(--lt-text-on-error);
+    --_hover-bg: var(--lt-interactive-error-bg-hover);
+    --_hover-color: var(--lt-text-on-error);
+    --_active-bg: var(--lt-interactive-error-bg-active);
+  }
+  :host([appearance='filled'][variant='info']) {
+    --_bg: var(--lt-interactive-info-bg);
+    --_color: var(--lt-text-on-info);
+    --_hover-bg: var(--lt-interactive-info-bg-hover);
+    --_hover-color: var(--lt-text-on-info);
+    --_active-bg: var(--lt-interactive-info-bg-active);
+  }
+
+  /* ── outlined ─────────────────────────────────────────────── */
+  :host([appearance='outlined'][variant='primary']) {
+    --_color: var(--lt-text-primary);
+    --_border-color: var(--lt-border-primary-strong);
+    --_hover-bg: var(--lt-bg-primary-subtle);
+    --_hover-color: var(--lt-text-primary);
+    --_active-bg: var(--lt-bg-primary-subtle);
+  }
+  :host([appearance='outlined'][variant='secondary']) {
+    --_color: var(--lt-text-secondary);
+    --_border-color: var(--lt-border-secondary-strong);
+    --_hover-bg: var(--lt-bg-secondary-subtle);
+    --_hover-color: var(--lt-text-secondary);
+    --_active-bg: var(--lt-bg-secondary-subtle);
+  }
+  :host([appearance='outlined'][variant='neutral']) {
+    --_color: var(--lt-text-neutral);
+    --_border-color: var(--lt-border-strong);
+    --_hover-bg: var(--lt-bg-subtle);
+    --_hover-color: var(--lt-text-default);
+    --_active-bg: var(--lt-bg-subtle);
+  }
+  :host([appearance='outlined'][variant='success']) {
+    --_color: var(--lt-text-success);
+    --_border-color: var(--lt-border-success-strong);
+    --_hover-bg: var(--lt-bg-success-subtle);
+    --_hover-color: var(--lt-text-success);
+    --_active-bg: var(--lt-bg-success-subtle);
+  }
+  :host([appearance='outlined'][variant='warning']) {
+    --_color: var(--lt-text-warning);
+    --_border-color: var(--lt-border-warning-strong);
+    --_hover-bg: var(--lt-bg-warning-subtle);
+    --_hover-color: var(--lt-text-warning);
+    --_active-bg: var(--lt-bg-warning-subtle);
+  }
+  :host([appearance='outlined'][variant='error']) {
+    --_color: var(--lt-text-error);
+    --_border-color: var(--lt-border-error-strong);
+    --_hover-bg: var(--lt-bg-error-subtle);
+    --_hover-color: var(--lt-text-error);
+    --_active-bg: var(--lt-bg-error-subtle);
+  }
+  :host([appearance='outlined'][variant='info']) {
+    --_color: var(--lt-text-info);
+    --_border-color: var(--lt-border-info-strong);
+    --_hover-bg: var(--lt-bg-info-subtle);
+    --_hover-color: var(--lt-text-info);
+    --_active-bg: var(--lt-bg-info-subtle);
+  }
+
+  /* round shape */
+  :host([round]) [part='base'] {
+    border-radius: 50%;
+  }
+`;
+
+// src/components/icon-button/icon-button.ts
+import "@latty-ds/icons";
+var IconButton = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.icon = "";
+    this.label = "";
+    this.variant = "neutral";
+    this.appearance = "ghost";
+    this.size = "md";
+    this.disabled = false;
+    this.href = "";
+    this.target = "";
+    this.rel = "";
+    this.round = false;
+  }
+  _inner() {
+    return this.icon ? html`<lt-icon name=${this.icon}></lt-icon>` : html`<slot></slot>`;
+  }
+  render() {
+    const label = this.label || void 0;
+    if (this.href) {
+      const rel = this.rel || (this.target === "_blank" ? "noopener noreferrer" : void 0);
+      return html`
+        <a
+          part="base"
+          href=${this.href}
+          target=${ifDefined(this.target || void 0)}
+          rel=${ifDefined(rel)}
+          aria-label=${ifDefined(label)}
+          aria-disabled=${this.disabled ? "true" : nothing}
+          tabindex=${this.disabled ? "-1" : nothing}
+        >
+          ${this._inner()}
+        </a>
+      `;
+    }
+    return html`
+      <button part="base" ?disabled=${this.disabled} aria-label=${ifDefined(label)}>${this._inner()}</button>
+    `;
+  }
+};
+IconButton.styles = iconButtonStyles;
+__decorateClass([
+  property2({ reflect: true })
+], IconButton.prototype, "icon", 2);
+__decorateClass([
+  property2({ reflect: true })
+], IconButton.prototype, "label", 2);
+__decorateClass([
+  property2({ reflect: true })
+], IconButton.prototype, "variant", 2);
+__decorateClass([
+  property2({ reflect: true })
+], IconButton.prototype, "appearance", 2);
+__decorateClass([
+  property2({ reflect: true })
+], IconButton.prototype, "size", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], IconButton.prototype, "disabled", 2);
+__decorateClass([
+  property2()
+], IconButton.prototype, "href", 2);
+__decorateClass([
+  property2()
+], IconButton.prototype, "target", 2);
+__decorateClass([
+  property2()
+], IconButton.prototype, "rel", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], IconButton.prototype, "round", 2);
+IconButton = __decorateClass([
+  customElement("lt-icon-button")
+], IconButton);
+
+// src/components/text/text.ts
+import { customElement as customElement2, property as property3 } from "lit/decorators.js";
+import { html as html2, unsafeStatic } from "lit/static-html.js";
+
+// src/components/text/text.styles.ts
+import { css as css4 } from "lit";
+var textStyles = css4`
+  :host {
+    display: block;
+    color: inherit;
+  }
+
+  /* Inline variants sit in text flow */
+  :host([variant='caption']),
+  :host([variant='overline']),
+  :host([variant='label']) {
+    display: inline;
+  }
+
+  [part='base'] {
+    margin: 0;
+    color: inherit;
+    font-family: var(--lt-typography-fontfamily);
+  }
+
+  /* ── Display ─────────────────────────────────────────────────────────── */
+
+  :host([variant='display-2xl']) [part='base'] {
+    font-size: clamp(2.5rem, 6vw, 4.5rem);
+    font-weight: var(--lt-text-weight, 200);
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+  }
+
+  :host([variant='display-xl']) [part='base'] {
+    font-size: clamp(2rem, 5vw, 3.75rem);
+    font-weight: var(--lt-text-weight, 200);
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+  }
+
+  :host([variant='display-lg']) [part='base'] {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: var(--lt-text-weight, 200);
+    line-height: 1.15;
+    letter-spacing: -0.01em;
+  }
+
+  /* ── Headings ─────────────────────────────────────────────────────────── */
+
+  :host([variant='h1']) [part='base'] {
+    font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+  }
+
+  :host([variant='h2']) [part='base'] {
+    font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.25;
+    letter-spacing: -0.01em;
+  }
+
+  :host([variant='h3']) [part='base'] {
+    font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.3;
+  }
+
+  :host([variant='h4']) [part='base'] {
+    font-size: 1.25rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.35;
+  }
+
+  :host([variant='h5']) [part='base'] {
+    font-size: 1.125rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.4;
+  }
+
+  :host([variant='h6']) [part='base'] {
+    font-size: 1rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.4;
+  }
+
+  /* ── Body ─────────────────────────────────────────────────────────────── */
+
+  :host([variant='lead']) [part='base'] {
+    font-size: 1.25rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.6;
+  }
+
+  :host([variant='body']) [part='base'],
+  :host(:not([variant])) [part='base'] {
+    font-size: 1rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.6;
+  }
+
+  :host([variant='body-sm']) [part='base'] {
+    font-size: 0.875rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.6;
+  }
+
+  /* ── Inline ───────────────────────────────────────────────────────────── */
+
+  :host([variant='caption']) [part='base'] {
+    font-size: 0.75rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.5;
+  }
+
+  :host([variant='overline']) [part='base'] {
+    font-size: 0.6875rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.2;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  :host([variant='label']) [part='base'] {
+    font-size: 0.875rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.4;
+  }
+`;
+
+// src/components/text/text.ts
+var VARIANT_TAG = {
+  "display-2xl": "p",
+  "display-xl": "p",
+  "display-lg": "p",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  lead: "p",
+  body: "p",
+  "body-sm": "p",
+  caption: "span",
+  overline: "span",
+  label: "span"
+};
+var Text = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "body";
+    this.as = "";
+  }
+  render() {
+    const tag = unsafeStatic(this.as || VARIANT_TAG[this.variant] || "p");
+    return html2`<${tag} part="base"><slot></slot></${tag}>`;
+  }
+};
+Text.styles = textStyles;
+__decorateClass([
+  property3({ reflect: true })
+], Text.prototype, "variant", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Text.prototype, "as", 2);
+Text = __decorateClass([
+  customElement2("lt-text")
+], Text);
+
+// src/components/sidepanel/sidepanel.ts
+var SidePanel = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.anchor = "left";
+    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();
+    };
+  }
+  /** Open the panel. */
+  show() {
+    this.open = true;
+  }
+  /** 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);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("keydown", this._handleKeyDown);
+  }
+  updated(changed) {
+    if (!changed.has("anchor")) return;
+    const panel = this.shadowRoot?.querySelector('[part="panel"]');
+    if (!panel) return;
+    panel.style.transition = "none";
+    if (this.open) {
+      panel.style.transform = this._offScreenTransform;
+    }
+    void panel.getBoundingClientRect();
+    requestAnimationFrame(() => {
+      panel.style.transition = "";
+      panel.style.transform = "";
+    });
+  }
+  get _offScreenTransform() {
+    switch (this.anchor) {
+      case "right":
+        return "translateX(100%)";
+      case "top":
+        return "translateY(-100%)";
+      case "bottom":
+        return "translateY(100%)";
+      default:
+        return "translateX(-100%)";
+    }
+  }
+  get _panelStyle() {
+    return this.anchor === "left" || this.anchor === "right" ? `width: ${this.size}` : `height: ${this.size}`;
+  }
+  _renderHeader() {
+    const hasLabel = this.label.trim().length > 0;
+    if (!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.noCloseButton ? html3`
+              <lt-icon-button
+                part="close-button"
+                class="close-button"
+                icon="xmark"
+                label="Close panel"
+                size="sm"
+                @click=${this.hide}
+              ></lt-icon-button>
+            ` : ""}
+      </div>
+    `;
+  }
+  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">
+        ${this._renderHeader()}
+        <div part="body" class="body">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+SidePanel.styles = [sidepanelStyles, backdropFeatureStyles];
+__decorateClass([
+  property4({ type: Boolean, reflect: true })
+], SidePanel.prototype, "open", 2);
+__decorateClass([
+  property4({ reflect: true })
+], SidePanel.prototype, "anchor", 2);
+__decorateClass([
+  property4()
+], SidePanel.prototype, "size", 2);
+__decorateClass([
+  property4()
+], SidePanel.prototype, "label", 2);
+__decorateClass([
+  property4({ type: Boolean, attribute: "no-close-button" })
+], SidePanel.prototype, "noCloseButton", 2);
+__decorateClass([
+  property4({ type: Boolean, reflect: true, attribute: "backdrop-blur" })
+], SidePanel.prototype, "backdropBlur", 2);
+__decorateClass([
+  property4({ type: Number, attribute: "overlay-opacity" })
+], SidePanel.prototype, "overlayOpacity", 2);
+SidePanel = __decorateClass([
+  customElement3("lt-sidepanel")
+], SidePanel);
+export {
+  SidePanel
+};