@brijbyte/agentic-ui 0.0.1 → 0.0.2

package/dist/dialog/dialog.js

@@ -16,7 +16,7 @@ function XIcon() {
 		})
 	});
 }
-function Dialog$1({ trigger, title, description, children, footer, className, dismissible = true, onOpenChange, ...props }) {
+function Dialog$1({ trigger, title, description, children, footer, footerStart, className, dismissible = true, onOpenChange, ...props }) {
 	return /* @__PURE__ */ jsxs(Dialog.Root, {
 		onOpenChange,
 		...props,
@@ -40,9 +40,12 @@ function Dialog$1({ trigger, title, description, children, footer, className, di
 					className: dialog_module_default.body,
 					children
 				}),
-				footer && /* @__PURE__ */ jsx("div", {
-					className: dialog_module_default.footer,
-					children: footer
+				(footer || footerStart) && /* @__PURE__ */ jsxs("div", {
+					className: `${dialog_module_default.footer} ${footerStart ? dialog_module_default["footer-split"] : ""}`,
+					children: [footerStart && /* @__PURE__ */ jsx("div", { children: footerStart }), footer && /* @__PURE__ */ jsx("div", {
+						className: dialog_module_default["footer-end"],
+						children: footer
+					})]
 				})
 			]
 		}) })] })]

package/dist/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":["Dialog","BaseDialog","styles"],"sources":["../../src/dialog/dialog.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport styles from \"./dialog.module.css\";\n\nexport interface DialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  /** `eventDetails` is the base-ui event details object. */\n  onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n  trigger?: ReactElement;\n  title?: ReactNode;\n  description?: ReactNode;\n  children?: ReactNode;\n  footer?: ReactNode;\n  className?: string;\n  dismissible?: boolean;\n}\n\nfunction XIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2 2L10 10M10 2L2 10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\nexport function Dialog({\n  trigger,\n  title,\n  description,\n  children,\n  footer,\n  className,\n  dismissible = true,\n  onOpenChange,\n  ...props\n}: DialogProps) {\n  return (\n    <BaseDialog.Root onOpenChange={onOpenChange as never} {...props}>\n      {trigger && <BaseDialog.Trigger render={trigger} />}\n      <BaseDialog.Portal>\n        <BaseDialog.Backdrop className={styles.backdrop} />\n        <BaseDialog.Viewport>\n          <BaseDialog.Popup className={`${styles.popup} ${className ?? \"\"}`}>\n            {title && <BaseDialog.Title className={styles.title}>{title}</BaseDialog.Title>}\n            {description && <BaseDialog.Description className={styles.description}>{description}</BaseDialog.Description>}\n            {dismissible && (\n              <BaseDialog.Close className={styles.close} aria-label=\"Close dialog\">\n                <XIcon />\n              </BaseDialog.Close>\n            )}\n            {children && <div className={styles.body}>{children}</div>}\n            {footer && <div className={styles.footer}>{footer}</div>}\n          </BaseDialog.Popup>\n        </BaseDialog.Viewport>\n      </BaseDialog.Portal>\n    </BaseDialog.Root>\n  );\n}\nexport { styles as DialogStyles };\n"],"mappings":";;;;AAkBA,SAAS,QAAQ;AACf,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAU,CAAA;EAC3F,CAAA;;AAIV,SAAgBA,SAAO,EACrB,SACA,OACA,aACA,UACA,QACA,WACA,cAAc,MACd,cACA,GAAG,SACW;AACd,QACE,qBAACC,OAAW,MAAZ;EAA+B;EAAuB,GAAI;YAA1D,CACG,WAAW,oBAACA,OAAW,SAAZ,EAAoB,QAAQ,SAAW,CAAA,EACnD,qBAACA,OAAW,QAAZ,EAAA,UAAA,CACE,oBAACA,OAAW,UAAZ,EAAqB,WAAWC,sBAAO,UAAY,CAAA,EACnD,oBAACD,OAAW,UAAZ,EAAA,UACE,qBAACA,OAAW,OAAZ;GAAkB,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;aAA7D;IACG,SAAS,oBAACD,OAAW,OAAZ;KAAkB,WAAWC,sBAAO;eAAQ;KAAyB,CAAA;IAC9E,eAAe,oBAACD,OAAW,aAAZ;KAAwB,WAAWC,sBAAO;eAAc;KAAqC,CAAA;IAC5G,eACC,oBAACD,OAAW,OAAZ;KAAkB,WAAWC,sBAAO;KAAO,cAAW;eACpD,oBAAC,OAAD,EAAS,CAAA;KACQ,CAAA;IAEpB,YAAY,oBAAC,OAAD;KAAK,WAAWA,sBAAO;KAAO;KAAe,CAAA;IACzD,UAAU,oBAAC,OAAD;KAAK,WAAWA,sBAAO;eAAS;KAAa,CAAA;IACvC;MACC,CAAA,CACJ,EAAA,CAAA,CACJ"}
+{"version":3,"file":"dialog.js","names":["Dialog","BaseDialog","styles"],"sources":["../../src/dialog/dialog.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport styles from \"./dialog.module.css\";\n\nexport interface DialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  /** `eventDetails` is the base-ui event details object. */\n  onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n  trigger?: ReactElement;\n  title?: ReactNode;\n  description?: ReactNode;\n  children?: ReactNode;\n  /** Buttons aligned to the right (cancel, confirm). */\n  footer?: ReactNode;\n  /**\n   * Content anchored to the left of the footer — intended for a destructive\n   * action (e.g. Delete). When present the footer switches to space-between\n   * layout, matching the macOS dialog pattern.\n   */\n  footerStart?: ReactNode;\n  className?: string;\n  dismissible?: boolean;\n}\n\nfunction XIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2 2L10 10M10 2L2 10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\nexport function Dialog({\n  trigger,\n  title,\n  description,\n  children,\n  footer,\n  footerStart,\n  className,\n  dismissible = true,\n  onOpenChange,\n  ...props\n}: DialogProps) {\n  return (\n    <BaseDialog.Root onOpenChange={onOpenChange as never} {...props}>\n      {trigger && <BaseDialog.Trigger render={trigger} />}\n      <BaseDialog.Portal>\n        <BaseDialog.Backdrop className={styles.backdrop} />\n        <BaseDialog.Viewport>\n          <BaseDialog.Popup className={`${styles.popup} ${className ?? \"\"}`}>\n            {title && <BaseDialog.Title className={styles.title}>{title}</BaseDialog.Title>}\n            {description && <BaseDialog.Description className={styles.description}>{description}</BaseDialog.Description>}\n            {dismissible && (\n              <BaseDialog.Close className={styles.close} aria-label=\"Close dialog\">\n                <XIcon />\n              </BaseDialog.Close>\n            )}\n            {children && <div className={styles.body}>{children}</div>}\n            {(footer || footerStart) && (\n              <div className={`${styles.footer} ${footerStart ? styles[\"footer-split\"] : \"\"}`}>\n                {footerStart && <div>{footerStart}</div>}\n                {footer && <div className={styles[\"footer-end\"]}>{footer}</div>}\n              </div>\n            )}\n          </BaseDialog.Popup>\n        </BaseDialog.Viewport>\n      </BaseDialog.Portal>\n    </BaseDialog.Root>\n  );\n}\nexport { styles as DialogStyles };\n"],"mappings":";;;;AAyBA,SAAS,QAAQ;AACf,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAU,CAAA;EAC3F,CAAA;;AAIV,SAAgBA,SAAO,EACrB,SACA,OACA,aACA,UACA,QACA,aACA,WACA,cAAc,MACd,cACA,GAAG,SACW;AACd,QACE,qBAACC,OAAW,MAAZ;EAA+B;EAAuB,GAAI;YAA1D,CACG,WAAW,oBAACA,OAAW,SAAZ,EAAoB,QAAQ,SAAW,CAAA,EACnD,qBAACA,OAAW,QAAZ,EAAA,UAAA,CACE,oBAACA,OAAW,UAAZ,EAAqB,WAAWC,sBAAO,UAAY,CAAA,EACnD,oBAACD,OAAW,UAAZ,EAAA,UACE,qBAACA,OAAW,OAAZ;GAAkB,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;aAA7D;IACG,SAAS,oBAACD,OAAW,OAAZ;KAAkB,WAAWC,sBAAO;eAAQ;KAAyB,CAAA;IAC9E,eAAe,oBAACD,OAAW,aAAZ;KAAwB,WAAWC,sBAAO;eAAc;KAAqC,CAAA;IAC5G,eACC,oBAACD,OAAW,OAAZ;KAAkB,WAAWC,sBAAO;KAAO,cAAW;eACpD,oBAAC,OAAD,EAAS,CAAA;KACQ,CAAA;IAEpB,YAAY,oBAAC,OAAD;KAAK,WAAWA,sBAAO;KAAO;KAAe,CAAA;KACxD,UAAU,gBACV,qBAAC,OAAD;KAAK,WAAW,GAAGA,sBAAO,OAAO,GAAG,cAAcA,sBAAO,kBAAkB;eAA3E,CACG,eAAe,oBAAC,OAAD,EAAA,UAAM,aAAkB,CAAA,EACvC,UAAU,oBAAC,OAAD;MAAK,WAAWA,sBAAO;gBAAgB;MAAa,CAAA,CAC3D;;IAES;MACC,CAAA,CACJ,EAAA,CAAA,CACJ"}

package/dist/dialog/dialog.module.js

@@ -5,6 +5,8 @@ var dialog_module_default = {
 	"close": "close_VsZA5W",
 	"description": "description_VsZA5W",
 	"footer": "footer_VsZA5W",
+	"footer-end": "footer-end_VsZA5W",
+	"footer-split": "footer-split_VsZA5W",
 	"header": "header_VsZA5W",
 	"popup": "popup_VsZA5W",
 	"title": "title_VsZA5W"

package/dist/dialog/dialog.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.module.js","names":[],"sources":["../../src/dialog/dialog.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  .backdrop {\n    position: fixed;\n    inset: 0;\n    background-color: rgba(0, 0, 0, 0.48);\n    z-index: var(--z-overlay);\n    transition: opacity var(--duration-slow) var(--easing-standard);\n  }\n\n  .backdrop[data-starting-style],\n  .backdrop[data-ending-style] {\n    opacity: 0;\n  }\n\n  .popup {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: var(--z-modal);\n    background-color: var(--color-bg-elevated);\n    border: var(--border-width-base) solid var(--color-border-base);\n    border-radius: var(--radius-2xl);\n    box-shadow: var(--shadow-xl);\n    padding: var(--space-6);\n    width: min(480px, calc(100vw - var(--space-8)));\n    max-height: min(640px, calc(100vh - var(--space-8)));\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-4);\n    outline: none;\n    overflow: hidden;\n\n    transition:\n      opacity 200ms var(--easing-ease-out),\n      transform 200ms var(--easing-spring);\n  }\n\n  .popup[data-starting-style] {\n    opacity: 0;\n    transform: translate(-50%, -48%) scale(0.96);\n  }\n\n  .popup[data-ending-style] {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.98);\n    transition:\n      opacity 150ms var(--easing-ease-in),\n      transform 150ms var(--easing-ease-in);\n  }\n\n  .header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-1);\n  }\n\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-lg);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-text-primary);\n    line-height: var(--line-height-tight);\n    letter-spacing: var(--letter-spacing-tight);\n    padding-right: var(--space-6);\n  }\n\n  .description {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-text-secondary);\n    line-height: var(--line-height-relaxed);\n  }\n\n  .close {\n    position: absolute;\n    top: var(--space-4);\n    right: var(--space-4);\n    width: 24px;\n    height: 24px;\n    border-radius: var(--radius-sm);\n    border: none;\n    background: transparent;\n    color: var(--color-text-tertiary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      color var(--duration-fast) var(--easing-standard);\n  }\n\n  .close:hover {\n    background-color: var(--color-surface-hover);\n    color: var(--color-text-primary);\n  }\n\n  .close:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n\n  .body {\n    flex: 1;\n    overflow-y: auto;\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-text-secondary);\n    line-height: var(--line-height-relaxed);\n  }\n\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--space-2);\n    padding-top: var(--space-2);\n    border-top: var(--border-width-base) solid var(--color-border-subtle);\n  }\n}\n"],"mappings":";AAgBA,IAAA,wBAAS;CAAA,YAAA;CAAA,QAAA;CAAA,SAAA;CAAA,eAAA;CAAA,UAAA;CAAA,UAAA;CAAA,SAAA;CAAA,SAAA;CAAA"}
+{"version":3,"file":"dialog.module.js","names":[],"sources":["../../src/dialog/dialog.module.css"],"sourcesContent":["@layer components {\n  .backdrop {\n    position: fixed;\n    inset: 0;\n    background-color: rgba(0, 0, 0, 0.48);\n    z-index: var(--z-overlay);\n    transition: opacity var(--duration-slow) var(--easing-standard);\n  }\n  .backdrop[data-starting-style],\n  .backdrop[data-ending-style] {\n    opacity: 0;\n  }\n  .popup {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: var(--z-modal);\n    background-color: var(--color-elevated);\n    border: var(--border-width-base) solid var(--color-line);\n    border-radius: var(--radius-2xl);\n    box-shadow: var(--shadow-xl);\n    padding: var(--space-5) var(--space-6) var(--space-5);\n    width: min(440px, calc(100vw - var(--space-8)));\n    max-height: min(640px, calc(100vh - var(--space-8)));\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-3);\n    outline: none;\n    overflow: hidden;\n    transition:\n      opacity 200ms var(--easing-ease-out),\n      transform 200ms var(--easing-spring);\n  }\n  .popup[data-starting-style] {\n    opacity: 0;\n    transform: translate(-50%, -48%) scale(0.96);\n  }\n  .popup[data-ending-style] {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.98);\n    transition:\n      opacity 150ms var(--easing-ease-in),\n      transform 150ms var(--easing-ease-in);\n  }\n  .header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-2);\n    text-align: center;\n  }\n  .title {\n    font-family: var(--font-sans);\n    font-size: var(--font-size-lg);\n    font-weight: var(--font-weight-bold);\n    color: var(--color-primary);\n    line-height: var(--line-height-tight);\n    letter-spacing: var(--letter-spacing-tight);\n  }\n  .description {\n    font-family: var(--font-sans);\n    font-size: var(--font-size-md);\n    color: var(--color-secondary);\n    line-height: var(--line-height-relaxed);\n  }\n  .close {\n    position: absolute;\n    top: var(--space-4);\n    right: var(--space-4);\n    width: 24px;\n    height: 24px;\n    border-radius: var(--radius-sm);\n    border: none;\n    background: transparent;\n    color: var(--color-tertiary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      color var(--duration-fast) var(--easing-standard);\n  }\n  .close:hover {\n    background-color: var(--color-hover);\n    color: var(--color-primary);\n  }\n  .close:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n  .body {\n    flex: 1;\n    overflow-y: auto;\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-secondary);\n    line-height: var(--line-height-relaxed);\n  }\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--space-2);\n    padding-top: var(--space-2);\n  }\n  /* When a footerStart slot is present, space-between pushes it left */\n  .footer-split {\n    justify-content: space-between;\n  }\n  .footer-end {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n  }\n}\n"],"mappings":";AAoBA,IAAA,wBAAW;CAAA,YAAc;CAAW,QAAA;CAAA,SAAA;CAAA,eAAA;CAAA,UAAA;CAAA,cAAA;CAAA,gBAAA;CAAA,UAAA;CAAA,SAAA;CAAA,SAAA;CAAA"}

package/dist/drawer/drawer.css

@@ -1,5 +1,3 @@
-@layer theme, base;
-
 @layer components {
   .backdrop_JNKGQq {
     --backdrop-opacity: .48;
@@ -73,8 +71,8 @@
 
   .popup_JNKGQq {
     box-sizing: border-box;
-    background-color: var(--color-bg-elevated);
-    border: var(--border-width-base) solid var(--color-border-base);
+    background-color: var(--color-elevated);
+    border: var(--border-width-base) solid var(--color-line);
     overscroll-behavior: contain;
     touch-action: auto;
     will-change: transform;
@@ -176,7 +174,7 @@
   }
 
   .handle-bar_JNKGQq {
-    background-color: var(--color-border-strong);
+    background-color: var(--color-line-strong);
     width: 2.5rem;
     height: 4px;
     margin: 0 auto var(--space-4);
@@ -200,7 +198,7 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-lg);
     font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     line-height: var(--line-height-tight);
     letter-spacing: var(--letter-spacing-tight);
     padding-right: var(--space-6);
@@ -210,7 +208,7 @@
   .description_JNKGQq {
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
+    color: var(--color-secondary);
     line-height: var(--line-height-relaxed);
     margin: 0;
   }
@@ -221,7 +219,7 @@
     border-radius: var(--radius-sm);
     width: 24px;
     height: 24px;
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     cursor: pointer;
     transition: background-color var(--duration-fast) var(--easing-standard),
       color var(--duration-fast) var(--easing-standard);
@@ -235,8 +233,8 @@
   }
 
   .close_JNKGQq:hover {
-    background-color: var(--color-surface-hover);
-    color: var(--color-text-primary);
+    background-color: var(--color-hover);
+    color: var(--color-primary);
   }
 
   .close_JNKGQq:focus-visible {
@@ -248,10 +246,8 @@
     align-items: center;
     gap: var(--space-2);
     padding-top: var(--space-4);
-    border-top: var(--border-width-base) solid var(--color-border-subtle);
+    border-top: var(--border-width-base) solid var(--color-line-subtle);
     margin-top: auto;
     display: flex;
   }
 }
-
-@layer utilities;

package/dist/drawer/drawer.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.module.js","names":[],"sources":["../../src/drawer/drawer.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  /* ── Backdrop ──────────────────────────────────────────────────── */\n\n  .backdrop {\n    --backdrop-opacity: 0.48;\n    position: fixed;\n    inset: 0;\n    min-height: 100dvh;\n    background-color: black;\n    opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));\n    z-index: var(--z-overlay);\n\n    transition-property: opacity;\n    transition-duration: 450ms;\n    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);\n\n    /* iOS 26+: cover the full visual viewport even when scrolled */\n    @supports (-webkit-touch-callout: none) {\n      position: absolute;\n    }\n  }\n\n  .backdrop[data-starting-style],\n  .backdrop[data-ending-style] {\n    opacity: 0;\n  }\n\n  .backdrop[data-swiping] {\n    transition-duration: 0ms;\n  }\n\n  .backdrop[data-ending-style] {\n    transition-duration: calc(var(--drawer-swipe-strength) * 400ms);\n  }\n\n  /* ── Viewport ──────────────────────────────────────────────────── */\n\n  .viewport {\n    position: fixed;\n    inset: 0;\n    z-index: var(--z-modal);\n    display: flex;\n  }\n\n  /* side drawers sit against their respective edge */\n  .viewport[data-side=\"left\"] {\n    justify-content: flex-start;\n    align-items: stretch;\n  }\n  .viewport[data-side=\"right\"] {\n    justify-content: flex-end;\n    align-items: stretch;\n  }\n  .viewport[data-side=\"bottom\"] {\n    align-items: flex-end;\n    justify-content: center;\n  }\n  .viewport[data-side=\"top\"] {\n    align-items: flex-start;\n    justify-content: center;\n  }\n\n  /* iOS rounded inset padding */\n  @supports (-webkit-touch-callout: none) {\n    .viewport[data-side=\"left\"],\n    .viewport[data-side=\"right\"] {\n      padding: 0.625rem;\n    }\n\n    .viewport[data-side=\"bottom\"] {\n      padding: 0 0.625rem 0.625rem;\n    }\n\n    .viewport[data-side=\"top\"] {\n      padding: 0.625rem 0.625rem 0;\n    }\n  }\n\n  /* ── Popup — shared ────────────────────────────────────────────── */\n\n  .popup {\n    box-sizing: border-box;\n    background-color: var(--color-bg-elevated);\n    border: var(--border-width-base) solid var(--color-border-base);\n    outline: none;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    touch-action: auto;\n    will-change: transform;\n    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);\n    transition-duration: 450ms;\n  }\n\n  .popup[data-swiping] {\n    user-select: none;\n    transition-duration: 0ms;\n  }\n\n  .popup[data-ending-style] {\n    transition-duration: calc(var(--drawer-swipe-strength) * 400ms);\n  }\n\n  /* ── Popup — right side (default) ─────────────────────────────── */\n\n  .popup-right {\n    --bleed: 3rem;\n    height: 100%;\n    width: calc(var(--drawer-width, 20rem) + var(--bleed));\n    max-width: calc(100vw - 3rem + var(--bleed));\n    padding: var(--space-6);\n    padding-right: calc(var(--space-6) + var(--bleed));\n    margin-right: calc(-1 * var(--bleed));\n    transform: translateX(var(--drawer-swipe-movement-x));\n    transition-property: transform;\n\n    @supports (-webkit-touch-callout: none) {\n      --bleed: 0px;\n      margin-right: 0;\n      border-radius: var(--radius-xl);\n    }\n  }\n\n  .popup-right[data-starting-style],\n  .popup-right[data-ending-style] {\n    transform: translateX(calc(100% - var(--bleed) + 2px));\n  }\n\n  /* ── Popup — left side ─────────────────────────────────────────── */\n\n  .popup-left {\n    --bleed: 3rem;\n    height: 100%;\n    width: calc(var(--drawer-width, 20rem) + var(--bleed));\n    max-width: calc(100vw - 3rem + var(--bleed));\n    padding: var(--space-6);\n    padding-left: calc(var(--space-6) + var(--bleed));\n    margin-left: calc(-1 * var(--bleed));\n    transform: translateX(var(--drawer-swipe-movement-x));\n    transition-property: transform;\n\n    @supports (-webkit-touch-callout: none) {\n      --bleed: 0px;\n      margin-left: 0;\n      border-radius: var(--radius-xl);\n    }\n  }\n\n  .popup-left[data-starting-style],\n  .popup-left[data-ending-style] {\n    transform: translateX(calc(-100% + var(--bleed) - 2px));\n  }\n\n  /* ── Popup — bottom ────────────────────────────────────────────── */\n\n  .popup-bottom {\n    width: 100%;\n    max-width: var(--drawer-max-width, 480px);\n    max-height: 90dvh;\n    padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));\n    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;\n    border-bottom: none;\n    transform: translateY(var(--drawer-swipe-movement-y));\n    transition-property: transform;\n\n    @supports (-webkit-touch-callout: none) {\n      border-radius: var(--radius-2xl);\n    }\n  }\n\n  .popup-bottom[data-starting-style],\n  .popup-bottom[data-ending-style] {\n    transform: translateY(calc(100% + 2px));\n  }\n\n  /* ── Popup — top ───────────────────────────────────────────────── */\n\n  .popup-top {\n    width: 100%;\n    max-width: var(--drawer-max-width, 480px);\n    max-height: 90dvh;\n    padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--space-5) var(--space-5);\n    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);\n    border-top: none;\n    transform: translateY(var(--drawer-swipe-movement-y));\n    transition-property: transform;\n\n    @supports (-webkit-touch-callout: none) {\n      border-radius: var(--radius-2xl);\n    }\n  }\n\n  .popup-top[data-starting-style],\n  .popup-top[data-ending-style] {\n    transform: translateY(calc(-100% - 2px));\n  }\n\n  /* ── Handle bar (bottom/top drawers) ───────────────────────────── */\n\n  .handle-bar {\n    width: 2.5rem;\n    height: 4px;\n    border-radius: 9999px;\n    background-color: var(--color-border-strong);\n    margin: 0 auto var(--space-4);\n    flex-shrink: 0;\n  }\n\n  .popup-top .handle-bar {\n    margin: var(--space-4) auto 0;\n    order: 1; /* push to bottom in top drawer */\n  }\n\n  /* ── Content ───────────────────────────────────────────────────── */\n\n  .content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-4);\n    height: 100%;\n  }\n\n  /* ── Title ─────────────────────────────────────────────────────── */\n\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-lg);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-text-primary);\n    line-height: var(--line-height-tight);\n    letter-spacing: var(--letter-spacing-tight);\n    margin: 0;\n    padding-right: var(--space-6);\n  }\n\n  /* ── Description ───────────────────────────────────────────────── */\n\n  .description {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-text-secondary);\n    line-height: var(--line-height-relaxed);\n    margin: 0;\n  }\n\n  /* ── Close button ──────────────────────────────────────────────── */\n\n  .close {\n    position: absolute;\n    top: var(--space-4);\n    right: var(--space-4);\n    width: 24px;\n    height: 24px;\n    border-radius: var(--radius-sm);\n    border: none;\n    background: transparent;\n    color: var(--color-text-tertiary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      color var(--duration-fast) var(--easing-standard);\n  }\n\n  .close:hover {\n    background-color: var(--color-surface-hover);\n    color: var(--color-text-primary);\n  }\n\n  .close:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n\n  /* ── Footer ────────────────────────────────────────────────────── */\n\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--space-2);\n    padding-top: var(--space-4);\n    margin-top: auto;\n    border-top: var(--border-width-base) solid var(--color-border-subtle);\n  }\n}\n"],"mappings":";AA0BA,IAAA,wBAAc;CAAA,YAAA;CAAA,SAAA;CAAA,WAAA;CAAA,eAAA;CAAA,UAAA;CAAA,cAAA;CAAA,SAAA;CAAA,gBAAA;CAAA,cAAA;CAAA,eAAA;CAAA,aAAA;CAAA,SAAA;CAAA,YAAA;CAAA"}
+{"version":3,"file":"drawer.module.js","names":[],"sources":["../../src/drawer/drawer.module.css"],"sourcesContent":["@layer components {\n  /* ── Backdrop ──────────────────────────────────────────────────── */\n  .backdrop {\n    --backdrop-opacity: 0.48;\n    position: fixed;\n    inset: 0;\n    min-height: 100dvh;\n    background-color: black;\n    opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));\n    z-index: var(--z-overlay);\n    transition-property: opacity;\n    transition-duration: 450ms;\n    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);\n    /* iOS 26+: cover the full visual viewport even when scrolled */\n    @supports (-webkit-touch-callout: none) {\n      position: absolute;\n    }\n  }\n  .backdrop[data-starting-style],\n  .backdrop[data-ending-style] {\n    opacity: 0;\n  }\n  .backdrop[data-swiping] {\n    transition-duration: 0ms;\n  }\n  .backdrop[data-ending-style] {\n    transition-duration: calc(var(--drawer-swipe-strength) * 400ms);\n  }\n  /* ── Viewport ──────────────────────────────────────────────────── */\n  .viewport {\n    position: fixed;\n    inset: 0;\n    z-index: var(--z-modal);\n    display: flex;\n  }\n  /* side drawers sit against their respective edge */\n  .viewport[data-side=\"left\"] {\n    justify-content: flex-start;\n    align-items: stretch;\n  }\n  .viewport[data-side=\"right\"] {\n    justify-content: flex-end;\n    align-items: stretch;\n  }\n  .viewport[data-side=\"bottom\"] {\n    align-items: flex-end;\n    justify-content: center;\n  }\n  .viewport[data-side=\"top\"] {\n    align-items: flex-start;\n    justify-content: center;\n  }\n  /* iOS rounded inset padding */\n  @supports (-webkit-touch-callout: none) {\n    .viewport[data-side=\"left\"],\n    .viewport[data-side=\"right\"] {\n      padding: 0.625rem;\n    }\n    .viewport[data-side=\"bottom\"] {\n      padding: 0 0.625rem 0.625rem;\n    }\n    .viewport[data-side=\"top\"] {\n      padding: 0.625rem 0.625rem 0;\n    }\n  }\n  /* ── Popup — shared ────────────────────────────────────────────── */\n  .popup {\n    box-sizing: border-box;\n    background-color: var(--color-elevated);\n    border: var(--border-width-base) solid var(--color-line);\n    outline: none;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    touch-action: auto;\n    will-change: transform;\n    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);\n    transition-duration: 450ms;\n  }\n  .popup[data-swiping] {\n    user-select: none;\n    transition-duration: 0ms;\n  }\n  .popup[data-ending-style] {\n    transition-duration: calc(var(--drawer-swipe-strength) * 400ms);\n  }\n  /* ── Popup — right side (default) ─────────────────────────────── */\n  .popup-right {\n    --bleed: 3rem;\n    height: 100%;\n    width: calc(var(--drawer-width, 20rem) + var(--bleed));\n    max-width: calc(100vw - 3rem + var(--bleed));\n    padding: var(--space-6);\n    padding-right: calc(var(--space-6) + var(--bleed));\n    margin-right: calc(-1 * var(--bleed));\n    transform: translateX(var(--drawer-swipe-movement-x));\n    transition-property: transform;\n    @supports (-webkit-touch-callout: none) {\n      --bleed: 0px;\n      margin-right: 0;\n      border-radius: var(--radius-xl);\n    }\n  }\n  .popup-right[data-starting-style],\n  .popup-right[data-ending-style] {\n    transform: translateX(calc(100% - var(--bleed) + 2px));\n  }\n  /* ── Popup — left side ─────────────────────────────────────────── */\n  .popup-left {\n    --bleed: 3rem;\n    height: 100%;\n    width: calc(var(--drawer-width, 20rem) + var(--bleed));\n    max-width: calc(100vw - 3rem + var(--bleed));\n    padding: var(--space-6);\n    padding-left: calc(var(--space-6) + var(--bleed));\n    margin-left: calc(-1 * var(--bleed));\n    transform: translateX(var(--drawer-swipe-movement-x));\n    transition-property: transform;\n    @supports (-webkit-touch-callout: none) {\n      --bleed: 0px;\n      margin-left: 0;\n      border-radius: var(--radius-xl);\n    }\n  }\n  .popup-left[data-starting-style],\n  .popup-left[data-ending-style] {\n    transform: translateX(calc(-100% + var(--bleed) - 2px));\n  }\n  /* ── Popup — bottom ────────────────────────────────────────────── */\n  .popup-bottom {\n    width: 100%;\n    max-width: var(--drawer-max-width, 480px);\n    max-height: 90dvh;\n    padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));\n    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;\n    border-bottom: none;\n    transform: translateY(var(--drawer-swipe-movement-y));\n    transition-property: transform;\n    @supports (-webkit-touch-callout: none) {\n      border-radius: var(--radius-2xl);\n    }\n  }\n  .popup-bottom[data-starting-style],\n  .popup-bottom[data-ending-style] {\n    transform: translateY(calc(100% + 2px));\n  }\n  /* ── Popup — top ───────────────────────────────────────────────── */\n  .popup-top {\n    width: 100%;\n    max-width: var(--drawer-max-width, 480px);\n    max-height: 90dvh;\n    padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--space-5) var(--space-5);\n    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);\n    border-top: none;\n    transform: translateY(var(--drawer-swipe-movement-y));\n    transition-property: transform;\n    @supports (-webkit-touch-callout: none) {\n      border-radius: var(--radius-2xl);\n    }\n  }\n  .popup-top[data-starting-style],\n  .popup-top[data-ending-style] {\n    transform: translateY(calc(-100% - 2px));\n  }\n  /* ── Handle bar (bottom/top drawers) ───────────────────────────── */\n  .handle-bar {\n    width: 2.5rem;\n    height: 4px;\n    border-radius: 9999px;\n    background-color: var(--color-line-strong);\n    margin: 0 auto var(--space-4);\n    flex-shrink: 0;\n  }\n  .popup-top .handle-bar {\n    margin: var(--space-4) auto 0;\n    order: 1; /* push to bottom in top drawer */\n  }\n  /* ── Content ───────────────────────────────────────────────────── */\n  .content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-4);\n    height: 100%;\n  }\n  /* ── Title ─────────────────────────────────────────────────────── */\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-lg);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-primary);\n    line-height: var(--line-height-tight);\n    letter-spacing: var(--letter-spacing-tight);\n    margin: 0;\n    padding-right: var(--space-6);\n  }\n  /* ── Description ───────────────────────────────────────────────── */\n  .description {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-secondary);\n    line-height: var(--line-height-relaxed);\n    margin: 0;\n  }\n  /* ── Close button ──────────────────────────────────────────────── */\n  .close {\n    position: absolute;\n    top: var(--space-4);\n    right: var(--space-4);\n    width: 24px;\n    height: 24px;\n    border-radius: var(--radius-sm);\n    border: none;\n    background: transparent;\n    color: var(--color-tertiary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      color var(--duration-fast) var(--easing-standard);\n  }\n  .close:hover {\n    background-color: var(--color-hover);\n    color: var(--color-primary);\n  }\n  .close:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n  /* ── Footer ────────────────────────────────────────────────────── */\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--space-2);\n    padding-top: var(--space-4);\n    margin-top: auto;\n    border-top: var(--border-width-base) solid var(--color-line-subtle);\n  }\n}\n"],"mappings":";AA0BA,IAAA,wBAAe;CAAA,YAAU;CAAkB,SAAM;CAAkB,WAAA;CAAA,eAAA;CAAA,UAAA;CAAA,cAAA;CAAA,SAAA;CAAA,gBAAA;CAAA,cAAA;CAAA,eAAA;CAAA,aAAA;CAAA,SAAA;CAAA,YAAA;CAAA"}