@inglorious/ui 9.7.2 → 9.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.7.2",
+  "version": "9.8.0",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",

package/src/controls/switch/style.css

@@ -1,5 +1,10 @@
 .iw-switch {
   --iw-switch-active-bg: var(--iw-color-primary);
+  /* Contains the visually hidden input below. Without it, the input is placed
+     against the nearest positioned ancestor, possibly outside the scroll
+     container the switch sits in, and focusing it on toggle scrolls that
+     ancestor, even one with overflow: hidden, to bring the input into view. */
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--iw-space-2);
@@ -14,7 +19,10 @@
     pointer-events: none;
   }
 
+  /* Fixed size: a long label shrinks the text, never the track, which would
+     otherwise narrow until it is as round as a radio button. */
   .iw-switch-track {
+    flex-shrink: 0;
     width: 2.25rem;
     height: 1.25rem;
     border-radius: 999px;
@@ -47,6 +55,7 @@
   .iw-switch-text {
     display: flex;
     flex-direction: column;
+    min-width: 0;
   }
 
   .iw-switch-description {

package/src/feedback/dialog/dialog.stories.js

@@ -10,9 +10,11 @@ export default {
   argTypes: {
     isOpen: { control: "boolean" },
     isModal: { control: "boolean" },
+    variant: { control: "select", options: ["dialog", "sheet"] },
     size: { control: "select", options: ["sm", "md", "lg"] },
     title: { control: "text" },
     description: { control: "text" },
+    closeLabel: { control: "text" },
     onClose: { action: "onClose" },
   },
 }
@@ -56,3 +58,10 @@ export const Modal = {
   tags: ["!autodocs"],
   args: { ...Open.args, isModal: true },
 }
+
+// A bottom sheet below 48rem: shrink the viewport to see it rise from the
+// bottom edge. Modal, like Modal, so it stays off the docs page.
+export const Sheet = {
+  tags: ["!autodocs"],
+  args: { ...Open.args, isModal: true, variant: "sheet" },
+}

package/src/feedback/dialog/style.css

@@ -47,21 +47,9 @@
   font-size: 1.1rem;
 }
 
+/* The title takes the room, the close button only its own. */
 .iw-dialog-close {
-  border: 0 none;
-  background: transparent;
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: var(--iw-radius-sm);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: inherit;
-}
-
-.iw-dialog-close:hover {
-  background-color: color-mix(in srgb, currentColor 12%, transparent);
+  flex-shrink: 0;
 }
 
 .iw-dialog-description {
@@ -80,3 +68,38 @@
   flex-wrap: wrap;
   gap: var(--iw-space-2);
 }
+
+/* A sheet on a narrow screen: anchored to the bottom edge at full width,
+   rising from below, clear of the home indicator. The browser centres a modal
+   dialog with auto margins in a full-screen inset, so the sheet resets both.
+   Only the bottom corners are squared, so a theme's radius stays on top. The
+   breakpoint is --iw-breakpoint-md, which a media query cannot read. */
+@media (width < 48rem) {
+  dialog.iw-dialog.iw-dialog-sheet {
+    inset: auto 0 0;
+    margin: 0;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    max-height: 85dvh;
+    padding-bottom: var(--safe-area-bottom, 0px);
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  dialog.iw-dialog.iw-dialog-sheet[open] {
+    animation: iw-dialog-sheet-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+}
+
+@keyframes iw-dialog-sheet-in {
+  from {
+    transform: translateY(100%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  dialog.iw-dialog.iw-dialog-sheet[open] {
+    animation: none;
+  }
+}

package/src/feedback/dialog/template.js

@@ -8,6 +8,9 @@ import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
 import { when } from "@inglorious/web/directives/when"
 
+import { IconButton } from "../../controls/icon-button/index.js"
+import { Icon } from "../../data-display/icon/index.js"
+import { close } from "../../shared/icons.js"
 import { syncDialog } from "../../shared/top-layer.js"
 
 /**
@@ -29,12 +32,14 @@ export function render(props) {
     id,
     isOpen = false,
     isModal = true,
+    variant = "dialog",
     size = "md",
     title,
     description,
     children,
     actions,
     className = "",
+    closeLabel = "Close",
     onClose,
     onBackdropClick,
   } = props
@@ -59,6 +64,7 @@ export function render(props) {
     class=${classMap({
       "iw-dialog": true,
       [`iw-dialog-${size}`]: true,
+      "iw-dialog-sheet": variant === "sheet",
       ...extraClasses,
     })}
     aria-labelledby=${titleId || nothing}
@@ -94,17 +100,16 @@ export function render(props) {
                   ${title}
                 </div>`,
             )}
-            ${when(
-              onClose,
-              () =>
-                html`<button
-                  type="button"
-                  class="iw-dialog-close"
-                  aria-label="Close"
-                  @click=${onClose}
-                >
-                  ×
-                </button>`,
+            ${when(onClose, () =>
+              IconButton.render({
+                icon: Icon.render({ icon: close, size: "lg" }),
+                ariaLabel: closeLabel,
+                variant: "ghost",
+                color: "secondary",
+                shape: "round",
+                className: "iw-dialog-close",
+                onClick: onClose,
+              }),
             )}
           </div>`,
       )}

package/src/navigation/drawer/template.js

@@ -8,7 +8,7 @@ import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
 import { when } from "@inglorious/web/directives/when"
 
-import { Button } from "../../controls/button/index.js"
+import { IconButton } from "../../controls/icon-button/index.js"
 import { Icon } from "../../data-display/icon/index.js"
 import { Flex } from "../../layout/flex/index.js"
 import { applyElementProps } from "../../shared/apply-element-props.js"
@@ -51,6 +51,9 @@ export function render(props) {
     title,
     children,
     className = "",
+    closeLabel = "Close",
+    collapseLabel = "Collapse sidebar",
+    expandLabel = "Expand sidebar",
     onClose,
     onCollapseToggle,
     ...rest
@@ -103,14 +106,14 @@ export function render(props) {
               () => html`<div class="iw-drawer-title">${title}</div>`,
             ),
             when(onClose, () =>
-              Button.render({
+              IconButton.render({
+                icon: Icon.render({ icon: close, size: "lg" }),
+                ariaLabel: closeLabel,
                 color: "secondary",
                 variant: "ghost",
                 shape: "square",
                 className: "iw-drawer-close",
-                "aria-label": "Close",
                 onClick: onClose,
-                children: Icon.render({ icon: close, size: "lg" }),
               }),
             ),
           ],
@@ -129,14 +132,14 @@ export function render(props) {
           justify: "end",
           padding: "sm",
           className: "iw-drawer-footer",
-          children: Button.render({
+          children: IconButton.render({
+            icon: Icon.render({ icon: leftPanelClose, size: "lg" }),
+            ariaLabel: isCollapsed ? expandLabel : collapseLabel,
             color: "secondary",
             variant: "ghost",
             shape: "square",
             className: "iw-drawer-toggler",
-            "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
             onClick: onCollapseToggle,
-            children: Icon.render({ icon: leftPanelClose, size: "lg" }),
           }),
         })}
       `,

package/types/feedback/dialog.d.ts

@@ -8,11 +8,19 @@ export interface DialogProps {
   isModal?: boolean
   /** Its width: `"sm"`, `"md"` (default) or `"lg"`. */
   size?: "sm" | "md" | "lg"
+  /**
+   * How it presents itself: `"dialog"` (default) centred, or `"sheet"`, which
+   * below 48rem is anchored to the bottom edge at full width, rising from
+   * below, and from 48rem is the centred dialog. Either can be modal or not.
+   */
+  variant?: "dialog" | "sheet"
   title?: TemplateResult | string | number
   description?: TemplateResult | string | number
   children?: TemplateResult | string | number
   actions?: TemplateResult | string | number
   className?: string
+  /** The close button's accessible name, for the app's language. Defaults to `"Close"`. */
+  closeLabel?: string
   onClose?: () => void
   onBackdropClick?: () => void
   [key: string]: unknown

package/types/navigation/drawer.d.ts

@@ -16,6 +16,12 @@ export interface DrawerProps {
   children?: TemplateResult | string | number
   hasBackdrop?: boolean
   className?: string
+  /** The close button's accessible name, for the app's language. Defaults to `"Close"`. */
+  closeLabel?: string
+  /** The collapse toggle's accessible name while expanded. Defaults to `"Collapse sidebar"`. */
+  collapseLabel?: string
+  /** The collapse toggle's accessible name while collapsed. Defaults to `"Expand sidebar"`. */
+  expandLabel?: string
   onClose?: () => void
   onCollapseToggle?: () => void
   [key: string]: unknown