@krollins/blueprint 0.2.2 → 0.3.0

package/dist/shared/drawer-B_BgT3xH.js

@@ -0,0 +1,533 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { t } from "./icon-SU3ebQcn.js";
+import { t as n } from "./boolean-converter-saxBDLhA.js";
+import { closeSvg as r } from "../icons/close.js";
+import { LitElement as i, css as a, html as o, nothing as s } from "lit";
+import { customElement as c, property as l } from "lit/decorators.js";
+//#region source/components/drawer/drawer.style.ts
+var u = a`
+  /* Base styles */
+  :host {
+    display: contents;
+  }
+
+  .drawer {
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-base);
+    color: var(--bp-color-text);
+  }
+
+  /* Overlay mode */
+  .drawer--overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--bp-z-modal);
+    pointer-events: none;
+  }
+
+  .drawer--overlay.drawer--open {
+    pointer-events: auto;
+  }
+
+  /* Backdrop */
+  .backdrop {
+    position: absolute;
+    inset: 0;
+    background-color: oklch(from var(--bp-color-text) l c h / 0.5);
+    opacity: 0;
+    transition: opacity var(--bp-transition-base) ease-out;
+  }
+
+  .backdrop--visible {
+    opacity: 1;
+  }
+
+  /* Panel base */
+  .panel {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--bp-color-surface);
+    box-shadow: var(--bp-shadow-xl);
+    transition: transform var(--bp-transition-base) ease-out;
+    overflow: hidden;
+  }
+
+  .drawer--overlay .panel:focus {
+    outline: none;
+  }
+
+  /* Horizontal drawers (left/right) */
+  .drawer--horizontal .panel {
+    top: 0;
+    bottom: 0;
+    height: 100%;
+  }
+
+  .drawer--left .panel {
+    left: 0;
+    transform: translateX(-100%);
+  }
+
+  .drawer--left .panel--open {
+    transform: translateX(0);
+  }
+
+  .drawer--right .panel {
+    right: 0;
+    transform: translateX(100%);
+  }
+
+  .drawer--right .panel--open {
+    transform: translateX(0);
+  }
+
+  /* Vertical drawers (top/bottom) */
+  .drawer--vertical .panel {
+    left: 0;
+    right: 0;
+    width: 100%;
+  }
+
+  .drawer--top .panel {
+    top: 0;
+    transform: translateY(-100%);
+  }
+
+  .drawer--top .panel--open {
+    transform: translateY(0);
+  }
+
+  .drawer--bottom .panel {
+    bottom: 0;
+    transform: translateY(100%);
+  }
+
+  .drawer--bottom .panel--open {
+    transform: translateY(0);
+  }
+
+  /* Sizes - horizontal (width) */
+  .drawer--horizontal.drawer--sm .panel {
+    width: calc(var(--bp-spacing-24) * 3);
+  }
+
+  .drawer--horizontal.drawer--md .panel {
+    width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));
+  }
+
+  .drawer--horizontal.drawer--lg .panel {
+    width: var(--bp-breakpoint-sm);
+  }
+
+  .drawer--horizontal.drawer--full .panel {
+    width: 100%;
+  }
+
+  /* Sizes - vertical (height) */
+  .drawer--vertical.drawer--sm .panel {
+    height: calc(var(--bp-spacing-24) * 2);
+  }
+
+  .drawer--vertical.drawer--md .panel {
+    height: calc(var(--bp-spacing-24) * 3 + var(--bp-spacing-8));
+  }
+
+  .drawer--vertical.drawer--lg .panel {
+    height: calc(var(--bp-spacing-24) * 5);
+  }
+
+  .drawer--vertical.drawer--full .panel {
+    height: 100%;
+  }
+
+  /* Header */
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--bp-spacing-4);
+    padding: var(--bp-spacing-4) var(--bp-spacing-5);
+    border-bottom: var(--bp-border-width) solid var(--bp-color-border);
+    flex-shrink: 0;
+  }
+
+  .header--empty {
+    display: none;
+  }
+
+  .header ::slotted(*) {
+    margin: 0;
+    font-size: var(--bp-font-size-lg);
+    font-weight: var(--bp-font-weight-semibold);
+  }
+
+  /* Body */
+  .body {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--bp-spacing-5);
+  }
+
+  /* Footer */
+  .footer {
+    display: flex;
+    align-items: center;
+    gap: var(--bp-spacing-4);
+    padding: var(--bp-spacing-4) var(--bp-spacing-5);
+    border-top: var(--bp-border-width) solid var(--bp-color-border);
+    flex-shrink: 0;
+  }
+
+  /* Close button */
+  .close-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    margin-left: auto;
+    background: transparent;
+    border: none;
+    border-radius: var(--bp-border-radius-sm);
+    color: var(--bp-color-text-muted);
+    cursor: pointer;
+    transition:
+      background-color var(--bp-transition-fast),
+      color var(--bp-transition-fast),
+      transform var(--bp-transition-fast);
+  }
+
+  .close-button:hover {
+    background-color: var(--bp-color-surface-subdued);
+    color: var(--bp-color-text);
+  }
+
+  .close-button:active {
+    background-color: var(--bp-color-surface-subdued);
+    background-image: linear-gradient(
+      var(--bp-color-active-overlay),
+      var(--bp-color-active-overlay)
+    );
+    transform: translateY(1px);
+  }
+
+  .close-button:focus {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  .close-button:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  .close-button:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  /* Inline mode - static sidebar */
+  .drawer--inline {
+    display: block;
+  }
+
+  .drawer--inline .panel {
+    position: relative;
+    transform: none;
+    box-shadow: none;
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-md);
+  }
+
+  .drawer--inline.drawer--horizontal {
+    height: 100%;
+  }
+
+  .drawer--inline.drawer--vertical {
+    width: 100%;
+  }
+
+  /* Inline sizes - horizontal */
+  .drawer--inline.drawer--horizontal.drawer--small {
+    width: calc(var(--bp-spacing-24) * 3);
+  }
+
+  .drawer--inline.drawer--horizontal.drawer--medium {
+    width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));
+  }
+
+  .drawer--inline.drawer--horizontal.drawer--large {
+    width: var(--bp-breakpoint-sm);
+  }
+
+  .drawer--inline.drawer--horizontal.drawer--full {
+    width: 100%;
+  }
+
+  /* Inline sizes - vertical */
+  .drawer--inline.drawer--vertical.drawer--small .panel {
+    height: calc(var(--bp-spacing-24) * 2);
+  }
+
+  .drawer--inline.drawer--vertical.drawer--medium .panel {
+    height: calc(var(--bp-spacing-24) * 3 + var(--bp-spacing-8));
+  }
+
+  .drawer--inline.drawer--vertical.drawer--large .panel {
+    height: calc(var(--bp-spacing-24) * 5);
+  }
+
+  .drawer--inline.drawer--vertical.drawer--full .panel {
+    height: auto;
+  }
+
+  /* Border positioning for inline drawers */
+  .drawer--inline.drawer--left .panel {
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .drawer--inline.drawer--right .panel {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .drawer--inline.drawer--top .panel {
+    border-top: none;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .drawer--inline.drawer--bottom .panel {
+    border-bottom: none;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .panel {
+      transition: none;
+    }
+
+    .backdrop {
+      transition: none;
+    }
+  }
+`, d = class extends i {
+	static {
+		this.dependencies = [t];
+	}
+	static {
+		this.styles = [u];
+	}
+	constructor() {
+		super(), this.hasHeader = !1, this.hasFooter = !1, this.previouslyFocusedElement = null, this.handleKeyDown = (e) => {
+			e.key === "Escape" && this.closeOnEscape && this.open && !this.inline && (e.preventDefault(), this.hide("escape"));
+		}, this.handleBackdropClick = () => {
+			this.closeOnBackdrop && this.hide("backdrop");
+		}, this.handleCloseClick = () => {
+			this.hide("close-button");
+		}, this.handleHeaderSlotChange = (e) => {
+			let t = e.target;
+			this.hasHeader = t.assignedNodes({ flatten: !0 }).length > 0;
+		}, this.handleFooterSlotChange = (e) => {
+			let t = e.target;
+			this.hasFooter = t.assignedNodes({ flatten: !0 }).length > 0;
+		}, this.open = !1, this.placement = "left", this.size = "md", this.showClose = !0, this.closeOnBackdrop = !0, this.closeOnEscape = !0, this.showBackdrop = !0, this.label = "", this.inline = !1;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("keydown", this.handleKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("keydown", this.handleKeyDown);
+	}
+	show() {
+		this.open ||= !0;
+	}
+	hide(e = "api") {
+		if (!this.open) return;
+		let t = new CustomEvent("bp-close", {
+			detail: { reason: e },
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0
+		});
+		this.dispatchEvent(t), t.defaultPrevented || (this.open = !1);
+	}
+	toggle() {
+		this.open ? this.hide("api") : this.show();
+	}
+	updated(e) {
+		e.has("open") && (this.open ? this.handleOpen() : this.handleClose());
+	}
+	handleOpen() {
+		this.inline || (this.previouslyFocusedElement = document.activeElement, document.body.style.overflow = "hidden"), this.dispatchEvent(new CustomEvent("bp-open", {
+			bubbles: !0,
+			composed: !0
+		})), this.updateComplete.then(() => {
+			(this.shadowRoot?.querySelector(".panel"))?.focus(), this.dispatchEvent(new CustomEvent("bp-after-open", {
+				bubbles: !0,
+				composed: !0
+			}));
+		});
+	}
+	handleClose() {
+		this.inline || (document.body.style.overflow = "", this.previouslyFocusedElement &&= (this.previouslyFocusedElement.focus(), null)), this.updateComplete.then(() => {
+			this.dispatchEvent(new CustomEvent("bp-after-close", {
+				bubbles: !0,
+				composed: !0
+			}));
+		});
+	}
+	render() {
+		let e = this.placement === "left" || this.placement === "right";
+		return this.inline ? o`
+        <aside
+          class="drawer drawer--inline drawer--${this.placement} drawer--${this.size} ${e ? "drawer--horizontal" : "drawer--vertical"}"
+          part="drawer"
+          role="complementary"
+          aria-label=${this.label || s}
+        >
+          <div class="panel" part="panel">
+            ${this.hasHeader || this.showClose ? o`
+                    <header class="header" part="header">
+                      <slot
+                        name="header"
+                        @slotchange=${this.handleHeaderSlotChange}
+                      ></slot>
+                    </header>
+                  ` : o`<slot
+                    name="header"
+                    @slotchange=${this.handleHeaderSlotChange}
+                  ></slot>`}
+            <div class="body" part="body">
+              <slot></slot>
+            </div>
+            ${this.hasFooter ? o`
+                    <footer class="footer" part="footer">
+                      <slot
+                        name="footer"
+                        @slotchange=${this.handleFooterSlotChange}
+                      ></slot>
+                    </footer>
+                  ` : o`<slot
+                    name="footer"
+                    @slotchange=${this.handleFooterSlotChange}
+                  ></slot>`}
+          </div>
+        </aside>
+      ` : o`
+      <div
+        class="drawer drawer--overlay drawer--${this.placement} drawer--${this.size} ${e ? "drawer--horizontal" : "drawer--vertical"} ${this.open ? "drawer--open" : ""}"
+        part="drawer"
+      >
+        ${this.showBackdrop ? o`
+                <div
+                  class="backdrop ${this.open ? "backdrop--visible" : ""}"
+                  part="backdrop"
+                  @click=${this.handleBackdropClick}
+                  aria-hidden="true"
+                ></div>
+              ` : s}
+        <aside
+          class="panel ${this.open ? "panel--open" : ""}"
+          part="panel"
+          role="dialog"
+          aria-modal="true"
+          aria-label=${this.label || s}
+          tabindex="-1"
+        >
+          <header
+            class="header ${this.hasHeader || this.showClose ? "" : "header--empty"}"
+            part="header"
+          >
+            <slot
+              name="header"
+              @slotchange=${this.handleHeaderSlotChange}
+            ></slot>
+            ${this.showClose ? o`
+                    <button
+                      class="close-button"
+                      part="close-button"
+                      type="button"
+                      aria-label="Close drawer"
+                      @click=${this.handleCloseClick}
+                    >
+                      <bp-icon .svg=${r} size="sm"></bp-icon>
+                    </button>
+                  ` : s}
+          </header>
+          <div class="body" part="body">
+            <slot></slot>
+          </div>
+          ${this.hasFooter ? o`
+                  <footer class="footer" part="footer">
+                    <slot
+                      name="footer"
+                      @slotchange=${this.handleFooterSlotChange}
+                    ></slot>
+                  </footer>
+                ` : o`<slot
+                  name="footer"
+                  @slotchange=${this.handleFooterSlotChange}
+                ></slot>`}
+        </aside>
+      </div>
+    `;
+	}
+};
+e([l({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "open", void 0), e([l({
+	type: String,
+	reflect: !0,
+	converter: { fromAttribute: (e) => e && [
+		"left",
+		"right",
+		"top",
+		"bottom"
+	].includes(e) ? e : "left" }
+})], d.prototype, "placement", void 0), e([l({
+	type: String,
+	reflect: !0,
+	converter: { fromAttribute: (e) => e && [
+		"sm",
+		"md",
+		"lg",
+		"full"
+	].includes(e) ? e : "md" }
+})], d.prototype, "size", void 0), e([l({
+	converter: n,
+	attribute: "show-close",
+	reflect: !0
+})], d.prototype, "showClose", void 0), e([l({
+	converter: n,
+	attribute: "close-on-backdrop",
+	reflect: !0
+})], d.prototype, "closeOnBackdrop", void 0), e([l({
+	converter: n,
+	attribute: "close-on-escape",
+	reflect: !0
+})], d.prototype, "closeOnEscape", void 0), e([l({
+	converter: n,
+	attribute: "show-backdrop",
+	reflect: !0
+})], d.prototype, "showBackdrop", void 0), e([l({ type: String })], d.prototype, "label", void 0), e([l({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "inline", void 0), e([l({
+	type: Boolean,
+	attribute: !1
+})], d.prototype, "hasHeader", void 0), e([l({
+	type: Boolean,
+	attribute: !1
+})], d.prototype, "hasFooter", void 0), d = e([c("bp-drawer")], d);
+//#endregion
+export { d as t };
+
+//# sourceMappingURL=drawer-B_BgT3xH.js.map

package/dist/shared/drawer-B_BgT3xH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-B_BgT3xH.js","names":["_decorate","__decorate","booleanConverter","drawerStyles","BpDrawer","LitElement","BpIcon","event","slot","changedProperties","isHorizontal","nothing","closeSvg","property","value","customElement"],"sources":["../../source/components/drawer/drawer.style.ts","../../source/components/drawer/drawer.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const drawerStyles = css`\n  /* Base styles */\n  :host {\n    display: contents;\n  }\n\n  .drawer {\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    color: var(--bp-color-text);\n  }\n\n  /* Overlay mode */\n  .drawer--overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--bp-z-modal);\n    pointer-events: none;\n  }\n\n  .drawer--overlay.drawer--open {\n    pointer-events: auto;\n  }\n\n  /* Backdrop */\n  .backdrop {\n    position: absolute;\n    inset: 0;\n    background-color: oklch(from var(--bp-color-text) l c h / 0.5);\n    opacity: 0;\n    transition: opacity var(--bp-transition-base) ease-out;\n  }\n\n  .backdrop--visible {\n    opacity: 1;\n  }\n\n  /* Panel base */\n  .panel {\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    background-color: var(--bp-color-surface);\n    box-shadow: var(--bp-shadow-xl);\n    transition: transform var(--bp-transition-base) ease-out;\n    overflow: hidden;\n  }\n\n  .drawer--overlay .panel:focus {\n    outline: none;\n  }\n\n  /* Horizontal drawers (left/right) */\n  .drawer--horizontal .panel {\n    top: 0;\n    bottom: 0;\n    height: 100%;\n  }\n\n  .drawer--left .panel {\n    left: 0;\n    transform: translateX(-100%);\n  }\n\n  .drawer--left .panel--open {\n    transform: translateX(0);\n  }\n\n  .drawer--right .panel {\n    right: 0;\n    transform: translateX(100%);\n  }\n\n  .drawer--right .panel--open {\n    transform: translateX(0);\n  }\n\n  /* Vertical drawers (top/bottom) */\n  .drawer--vertical .panel {\n    left: 0;\n    right: 0;\n    width: 100%;\n  }\n\n  .drawer--top .panel {\n    top: 0;\n    transform: translateY(-100%);\n  }\n\n  .drawer--top .panel--open {\n    transform: translateY(0);\n  }\n\n  .drawer--bottom .panel {\n    bottom: 0;\n    transform: translateY(100%);\n  }\n\n  .drawer--bottom .panel--open {\n    transform: translateY(0);\n  }\n\n  /* Sizes - horizontal (width) */\n  .drawer--horizontal.drawer--sm .panel {\n    width: calc(var(--bp-spacing-24) * 3);\n  }\n\n  .drawer--horizontal.drawer--md .panel {\n    width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));\n  }\n\n  .drawer--horizontal.drawer--lg .panel {\n    width: var(--bp-breakpoint-sm);\n  }\n\n  .drawer--horizontal.drawer--full .panel {\n    width: 100%;\n  }\n\n  /* Sizes - vertical (height) */\n  .drawer--vertical.drawer--sm .panel {\n    height: calc(var(--bp-spacing-24) * 2);\n  }\n\n  .drawer--vertical.drawer--md .panel {\n    height: calc(var(--bp-spacing-24) * 3 + var(--bp-spacing-8));\n  }\n\n  .drawer--vertical.drawer--lg .panel {\n    height: calc(var(--bp-spacing-24) * 5);\n  }\n\n  .drawer--vertical.drawer--full .panel {\n    height: 100%;\n  }\n\n  /* Header */\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--bp-spacing-4);\n    padding: var(--bp-spacing-4) var(--bp-spacing-5);\n    border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n    flex-shrink: 0;\n  }\n\n  .header--empty {\n    display: none;\n  }\n\n  .header ::slotted(*) {\n    margin: 0;\n    font-size: var(--bp-font-size-lg);\n    font-weight: var(--bp-font-weight-semibold);\n  }\n\n  /* Body */\n  .body {\n    flex: 1;\n    overflow-y: auto;\n    padding: var(--bp-spacing-5);\n  }\n\n  /* Footer */\n  .footer {\n    display: flex;\n    align-items: center;\n    gap: var(--bp-spacing-4);\n    padding: var(--bp-spacing-4) var(--bp-spacing-5);\n    border-top: var(--bp-border-width) solid var(--bp-color-border);\n    flex-shrink: 0;\n  }\n\n  /* Close button */\n  .close-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 44px;\n    height: 44px;\n    padding: 0;\n    margin-left: auto;\n    background: transparent;\n    border: none;\n    border-radius: var(--bp-border-radius-sm);\n    color: var(--bp-color-text-muted);\n    cursor: pointer;\n    transition:\n      background-color var(--bp-transition-fast),\n      color var(--bp-transition-fast),\n      transform var(--bp-transition-fast);\n  }\n\n  .close-button:hover {\n    background-color: var(--bp-color-surface-subdued);\n    color: var(--bp-color-text);\n  }\n\n  .close-button:active {\n    background-color: var(--bp-color-surface-subdued);\n    background-image: linear-gradient(\n      var(--bp-color-active-overlay),\n      var(--bp-color-active-overlay)\n    );\n    transform: translateY(1px);\n  }\n\n  .close-button:focus {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  .close-button:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  .close-button:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  /* Inline mode - static sidebar */\n  .drawer--inline {\n    display: block;\n  }\n\n  .drawer--inline .panel {\n    position: relative;\n    transform: none;\n    box-shadow: none;\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-md);\n  }\n\n  .drawer--inline.drawer--horizontal {\n    height: 100%;\n  }\n\n  .drawer--inline.drawer--vertical {\n    width: 100%;\n  }\n\n  /* Inline sizes - horizontal */\n  .drawer--inline.drawer--horizontal.drawer--small {\n    width: calc(var(--bp-spacing-24) * 3);\n  }\n\n  .drawer--inline.drawer--horizontal.drawer--medium {\n    width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));\n  }\n\n  .drawer--inline.drawer--horizontal.drawer--large {\n    width: var(--bp-breakpoint-sm);\n  }\n\n  .drawer--inline.drawer--horizontal.drawer--full {\n    width: 100%;\n  }\n\n  /* Inline sizes - vertical */\n  .drawer--inline.drawer--vertical.drawer--small .panel {\n    height: calc(var(--bp-spacing-24) * 2);\n  }\n\n  .drawer--inline.drawer--vertical.drawer--medium .panel {\n    height: calc(var(--bp-spacing-24) * 3 + var(--bp-spacing-8));\n  }\n\n  .drawer--inline.drawer--vertical.drawer--large .panel {\n    height: calc(var(--bp-spacing-24) * 5);\n  }\n\n  .drawer--inline.drawer--vertical.drawer--full .panel {\n    height: auto;\n  }\n\n  /* Border positioning for inline drawers */\n  .drawer--inline.drawer--left .panel {\n    border-left: none;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  .drawer--inline.drawer--right .panel {\n    border-right: none;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  .drawer--inline.drawer--top .panel {\n    border-top: none;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  .drawer--inline.drawer--bottom .panel {\n    border-bottom: none;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  /* Reduced motion */\n  @media (prefers-reduced-motion: reduce) {\n    .panel {\n      transition: none;\n    }\n\n    .backdrop {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { drawerStyles } from './drawer.style.js';\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\nimport { closeSvg } from '../icon/icons/entries/close.js';\nimport { BpIcon } from '../icon/icon.js';\n\nexport type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'full';\n\n/**\n * A slide-in panel component that can appear from any edge of the viewport.\n *\n * @fires bp-open - Fired when the drawer opens\n * @fires bp-close - Fired when the drawer closes (includes reason: 'escape' | 'backdrop' | 'close-button' | 'api')\n * @fires bp-after-open - Fired after open animation completes\n * @fires bp-after-close - Fired after close animation completes\n *\n * @slot - Default slot for drawer content\n * @slot header - Optional header content\n * @slot footer - Optional footer content\n *\n * @csspart drawer - The drawer container\n * @csspart backdrop - The backdrop overlay (when not inline)\n * @csspart panel - The drawer panel\n * @csspart header - The header section\n * @csspart body - The body/content section\n * @csspart footer - The footer section\n * @csspart close-button - The close button\n */\n@customElement('bp-drawer')\nexport class BpDrawer extends LitElement {\n  /**\n   * Child components that self-register as custom elements on import.\n   * Value imports prevent bundler tree-shaking of the registration side effect.\n   */\n  static dependencies = [BpIcon];\n\n  /** Whether the drawer is open */\n  @property({ type: Boolean, reflect: true }) declare open: boolean;\n\n  /** Which edge the drawer slides in from */\n  @property({\n    type: String,\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => {\n        const valid = ['left', 'right', 'top', 'bottom'];\n        return value && valid.includes(value)\n          ? (value as DrawerPlacement)\n          : 'left';\n      },\n    },\n  })\n  declare placement: DrawerPlacement;\n\n  /** Size of the drawer (width for left/right, height for top/bottom) */\n  @property({\n    type: String,\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => {\n        const valid = ['sm', 'md', 'lg', 'full'];\n        return value && valid.includes(value) ? (value as DrawerSize) : 'md';\n      },\n    },\n  })\n  declare size: DrawerSize;\n\n  /** Whether to show the close button */\n  @property({\n    converter: booleanConverter,\n    attribute: 'show-close',\n    reflect: true,\n  })\n  declare showClose: boolean;\n\n  /** Whether clicking the backdrop closes the drawer */\n  @property({\n    converter: booleanConverter,\n    attribute: 'close-on-backdrop',\n    reflect: true,\n  })\n  declare closeOnBackdrop: boolean;\n\n  /** Whether pressing Escape closes the drawer */\n  @property({\n    converter: booleanConverter,\n    attribute: 'close-on-escape',\n    reflect: true,\n  })\n  declare closeOnEscape: boolean;\n\n  /** Whether to show the backdrop overlay */\n  @property({\n    converter: booleanConverter,\n    attribute: 'show-backdrop',\n    reflect: true,\n  })\n  declare showBackdrop: boolean;\n\n  /** Accessible label for the drawer */\n  @property({ type: String }) declare label: string;\n\n  /**\n   * Whether the drawer is rendered inline (always visible, part of document flow).\n   * When true, the drawer acts as a static sidebar without overlay behavior.\n   */\n  @property({ type: Boolean, reflect: true }) declare inline: boolean;\n\n  /** Whether the drawer has a header slot content */\n  @property({ type: Boolean, attribute: false }) private hasHeader = false;\n\n  /** Whether the drawer has a footer slot content */\n  @property({ type: Boolean, attribute: false }) private hasFooter = false;\n\n  private previouslyFocusedElement: HTMLElement | null = null;\n\n  static styles = [drawerStyles];\n\n  constructor() {\n    super();\n    this.open = false;\n    this.placement = 'left';\n    this.size = 'md';\n    this.showClose = true;\n    this.closeOnBackdrop = true;\n    this.closeOnEscape = true;\n    this.showBackdrop = true;\n    this.label = '';\n    this.inline = false;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  /**\n   * Open the drawer.\n   * Sets open property to true and manages focus/scroll behavior.\n   *\n   * @fires bp-open - Emitted when the drawer opens\n   * @fires bp-after-open - Emitted after open animation completes\n   */\n  show(): void {\n    if (this.open) return;\n    this.open = true;\n  }\n\n  /**\n   * Close the drawer.\n   * Sets open property to false if bp-close event is not prevented.\n   *\n   * @param reason - The reason the drawer was closed\n   * @fires bp-close - Emitted when the drawer closes (cancelable)\n   * @fires bp-after-close - Emitted after close animation completes\n   */\n  hide(reason: 'escape' | 'backdrop' | 'close-button' | 'api' = 'api'): void {\n    if (!this.open) return;\n\n    const event = new CustomEvent('bp-close', {\n      detail: { reason },\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    });\n\n    this.dispatchEvent(event);\n\n    if (!event.defaultPrevented) {\n      this.open = false;\n    }\n  }\n\n  /**\n   * Toggle the drawer open/closed state.\n   * Calls hide() if open, show() if closed.\n   */\n  toggle(): void {\n    if (this.open) {\n      this.hide('api');\n    } else {\n      this.show();\n    }\n  }\n\n  protected updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.handleOpen();\n      } else {\n        this.handleClose();\n      }\n    }\n  }\n\n  private handleOpen(): void {\n    if (!this.inline) {\n      // Store currently focused element\n      this.previouslyFocusedElement = document.activeElement as HTMLElement;\n\n      // Prevent body scroll\n      document.body.style.overflow = 'hidden';\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('bp-open', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    // Focus the drawer panel for accessibility\n    this.updateComplete.then(() => {\n      const panel = this.shadowRoot?.querySelector('.panel') as HTMLElement;\n      panel?.focus();\n\n      this.dispatchEvent(\n        new CustomEvent('bp-after-open', {\n          bubbles: true,\n          composed: true,\n        })\n      );\n    });\n  }\n\n  private handleClose(): void {\n    if (!this.inline) {\n      // Restore body scroll\n      document.body.style.overflow = '';\n\n      // Restore focus\n      if (this.previouslyFocusedElement) {\n        this.previouslyFocusedElement.focus();\n        this.previouslyFocusedElement = null;\n      }\n    }\n\n    this.updateComplete.then(() => {\n      this.dispatchEvent(\n        new CustomEvent('bp-after-close', {\n          bubbles: true,\n          composed: true,\n        })\n      );\n    });\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (\n      event.key === 'Escape' &&\n      this.closeOnEscape &&\n      this.open &&\n      !this.inline\n    ) {\n      event.preventDefault();\n      this.hide('escape');\n    }\n  };\n\n  /**\n   * Handles click events on the backdrop overlay.\n   * Closes the drawer if closeOnBackdrop is true.\n   */\n  private handleBackdropClick = (): void => {\n    if (this.closeOnBackdrop) {\n      this.hide('backdrop');\n    }\n  };\n\n  /**\n   * Handles click events on the close button.\n   * Closes the drawer with reason 'close-button'.\n   */\n  private handleCloseClick = (): void => {\n    this.hide('close-button');\n  };\n\n  /**\n   * Handles slot change events for the header slot.\n   * Updates hasHeader state to control header visibility.\n   *\n   * @param event - The slotchange event\n   */\n  private handleHeaderSlotChange = (event: Event): void => {\n    const slot = event.target as HTMLElement & {\n      assignedNodes: (options?: { flatten?: boolean }) => Node[];\n    };\n    this.hasHeader = slot.assignedNodes({ flatten: true }).length > 0;\n  };\n\n  /**\n   * Handles slot change events for the footer slot.\n   * Updates hasFooter state to control footer visibility.\n   *\n   * @param event - The slotchange event\n   */\n  private handleFooterSlotChange = (event: Event): void => {\n    const slot = event.target as HTMLElement & {\n      assignedNodes: (options?: { flatten?: boolean }) => Node[];\n    };\n    this.hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n  };\n\n  render() {\n    const isHorizontal =\n      this.placement === 'left' || this.placement === 'right';\n\n    // Inline mode: always visible, no backdrop, no overlay behavior\n    if (this.inline) {\n      return html`\n        <aside\n          class=\"drawer drawer--inline drawer--${this.placement} drawer--${\n            this.size\n          } ${isHorizontal ? 'drawer--horizontal' : 'drawer--vertical'}\"\n          part=\"drawer\"\n          role=\"complementary\"\n          aria-label=${this.label || nothing}\n        >\n          <div class=\"panel\" part=\"panel\">\n            ${\n              this.hasHeader || this.showClose\n                ? html`\n                    <header class=\"header\" part=\"header\">\n                      <slot\n                        name=\"header\"\n                        @slotchange=${this.handleHeaderSlotChange}\n                      ></slot>\n                    </header>\n                  `\n                : html`<slot\n                    name=\"header\"\n                    @slotchange=${this.handleHeaderSlotChange}\n                  ></slot>`\n            }\n            <div class=\"body\" part=\"body\">\n              <slot></slot>\n            </div>\n            ${\n              this.hasFooter\n                ? html`\n                    <footer class=\"footer\" part=\"footer\">\n                      <slot\n                        name=\"footer\"\n                        @slotchange=${this.handleFooterSlotChange}\n                      ></slot>\n                    </footer>\n                  `\n                : html`<slot\n                    name=\"footer\"\n                    @slotchange=${this.handleFooterSlotChange}\n                  ></slot>`\n            }\n          </div>\n        </aside>\n      `;\n    }\n\n    // Overlay mode: slide-in panel with backdrop\n    return html`\n      <div\n        class=\"drawer drawer--overlay drawer--${this.placement} drawer--${\n          this.size\n        } ${\n          isHorizontal ? 'drawer--horizontal' : 'drawer--vertical'\n        } ${this.open ? 'drawer--open' : ''}\"\n        part=\"drawer\"\n      >\n        ${\n          this.showBackdrop\n            ? html`\n                <div\n                  class=\"backdrop ${this.open ? 'backdrop--visible' : ''}\"\n                  part=\"backdrop\"\n                  @click=${this.handleBackdropClick}\n                  aria-hidden=\"true\"\n                ></div>\n              `\n            : nothing\n        }\n        <aside\n          class=\"panel ${this.open ? 'panel--open' : ''}\"\n          part=\"panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=${this.label || nothing}\n          tabindex=\"-1\"\n        >\n          <header\n            class=\"header ${\n              this.hasHeader || this.showClose ? '' : 'header--empty'\n            }\"\n            part=\"header\"\n          >\n            <slot\n              name=\"header\"\n              @slotchange=${this.handleHeaderSlotChange}\n            ></slot>\n            ${\n              this.showClose\n                ? html`\n                    <button\n                      class=\"close-button\"\n                      part=\"close-button\"\n                      type=\"button\"\n                      aria-label=\"Close drawer\"\n                      @click=${this.handleCloseClick}\n                    >\n                      <bp-icon .svg=${closeSvg} size=\"sm\"></bp-icon>\n                    </button>\n                  `\n                : nothing\n            }\n          </header>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          ${\n            this.hasFooter\n              ? html`\n                  <footer class=\"footer\" part=\"footer\">\n                    <slot\n                      name=\"footer\"\n                      @slotchange=${this.handleFooterSlotChange}\n                    ></slot>\n                  </footer>\n                `\n              : html`<slot\n                  name=\"footer\"\n                  @slotchange=${this.handleFooterSlotChange}\n                ></slot>`\n          }\n        </aside>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-drawer': BpDrawer;\n  }\n}\n"],"mappings":"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"}