snice 4.20.1 → 4.22.0

package/dist/cdn/drawer/snice-drawer.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.20.0
+ * snice v4.21.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.
@@ -64,7 +64,7 @@ var SniceDrawer = (function (exports, snice) {
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
   };
 
-  var cssContent = ":host{--drawer-width-small:var(--snice-size-drawer-small, 15rem);--drawer-width-medium:var(--snice-size-drawer-medium, 20rem);--drawer-width-large:var(--snice-size-drawer-large, 30rem);--drawer-width-xl:var(--snice-size-drawer-xl, 40rem);--drawer-width-xxl:var(--snice-size-drawer-xxl, 50rem);--drawer-width-xxxl:var(--snice-size-drawer-xxxl, 60rem);--drawer-height-small:var(--snice-size-drawer-height-small, 12.5rem);--drawer-height-medium:var(--snice-size-drawer-height-medium, 25rem);--drawer-height-large:var(--snice-size-drawer-height-large, 37.5rem);--drawer-height-xl:var(--snice-size-drawer-height-xl, 70vh);--drawer-height-xxl:var(--snice-size-drawer-height-xxl, 80vh);--drawer-height-xxxl:var(--snice-size-drawer-height-xxxl, 90vh);--drawer-bg:var(--snice-color-background, white);--drawer-shadow:var(--snice-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));--drawer-backdrop:var(--snice-color-backdrop, rgba(0, 0, 0, 0.5));--drawer-transition:transform var(--snice-transition-medium, 250ms) cubic-bezier(0.4, 0, 0.2, 1);--drawer-z-index:var(--snice-z-index-modal, 1050);display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;isolation:isolate;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint}:host([contained]){position:absolute;width:100%;height:100%}.drawer-backdrop{position:absolute;inset:0;background:var(--drawer-backdrop);opacity:0;transition:opacity .3s ease-in-out;z-index:var(--drawer-z-index);pointer-events:none;visibility:hidden}:host([open]){pointer-events:auto}:host([open]) .drawer-backdrop{opacity:1;pointer-events:auto;visibility:visible}:host([no-backdrop]) .drawer-backdrop{display:none}.drawer{position:absolute;background:var(--drawer-bg);box-shadow:var(--drawer-shadow);transition:transform var(--snice-transition-medium, 250ms) cubic-bezier(.4, 0, .2, 1),opacity var(--snice-transition-medium, 250ms) cubic-bezier(.2, 0, .8, 1);z-index:calc(var(--drawer-z-index) + 1);display:flex;flex-direction:column;outline:0;overflow:hidden;opacity:0;pointer-events:auto}:host([open]) .drawer{opacity:1}:host(:not([position])) .drawer{top:0;left:0;height:100%;width:var(--drawer-width-medium);transform:translateX(-100%)}:host(:not([position])[open]) .drawer{transform:translateX(0)}:host([position=left]) .drawer{top:0;left:0;height:100%;width:var(--drawer-width-medium);transform:translateX(-100%)}:host([position=left][size=small]) .drawer{width:var(--drawer-width-small)}:host([position=left][size=medium]) .drawer{width:var(--drawer-width-medium)}:host([position=left][size=large]) .drawer{width:var(--drawer-width-large)}:host([position=left][size=xl]) .drawer{width:var(--drawer-width-xl)}:host([position=left][size=xxl]) .drawer{width:var(--drawer-width-xxl)}:host([position=left][size=xxxl]) .drawer{width:var(--drawer-width-xxxl)}:host([position=left][size=full]) .drawer{width:100%}:host([position=left][open]) .drawer{transform:translateX(0)}:host([position=right]) .drawer{top:0;right:0;height:100%;width:var(--drawer-width-medium);transform:translateX(100%)}:host([position=right][size=small]) .drawer{width:var(--drawer-width-small)}:host([position=right][size=medium]) .drawer{width:var(--drawer-width-medium)}:host([position=right][size=large]) .drawer{width:var(--drawer-width-large)}:host([position=right][size=xl]) .drawer{width:var(--drawer-width-xl)}:host([position=right][size=xxl]) .drawer{width:var(--drawer-width-xxl)}:host([position=right][size=xxxl]) .drawer{width:var(--drawer-width-xxxl)}:host([position=right][size=full]) .drawer{width:100%}:host([position=right][open]) .drawer{transform:translateX(0)}:host([position=top]) .drawer{top:0;left:0;width:100%;height:var(--drawer-height-medium);transform:translateY(-100%)}:host([position=top][size=small]) .drawer{height:var(--drawer-height-small)}:host([position=top][size=medium]) .drawer{height:var(--drawer-height-medium)}:host([position=top][size=large]) .drawer{height:var(--drawer-height-large)}:host([position=top][size=xl]) .drawer{height:var(--drawer-height-xl)}:host([position=top][size=xxl]) .drawer{height:var(--drawer-height-xxl)}:host([position=top][size=xxxl]) .drawer{height:var(--drawer-height-xxxl)}:host([position=top][size=full]) .drawer{height:100%}:host([position=top][open]) .drawer{transform:translateY(0)}:host([position=bottom]) .drawer{bottom:0;left:0;width:100%;height:var(--drawer-height-medium);transform:translateY(100%)}:host([position=bottom][size=small]) .drawer{height:var(--drawer-height-small)}:host([position=bottom][size=medium]) .drawer{height:var(--drawer-height-medium)}:host([position=bottom][size=large]) .drawer{height:var(--drawer-height-large)}:host([position=bottom][size=xl]) .drawer{height:var(--drawer-height-xl)}:host([position=bottom][size=xxl]) .drawer{height:var(--drawer-height-xxl)}:host([position=bottom][size=xxxl]) .drawer{height:var(--drawer-height-xxxl)}:host([position=bottom][size=full]) .drawer{height:100%}:host([position=bottom][open]) .drawer{transform:translateY(0)}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:var(--snice-spacing-md,1rem) var(--snice-spacing-lg,1.25rem);border-bottom:1px solid var(--snice-color-border,rgb(229 231 235));background:var(--snice-color-background,#fff);flex-shrink:0}.drawer-header:has(.drawer-title:empty):not(:has(.drawer-close)){display:none}.drawer-title{font-size:var(--snice-font-size-lg, 1.125rem);font-weight:var(--snice-font-weight-semibold,600);margin:0;color:var(--snice-color-text,rgb(17 24 39));line-height:var(--snice-line-height-tight, 1.25)}.drawer-close{display:flex;align-items:center;justify-content:center;width:var(--snice-size-control-md,2rem);height:var(--snice-size-control-md,2rem);border:none;background:0 0;border-radius:var(--snice-border-radius-md,6px);cursor:pointer;color:var(--snice-color-text-secondary,rgb(107 114 128));transition:all var(--snice-transition-fast, 150ms) ease}.drawer-close:hover{background:var(--snice-color-background-hover,rgb(243 244 246));color:var(--snice-color-text,rgb(17 24 39))}.drawer-close:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246));outline-offset:var(--snice-focus-ring-offset,2px)}.drawer-body{flex:1;padding:var(--snice-spacing-lg,1.25rem);overflow-y:auto;overflow-x:hidden;color:var(--snice-color-text,rgb(17 24 39))}.drawer-footer{padding:var(--snice-spacing-md,1rem) var(--snice-spacing-lg,1.25rem);border-top:1px solid var(--snice-color-border,rgb(229 231 235));background:var(--snice-color-background,#fff);flex-shrink:0}.drawer-footer:empty{display:none}@media (prefers-reduced-motion:reduce){.drawer,.drawer-backdrop{transition:none}}@media (max-width:640px){:host([position=left][size=large]) .drawer,:host([position=left][size=medium]) .drawer,:host([position=left][size=xl]) .drawer,:host([position=left][size=xxl]) .drawer,:host([position=left][size=xxxl]) .drawer,:host([position=right][size=large]) .drawer,:host([position=right][size=medium]) .drawer,:host([position=right][size=xl]) .drawer,:host([position=right][size=xxl]) .drawer,:host([position=right][size=xxxl]) .drawer{width:calc(100% - 2.5rem)}}.focus-trap-end,.focus-trap-start{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host([push-content]){--drawer-push-amount:0px}:host([push-content][position=left][open][size=small]){--drawer-push-amount:var(--drawer-width-small)}:host([push-content][position=left][open][size=medium]){--drawer-push-amount:var(--drawer-width-medium)}:host([push-content][position=left][open][size=large]){--drawer-push-amount:var(--drawer-width-large)}:host([push-content][position=left][open][size=xl]){--drawer-push-amount:var(--drawer-width-xl)}:host([push-content][position=left][open][size=xxl]){--drawer-push-amount:var(--drawer-width-xxl)}:host([push-content][position=left][open][size=xxxl]){--drawer-push-amount:var(--drawer-width-xxxl)}:host([push-content][position=left][open][size=full]){--drawer-push-amount:100vw}:host([push-content][position=left][open]:not([size])){--drawer-push-amount:var(--drawer-width-medium)}:host([push-content][position=right][open][size=small]){--drawer-push-amount:calc(-1 * var(--drawer-width-small))}:host([push-content][position=right][open][size=medium]){--drawer-push-amount:calc(-1 * var(--drawer-width-medium))}:host([push-content][position=right][open][size=large]){--drawer-push-amount:calc(-1 * var(--drawer-width-large))}:host([push-content][position=right][open][size=xl]){--drawer-push-amount:calc(-1 * var(--drawer-width-xl))}:host([push-content][position=right][open][size=xxl]){--drawer-push-amount:calc(-1 * var(--drawer-width-xxl))}:host([push-content][position=right][open][size=xxxl]){--drawer-push-amount:calc(-1 * var(--drawer-width-xxxl))}:host([push-content][position=right][open][size=full]){--drawer-push-amount:-100vw}:host([push-content][position=right][open]:not([size])){--drawer-push-amount:calc(-1 * var(--drawer-width-medium))}:host([push-content][position=top][open][size=small]){--drawer-push-amount:var(--drawer-height-small)}:host([push-content][position=top][open][size=medium]){--drawer-push-amount:var(--drawer-height-medium)}:host([push-content][position=top][open][size=large]){--drawer-push-amount:var(--drawer-height-large)}:host([push-content][position=top][open][size=xl]){--drawer-push-amount:var(--drawer-height-xl)}:host([push-content][position=top][open][size=xxl]){--drawer-push-amount:var(--drawer-height-xxl)}:host([push-content][position=top][open][size=xxxl]){--drawer-push-amount:var(--drawer-height-xxxl)}:host([push-content][position=top][open][size=full]){--drawer-push-amount:100vh}:host([push-content][position=top][open]:not([size])){--drawer-push-amount:var(--drawer-height-medium)}:host([push-content][position=bottom][open][size=small]){--drawer-push-amount:calc(-1 * var(--drawer-height-small))}:host([push-content][position=bottom][open][size=medium]){--drawer-push-amount:calc(-1 * var(--drawer-height-medium))}:host([push-content][position=bottom][open][size=large]){--drawer-push-amount:calc(-1 * var(--drawer-height-large))}:host([push-content][position=bottom][open][size=xl]){--drawer-push-amount:calc(-1 * var(--drawer-height-xl))}:host([push-content][position=bottom][open][size=xxl]){--drawer-push-amount:calc(-1 * var(--drawer-height-xxl))}:host([push-content][position=bottom][open][size=xxxl]){--drawer-push-amount:calc(-1 * var(--drawer-height-xxxl))}:host([push-content][position=bottom][open][size=full]){--drawer-push-amount:-100vh}:host([push-content][position=bottom][open]:not([size])){--drawer-push-amount:calc(-1 * var(--drawer-height-medium))}";
+  var cssContent = ":host{--drawer-width-small:var(--snice-size-drawer-small, 15rem);--drawer-width-medium:var(--snice-size-drawer-medium, 20rem);--drawer-width-large:var(--snice-size-drawer-large, 30rem);--drawer-width-xl:var(--snice-size-drawer-xl, 40rem);--drawer-width-xxl:var(--snice-size-drawer-xxl, 50rem);--drawer-width-xxxl:var(--snice-size-drawer-xxxl, 60rem);--drawer-height-small:var(--snice-size-drawer-height-small, 12.5rem);--drawer-height-medium:var(--snice-size-drawer-height-medium, 25rem);--drawer-height-large:var(--snice-size-drawer-height-large, 37.5rem);--drawer-height-xl:var(--snice-size-drawer-height-xl, 70vh);--drawer-height-xxl:var(--snice-size-drawer-height-xxl, 80vh);--drawer-height-xxxl:var(--snice-size-drawer-height-xxxl, 90vh);--drawer-bg:var(--snice-color-background, white);--drawer-shadow:var(--snice-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));--drawer-backdrop:var(--snice-color-backdrop, rgba(0, 0, 0, 0.5));--drawer-transition:transform var(--snice-transition-medium, 250ms) cubic-bezier(0.4, 0, 0.2, 1);--drawer-z-index:var(--snice-z-index-modal, 1050);display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;isolation:isolate;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint}:host([contained]){position:absolute;width:100%;height:100%}.drawer-backdrop{position:absolute;inset:0;background:var(--drawer-backdrop);opacity:0;transition:opacity .3s ease-in-out;z-index:var(--drawer-z-index);pointer-events:none;visibility:hidden}:host([open]){pointer-events:auto}:host([open]) .drawer-backdrop{opacity:1;pointer-events:auto;visibility:visible}:host([no-backdrop]) .drawer-backdrop{display:none}.drawer{position:absolute;background:var(--drawer-bg);box-shadow:var(--drawer-shadow);transition:transform var(--snice-transition-medium, 250ms) cubic-bezier(.4, 0, .2, 1),opacity var(--snice-transition-medium, 250ms) cubic-bezier(.2, 0, .8, 1);z-index:calc(var(--drawer-z-index) + 1);display:flex;flex-direction:column;outline:0;overflow:hidden;opacity:0;pointer-events:auto}:host([open]) .drawer{opacity:1}:host(:not([position])) .drawer{top:0;left:0;height:100%;width:var(--drawer-width-medium);transform:translateX(-100%)}:host(:not([position])[open]) .drawer{transform:translateX(0)}:host([position=left]) .drawer{top:0;left:0;height:100%;width:var(--drawer-width-medium);transform:translateX(-100%)}:host([position=left][size=small]) .drawer{width:var(--drawer-width-small)}:host([position=left][size=medium]) .drawer{width:var(--drawer-width-medium)}:host([position=left][size=large]) .drawer{width:var(--drawer-width-large)}:host([position=left][size=xl]) .drawer{width:var(--drawer-width-xl)}:host([position=left][size=xxl]) .drawer{width:var(--drawer-width-xxl)}:host([position=left][size=xxxl]) .drawer{width:var(--drawer-width-xxxl)}:host([position=left][size=full]) .drawer{width:100%}:host([position=left][open]) .drawer{transform:translateX(0)}:host([position=right]) .drawer{top:0;right:0;height:100%;width:var(--drawer-width-medium);transform:translateX(100%)}:host([position=right][size=small]) .drawer{width:var(--drawer-width-small)}:host([position=right][size=medium]) .drawer{width:var(--drawer-width-medium)}:host([position=right][size=large]) .drawer{width:var(--drawer-width-large)}:host([position=right][size=xl]) .drawer{width:var(--drawer-width-xl)}:host([position=right][size=xxl]) .drawer{width:var(--drawer-width-xxl)}:host([position=right][size=xxxl]) .drawer{width:var(--drawer-width-xxxl)}:host([position=right][size=full]) .drawer{width:100%}:host([position=right][open]) .drawer{transform:translateX(0)}:host([position=top]) .drawer{top:0;left:0;width:100%;height:var(--drawer-height-medium);transform:translateY(-100%)}:host([position=top][size=small]) .drawer{height:var(--drawer-height-small)}:host([position=top][size=medium]) .drawer{height:var(--drawer-height-medium)}:host([position=top][size=large]) .drawer{height:var(--drawer-height-large)}:host([position=top][size=xl]) .drawer{height:var(--drawer-height-xl)}:host([position=top][size=xxl]) .drawer{height:var(--drawer-height-xxl)}:host([position=top][size=xxxl]) .drawer{height:var(--drawer-height-xxxl)}:host([position=top][size=full]) .drawer{height:100%}:host([position=top][open]) .drawer{transform:translateY(0)}:host([position=bottom]) .drawer{bottom:0;left:0;width:100%;height:var(--drawer-height-medium);transform:translateY(100%)}:host([position=bottom][size=small]) .drawer{height:var(--drawer-height-small)}:host([position=bottom][size=medium]) .drawer{height:var(--drawer-height-medium)}:host([position=bottom][size=large]) .drawer{height:var(--drawer-height-large)}:host([position=bottom][size=xl]) .drawer{height:var(--drawer-height-xl)}:host([position=bottom][size=xxl]) .drawer{height:var(--drawer-height-xxl)}:host([position=bottom][size=xxxl]) .drawer{height:var(--drawer-height-xxxl)}:host([position=bottom][size=full]) .drawer{height:100%}:host([position=bottom][open]) .drawer{transform:translateY(0)}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:var(--snice-spacing-md,1rem) var(--snice-spacing-lg,1.25rem);border-bottom:1px solid var(--snice-color-border,rgb(229 231 235));background:var(--snice-color-background,#fff);flex-shrink:0}.drawer-header:has(.drawer-title:empty):not(:has(.drawer-close)){display:none}.drawer-title{font-size:var(--snice-font-size-lg, 1.125rem);font-weight:var(--snice-font-weight-semibold,600);margin:0;color:var(--snice-color-text,rgb(17 24 39));line-height:var(--snice-line-height-tight, 1.25)}.drawer-close{display:flex;align-items:center;justify-content:center;width:var(--snice-size-control-md,2rem);height:var(--snice-size-control-md,2rem);border:none;background:0 0;border-radius:var(--snice-border-radius-md,6px);cursor:pointer;color:var(--snice-color-text-secondary,rgb(107 114 128));transition:all var(--snice-transition-fast, 150ms) ease}.drawer-close:hover{background:var(--snice-color-background-hover,rgb(243 244 246));color:var(--snice-color-text,rgb(17 24 39))}.drawer-close:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246));outline-offset:var(--snice-focus-ring-offset,2px)}.drawer-body{flex:1;padding:var(--snice-spacing-lg,1.25rem);overflow-y:auto;overflow-x:hidden;color:var(--snice-color-text,rgb(17 24 39))}.drawer-footer{padding:var(--snice-spacing-md,1rem) var(--snice-spacing-lg,1.25rem);border-top:1px solid var(--snice-color-border,rgb(229 231 235));background:var(--snice-color-background,#fff);flex-shrink:0}.drawer-footer:empty{display:none}@media (prefers-reduced-motion:reduce){.drawer,.drawer-backdrop{transition:none}}@media (max-width:640px){:host([position=left][size=large]) .drawer,:host([position=left][size=medium]) .drawer,:host([position=left][size=xl]) .drawer,:host([position=left][size=xxl]) .drawer,:host([position=left][size=xxxl]) .drawer,:host([position=right][size=large]) .drawer,:host([position=right][size=medium]) .drawer,:host([position=right][size=xl]) .drawer,:host([position=right][size=xxl]) .drawer,:host([position=right][size=xxxl]) .drawer{width:calc(100% - 2.5rem)}}.focus-trap-end,.focus-trap-start{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host([push-content]){--drawer-push-amount:0px}:host([push-content][position=left][open][size=small]){--drawer-push-amount:var(--drawer-width-small)}:host([push-content][position=left][open][size=medium]){--drawer-push-amount:var(--drawer-width-medium)}:host([push-content][position=left][open][size=large]){--drawer-push-amount:var(--drawer-width-large)}:host([push-content][position=left][open][size=xl]){--drawer-push-amount:var(--drawer-width-xl)}:host([push-content][position=left][open][size=xxl]){--drawer-push-amount:var(--drawer-width-xxl)}:host([push-content][position=left][open][size=xxxl]){--drawer-push-amount:var(--drawer-width-xxxl)}:host([push-content][position=left][open][size=full]){--drawer-push-amount:100vw}:host([push-content][position=left][open]:not([size])){--drawer-push-amount:var(--drawer-width-medium)}:host([push-content][position=right][open][size=small]){--drawer-push-amount:calc(-1 * var(--drawer-width-small))}:host([push-content][position=right][open][size=medium]){--drawer-push-amount:calc(-1 * var(--drawer-width-medium))}:host([push-content][position=right][open][size=large]){--drawer-push-amount:calc(-1 * var(--drawer-width-large))}:host([push-content][position=right][open][size=xl]){--drawer-push-amount:calc(-1 * var(--drawer-width-xl))}:host([push-content][position=right][open][size=xxl]){--drawer-push-amount:calc(-1 * var(--drawer-width-xxl))}:host([push-content][position=right][open][size=xxxl]){--drawer-push-amount:calc(-1 * var(--drawer-width-xxxl))}:host([push-content][position=right][open][size=full]){--drawer-push-amount:-100vw}:host([push-content][position=right][open]:not([size])){--drawer-push-amount:calc(-1 * var(--drawer-width-medium))}:host([push-content][position=top][open][size=small]){--drawer-push-amount:var(--drawer-height-small)}:host([push-content][position=top][open][size=medium]){--drawer-push-amount:var(--drawer-height-medium)}:host([push-content][position=top][open][size=large]){--drawer-push-amount:var(--drawer-height-large)}:host([push-content][position=top][open][size=xl]){--drawer-push-amount:var(--drawer-height-xl)}:host([push-content][position=top][open][size=xxl]){--drawer-push-amount:var(--drawer-height-xxl)}:host([push-content][position=top][open][size=xxxl]){--drawer-push-amount:var(--drawer-height-xxxl)}:host([push-content][position=top][open][size=full]){--drawer-push-amount:100vh}:host([push-content][position=top][open]:not([size])){--drawer-push-amount:var(--drawer-height-medium)}:host([push-content][position=bottom][open][size=small]){--drawer-push-amount:calc(-1 * var(--drawer-height-small))}:host([push-content][position=bottom][open][size=medium]){--drawer-push-amount:calc(-1 * var(--drawer-height-medium))}:host([push-content][position=bottom][open][size=large]){--drawer-push-amount:calc(-1 * var(--drawer-height-large))}:host([push-content][position=bottom][open][size=xl]){--drawer-push-amount:calc(-1 * var(--drawer-height-xl))}:host([push-content][position=bottom][open][size=xxl]){--drawer-push-amount:calc(-1 * var(--drawer-height-xxl))}:host([push-content][position=bottom][open][size=xxxl]){--drawer-push-amount:calc(-1 * var(--drawer-height-xxxl))}:host([push-content][position=bottom][open][size=full]){--drawer-push-amount:-100vh}:host([push-content][position=bottom][open]:not([size])){--drawer-push-amount:calc(-1 * var(--drawer-height-medium))}:host([inline]){position:static;width:auto;height:auto;pointer-events:auto;contain:layout style}:host([inline]) .drawer-backdrop{display:none}:host([inline]) .drawer{position:static;transform:none;opacity:1;box-shadow:none;z-index:auto;transition:none;border-right:1px solid var(--snice-color-border,rgb(229 231 235))}:host([inline]) .drawer,:host([inline][position=left]) .drawer{width:var(--drawer-width-medium);height:100%}:host([inline]:not([position])[size=small]) .drawer,:host([inline][position=left][size=small]) .drawer{width:var(--drawer-width-small)}:host([inline]:not([position])[size=large]) .drawer,:host([inline][position=left][size=large]) .drawer{width:var(--drawer-width-large)}:host([inline]:not([position])[size=xl]) .drawer,:host([inline][position=left][size=xl]) .drawer{width:var(--drawer-width-xl)}:host([inline]:not([position])[size=xxl]) .drawer,:host([inline][position=left][size=xxl]) .drawer{width:var(--drawer-width-xxl)}:host([inline]:not([position])[size=xxxl]) .drawer,:host([inline][position=left][size=xxxl]) .drawer{width:var(--drawer-width-xxxl)}:host([inline]:not([position])[size=full]) .drawer,:host([inline][position=left][size=full]) .drawer{width:100%}:host([inline][position=right]) .drawer{border-right:none;border-left:1px solid var(--snice-color-border,rgb(229 231 235));width:var(--drawer-width-medium);height:100%}:host([inline][position=right][size=small]) .drawer{width:var(--drawer-width-small)}:host([inline][position=right][size=large]) .drawer{width:var(--drawer-width-large)}:host([inline][position=right][size=xl]) .drawer{width:var(--drawer-width-xl)}:host([inline][position=right][size=xxl]) .drawer{width:var(--drawer-width-xxl)}:host([inline][position=right][size=xxxl]) .drawer{width:var(--drawer-width-xxxl)}:host([inline][position=right][size=full]) .drawer{width:100%}:host([inline][position=top]) .drawer{border-right:none;border-bottom:1px solid var(--snice-color-border,rgb(229 231 235));width:100%;height:var(--drawer-height-medium)}:host([inline][position=top][size=small]) .drawer{height:var(--drawer-height-small)}:host([inline][position=top][size=large]) .drawer{height:var(--drawer-height-large)}:host([inline][position=top][size=xl]) .drawer{height:var(--drawer-height-xl)}:host([inline][position=top][size=xxl]) .drawer{height:var(--drawer-height-xxl)}:host([inline][position=top][size=xxxl]) .drawer{height:var(--drawer-height-xxxl)}:host([inline][position=top][size=full]) .drawer{height:100%}:host([inline][position=bottom]) .drawer{border-right:none;border-top:1px solid var(--snice-color-border,rgb(229 231 235));width:100%;height:var(--drawer-height-medium)}:host([inline][position=bottom][size=small]) .drawer{height:var(--drawer-height-small)}:host([inline][position=bottom][size=large]) .drawer{height:var(--drawer-height-large)}:host([inline][position=bottom][size=xl]) .drawer{height:var(--drawer-height-xl)}:host([inline][position=bottom][size=xxl]) .drawer{height:var(--drawer-height-xxl)}:host([inline][position=bottom][size=xxxl]) .drawer{height:var(--drawer-height-xxxl)}:host([inline][position=bottom][size=full]) .drawer{height:100%}:host([inline]) .focus-trap-end,:host([inline]) .focus-trap-start{display:none}";
 
   let SniceDrawer = (() => {
       let _classDecorators = [snice.element('snice-drawer')];
@@ -82,6 +82,12 @@ var SniceDrawer = (function (exports, snice) {
       let _size_decorators;
       let _size_initializers = [];
       let _size_extraInitializers = [];
+      let _inline_decorators;
+      let _inline_initializers = [];
+      let _inline_extraInitializers = [];
+      let _breakpoint_decorators;
+      let _breakpoint_initializers = [];
+      let _breakpoint_extraInitializers = [];
       let _noBackdrop_decorators;
       let _noBackdrop_initializers = [];
       let _noBackdrop_extraInitializers = [];
@@ -103,6 +109,12 @@ var SniceDrawer = (function (exports, snice) {
       let _contained_decorators;
       let _contained_initializers = [];
       let _contained_extraInitializers = [];
+      let _noHeader_decorators;
+      let _noHeader_initializers = [];
+      let _noHeader_extraInitializers = [];
+      let _noFooter_decorators;
+      let _noFooter_initializers = [];
+      let _noFooter_extraInitializers = [];
       let _drawerElement_decorators;
       let _drawerElement_initializers = [];
       let _drawerElement_extraInitializers = [];
@@ -121,6 +133,7 @@ var SniceDrawer = (function (exports, snice) {
       let _render_decorators;
       let _styles_decorators;
       let _init_decorators;
+      let _handleBreakpointPropChange_decorators;
       let _handleOpenChange_decorators;
       let _handleBackdropClick_decorators;
       let _handleCloseClick_decorators;
@@ -134,14 +147,18 @@ var SniceDrawer = (function (exports, snice) {
               this.open = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _open_initializers, false));
               this.position = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _position_initializers, 'left'));
               this.size = (__runInitializers(this, _position_extraInitializers), __runInitializers(this, _size_initializers, 'medium'));
-              this.noBackdrop = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _noBackdrop_initializers, false));
+              this.inline = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _inline_initializers, false));
+              this.breakpoint = (__runInitializers(this, _inline_extraInitializers), __runInitializers(this, _breakpoint_initializers, 0));
+              this.noBackdrop = (__runInitializers(this, _breakpoint_extraInitializers), __runInitializers(this, _noBackdrop_initializers, false));
               this.noBackdropDismiss = (__runInitializers(this, _noBackdrop_extraInitializers), __runInitializers(this, _noBackdropDismiss_initializers, false));
               this.noEscapeDismiss = (__runInitializers(this, _noBackdropDismiss_extraInitializers), __runInitializers(this, _noEscapeDismiss_initializers, false));
               this.noFocusTrap = (__runInitializers(this, _noEscapeDismiss_extraInitializers), __runInitializers(this, _noFocusTrap_initializers, false));
               this.persistent = (__runInitializers(this, _noFocusTrap_extraInitializers), __runInitializers(this, _persistent_initializers, false));
               this.pushContent = (__runInitializers(this, _persistent_extraInitializers), __runInitializers(this, _pushContent_initializers, false));
               this.contained = (__runInitializers(this, _pushContent_extraInitializers), __runInitializers(this, _contained_initializers, false));
-              this.drawerElement = (__runInitializers(this, _contained_extraInitializers), __runInitializers(this, _drawerElement_initializers, void 0));
+              this.noHeader = (__runInitializers(this, _contained_extraInitializers), __runInitializers(this, _noHeader_initializers, false));
+              this.noFooter = (__runInitializers(this, _noHeader_extraInitializers), __runInitializers(this, _noFooter_initializers, false));
+              this.drawerElement = (__runInitializers(this, _noFooter_extraInitializers), __runInitializers(this, _drawerElement_initializers, void 0));
               this.backdropElement = (__runInitializers(this, _drawerElement_extraInitializers), __runInitializers(this, _backdropElement_initializers, void 0));
               this.closeButton = (__runInitializers(this, _backdropElement_extraInitializers), __runInitializers(this, _closeButton_initializers, void 0));
               this.focusTrapStart = (__runInitializers(this, _closeButton_extraInitializers), __runInitializers(this, _focusTrapStart_initializers, void 0));
@@ -156,6 +173,8 @@ var SniceDrawer = (function (exports, snice) {
               _open_decorators = [snice.property({ type: Boolean, })];
               _position_decorators = [snice.property({})];
               _size_decorators = [snice.property({})];
+              _inline_decorators = [snice.property({ type: Boolean, })];
+              _breakpoint_decorators = [snice.property({ type: Number })];
               _noBackdrop_decorators = [snice.property({ type: Boolean, attribute: 'no-backdrop', })];
               _noBackdropDismiss_decorators = [snice.property({ type: Boolean, attribute: 'no-backdrop-dismiss', })];
               _noEscapeDismiss_decorators = [snice.property({ type: Boolean, attribute: 'no-escape-dismiss', })];
@@ -163,6 +182,8 @@ var SniceDrawer = (function (exports, snice) {
               _persistent_decorators = [snice.property({ type: Boolean, })];
               _pushContent_decorators = [snice.property({ type: Boolean, attribute: 'push-content', })];
               _contained_decorators = [snice.property({ type: Boolean, })];
+              _noHeader_decorators = [snice.property({ type: Boolean, attribute: 'no-header' })];
+              _noFooter_decorators = [snice.property({ type: Boolean, attribute: 'no-footer' })];
               _drawerElement_decorators = [snice.query('.drawer')];
               _backdropElement_decorators = [snice.query('.drawer-backdrop')];
               _closeButton_decorators = [snice.query('.drawer-close')];
@@ -171,6 +192,7 @@ var SniceDrawer = (function (exports, snice) {
               _render_decorators = [snice.render()];
               _styles_decorators = [snice.styles()];
               _init_decorators = [snice.ready()];
+              _handleBreakpointPropChange_decorators = [snice.watch('breakpoint')];
               _handleOpenChange_decorators = [snice.watch('open')];
               _handleBackdropClick_decorators = [snice.on('click', { target: '.drawer-backdrop' })];
               _handleCloseClick_decorators = [snice.on('click', { target: '.drawer-close' })];
@@ -180,6 +202,7 @@ var SniceDrawer = (function (exports, snice) {
               __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleBreakpointPropChange_decorators, { kind: "method", name: "handleBreakpointPropChange", static: false, private: false, access: { has: obj => "handleBreakpointPropChange" in obj, get: obj => obj.handleBreakpointPropChange }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _handleOpenChange_decorators, { kind: "method", name: "handleOpenChange", static: false, private: false, access: { has: obj => "handleOpenChange" in obj, get: obj => obj.handleOpenChange }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _handleBackdropClick_decorators, { kind: "method", name: "handleBackdropClick", static: false, private: false, access: { has: obj => "handleBackdropClick" in obj, get: obj => obj.handleBackdropClick }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _handleCloseClick_decorators, { kind: "method", name: "handleCloseClick", static: false, private: false, access: { has: obj => "handleCloseClick" in obj, get: obj => obj.handleCloseClick }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -189,6 +212,8 @@ var SniceDrawer = (function (exports, snice) {
               __esDecorate(null, null, _open_decorators, { kind: "field", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
               __esDecorate(null, null, _position_decorators, { kind: "field", name: "position", static: false, private: false, access: { has: obj => "position" in obj, get: obj => obj.position, set: (obj, value) => { obj.position = value; } }, metadata: _metadata }, _position_initializers, _position_extraInitializers);
               __esDecorate(null, null, _size_decorators, { kind: "field", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+              __esDecorate(null, null, _inline_decorators, { kind: "field", name: "inline", static: false, private: false, access: { has: obj => "inline" in obj, get: obj => obj.inline, set: (obj, value) => { obj.inline = value; } }, metadata: _metadata }, _inline_initializers, _inline_extraInitializers);
+              __esDecorate(null, null, _breakpoint_decorators, { kind: "field", name: "breakpoint", static: false, private: false, access: { has: obj => "breakpoint" in obj, get: obj => obj.breakpoint, set: (obj, value) => { obj.breakpoint = value; } }, metadata: _metadata }, _breakpoint_initializers, _breakpoint_extraInitializers);
               __esDecorate(null, null, _noBackdrop_decorators, { kind: "field", name: "noBackdrop", static: false, private: false, access: { has: obj => "noBackdrop" in obj, get: obj => obj.noBackdrop, set: (obj, value) => { obj.noBackdrop = value; } }, metadata: _metadata }, _noBackdrop_initializers, _noBackdrop_extraInitializers);
               __esDecorate(null, null, _noBackdropDismiss_decorators, { kind: "field", name: "noBackdropDismiss", static: false, private: false, access: { has: obj => "noBackdropDismiss" in obj, get: obj => obj.noBackdropDismiss, set: (obj, value) => { obj.noBackdropDismiss = value; } }, metadata: _metadata }, _noBackdropDismiss_initializers, _noBackdropDismiss_extraInitializers);
               __esDecorate(null, null, _noEscapeDismiss_decorators, { kind: "field", name: "noEscapeDismiss", static: false, private: false, access: { has: obj => "noEscapeDismiss" in obj, get: obj => obj.noEscapeDismiss, set: (obj, value) => { obj.noEscapeDismiss = value; } }, metadata: _metadata }, _noEscapeDismiss_initializers, _noEscapeDismiss_extraInitializers);
@@ -196,6 +221,8 @@ var SniceDrawer = (function (exports, snice) {
               __esDecorate(null, null, _persistent_decorators, { kind: "field", name: "persistent", static: false, private: false, access: { has: obj => "persistent" in obj, get: obj => obj.persistent, set: (obj, value) => { obj.persistent = value; } }, metadata: _metadata }, _persistent_initializers, _persistent_extraInitializers);
               __esDecorate(null, null, _pushContent_decorators, { kind: "field", name: "pushContent", static: false, private: false, access: { has: obj => "pushContent" in obj, get: obj => obj.pushContent, set: (obj, value) => { obj.pushContent = value; } }, metadata: _metadata }, _pushContent_initializers, _pushContent_extraInitializers);
               __esDecorate(null, null, _contained_decorators, { kind: "field", name: "contained", static: false, private: false, access: { has: obj => "contained" in obj, get: obj => obj.contained, set: (obj, value) => { obj.contained = value; } }, metadata: _metadata }, _contained_initializers, _contained_extraInitializers);
+              __esDecorate(null, null, _noHeader_decorators, { kind: "field", name: "noHeader", static: false, private: false, access: { has: obj => "noHeader" in obj, get: obj => obj.noHeader, set: (obj, value) => { obj.noHeader = value; } }, metadata: _metadata }, _noHeader_initializers, _noHeader_extraInitializers);
+              __esDecorate(null, null, _noFooter_decorators, { kind: "field", name: "noFooter", static: false, private: false, access: { has: obj => "noFooter" in obj, get: obj => obj.noFooter, set: (obj, value) => { obj.noFooter = value; } }, metadata: _metadata }, _noFooter_initializers, _noFooter_extraInitializers);
               __esDecorate(null, null, _drawerElement_decorators, { kind: "field", name: "drawerElement", static: false, private: false, access: { has: obj => "drawerElement" in obj, get: obj => obj.drawerElement, set: (obj, value) => { obj.drawerElement = value; } }, metadata: _metadata }, _drawerElement_initializers, _drawerElement_extraInitializers);
               __esDecorate(null, null, _backdropElement_decorators, { kind: "field", name: "backdropElement", static: false, private: false, access: { has: obj => "backdropElement" in obj, get: obj => obj.backdropElement, set: (obj, value) => { obj.backdropElement = value; } }, metadata: _metadata }, _backdropElement_initializers, _backdropElement_extraInitializers);
               __esDecorate(null, null, _closeButton_decorators, { kind: "field", name: "closeButton", static: false, private: false, access: { has: obj => "closeButton" in obj, get: obj => obj.closeButton, set: (obj, value) => { obj.closeButton = value; } }, metadata: _metadata }, _closeButton_initializers, _closeButton_extraInitializers);
@@ -213,26 +240,30 @@ var SniceDrawer = (function (exports, snice) {
       <div class="drawer" role="dialog" aria-modal="true" tabindex="-1" part="base">
         <span class="focus-trap-start" tabindex="0"></span>
 
-        <div class="drawer-header" part="header">
-          <h2 class="drawer-title" part="title">
-            <slot name="title"></slot>
-          </h2>
-          <if ${!this.persistent}>
-            <button class="drawer-close" type="button" aria-label="Close" part="close">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M18 6L6 18M6 6l12 12"/>
-              </svg>
-            </button>
-          </if>
-        </div>
+        <if ${!this.noHeader}>
+          <div class="drawer-header" part="header">
+            <h2 class="drawer-title" part="title">
+              <slot name="title"></slot>
+            </h2>
+            <if ${!this.persistent}>
+              <button class="drawer-close" type="button" aria-label="Close" part="close">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M18 6L6 18M6 6l12 12"/>
+                </svg>
+              </button>
+            </if>
+          </div>
+        </if>
 
         <div class="drawer-body" part="body">
           <slot></slot>
         </div>
 
-        <div class="drawer-footer" part="footer">
-          <slot name="footer"></slot>
-        </div>
+        <if ${!this.noFooter}>
+          <div class="drawer-footer" part="footer">
+            <slot name="footer"></slot>
+          </div>
+        </if>
 
         <span class="focus-trap-end" tabindex="0"></span>
       </div>
@@ -251,17 +282,90 @@ var SniceDrawer = (function (exports, snice) {
               }
               this.setAttribute('role', 'complementary');
               this.setAttribute('aria-hidden', String(!this.open));
+              // Set up breakpoint listener if specified
+              if (this.breakpoint > 0) {
+                  this.setupBreakpointListener();
+              }
               // Pre-set transition for push content mode to avoid jump on first use
-              if (this.pushContent) {
+              if (this.pushContent && !this.isInlineActive()) {
                   const mainContent = document.querySelector('main') || document.body;
                   if (mainContent && mainContent !== document.body) {
                       mainContent.style.transition = 'margin 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
                   }
               }
-              if (this.open) {
+              if (this.open && !this.isInlineActive()) {
                   this.handleOpen();
               }
           }
+          /** Returns true if the drawer is currently in inline mode (either via `inline` prop or active breakpoint). */
+          isInlineActive() {
+              return this.inline || this.hasAttribute('inline');
+          }
+          setupBreakpointListener() {
+              // Tear down existing listener
+              this.teardownBreakpointListener();
+              if (this.breakpoint <= 0)
+                  return;
+              this.breakpointQuery = window.matchMedia(`(min-width: ${this.breakpoint}px)`);
+              this.boundBreakpointHandler = (e) => this.handleBreakpointChange(e.matches);
+              // Apply initial state
+              this.handleBreakpointChange(this.breakpointQuery.matches);
+              this.breakpointQuery.addEventListener('change', this.boundBreakpointHandler);
+          }
+          teardownBreakpointListener() {
+              if (this.breakpointQuery && this.boundBreakpointHandler) {
+                  this.breakpointQuery.removeEventListener('change', this.boundBreakpointHandler);
+                  this.breakpointQuery = undefined;
+                  this.boundBreakpointHandler = undefined;
+              }
+          }
+          handleBreakpointChange(matches) {
+              const wasInline = this.isInlineActive();
+              if (matches) {
+                  // Above breakpoint → inline mode
+                  this.setAttribute('inline', '');
+                  // If was overlay and open, tear down overlay behaviors
+                  if (!wasInline && this.open) {
+                      this.teardownOverlayBehaviors();
+                  }
+              }
+              else {
+                  // Below breakpoint → overlay mode
+                  this.removeAttribute('inline');
+                  // If was inline and now overlay, re-apply overlay behaviors if open
+                  if (wasInline && this.open) {
+                      this.handleOpen();
+                  }
+              }
+          }
+          teardownOverlayBehaviors() {
+              // Remove escape handler
+              if (this.boundHandleEscape) {
+                  document.removeEventListener('keydown', this.boundHandleEscape);
+                  this.boundHandleEscape = undefined;
+              }
+              // Reset push content
+              if (this.pushContent) {
+                  const mainContent = document.querySelector('main') || document.body;
+                  if (mainContent && mainContent !== document.body) {
+                      mainContent.style.marginLeft = '';
+                      mainContent.style.marginTop = '';
+                  }
+              }
+          }
+          handleBreakpointPropChange() {
+              if (this.breakpoint > 0) {
+                  this.setupBreakpointListener();
+              }
+              else {
+                  this.teardownBreakpointListener();
+                  // If breakpoint removed, also remove inline if it was set by breakpoint
+                  // (user's explicit `inline` prop is separate)
+                  if (!this.inline) {
+                      this.removeAttribute('inline');
+                  }
+              }
+          }
           handleOpenChange() {
               // Prevent duplicate handling
               if (this._isHandlingOpenChange)
@@ -269,6 +373,9 @@ var SniceDrawer = (function (exports, snice) {
               this._isHandlingOpenChange = true;
               try {
                   this.setAttribute('aria-hidden', String(!this.open));
+                  // In inline mode, skip overlay behaviors entirely
+                  if (this.isInlineActive())
+                      return;
                   if (this.open) {
                       this.handleOpen();
                   }
@@ -421,7 +528,7 @@ var SniceDrawer = (function (exports, snice) {
               if (this.boundHandleEscape) {
                   document.removeEventListener('keydown', this.boundHandleEscape);
               }
-              // REMOVED: No longer manipulating document.body.style.overflow
+              this.teardownBreakpointListener();
           }
           // Public API
           show() {