@tapestry-ui/modal 0.1.0 → 0.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 A WCAG 2.1 AA modal panel for **Preact**, built on the native
 `<dialog>` element. Pinned title, pinned header, **one scrollable
-middle**, pinned footer — [@tapestry-ui/drawer](https://www.npmjs.com/package/@tapestry-ui/drawer)'s
+middle**, pinned footer — [@tapestry-ui/accordion](https://www.npmjs.com/package/@tapestry-ui/accordion)'s
 container contract shipped as a component instead of a README warning.
 
 ```sh
@@ -23,7 +23,7 @@ const [open, setOpen] = useState(false);
   footer="I closes the bundle"   /* pinned below it                */
 >
   <TokenList />                  {/* THE scrollable middle          */}
-  <Drawer summary="SOUND">…</Drawer>
+  <Disclosure summary="SOUND">…</Disclosure>
 </Modal>
 ```
 

package/dist/modal.js

@@ -65,7 +65,7 @@ export function Modal(props) {
     };
     if (!props.open)
         return null;
-    return (_jsxs("dialog", { ref: dialogRef, id: id, class: cx('tui-modal', props.class), "data-part": "root", "data-modal": modal ? '' : undefined, "aria-labelledby": props.title != null ? titleId : undefined, "aria-label": props.title == null ? props.label : undefined, onCancel: onCancel, onClick: onBackdropClick, children: [props.showClose !== false && (_jsx("button", { type: "button", class: cx('tui-modal-close', props.closeClass), "data-part": "close", "aria-label": props.closeLabel ?? 'Close', onClick: () => props.onClose(), children: "\u00D7" })), props.title != null && (_jsx("div", { id: titleId, class: cx('tui-modal-title', props.titleClass), "data-part": "title", children: props.title })), props.header != null && (_jsx("div", { class: cx('tui-modal-header', props.headerClass), "data-part": "header", children: props.header })), _jsx("div", { class: cx('tui-modal-content', props.contentClass), "data-part": "content", children: props.children }), props.footer != null && (_jsx("footer", { class: cx('tui-modal-footer', props.footerClass), "data-part": "footer", children: props.footer }))] }));
+    return (_jsxs("dialog", { ref: dialogRef, id: id, class: cx('tui-modal', props.class), "data-part": "root", "data-modal": modal ? '' : undefined, "aria-labelledby": props.title != null ? titleId : undefined, "aria-label": props.title == null ? props.label : undefined, onCancel: onCancel, onClick: onBackdropClick, children: [props.showClose !== false && (_jsx("button", { type: "button", class: cx('tui-modal__close', props.closeClass), "data-part": "close", "aria-label": props.closeLabel ?? 'Close', onClick: () => props.onClose(), children: "\u00D7" })), props.title != null && (_jsx("div", { id: titleId, class: cx('tui-modal__title', props.titleClass), "data-part": "title", children: props.title })), props.header != null && (_jsx("div", { class: cx('tui-modal__header', props.headerClass), "data-part": "header", children: props.header })), _jsx("div", { class: cx('tui-modal__content', props.contentClass), "data-part": "content", children: props.children }), props.footer != null && (_jsx("footer", { class: cx('tui-modal__footer', props.footerClass), "data-part": "footer", children: props.footer }))] }));
 }
 function cx(...parts) {
     return parts.filter(Boolean).join(' ');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tapestry-ui/modal",
-  "version": "0.1.0",
-  "description": "A WCAG 2.1 AA modal panel for Preact on the native <dialog> element — pinned header, ONE scrollable middle, pinned footer. The drawer's container contract, shipped as a component instead of a README warning.",
+  "version": "0.2.0",
+  "description": "A WCAG 2.1 AA modal panel for Preact on the native <dialog> element \u2014 pinned header, ONE scrollable middle, pinned footer. The drawer's container contract, shipped as a component instead of a README warning.",
   "license": "MIT",
   "author": "Brandon Minton",
   "type": "module",
@@ -15,6 +15,9 @@
     },
     "./styles.css": "./styles.css"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "files": [
     "dist",
     "styles.css",

package/styles.css

@@ -4,7 +4,7 @@
    (the dialog's UA background is the browser's, not ours).
 
    THE SKELETON IS THE POINT: title, header and footer are pinned;
-   .tui-modal-content is the ONE region that grows and scrolls. That
+   .tui-modal__content is the ONE region that grows and scrolls. That
    flex/min-height/overflow trio is the container contract the drawer's
    README warns about — here it is load-bearing, not advice. */
 .tui-modal {
@@ -20,13 +20,13 @@
 .tui-modal::backdrop {
   background: var(--tui-modal-backdrop, rgba(0, 0, 0, 0.4));
 }
-.tui-modal-content {
+.tui-modal__content {
   flex: 1 1 auto;          /* the ONE scrollable middle…        */
   min-height: 0;           /* …allowed to actually shrink…      */
   overflow-y: auto;        /* …owns ALL the growth. THE CONTRACT. */
   overscroll-behavior: contain;
 }
-.tui-modal-close {
+.tui-modal__close {
   position: absolute;
   top: var(--tui-modal-close-inset, 0.4em);
   right: var(--tui-modal-close-inset, 0.4em);
@@ -42,12 +42,12 @@
   opacity: 0.7;
   line-height: 1;
 }
-.tui-modal-close:hover { opacity: 1; }
-.tui-modal-close:focus-visible,
+.tui-modal__close:hover { opacity: 1; }
+.tui-modal__close:focus-visible,
 .tui-modal :focus-visible {
   outline: var(--tui-modal-focus, 2px solid currentColor);
   outline-offset: 2px;
 }
-.tui-modal-footer { flex: none; }
-.tui-modal-title,
-.tui-modal-header { flex: none; }
+.tui-modal__footer { flex: none; }
+.tui-modal__title,
+.tui-modal__header { flex: none; }