@alacris/ui 0.6.0 → 0.6.2

package/README.md

@@ -47,9 +47,9 @@ The published package is plain ESM. Point an import map at a pinned CDN build of
 {
   "imports": {
     "@alacris/core": "https://cdn.jsdelivr.net/npm/@alacris/core@0.11.5/dist/alacris.js",
-    "@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.6.0/src/index.js",
-    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.6.0/src/theme/index.js",
-    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.6.0/src/components/"
+    "@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.6.2/src/index.js",
+    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.6.2/src/theme/index.js",
+    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.6.2/src/components/"
   }
 }
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alacris/ui",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Themeable design system for Alacris — Material defaults, sixty-nine custom elements, ESM-only, no build step.",
   "type": "module",
   "exports": {

package/src/components/ui-side-sheet.js

@@ -9,7 +9,8 @@
 // Distinct from <ui-drawer> (navigation) and <ui-sheet> (bottom). Modal
 // (default): a scrim plus a panel that slides in from the end edge. Focus is
 // trapped and page scroll locked while open. The PARENT owns `open`. Standard:
-// an in-flow panel that animates its inline size — no scrim, no trap.
+// an in-flow panel that animates its inline size — no scrim, no trap — with
+// the same headline, close button and actions area as the modal sheet.
 //
 // @prop  {boolean} open=false
 // @prop  {string}  variant='modal' — modal | standard
@@ -119,6 +120,10 @@ const styles = css`
 
   .std {
     display: block;
+    /* The host is display: contents, so this panel is the flex item when the
+       sheet sits in a row: it must keep its width, not shrink to nothing. */
+    flex: none;
+    block-size: 100%;
     inline-size: 0;
     overflow: hidden;
     background: ${t.bg};
@@ -126,7 +131,12 @@ const styles = css`
     transition: inline-size ${sys.duration.medium2} ${sys.easing.emphasized};
   }
   .std.open { inline-size: ${t.width}; }
-  .std-inner { inline-size: ${t.width}; }
+  .std-inner {
+    display: flex;
+    flex-direction: column;
+    inline-size: ${t.width};
+    block-size: 100%;
+  }
 `;
 
 define('ui-side-sheet', {
@@ -306,8 +316,13 @@ define('ui-side-sheet', {
                        ref=${(el) => hasSlot(el.querySelector('slot'), (has) => hasHeadline.set(has))}>
                     <slot name="headline"></slot>
                   </div>
+                  <ui-icon-button icon="close" label="Close" @click=${() => requestClose('method')}></ui-icon-button>
                 </div>
                 <div class="body" part="body"><slot></slot></div>
+                <div class="actions" part="actions"
+                     ref=${(el) => hasSlot(el.querySelector('slot'), (has) => el.classList.toggle('has', has))}>
+                  <slot name="actions"></slot>
+                </div>
               </div>
             </aside>`
           : null}