@boostdev/design-system-components 1.2.0 → 1.2.1

package/dist/web-components/{chunk-DI46Q2EA.js → chunk-OCODKRVZ.js}

@@ -14,85 +14,65 @@ var BdsDrawer = class extends i2 {
 
     .drawer {
       position: fixed;
-      inset: 0;
+      inset-block: 0;
+      inset-inline: auto 0;
+      inline-size: min(28rem, 90vw);
+      max-inline-size: 100vw;
+      block-size: 100dvh;
+      max-block-size: 100dvh;
       margin: 0;
       padding: 0;
-      inline-size: 100%;
-      max-inline-size: 100%;
-      block-size: 100%;
-      max-block-size: 100%;
-      border: none;
-      background: transparent;
-      overflow: hidden;
-      transition:
-        display var(--bds-animation_transition-duration) allow-discrete,
-        overlay var(--bds-animation_transition-duration) allow-discrete;
-    }
-
-    .drawer::backdrop {
-      background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
-      backdrop-filter: blur(3px);
-      transition:
-        display var(--bds-animation_transition-duration) allow-discrete,
-        overlay var(--bds-animation_transition-duration) allow-discrete,
-        background-color var(--bds-animation_transition-duration) var(--bds-animation_easing),
-        backdrop-filter var(--bds-animation_transition-duration) var(--bds-animation_easing);
-    }
-
-    @starting-style {
-      .drawer[open]::backdrop {
-        background-color: transparent;
-        backdrop-filter: blur(0);
-      }
-    }
-
-    .panel {
-      position: absolute;
-      inset-block: 0;
       display: flex;
       flex-direction: column;
-      inline-size: min(28rem, 90vw);
-      block-size: 100%;
       background-color: var(--drawer_color, var(--bds-color_bg));
       color: var(--drawer_on-color, var(--bds-color_on-bg));
+      border: none;
       box-shadow: var(--bds-shadow_xl);
       overflow: hidden;
       translate: 100% 0;
-      transition: translate var(--bds-animation_transition-duration) var(--bds-animation_easing);
-    }
-
-    :host([side='right']) .panel {
-      inset-inline-end: 0;
-      translate: 100% 0;
+      transition:
+        translate var(--bds-animation_transition-duration) var(--bds-animation_easing),
+        display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
+        overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
     }
 
-    :host([side='left']) .panel,
-    :host(:not([side])) .panel {
-      inset-inline-start: 0;
+    :host([side='left']) .drawer {
+      inset-inline: 0 auto;
       translate: -100% 0;
     }
 
-    .drawer[open] .panel {
+    .drawer[open] {
       translate: 0 0;
     }
 
-    :host([side='right']) .drawer[open] .panel,
-    :host(:not([side])) .drawer[open] .panel {
-      animation: bds-drawer-slide-right var(--bds-animation_transition-duration) var(--bds-animation_easing) both;
+    @starting-style {
+      .drawer[open] {
+        translate: 100% 0;
+      }
+
+      :host([side='left']) .drawer[open] {
+        translate: -100% 0;
+      }
     }
 
-    :host([side='left']) .drawer[open] .panel {
-      animation: bds-drawer-slide-left var(--bds-animation_transition-duration) var(--bds-animation_easing) both;
+    .drawer::backdrop {
+      background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
+      backdrop-filter: blur(3px);
+      opacity: 0;
+      transition:
+        opacity var(--bds-animation_transition-duration) var(--bds-animation_easing),
+        display var(--bds-animation_transition-duration) allow-discrete,
+        overlay var(--bds-animation_transition-duration) allow-discrete;
     }
 
-    @keyframes bds-drawer-slide-right {
-      from { translate: 100% 0; }
-      to { translate: 0 0; }
+    .drawer[open]::backdrop {
+      opacity: 1;
     }
 
-    @keyframes bds-drawer-slide-left {
-      from { translate: -100% 0; }
-      to { translate: 0 0; }
+    @starting-style {
+      .drawer[open]::backdrop {
+        opacity: 0;
+      }
     }
 
     .header {
@@ -147,16 +127,9 @@ var BdsDrawer = class extends i2 {
 
     @media (prefers-reduced-motion: reduce) {
       .drawer,
-      .drawer::backdrop,
-      .panel {
+      .drawer::backdrop {
         transition: none;
       }
-
-      :host([side='right']) .drawer[open] .panel,
-      :host(:not([side])) .drawer[open] .panel,
-      :host([side='left']) .drawer[open] .panel {
-        animation: none;
-      }
     }
   `;
   static properties = {
@@ -214,7 +187,11 @@ var BdsDrawer = class extends i2 {
     this.dispatchEvent(new CustomEvent("bds-close", { bubbles: true, composed: true }));
   }
   _handleBackdropClick(e) {
-    if (e.target === this._dialog) this._closeDrawer();
+    const dialog = this._dialog;
+    if (!dialog) return;
+    const rect = dialog.getBoundingClientRect();
+    const outside = e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom;
+    if (outside) this._closeDrawer();
   }
   _handleCancel(e) {
     e.preventDefault();
@@ -249,23 +226,21 @@ var BdsDrawer = class extends i2 {
         @cancel=${this._handleCancel}
         @keydown=${this._handleKeydown}
       >
-        <div class="panel">
-          <div class="header">
-            <span class="title"><slot name="title"></slot></span>
-            <button
-              type="button"
-              class="close-button"
-              aria-label="Close drawer"
-              @click=${this._closeDrawer}
-            >
-              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-          <div class="body">
-            <slot></slot>
-          </div>
+        <div class="header">
+          <span class="title"><slot name="title"></slot></span>
+          <button
+            type="button"
+            class="close-button"
+            aria-label="Close drawer"
+            @click=${this._closeDrawer}
+          >
+            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div class="body">
+          <slot></slot>
         </div>
       </dialog>
     `;