snice 4.24.0 → 4.25.0

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

@@ -1,6 +1,6 @@
 /*!
- * snice v4.23.0
- * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * snice v4.25.0
+ * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.
  */

package/dist/cdn/diff/snice-diff.min.js

@@ -1,6 +1,6 @@
 /*!
- * snice v4.23.0
- * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * snice v4.25.0
+ * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.
  */

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

@@ -1,6 +1,6 @@
 /*!
- * snice v4.23.0
- * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * snice v4.25.0
+ * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.
  */

package/dist/cdn/divider/snice-divider.min.js

@@ -1,6 +1,6 @@
 /*!
- * snice v4.23.0
- * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * snice v4.25.0
+ * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.
  */

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

@@ -1,6 +1,6 @@
 /*!
- * snice v4.23.0
- * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * snice v4.25.0
+ * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.
  */

package/dist/cdn/doc/snice-doc.min.js

@@ -1,6 +1,6 @@
 /*!
- * snice v4.23.0
- * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * snice v4.25.0
+ * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.
  */

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

@@ -1,6 +1,6 @@
 /*!
- * snice v4.23.0
- * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * snice v4.25.0
+ * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.
  */

package/dist/cdn/draw/snice-draw.min.js

@@ -1,6 +1,6 @@
 /*!
- * snice v4.23.0
- * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * snice v4.25.0
+ * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.
  */

package/dist/cdn/drawer/README.md

@@ -11,7 +11,7 @@ CDN build of the Snice drawer component. Requires the Snice runtime (`snice-runt
 ```
 
 ## Size
-- Minified: 28.0 KB
+- Minified: 28.1 KB
 - Gzipped: 6.1 KB
 
 ## Theme

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

@@ -1,6 +1,6 @@
 /*!
- * snice v4.23.0
- * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * snice v4.25.0
+ * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (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))}: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}";
+  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;z-index:var(--drawer-z-index);isolation:isolate;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif)}: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}: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')];
@@ -475,15 +475,21 @@ var SniceDrawer = (function (exports, snice) {
                   if (this.open) {
                       // Use CSS custom property that's calculated in CSS based on size/position
                       const amount = getComputedStyle(this).getPropertyValue('--drawer-push-amount');
-                      const property = this.position === 'left' || this.position === 'right'
-                          ? 'marginLeft'
-                          : 'marginTop';
+                      const propertyMap = {
+                          left: 'marginLeft',
+                          right: 'marginRight',
+                          top: 'marginTop',
+                          bottom: 'marginBottom'
+                      };
+                      const property = propertyMap[this.position] || 'marginLeft';
                       mainContent.style[property] = amount || '0px';
                   }
                   else {
                       // Reset margins
                       mainContent.style.marginLeft = '';
+                      mainContent.style.marginRight = '';
                       mainContent.style.marginTop = '';
+                      mainContent.style.marginBottom = '';
                   }
               }
           }