@duskmoon-dev/el-drawer 0.4.0

package/dist/cjs/index.js

@@ -0,0 +1,339 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// src/index.ts
+var exports_src = {};
+__export(exports_src, {
+  register: () => register,
+  ElDmDrawer: () => ElDmDrawer
+});
+module.exports = __toCommonJS(exports_src);
+
+// src/el-dm-drawer.ts
+var import_el_core = require("@duskmoon-dev/el-core");
+var styles = import_el_core.css`
+  :host {
+    display: contents;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .drawer-wrapper {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    pointer-events: none;
+  }
+
+  .drawer-wrapper.open {
+    pointer-events: auto;
+  }
+
+  .drawer-backdrop {
+    position: absolute;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 300ms ease,
+      visibility 300ms ease;
+  }
+
+  .drawer-wrapper.open .drawer-backdrop {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .drawer {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    width: var(--drawer-width, 280px);
+    max-width: 100vw;
+    background-color: var(--color-surface);
+    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    font-family: inherit;
+    pointer-events: auto;
+  }
+
+  .drawer-left {
+    left: 0;
+    border-right: 1px solid var(--color-outline);
+    transform: translateX(-100%);
+  }
+
+  .drawer-right {
+    right: 0;
+    border-left: 1px solid var(--color-outline);
+    transform: translateX(100%);
+  }
+
+  .drawer-wrapper.open .drawer-left,
+  .drawer-wrapper.open .drawer-right {
+    transform: translateX(0);
+  }
+
+  .drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--color-outline);
+    flex-shrink: 0;
+  }
+
+  .drawer-body {
+    flex: 1;
+    padding: 1rem 1.5rem;
+    overflow-y: auto;
+  }
+
+  .drawer-footer {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem 1.5rem;
+    border-top: 1px solid var(--color-outline);
+    flex-shrink: 0;
+  }
+
+  .drawer-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border: none;
+    background: transparent;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    color: var(--color-on-surface);
+    opacity: 0.7;
+    transition:
+      opacity 150ms ease,
+      background-color 150ms ease;
+  }
+
+  .drawer-close:hover {
+    opacity: 1;
+    background-color: var(--color-surface-variant);
+  }
+
+  .drawer-close:focus {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  /* Non-modal drawer positioning */
+  :host(:not([modal])) .drawer-wrapper {
+    pointer-events: none;
+  }
+
+  :host(:not([modal])) .drawer {
+    pointer-events: auto;
+  }
+`;
+
+class ElDmDrawer extends import_el_core.BaseElement {
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    position: { type: String, reflect: true, default: "left" },
+    modal: { type: Boolean, reflect: true },
+    width: { type: String, reflect: true }
+  };
+  _focusableElements = [];
+  _previouslyFocused = null;
+  constructor() {
+    super();
+    this.attachStyles(styles);
+  }
+  _handleBackdropClick(event) {
+    if (this.modal && event.target === event.currentTarget) {
+      this.hide();
+    }
+  }
+  _handleKeyDown = (event) => {
+    if (event.key === "Escape" && this.modal) {
+      this.hide();
+      return;
+    }
+    if (event.key === "Tab" && this.modal && this.open) {
+      this._handleTabKey(event);
+    }
+  };
+  _handleTabKey(event) {
+    const focusable = this._getFocusableElements();
+    if (focusable.length === 0)
+      return;
+    const firstFocusable = focusable[0];
+    const lastFocusable = focusable[focusable.length - 1];
+    if (event.shiftKey) {
+      if (document.activeElement === firstFocusable) {
+        event.preventDefault();
+        lastFocusable.focus();
+      }
+    } else {
+      if (document.activeElement === lastFocusable) {
+        event.preventDefault();
+        firstFocusable.focus();
+      }
+    }
+  }
+  _getFocusableElements() {
+    const drawer = this.shadowRoot?.querySelector(".drawer");
+    if (!drawer)
+      return [];
+    const focusableSelectors = [
+      "button:not([disabled])",
+      "a[href]",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ].join(", ");
+    const shadowFocusable = Array.from(drawer.querySelectorAll(focusableSelectors));
+    const slots = drawer.querySelectorAll("slot");
+    const slottedFocusable = [];
+    slots.forEach((slot) => {
+      const assignedElements = slot.assignedElements({ flatten: true });
+      assignedElements.forEach((el) => {
+        if (el instanceof HTMLElement) {
+          if (el.matches(focusableSelectors)) {
+            slottedFocusable.push(el);
+          }
+          slottedFocusable.push(...Array.from(el.querySelectorAll(focusableSelectors)));
+        }
+      });
+    });
+    return [...shadowFocusable, ...slottedFocusable];
+  }
+  _trapFocus() {
+    this._previouslyFocused = document.activeElement;
+    this._focusableElements = this._getFocusableElements();
+    requestAnimationFrame(() => {
+      if (this._focusableElements.length > 0) {
+        this._focusableElements[0].focus();
+      } else {
+        const drawer = this.shadowRoot?.querySelector(".drawer");
+        drawer?.focus();
+      }
+    });
+  }
+  _releaseFocus() {
+    if (this._previouslyFocused && this._previouslyFocused.focus) {
+      this._previouslyFocused.focus();
+    }
+    this._previouslyFocused = null;
+  }
+  show() {
+    this.open = true;
+    document.addEventListener("keydown", this._handleKeyDown);
+    if (this.modal) {
+      document.body.style.overflow = "hidden";
+      this._trapFocus();
+    }
+    this.emit("open");
+  }
+  hide() {
+    this.open = false;
+    document.removeEventListener("keydown", this._handleKeyDown);
+    if (this.modal) {
+      document.body.style.overflow = "";
+      this._releaseFocus();
+    }
+    this.emit("close");
+  }
+  toggle() {
+    if (this.open) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback?.();
+    document.removeEventListener("keydown", this._handleKeyDown);
+    document.body.style.overflow = "";
+  }
+  render() {
+    const positionClass = this.position === "right" ? "drawer-right" : "drawer-left";
+    const widthStyle = this.width ? `--drawer-width: ${this.width}` : "";
+    return `
+      <div class="drawer-wrapper ${this.open ? "open" : ""}" part="wrapper">
+        ${this.modal ? '<div class="drawer-backdrop" part="backdrop"></div>' : ""}
+        <div
+          class="drawer ${positionClass}"
+          role="dialog"
+          aria-modal="${this.modal ? "true" : "false"}"
+          style="${widthStyle}"
+          tabindex="-1"
+          part="drawer"
+        >
+          <div class="drawer-header" part="header">
+            <slot name="header"></slot>
+            <button class="drawer-close" part="close" aria-label="Close drawer">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </button>
+          </div>
+          <div class="drawer-body" part="body">
+            <slot></slot>
+          </div>
+          <div class="drawer-footer" part="footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  update() {
+    super.update();
+    const backdrop = this.shadowRoot?.querySelector(".drawer-backdrop");
+    backdrop?.addEventListener("click", this._handleBackdropClick.bind(this));
+    const closeBtn = this.shadowRoot?.querySelector(".drawer-close");
+    closeBtn?.addEventListener("click", () => this.hide());
+  }
+}
+
+// src/index.ts
+function register() {
+  if (!customElements.get("el-dm-drawer")) {
+    customElements.define("el-dm-drawer", ElDmDrawer);
+  }
+}
+
+//# debugId=1A81B53BEF9647E264756E2164756E21
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,11 @@
+{
+  "version": 3,
+  "sources": ["../../src/el-dm-drawer.ts", "../../src/index.ts"],
+  "sourcesContent": [
+    "/**\n * DuskMoon Drawer Element\n *\n * A side navigation drawer/sidebar component for displaying navigation or content panels.\n * Supports left/right positioning, modal mode with backdrop, and smooth slide animations.\n *\n * @element el-dm-drawer\n *\n * @attr {boolean} open - Whether the drawer is open\n * @attr {string} position - Drawer position: 'left' or 'right'\n * @attr {boolean} modal - Whether drawer shows backdrop and traps focus\n * @attr {string} width - Custom width for the drawer (CSS value)\n *\n * @slot - Default slot for drawer content\n * @slot header - Drawer header section\n * @slot footer - Drawer footer section\n *\n * @csspart drawer - The drawer container\n * @csspart backdrop - The backdrop overlay (modal mode)\n * @csspart content - The content wrapper\n * @csspart header - The header section\n * @csspart body - The body section\n * @csspart footer - The footer section\n *\n * @fires open - Fired when drawer opens\n * @fires close - Fired when drawer closes\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-core';\n\nexport type DrawerPosition = 'left' | 'right';\n\nconst styles = css`\n  :host {\n    display: contents;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  .drawer-wrapper {\n    position: fixed;\n    inset: 0;\n    z-index: 1000;\n    pointer-events: none;\n  }\n\n  .drawer-wrapper.open {\n    pointer-events: auto;\n  }\n\n  .drawer-backdrop {\n    position: absolute;\n    inset: 0;\n    background-color: rgba(0, 0, 0, 0.5);\n    opacity: 0;\n    visibility: hidden;\n    transition:\n      opacity 300ms ease,\n      visibility 300ms ease;\n  }\n\n  .drawer-wrapper.open .drawer-backdrop {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  .drawer {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    display: flex;\n    flex-direction: column;\n    width: var(--drawer-width, 280px);\n    max-width: 100vw;\n    background-color: var(--color-surface);\n    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);\n    font-family: inherit;\n    pointer-events: auto;\n  }\n\n  .drawer-left {\n    left: 0;\n    border-right: 1px solid var(--color-outline);\n    transform: translateX(-100%);\n  }\n\n  .drawer-right {\n    right: 0;\n    border-left: 1px solid var(--color-outline);\n    transform: translateX(100%);\n  }\n\n  .drawer-wrapper.open .drawer-left,\n  .drawer-wrapper.open .drawer-right {\n    transform: translateX(0);\n  }\n\n  .drawer-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 1rem 1.5rem;\n    border-bottom: 1px solid var(--color-outline);\n    flex-shrink: 0;\n  }\n\n  .drawer-body {\n    flex: 1;\n    padding: 1rem 1.5rem;\n    overflow-y: auto;\n  }\n\n  .drawer-footer {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 1rem 1.5rem;\n    border-top: 1px solid var(--color-outline);\n    flex-shrink: 0;\n  }\n\n  .drawer-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    border: none;\n    background: transparent;\n    border-radius: 0.5rem;\n    cursor: pointer;\n    color: var(--color-on-surface);\n    opacity: 0.7;\n    transition:\n      opacity 150ms ease,\n      background-color 150ms ease;\n  }\n\n  .drawer-close:hover {\n    opacity: 1;\n    background-color: var(--color-surface-variant);\n  }\n\n  .drawer-close:focus {\n    outline: 2px solid var(--color-primary);\n    outline-offset: 2px;\n  }\n\n  /* Non-modal drawer positioning */\n  :host(:not([modal])) .drawer-wrapper {\n    pointer-events: none;\n  }\n\n  :host(:not([modal])) .drawer {\n    pointer-events: auto;\n  }\n`;\n\nexport class ElDmDrawer extends BaseElement {\n  static properties = {\n    open: { type: Boolean, reflect: true },\n    position: { type: String, reflect: true, default: 'left' },\n    modal: { type: Boolean, reflect: true },\n    width: { type: String, reflect: true },\n  };\n\n  declare open: boolean;\n  declare position: DrawerPosition;\n  declare modal: boolean;\n  declare width: string;\n\n  private _focusableElements: HTMLElement[] = [];\n  private _previouslyFocused: HTMLElement | null = null;\n\n  constructor() {\n    super();\n    this.attachStyles(styles);\n  }\n\n  private _handleBackdropClick(event: Event): void {\n    if (this.modal && event.target === event.currentTarget) {\n      this.hide();\n    }\n  }\n\n  private _handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === 'Escape' && this.modal) {\n      this.hide();\n      return;\n    }\n\n    // Focus trap for modal mode\n    if (event.key === 'Tab' && this.modal && this.open) {\n      this._handleTabKey(event);\n    }\n  };\n\n  private _handleTabKey(event: KeyboardEvent): void {\n    const focusable = this._getFocusableElements();\n    if (focusable.length === 0) return;\n\n    const firstFocusable = focusable[0];\n    const lastFocusable = focusable[focusable.length - 1];\n\n    if (event.shiftKey) {\n      if (document.activeElement === firstFocusable) {\n        event.preventDefault();\n        lastFocusable.focus();\n      }\n    } else {\n      if (document.activeElement === lastFocusable) {\n        event.preventDefault();\n        firstFocusable.focus();\n      }\n    }\n  }\n\n  private _getFocusableElements(): HTMLElement[] {\n    const drawer = this.shadowRoot?.querySelector('.drawer');\n    if (!drawer) return [];\n\n    const focusableSelectors = [\n      'button:not([disabled])',\n      'a[href]',\n      'input:not([disabled])',\n      'select:not([disabled])',\n      'textarea:not([disabled])',\n      '[tabindex]:not([tabindex=\"-1\"])',\n    ].join(', ');\n\n    // Get focusable elements from shadow DOM\n    const shadowFocusable = Array.from(\n      drawer.querySelectorAll(focusableSelectors),\n    ) as HTMLElement[];\n\n    // Get focusable elements from slotted content\n    const slots = drawer.querySelectorAll('slot');\n    const slottedFocusable: HTMLElement[] = [];\n\n    slots.forEach((slot) => {\n      const assignedElements = slot.assignedElements({ flatten: true });\n      assignedElements.forEach((el) => {\n        if (el instanceof HTMLElement) {\n          if (el.matches(focusableSelectors)) {\n            slottedFocusable.push(el);\n          }\n          slottedFocusable.push(\n            ...(Array.from(el.querySelectorAll(focusableSelectors)) as HTMLElement[]),\n          );\n        }\n      });\n    });\n\n    return [...shadowFocusable, ...slottedFocusable];\n  }\n\n  private _trapFocus(): void {\n    this._previouslyFocused = document.activeElement as HTMLElement;\n    this._focusableElements = this._getFocusableElements();\n\n    // Focus first focusable element or the drawer itself\n    requestAnimationFrame(() => {\n      if (this._focusableElements.length > 0) {\n        this._focusableElements[0].focus();\n      } else {\n        const drawer = this.shadowRoot?.querySelector('.drawer') as HTMLElement;\n        drawer?.focus();\n      }\n    });\n  }\n\n  private _releaseFocus(): void {\n    if (this._previouslyFocused && this._previouslyFocused.focus) {\n      this._previouslyFocused.focus();\n    }\n    this._previouslyFocused = null;\n  }\n\n  show(): void {\n    this.open = true;\n    document.addEventListener('keydown', this._handleKeyDown);\n\n    if (this.modal) {\n      document.body.style.overflow = 'hidden';\n      this._trapFocus();\n    }\n\n    this.emit('open');\n  }\n\n  hide(): void {\n    this.open = false;\n    document.removeEventListener('keydown', this._handleKeyDown);\n\n    if (this.modal) {\n      document.body.style.overflow = '';\n      this._releaseFocus();\n    }\n\n    this.emit('close');\n  }\n\n  toggle(): void {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n    document.removeEventListener('keydown', this._handleKeyDown);\n    document.body.style.overflow = '';\n  }\n\n  render(): string {\n    const positionClass = this.position === 'right' ? 'drawer-right' : 'drawer-left';\n    const widthStyle = this.width ? `--drawer-width: ${this.width}` : '';\n\n    return `\n      <div class=\"drawer-wrapper ${this.open ? 'open' : ''}\" part=\"wrapper\">\n        ${this.modal ? '<div class=\"drawer-backdrop\" part=\"backdrop\"></div>' : ''}\n        <div\n          class=\"drawer ${positionClass}\"\n          role=\"dialog\"\n          aria-modal=\"${this.modal ? 'true' : 'false'}\"\n          style=\"${widthStyle}\"\n          tabindex=\"-1\"\n          part=\"drawer\"\n        >\n          <div class=\"drawer-header\" part=\"header\">\n            <slot name=\"header\"></slot>\n            <button class=\"drawer-close\" part=\"close\" aria-label=\"Close drawer\">\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n              </svg>\n            </button>\n          </div>\n          <div class=\"drawer-body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"drawer-footer\" part=\"footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  update(): void {\n    super.update();\n\n    const backdrop = this.shadowRoot?.querySelector('.drawer-backdrop');\n    backdrop?.addEventListener('click', this._handleBackdropClick.bind(this));\n\n    const closeBtn = this.shadowRoot?.querySelector('.drawer-close');\n    closeBtn?.addEventListener('click', () => this.hide());\n  }\n}\n",
+    "import { ElDmDrawer } from './el-dm-drawer.js';\n\nexport { ElDmDrawer };\nexport type { DrawerPosition } from './el-dm-drawer.js';\n\nexport function register(): void {\n  if (!customElements.get('el-dm-drawer')) {\n    customElements.define('el-dm-drawer', ElDmDrawer);\n  }\n}\n"
+  ],
+  "mappings": "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",
+  "debugId": "1A81B53BEF9647E264756E2164756E21",
+  "names": []
+}