@expressivecss/expressive 0.1.0 → 0.2.0

package/dist/types/behaviors/dialogs.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Light-dismiss for native `<dialog>` elements.
+ *
+ * `showModal()` does not close on a backdrop tap. A naive `click` listener
+ * on the dialog (where `::backdrop` events retarget) also fires when the
+ * user starts a gesture on the dialog and releases on the scrim — selecting
+ * text, missing a button, dragging a thumb. Both ends of the pointer
+ * gesture must land outside the dialog's border box.
+ *
+ * Default is on. Opt out with `closedby="none"` or `closedby="closerequest"`.
+ * If the browser already honours `closedby="any"`, we leave that alone.
+ */
+export declare class Dialogs {
+    private static _down;
+    static Init(): void;
+    static _onPointerDown(event: PointerEvent): void;
+    static _onPointerUp(event: PointerEvent): void;
+    static _onPointerCancel(): void;
+    /** Backdrop hits retarget to the dialog itself, never a child. */
+    private static _backdropDialog;
+    private static _outside;
+    private static _isPrimaryPress;
+    private static _lightDismissible;
+    private static _closedBy;
+}

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
 export * from './components';
+export { Dialogs } from './behaviors/dialogs';
 export { Forms } from './behaviors/forms';
 export { Waves } from './behaviors/waves';
 export { AutoInit } from './components/registry';
 export type { AutoInitOptions } from './components/registry';
-export declare const version = "0.1.0";
+export declare const version = "0.2.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expressivecss/expressive",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "ExpressiveCSS - a Material Design 3 front-end framework.",
   "license": "MIT",
   "author": "BaezFJ <baezdevs@gmail.com>",

package/src/sass/components/_modal.scss

@@ -13,7 +13,7 @@
 //   body         body-medium / on-surface-variant
 //   icon         24dp, on-secondary
 //   actions      end-aligned, 8dp gap
-//   scrim        32%
+//   scrim        32% + 12px blur
 //   padding      24dp
 
 dialog,
@@ -22,6 +22,8 @@ dialog,
   --md-comp-basic-dialog-container-shape: 28px;
   --md-comp-basic-dialog-container-min-width: 280px;
   --md-comp-basic-dialog-container-max-width: 560px;
+  --md-comp-basic-dialog-sheet-width: 400px;
+  --md-comp-basic-dialog-scrim-blur: 12px;
 
   box-sizing: border-box;
   width: min(var(--md-comp-basic-dialog-container-max-width), calc(100% - 48px));
@@ -38,14 +40,23 @@ dialog,
 
   &::backdrop {
     background-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
+    backdrop-filter: blur(var(--md-comp-basic-dialog-scrim-blur));
   }
 }
 
+// showModal() puts the dialog in the top layer but does not lock the
+// document scroller. :modal is the modal-only match — a modeless
+// dialog.show() must not freeze the page.
+html:has(dialog:modal) {
+  overflow: hidden;
+}
+
 dialog[open],
 .modal[open] {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  overscroll-behavior: contain;
 }
 
 // Optional leading icon (M3 basic dialog).
@@ -84,6 +95,7 @@ dialog > div,
   flex: 1 1 auto;
   min-height: 0;
   overflow: auto;
+  overscroll-behavior: contain;
   margin: 0;
   padding: 0 24px 16px;
   font-family: var(--md-sys-typescale-body-medium-font-family-name);
@@ -119,9 +131,13 @@ dialog > :is(form, nav):last-child,
 }
 
 // Full-screen (M3). Takes the viewport; no corners.
+// UA `dialog:modal` sets max-width: calc(100% - 2em - 6px). Without
+// clearing it, width: 100% is capped and a strip of scrim shows on the
+// right. Bottom sheet already overrides this.
 dialog.max,
 .modal.max {
   width: 100%;
+  max-width: none;
   height: 100%;
   min-width: 0;
   max-height: none;
@@ -129,8 +145,9 @@ dialog.max,
   border-radius: 0;
 }
 
-// Bottom sheet. M3 sheets are a sibling component; this keeps the existing
-// Expressive helper and BeerCSS's `bottom` name.
+// Sheets. Docked to one edge; the inner corners keep the dialog shape,
+// the edge against the viewport is square. `left` / `right` also float
+// via the helper utilities (`!important`), so sheets reset that.
 dialog.bottom,
 dialog.bottom-sheet,
 .modal.bottom-sheet {
@@ -142,3 +159,50 @@ dialog.bottom-sheet,
   border-radius: var(--md-comp-basic-dialog-container-shape)
     var(--md-comp-basic-dialog-container-shape) 0 0;
 }
+
+dialog.top,
+dialog.top-sheet,
+.modal.top-sheet {
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+  max-height: 50%;
+  margin: 0 0 auto;
+  border-radius: 0 0 var(--md-comp-basic-dialog-container-shape)
+    var(--md-comp-basic-dialog-container-shape);
+}
+
+dialog.left,
+dialog.left-sheet,
+.modal.left-sheet,
+dialog.right,
+dialog.right-sheet,
+.modal.right-sheet {
+  float: none !important;
+  width: min(var(--md-comp-basic-dialog-sheet-width), 85%);
+  max-width: none;
+  height: auto;
+  max-height: none;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  inset-block: 0;
+}
+
+dialog.left,
+dialog.left-sheet,
+.modal.left-sheet {
+  inset-inline-start: 0;
+  inset-inline-end: auto;
+  border-radius: 0 var(--md-comp-basic-dialog-container-shape)
+    var(--md-comp-basic-dialog-container-shape) 0;
+}
+
+dialog.right,
+dialog.right-sheet,
+.modal.right-sheet {
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+  border-radius: var(--md-comp-basic-dialog-container-shape) 0 0
+    var(--md-comp-basic-dialog-container-shape);
+}

package/src/sass/utilities/_helpers.scss

@@ -39,15 +39,25 @@ video.responsive-video {
   height: auto;
 }
 
+// 12px matches the card container shape. .circle is more specific on
+// `img.responsive-img.circle` only if we exclude it here — otherwise this
+// element+class pair would beat `.circle` and square the disc off.
+img.responsive-img:not(.circle),
+video.responsive-video {
+  border-radius: 12px;
+}
+
 .video-container {
   position: relative;
   aspect-ratio: 16 / 9;   // was padding-bottom: 56.25% + height: 0
   overflow: hidden;
+  border-radius: 12px;
 
   iframe, object, embed {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
+    border: 0;
   }
 }