@inglorious/ui 9.8.0 → 9.8.2

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

@@ -42,7 +42,6 @@
     min-inline-size: 0;
   }
 
-  /* A message's own line breaks show; the template's around it do not. */
   .iw-chat-text {
     white-space: pre-wrap;
   }
@@ -85,7 +84,6 @@
       min-inline-size: 0;
     }
 
-    /* The box grows with the message up to a point, then scrolls. */
     .iw-textarea {
       max-block-size: 10rem;
     }

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

@@ -19,7 +19,6 @@ export default {
   },
 }
 
-// In place, so the docs page that shows every story stays usable.
 export const Open = {
   args: {
     isOpen: true,
@@ -53,14 +52,11 @@ 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 },
 }
 
-// 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

@@ -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);
@@ -47,7 +43,6 @@
   font-size: 1.1rem;
 }
 
-/* The title takes the room, the close button only its own. */
 .iw-dialog-close {
   flex-shrink: 0;
 }
@@ -69,11 +64,6 @@
   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;

package/src/feedback/dialog/template.js

@@ -55,10 +55,6 @@ 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({
@@ -83,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 }))}

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;

package/src/navigation/drawer/template.js

@@ -77,8 +77,6 @@ export function render(props) {
     ...extraClasses,
   }
 
-  // Without onClose nothing would take isOpen down, so the browser is not
-  // allowed to dismiss it: a manual popover ignores Esc and outside presses.
   const popover =
     variant === "permanent" ? nothing : onClose ? "auto" : "manual"
 

package/src/navigation/menu/menu.stories.js

@@ -40,8 +40,6 @@ export const Default = {
   },
 }
 
-// Anchored to its trigger. Without onToggle wired to a store, the browser
-// keeps the open state on its own.
 export const WithTrigger = {
   args: {
     id: "story-menu",

package/src/navigation/menu/style.css

@@ -10,10 +10,6 @@
   box-shadow: var(--iw-shadow-lg);
 }
 
-/* Anchored to its trigger: below it and aligned with its start, flipping up
-   or across when there is no room. The browser's popover box is centred in
-   the viewport, so its insets and margins are reset; its hidden state has to
-   be restated, because the display above outranks it. */
 .iw-menu[popover] {
   inset: auto;
   margin: var(--iw-space-1) 0 0;

package/src/navigation/menu/template.js

@@ -46,7 +46,6 @@ export const Menu = {
       commandfor: id,
       command: "toggle-popover",
       "aria-haspopup": "menu",
-      // Left to the browser when it alone keeps the open state.
       "aria-expanded": onToggle ? String(isOpen) : undefined,
       style: `anchor-name: ${anchorName(id)}`,
     })
@@ -96,7 +95,6 @@ export const Menu = {
       ${ref((element) => {
         if (!element) return
         applyElementProps(element, rest)
-        // Without onToggle the browser alone opens and closes it.
         if (trigger && onToggle) {
           syncPopover(element, {
             isOpen,
@@ -123,7 +121,6 @@ export const Menu = {
       return html`<div class="iw-menu-divider" role="separator"></div>`
     }
 
-    // In an anchored menu each item also hides the popover once picked.
     return html`<button
       type="button"
       class=${classMap({

package/src/navigation/speed-dial/style.css

@@ -1,7 +1,3 @@
-/* The actions are a popover anchored to the trigger and placed on the side
-   `direction` names. The browser's popover box is centred in the viewport,
-   so its insets and box are reset; its hidden state has to be restated,
-   because the display below outranks it. */
 .iw-speed-dial {
   anchor-scope: --iw-speed-dial;
   display: inline-flex;

package/src/navigation/speed-dial/template.js

@@ -49,9 +49,7 @@ export const SpeedDial = {
         if (!element) return
         const trigger = element.querySelector(".iw-speed-dial-trigger")
         const popover = element.querySelector(".iw-speed-dial-actions")
-        // A property, not `commandfor`, so the link needs no id.
         trigger.commandForElement = popover
-        // Without onToggle the browser alone opens and closes it.
         if (onToggle) {
           syncPopover(popover, {
             isOpen,
@@ -92,9 +90,6 @@ export const SpeedDial = {
       class="iw-speed-dial-action"
       command="hide-popover"
       ${ref((element) => {
-        // Hides the popover once the action runs, like a menu item. Linked a
-        // microtask later: a new action is still outside the popover when its
-        // ref runs.
         if (element) {
           queueMicrotask(() => {
             element.commandForElement = element.parentElement

package/src/navigation/tabs/template.js

@@ -65,8 +65,6 @@ export const Tabs = {
   renderTab(item, index, props) {
     const tabValue = item.value ?? index
     const selected = tabValue === props.value
-    // Only one tab is in the Tab order, and the arrow keys move between them:
-    // the selected tab, or the first one while none is.
     const hasSelection = props.items.some(
       (other, otherIndex) => (other.value ?? otherIndex) === props.value,
     )