@mlola-ui/behavior 1.0.5 → 1.0.7

package/README.md

@@ -33,6 +33,12 @@ npm install @mlola-ui/behavior
 It is idempotent, so it is safe to call after a framework re-render, a turbo
 navigation, or an htmx swap.
 
+## Examples
+
+`examples/` holds the markup for each behavior, one file per behavior, as
+it should be written by hand. They are the markup the browser suite runs in
+Chromium, Firefox and WebKit, and the markup the component docs show.
+
 ## Implemented behaviors
 
 `accordion`, `tabs`, `dropdown-menu`, `select`, `modal`, `sheet`, `tooltip`,

package/examples/accordion.html

@@ -0,0 +1,24 @@
+<div class="ml-accordion" data-ml="accordion">
+  <article class="ml-accordion-item" data-state="open">
+    <h3 class="ml-accordion-heading">
+      <button id="t1" class="ml-accordion-trigger" data-state="open" aria-expanded="true" aria-controls="p1">
+        <span>Is there a free plan?</span>
+        <svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg>
+      </button>
+    </h3>
+    <div id="p1" class="ml-accordion-panel" role="region" aria-labelledby="t1" data-state="open">
+      <p>Yes. The components in the open-source registry are free forever.</p>
+    </div>
+  </article>
+  <article class="ml-accordion-item" data-state="closed">
+    <h3 class="ml-accordion-heading">
+      <button id="t2" class="ml-accordion-trigger" data-state="closed" aria-expanded="false" aria-controls="p2">
+        <span>Can I change themes later?</span>
+        <svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg>
+      </button>
+    </h3>
+    <div id="p2" class="ml-accordion-panel" role="region" aria-labelledby="t2" data-state="closed" hidden>
+      <p>Change data-theme on any ancestor. Nothing else moves.</p>
+    </div>
+  </article>
+</div>

package/examples/dropdown-menu.html

@@ -0,0 +1,11 @@
+<div class="ml-dropdown" data-ml="dropdown-menu">
+  <button class="ml-dropdown-trigger" type="button" aria-haspopup="menu" aria-expanded="false">
+    <span class="ml-dropdown-trigger-label">File</span>
+    <svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg>
+  </button>
+  <div class="ml-dropdown-menu" role="menu" aria-label="File" data-align="start" hidden>
+    <button class="ml-dropdown-item" type="button" role="menuitem">New</button>
+    <button class="ml-dropdown-item" type="button" role="menuitem">Open</button>
+    <button class="ml-dropdown-item" type="button" role="menuitem" data-danger>Delete</button>
+  </div>
+</div>

package/examples/modal.html

@@ -0,0 +1,16 @@
+<button class="ml-button" type="button" data-variant="danger" data-ml-opens="delete-project">
+  <span class="ml-button-label">Delete project</span>
+</button>
+
+<div class="ml-modal-overlay" data-ml-for="delete-project" hidden></div>
+<div class="ml-modal" id="delete-project" data-ml="modal" role="alertdialog" aria-modal="true" aria-labelledby="delete-project-title" data-size="sm" tabindex="-1" hidden>
+  <div class="ml-modal-header">
+    <h2 class="ml-modal-title" id="delete-project-title">Delete project</h2>
+    <button class="ml-modal-close" type="button" aria-label="Close dialog"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+  </div>
+  <div class="ml-modal-body">This removes the project and every deployment attached to it.</div>
+  <div class="ml-modal-footer">
+    <button class="ml-button" type="button" data-variant="secondary" data-ml-close><span class="ml-button-label">Keep it</span></button>
+    <button class="ml-button" type="button" data-variant="danger"><span class="ml-button-label">Delete</span></button>
+  </div>
+</div>

package/examples/select.html

@@ -0,0 +1,16 @@
+<div class="ml-select-root" data-ml="select">
+  <span class="ml-select-label" id="fruit-label">Fruit</span>
+  <div class="ml-select-control">
+    <button class="ml-select" type="button" role="combobox" aria-expanded="false" aria-controls="fruit-list" aria-labelledby="fruit-label" data-state="closed">
+      <span class="ml-select-value" data-placeholder>Select…</span>
+      <span class="ml-select-chevron" aria-hidden="true"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg></span>
+    </button>
+  </div>
+  <div class="ml-select-popover" hidden>
+    <ul class="ml-select-list" id="fruit-list" role="listbox" aria-labelledby="fruit-label">
+      <li class="ml-select-option" id="opt-apple" role="option" aria-selected="false" data-state="unchecked">Apple</li>
+      <li class="ml-select-option" id="opt-pear" role="option" aria-selected="false" data-state="unchecked">Pear</li>
+      <li class="ml-select-option" id="opt-durian" role="option" aria-selected="false" aria-disabled="true" data-state="unchecked">Durian</li>
+    </ul>
+  </div>
+</div>

package/examples/sheet.html

@@ -0,0 +1,17 @@
+<button class="ml-button" type="button" data-variant="secondary" data-ml-opens="account-settings">
+  <span class="ml-button-label">Settings</span>
+</button>
+
+<div class="ml-sheet-overlay" data-ml-for="account-settings" hidden></div>
+<div class="ml-sheet-panel" id="account-settings" data-ml="sheet" role="dialog" aria-modal="true" aria-labelledby="account-settings-title" data-side="right" data-size="md" tabindex="-1" hidden>
+  <div class="ml-sheet-header">
+    <div class="ml-sheet-heading">
+      <h2 class="ml-sheet-title" id="account-settings-title">Account settings</h2>
+      <p class="ml-sheet-description">Changes apply instantly.</p>
+    </div>
+    <button class="ml-sheet-close" type="button" aria-label="Close panel"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+  </div>
+  <div class="ml-sheet-body">
+    <p>Escape closes the panel, and so does the backdrop.</p>
+  </div>
+</div>

package/examples/slider.html

@@ -0,0 +1,14 @@
+<div class="ml-slider-field" data-ml="slider" data-size="md" data-ml-step="5">
+  <div class="ml-slider-header">
+    <span class="ml-slider-label" id="bright-label">Brightness</span>
+    <span class="ml-slider-output">40</span>
+  </div>
+  <div class="ml-slider">
+    <div class="ml-slider-track">
+      <span class="ml-slider-range" style="width: 40%"></span>
+      <span class="ml-slider-thumb" id="bright-thumb" role="slider" tabindex="0"
+            aria-labelledby="bright-label" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40"
+            style="left: 40%"></span>
+    </div>
+  </div>
+</div>

package/examples/switch.html

@@ -0,0 +1,6 @@
+<span class="ml-switch-field">
+  <button class="ml-toggle" type="button" data-ml="switch" role="switch" aria-checked="false" aria-labelledby="notify-label" data-state="unchecked" data-size="md" data-hit="expand">
+    <span class="ml-toggle-thumb" aria-hidden="true"></span>
+  </button>
+  <span class="ml-switch-label" id="notify-label">Email notifications</span>
+</span>

package/examples/tabs.html

@@ -0,0 +1,10 @@
+<div class="ml-tabs" data-ml="tabs" data-variant="default" data-orientation="horizontal">
+  <div class="ml-tabs-list" role="tablist" aria-label="Project" aria-orientation="horizontal">
+    <button class="ml-tabs-trigger" type="button" role="tab" id="tab-a" aria-controls="panel-a" aria-selected="true" data-state="active" tabindex="0">Overview</button>
+    <button class="ml-tabs-trigger" type="button" role="tab" id="tab-b" aria-controls="panel-b" aria-selected="false" data-state="inactive" tabindex="-1">Activity</button>
+    <button class="ml-tabs-trigger" type="button" role="tab" id="tab-c" aria-controls="panel-c" aria-selected="false" data-state="inactive" tabindex="-1">Settings</button>
+  </div>
+  <div class="ml-tabs-content" role="tabpanel" id="panel-a" aria-labelledby="tab-a" tabindex="0" data-state="active">Overview panel</div>
+  <div class="ml-tabs-content" role="tabpanel" id="panel-b" aria-labelledby="tab-b" tabindex="0" data-state="inactive" hidden>Activity panel</div>
+  <div class="ml-tabs-content" role="tabpanel" id="panel-c" aria-labelledby="tab-c" tabindex="0" data-state="inactive" hidden>Settings panel</div>
+</div>

package/examples/toast.html

@@ -0,0 +1,8 @@
+<div class="ml-toaster" data-ml="toast" role="region" aria-label="Notifications" data-position="top-right">
+  <div class="ml-toast" role="status" aria-live="polite" aria-atomic="true" data-tone="success" data-ml-duration="6000">
+    <div class="ml-toast-content">
+      <p class="ml-toast-message">Draft saved to your workspace.</p>
+    </div>
+    <button class="ml-toast-close" type="button" aria-label="Dismiss notification"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+  </div>
+</div>

package/examples/tooltip.html

@@ -0,0 +1,7 @@
+<span class="ml-tooltip-root" data-ml="tooltip">
+  <button class="ml-button" type="button" data-variant="secondary" data-size="sm"><span class="ml-button-label">Share</span></button>
+  <span class="ml-tooltip" id="share-tip" role="tooltip" data-side="top" hidden>
+    Copy a link to this page
+    <span class="ml-tooltip-arrow" aria-hidden="true"></span>
+  </span>
+</span>

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@mlola-ui/behavior",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Framework-free behavior for Mlola UI markup: standard DOM, no runtime peers",
   "type": "module",
   "main": "./src/index.js",
   "sideEffects": false,
   "files": [
-    "src"
+    "src",
+    "examples"
   ],
   "exports": {
     ".": "./src/index.js",

package/src/index.js

@@ -265,7 +265,9 @@ const behaviors = {
           open(opener_);
           return;
         }
-        if (root.querySelector(".ml-modal-close, .ml-sheet-close")?.contains(event.target)) close();
+        // The corner button, or any control marked data-ml-close, such as Cancel.
+        const closer = event.target.closest(".ml-modal-close, .ml-sheet-close, [data-ml-close]");
+        if (closer && root.contains(closer)) close();
         if (closeOnOverlay && event.target === overlay()) close();
       }),
       on(document, "keydown", (event) => {