@inglorious/ui 9.7.3 → 9.8.1

package/src/data-display/chat/template.js

@@ -167,7 +167,6 @@ export const Chat = {
         isFullWidth: true,
         onChange: (value) => props.onDraftChange?.(value),
         onKeyDown: (event) => {
-          // Enter sends, unless it closes a character being composed.
           if (event.key !== "Enter" || event.shiftKey || event.isComposing) {
             return
           }

package/src/data-display/chip/template.js

@@ -38,7 +38,6 @@ export function render(props) {
       () => html`<span class="iw-chip-icon" aria-hidden="true">${icon}</span>`,
     )} <span class="iw-chip-label">${children}</span>`
 
-  // A chip that can be picked is a toggle button, pressed while selected.
   if (isSelected !== undefined) {
     return html`<button
       type="button"

package/src/data-display/data-grid/base.css

@@ -35,8 +35,6 @@
     gap: var(--iw-space-2);
   }
 
-  /* The two ends of a range share the column; native date and number
-     fields would otherwise keep a width of their own and spill out. */
   .iw-data-grid-filter-range > .iw-input {
     flex: 1 1 0;
     min-width: 0;

package/src/data-display/data-grid/handlers.js

@@ -37,16 +37,13 @@ export function sortChange(entity, columnId) {
   const existingIndex = entity.sorts.findIndex((s) => s.column === columnId)
 
   if (existingIndex !== -1) {
-    // Toggle direction
     const existing = entity.sorts[existingIndex]
     if (existing.direction === "asc") {
       existing.direction = "desc"
     } else {
-      // Remove from sort if going from desc back to nothing
       entity.sorts.splice(existingIndex, 1)
     }
   } else {
-    // Add new sort
     entity.sorts.push({ column: columnId, direction: "asc" })
   }
 
@@ -201,7 +198,7 @@ export function rowToggle(entity, rowId) {
 
   if (index === -1) {
     if (!entity.isMultiSelect) {
-      entity.selection = [rowId] // Replace entirely
+      entity.selection = [rowId]
     } else {
       entity.selection.push(rowId)
     }
@@ -251,14 +248,12 @@ export function rowsToggleAll(entity) {
   )
 
   if (allSelected) {
-    // Deselect all visible
     rows.forEach((row) => {
       const rowId = getRowKeyValue(entity, row)
       const index = entity.selection.indexOf(rowId)
       if (index !== -1) entity.selection.splice(index, 1)
     })
   } else {
-    // Select all visible
     rows.forEach((row) => {
       const rowId = getRowKeyValue(entity, row)
       if (!entity.selection.includes(rowId)) {
@@ -398,7 +393,6 @@ function initDataGrid(entity) {
   entity.rows ??= []
   entity.rowId ??= "id"
 
-  // Auto-generate columns from first data item if not provided
   if (!entity.columns && entity.rows.length) {
     const [firstRow] = entity.rows
 
@@ -427,7 +421,6 @@ function initDataGrid(entity) {
     })
   }
 
-  // State
   entity.sorts ??= []
   entity.filters ??= {}
   entity.search ??= null

package/src/data-display/data-grid/helpers.js

@@ -196,12 +196,10 @@ function applyFilters(entity, rows) {
       const column = entity.columns.find((c) => c.id === columnId)
       if (!column) return true
 
-      // Custom filter function
       if (column.filterFn) {
         return column.filterFn(row, filterValue)
       }
 
-      // Default filters by type
       const value = row[columnId]
 
       if (["range", "date", "time", "datetime"].includes(column.filter.type)) {
@@ -215,7 +213,6 @@ function applyFilters(entity, rows) {
         return value === filterValue
       }
 
-      // String filtering (case-insensitive contains)
       return String(value)
         .toLowerCase()
         .includes(String(filterValue).toLowerCase())
@@ -262,7 +259,6 @@ function applySorts(entity, rows) {
       let aVal = a[columnId]
       let bVal = b[columnId]
 
-      // Custom sort function
       if (column?.sortFn) {
         const result =
           direction === "asc" ? column.sortFn(a, b) : column.sortFn(b, a)
@@ -270,7 +266,6 @@ function applySorts(entity, rows) {
         continue
       }
 
-      // Default sorting
       if (aVal === bVal) continue
       if (aVal == null) return 1
       if (bVal == null) return -1

package/src/data-display/data-grid/template.js

@@ -264,7 +264,6 @@ export const DataGrid = {
     const column = props.columns[index]
     const isEditable = Boolean(column.isEditable && row)
 
-    // Typing in a cell's editor is not picking its row.
     return html`<div
       class="iw-data-grid-cell ${classMap({
         "iw-data-grid-cell-number": column.type === "number",

package/src/data-display/data-grid/theme.css

@@ -146,7 +146,6 @@
     }
   }
 
-  /* An editor fills its cell, which keeps less padding around it. */
   .iw-data-grid-cell-editable {
     padding: var(--iw-space-2);
   }

package/src/data-display/icon/style.css

@@ -1,7 +1,3 @@
-/* The size is a floor, not a fixed box. A glyph or an `icon` takes the size's
-   font-size and fits it exactly, an SVG being drawn at 1em; content that sizes
-   itself (an SVG with its own width, a button) grows the box instead of
-   overflowing it or being squeezed into it. */
 .iw-icon {
   display: inline-flex;
   align-items: center;
@@ -26,9 +22,6 @@
     font-size: var(--iw-font-size-2xl);
   }
 
-  /* An icon that points along the line, in right-to-left text. `scale`
-     rather than `transform`, so it adds to a rotation set elsewhere instead
-     of replacing it. */
   &.iw-icon-rtl {
     scale: -1 1;
   }

package/src/data-display/icon/template.js

@@ -4,7 +4,7 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { html } from "@inglorious/web"
+import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
 import { unsafeSVG } from "@inglorious/web/directives/unsafe-svg"
@@ -53,7 +53,7 @@ export function render({
       "iw-icon-rtl": direction === "rtl",
       ...extraClasses,
     })}
-    style=${color !== "current" ? `color: ${color};` : ""}
+    style=${color !== "current" ? `color: ${color};` : nothing}
     @click=${onClick}
     ${ref((el) =>
       applyElementProps(el, {

package/src/data-display/table/style.css

@@ -18,8 +18,6 @@
   &.iw-table-wrapping {
     min-width: 0;
 
-    /* Wrap between words; break a word only when it cannot fit alone, so
-       short values such as percentages stay whole. */
     .iw-table-header-cell,
     .iw-table-cell {
       overflow-wrap: break-word;

package/src/data-display/tooltip/style.css

@@ -1,6 +1,3 @@
-/* The bubble is anchored to the trigger by CSS: the browser places it on the
-   requested side and flips it to the opposite one when it would leave the
-   viewport. Fixed, so a container that clips its overflow does not cut it. */
 .iw-tooltip {
   anchor-scope: --iw-tooltip;
   display: inline-flex;

package/src/data-display/virtual-list/handlers.js

@@ -45,8 +45,6 @@ export function scroll(entity, containerEl) {
  */
 export function mount(entity, containerEl) {
   const firstItem = containerEl.querySelector("[data-index]")
-  // A list not laid out yet, such as one rendered into a detached element,
-  // measures 0: keep the estimate, and measure again on a later render.
   if (!firstItem?.offsetHeight) return
 
   entity.itemHeight = firstItem.offsetHeight

package/src/data-display/virtual-list/template.js

@@ -4,15 +4,13 @@
  * @typedef {import('@inglorious/web').Api} Api
  */
 
-import { html } from "@inglorious/web"
+import { html, nothing } from "@inglorious/web"
 import { ref } from "@inglorious/web/directives/ref"
 import { repeat } from "@inglorious/web/directives/repeat"
 import { styleMap } from "@inglorious/web/directives/style-map"
 
 const PRETTY_INDEX = 1
 
-// The list elements already being measured. Every update re-renders, and
-// measuring is an update, so measuring on each render would loop forever.
 const measured = new WeakSet()
 
 /**
@@ -49,7 +47,7 @@ export function render(entity, api) {
 
   return html`
     <div
-      class=${className ?? ""}
+      class=${className ?? nothing}
       style=${styleMap({ height: `${viewportHeight}px`, overflow: "auto" })}
       @scroll=${(e) => api.notify(`#${entity.id}:scroll`, e.currentTarget)}
       ${ref((el) => {

package/src/examples/dashboard/before-after-data.js

@@ -9,9 +9,6 @@ export const beforeAfterImages = {
   },
 }
 
-// Self-contained demo images for the Before/After control, so the dashboard
-// renders the comparison without any network requests.
-
 function svg(label, from, to) {
   return (
     "data:image/svg+xml," +

package/src/examples/dashboard/data.js

@@ -94,7 +94,6 @@ export const trafficSummary = [
     progress: 80,
     color: "error",
   },
-  // { label: "Bounce Rate", value: "40.15%", progress: 40, color: "primary" },
 ]
 
 export const socialCards = [

package/src/examples/dashboard/primitive-content.js

@@ -1525,8 +1525,6 @@ function toTitleCase(slug) {
 function livePreview(types, entity) {
   if (!livePreviews.has(entity.id)) {
     const container = document.createElement("div")
-    // The mount needs an element, but it must not become a box of its own:
-    // as a flex item it would shrink and take the primitive down with it.
     container.style.display = "contents"
 
     const store = createStore({ types, entities: { [entity.id]: entity } })

package/src/examples/dashboard/style.css

@@ -57,7 +57,6 @@
     width: 100%;
   }
 
-  /* Outside the app bar, so it pads itself to line up with it. */
   .iw-dashboard-breadcrumbs {
     min-height: var(--iw-space-12);
     padding-inline: var(--iw-space-4);
@@ -261,8 +260,6 @@
   inset: 0;
 }
 
-/* Shown in place (isModal: false), so it can sit in the preview's flow
-   rather than where the browser positions a non-modal dialog. */
 .iw-primitive-preview .iw-dialog {
   position: static;
   min-width: 0;

package/src/feedback/alert/style.css

@@ -81,7 +81,6 @@
   --iw-alert-color: var(--iw-color-error, #d14343);
 }
 
-/* A plain note: no tone of its own, just the text colour. */
 .iw-alert-neutral {
   --iw-alert-color: var(--iw-color-text-secondary, var(--iw-color-text));
 }

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

@@ -10,14 +10,15 @@ 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" },
   },
 }
 
-// In place, so the docs page that shows every story stays usable.
 export const Open = {
   args: {
     isOpen: true,
@@ -51,8 +52,12 @@ export const Large = {
   },
 }
 
-// Modal takes over the page, so it is left out of the docs page.
 export const Modal = {
   tags: ["!autodocs"],
   args: { ...Open.args, isModal: true },
 }
+
+export const Sheet = {
+  tags: ["!autodocs"],
+  args: { ...Open.args, isModal: true, variant: "sheet" },
+}

package/src/feedback/dialog/style.css

@@ -1,7 +1,3 @@
-/* A native <dialog>, so the browser's own box is reset: the surface inside
-   carries the padding, which leaves the dialog element itself reachable only
-   through the backdrop. Modal dialogs sit in the top layer, above any
-   z-index, and the browser centres them. */
 .iw-dialog {
   background: var(--iw-color-surface);
   color: var(--iw-color-text);
@@ -48,20 +44,7 @@
 }
 
 .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 +63,33 @@
   flex-wrap: wrap;
   gap: var(--iw-space-2);
 }
+
+@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
@@ -50,15 +55,12 @@ export function render(props) {
   const descriptionId = id && description ? `${id}-description` : ""
   const onBackdrop = onBackdropClick ?? onClose
 
-  // The surface fills the dialog box, so a click that lands on the dialog
-  // itself can only have come from the backdrop around it. The press has to
-  // start there too: a drag from inside the surface that ends on the backdrop
-  // also clicks the dialog, and must not close it.
   return html`<dialog
     id=${id || nothing}
     class=${classMap({
       "iw-dialog": true,
       [`iw-dialog-${size}`]: true,
+      "iw-dialog-sheet": variant === "sheet",
       ...extraClasses,
     })}
     aria-labelledby=${titleId || nothing}
@@ -77,7 +79,6 @@ export function render(props) {
       }
     }}
     @cancel=${(event) => {
-      // Without onClose nothing would take isOpen down, so Esc is refused.
       if (!onClose) event.preventDefault()
     }}
     ${ref((element) => syncDialog(element, { isOpen, isModal, onClose }))}
@@ -94,17 +95,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/feedback/progress/style.css

@@ -24,10 +24,6 @@
   }
 }
 
-/* A native <progress>, restyled. Browsers draw its value through their own
-   pseudo-elements, so the look is set once here: the bar takes `color`, like
-   the color variants above, and an app adjusts the rest through
-   --iw-progress-height, --iw-progress-radius and --iw-progress-track-color. */
 .iw-progress-linear {
   --iw-progress-bar: linear-gradient(
     90deg,
@@ -63,8 +59,6 @@
     border-radius: var(--iw-progress-radius, var(--iw-radius-sm));
   }
 
-  /* Indeterminate: no value to draw, so a sliver of the bar sweeps across
-     the track, painted on the element itself. */
   &:indeterminate {
     background:
       var(--iw-progress-bar) no-repeat 0 0 / 30% 100%,

package/src/feedback/progress/template.js

@@ -77,9 +77,6 @@ export function render(props) {
 
   const progress = value == null ? null : clamp(value)
 
-  // An attribute, not a property: removing it is the only way back to
-  // indeterminate, which `:indeterminate` styles and assistive tech announces
-  // as busy.
   return html`<progress
     class=${classMap({
       "iw-progress": true,

package/src/feedback/snackbar/snackbar.stories.js

@@ -31,7 +31,6 @@ export const Default = {
   },
 }
 
-// A phone app keeps a bar at the bottom: the snackbar rises above it.
 export const AboveBottomNavigation = {
   args: {
     isOpen: true,

package/src/feedback/snackbar/style.css

@@ -1,8 +1,3 @@
-/* Fixed to the viewport, clear of the system bars. A bottom snackbar also
-   clears whatever bar the app keeps at the bottom: the app sets
-   --iw-snackbar-offset-bottom to that bar's height while it shows, and the
-   offset then stands in for the safe area, which the bar already covers.
-   Only the app knows when its bar is on screen, so nothing is guessed here. */
 .iw-snackbar {
   --iw-snackbar-gap: var(--iw-space-4);
   position: fixed;
@@ -10,9 +5,6 @@
   max-width: calc(100vw - 2 * var(--iw-snackbar-gap));
 }
 
-/* A manual popover in the top layer. The browser centres a popover in the
-   viewport as a bordered box, so its insets and box are reset, with no
-   specificity so the positions below still set their own sides. */
 :where(.iw-snackbar) {
   inset: auto;
   margin: 0;
@@ -48,8 +40,6 @@
   right: var(--iw-snackbar-gap);
 }
 
-/* Both insets and auto margins: the snackbar is as wide as its content, up
-   to the gutters, and centered within them. */
 .iw-snackbar-bottom-center,
 .iw-snackbar-top-center {
   inset-inline: var(--iw-snackbar-gap);

package/src/layout/flex/style.css

@@ -129,8 +129,6 @@
     padding: var(--iw-space-8);
   }
 
-  /* A flex item needs both minimum dimensions released before either axis can
-     overflow instead of expanding its parent. */
   &.iw-flex-overflow-auto,
   &.iw-flex-overflow-scroll,
   &.iw-flex-overflow-hidden,

package/src/navigation/bottom-navigation/style.css

@@ -19,8 +19,6 @@
   align-items: center;
   justify-content: center;
   gap: var(--iw-space-1);
-  /* Narrow sides: a tab is a quarter or a fifth of a phone, and its label
-     needs every pixel of it. */
   padding: var(--iw-space-2) var(--iw-space-1);
   cursor: pointer;
 }
@@ -29,13 +27,8 @@
   color: var(--iw-color-primary);
 }
 
-/* 12px, as Material sizes navigation labels: at 14px, "Applications" or
-   "Candidatures" does not fit a quarter of a 360px phone. */
 .iw-bottom-navigation-label {
   font-size: var(--iw-font-size-xs);
-  /* One line, like its neighbours: a label too long for its tab is cut short
-     rather than wrapping, which in languages that break between any two
-     characters (Japanese, Chinese) splits a word and makes the bar taller. */
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;

package/src/navigation/drawer/style.css

@@ -1,7 +1,3 @@
-/* While it overlays the page the drawer is a popover in the top layer. The
-   browser styles every popover as a centred, bordered box hidden until it
-   opens, so those defaults are reset here: the drawer stays displayed while
-   closed, off-screen or docked, and slides rather than appears. */
 .iw-drawer {
   display: flex;
   flex-direction: column;
@@ -24,8 +20,6 @@
   inset-block: 0;
   z-index: var(--iw-z-modal, 1050);
 
-  /* As tall as an app bar, so the line under a drawer and the app bar beside
-     it runs straight across. */
   .iw-drawer-header {
     min-height: var(--iw-space-16);
     border-bottom: 1px solid var(--iw-color-border);
@@ -52,8 +46,6 @@
     transition: transform var(--iw-transition-fast);
   }
 
-  /* The toggle points at the edge the drawer sits on, which a right-to-left
-     page mirrors. `scale`, so the collapsed state's rotation still applies. */
   .iw-drawer-toggler > span:dir(rtl) {
     scale: -1 1;
   }
@@ -84,15 +76,10 @@
       opacity: 0;
     }
 
-    /* The header keeps only what fits the rail, such as a brand mark, so
-       it centres it. */
     .iw-drawer-header {
       justify-content: center;
     }
 
-    /* Only the icon is left, centred in the rail. The label also has to
-       leave the row: faded out, it still took its width and pushed the
-       icon off centre, as did the icon's side margin. */
     .iw-list-item > .iw-flex {
       justify-content: center;
     }
@@ -112,8 +99,6 @@
   }
 }
 
-/* `left` and `right` are the start and end of the line: the left drawer
-   sits on the right in a right-to-left page, and slides off that way. */
 .iw-drawer-left {
   inset-inline: 0 auto;
   border-inline-end: 1px solid var(--iw-color-border);
@@ -136,9 +121,6 @@
   backdrop-filter: none;
 }
 
-/* Overlaying: a temporary drawer at every width, a responsive one below
-   64rem. Off-screen until open, raised, closed from its header. The collapse
-   toggle only makes sense for a rail, so the footer goes. */
 .iw-drawer {
   box-shadow: var(--iw-shadow-lg);
 
@@ -151,9 +133,6 @@
   }
 }
 
-/* Docked: a permanent drawer at every width, a responsive one from 64rem
-   (keep in step with DOCKED_QUERY in template.js). In place, flat, and
-   hidden only on request. */
 .iw-drawer-permanent {
   transform: none;
   box-shadow: none;