@inglorious/ui 9.7.3 → 9.8.1

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
@@ -74,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"
 
@@ -103,14 +104,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 +130,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/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,
     )

package/src/navigation/view-transitions/index.js

@@ -66,11 +66,6 @@ function wrapStore(store, routes) {
   let unsubscribeStore = null
 
   store.subscribe = (listener) => {
-    /* Taken here rather than when the store is wrapped, so that anything that
-       navigated in between — an initial redirect, a renderer mounting late — is
-       part of the baseline instead of a navigation in its own right. It also
-       keeps `window` untouched until something subscribes, so wrapping a store
-       during a server render is harmless. */
     if (!unsubscribeStore) {
       currentPath = getPath()
       currentIndex = getIndex()
@@ -115,20 +110,12 @@ function wrapStore(store, routes) {
     if (supportsTransitionTypes()) {
       document.startViewTransition({ update: notify, types })
     } else {
-      // Without `types` the browser falls back to its own cross-fade, which is
-      // a reasonable way to change page when the slide is unavailable.
       document.startViewTransition(notify)
     }
   }
 
-  /* The update callback of a view transition does not run synchronously: the
-   * browser captures the old state first and calls it on a later task. Reading
-   * the state here rather than in the subscription keeps a listener from
-   * replaying whatever the store held when the transition started. */
   function notify() {
     const state = store.getState()
-    // Copied, so that a listener subscribing during this pass waits for the
-    // next one instead of being notified by the pass that added it.
     ;[...listeners].forEach((listener) => listener(state))
   }
 

package/src/navigation/view-transitions/style.css

@@ -74,8 +74,6 @@
       var(--iw-easing-decelerate) both;
   }
 
-  /* A replacement navigates in place rather than arriving from a side, so it
-     cross-fades instead of sliding. */
   :root:active-view-transition-type(replace)::view-transition-old(root) {
     animation: iw-view-transition-fade-out var(--iw-duration-page)
       var(--iw-easing-standard) both;

package/src/shared/icons.js

@@ -1,7 +1,3 @@
-// The few icons the components draw themselves, so the library needs no icon
-// set of its own. From Material Symbols (Apache License 2.0), in the Iconify
-// format that `Icon` takes.
-
 export const close = {
   width: 24,
   height: 24,

package/src/styles/themes/bootstrap.css

@@ -2,17 +2,10 @@
   --iw-font-family-sans:
     system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans",
     "Liberation Sans", Arial, sans-serif;
-  /* The theme on the page itself: the element with the theme class, usually
-     <body>, takes its background, text color and font. */
   background-color: var(--iw-color-bg);
   color: var(--iw-color-text);
   font-family: var(--iw-font-family-sans);
 
-  /* ========================================
-     BOOTSTRAP THEME - Bootstrap 5 defaults
-     ======================================== */
-
-  /* Semantic Colors */
   --iw-color-bg: var(--iw-color-white);
   --iw-color-bg-secondary: #f8f9fa;
   --iw-color-bg-tertiary: #e9ecef;
@@ -32,7 +25,6 @@
   --iw-color-primary-active: #0a58ca;
   --iw-color-primary-text: var(--iw-color-white);
 
-  /* Bootstrap's secondary color */
   --iw-color-accent: #6c757d;
   --iw-color-accent-hover: #5c636a;
   --iw-color-accent-active: #565e64;
@@ -51,17 +43,11 @@
   --iw-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
   --iw-shadow-xl: 0 1rem 3rem rgba(0, 0, 0, 0.175);
 
-  /* Bootstrap's border radii */
   --iw-radius-sm: 0.25rem;
   --iw-radius-md: 0.375rem;
   --iw-radius-lg: 0.5rem;
   --iw-radius-xl: 1rem;
 
-  /* ========================================
-     COMPONENT TOKENS
-     ======================================== */
-
-  /* Button */
   --iw-button-bg: var(--iw-color-primary);
   --iw-button-bg-hover: var(--iw-color-primary-hover);
   --iw-button-bg-active: var(--iw-color-primary-active);
@@ -72,7 +58,6 @@
   --iw-button-shadow-hover: none;
   --iw-button-shadow-active: none;
 
-  /* Input */
   --iw-input-bg: var(--iw-color-bg);
   --iw-input-bg-hover: var(--iw-color-bg);
   --iw-input-bg-focus: var(--iw-color-bg);
@@ -84,13 +69,10 @@
   --iw-input-radius: var(--iw-radius-md);
   --iw-input-shadow-focus: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 
-  /* App bar: a navbar on the tertiary background */
   --iw-app-bar-bg: var(--iw-color-bg-secondary);
 
-  /* Drawer */
   --iw-drawer-bg: var(--iw-color-surface);
 
-  /* Card */
   --iw-card-bg: var(--iw-color-surface);
   --iw-card-border: color-mix(
     in srgb,
@@ -101,13 +83,10 @@
   --iw-card-shadow: none;
   --iw-card-shadow-hover: var(--iw-shadow-sm);
 
-  /* Badge */
   --iw-badge-radius: var(--iw-radius-md);
 
-  /* Chip: a pill badge in a subtle tone */
   --iw-chip-bg: var(--iw-color-bg-tertiary);
 
-  /* List */
   --iw-list-item: transparent;
   --iw-list-item-selected: color-mix(
     in srgb,
@@ -115,13 +94,11 @@
     transparent
   );
 
-  /* Alert */
   --iw-alert-radius: var(--iw-radius-md);
   --iw-alert-shadow: none;
   color-scheme: light;
 }
 
-/* Dark variant: Bootstrap's dark color mode */
 .iw-theme-bootstrap.iw-theme-dark {
   color-scheme: dark;
 
@@ -136,15 +113,12 @@
   --iw-color-text-muted: rgba(222, 226, 230, 0.75);
   --iw-color-border: #495057;
 
-  /* Buttons keep their colors; text in the primary color is lightened */
   --iw-color-link: #6ea8fe;
 
   --iw-card-border: color-mix(in srgb, var(--iw-color-white) 15%, transparent);
 }
 
 .iw-theme-bootstrap {
-  /* Buttons: Bootstrap's sizes, a focus ring, and the text that reads on each
-     color */
   .iw-button {
     padding: 0.375rem 0.75rem;
     font-size: 1rem;
@@ -223,7 +197,6 @@
         );
     }
 
-    /* Outline buttons fill with their color on hover */
     &.iw-button-outline:hover:not(:disabled),
     &.iw-button-outline:active:not(:disabled),
     &.iw-button-outline.iw-button-pressed {
@@ -236,7 +209,6 @@
       background-color: var(--iw-button-bg-active);
     }
 
-    /* Ghost buttons are link buttons */
     &.iw-button-ghost {
       text-decoration: underline;
 
@@ -266,8 +238,6 @@
     }
   }
 
-  /* Form controls: labels and help text at Bootstrap's sizes, and a red focus
-     ring on invalid fields */
   .iw-input,
   .iw-select,
   .iw-textarea-field {
@@ -304,7 +274,6 @@
     height: calc(1.5em + 0.75rem);
   }
 
-  /* Switch: an outlined track whose thumb fills in when checked */
   .iw-switch {
     .iw-switch-track {
       width: 2rem;
@@ -373,7 +342,6 @@
     }
   }
 
-  /* Tabs: nav tabs, the selected one joined to the content below it */
   .iw-tabs-list {
     gap: 0;
   }
@@ -408,7 +376,6 @@
     color: var(--iw-color-link);
   }
 
-  /* Chips and badges: Bootstrap badges, bold and white on their color */
   .iw-chip {
     &.iw-chip-primary,
     &.iw-chip-success,
@@ -469,14 +436,12 @@
     }
   }
 
-  /* Cards: a header and a footer on a faint tint, ruled off from the body */
   .iw-card-header,
   .iw-card-footer {
     border-color: var(--iw-card-border);
     background-color: color-mix(in srgb, var(--iw-color-text) 3%, transparent);
   }
 
-  /* Unless given a padding of their own */
   .iw-card-header:not([class*="iw-card-header-padding-"]),
   .iw-card-footer:not([class*="iw-card-footer-padding-"]) {
     padding: 0.5rem 1rem;
@@ -488,8 +453,6 @@
     line-height: 1.2;
   }
 
-  /* Alerts: a subtle background, an emphasized text and a border, all in the
-     tone of the alert */
   .iw-alert {
     padding: 1rem;
   }
@@ -534,7 +497,6 @@
     --iw-alert-color: var(--iw-color-accent);
   }
 
-  /* Tables: no outer border, compact cells and bold headings */
   .iw-table {
     border: 0 none;
   }
@@ -552,7 +514,6 @@
     background: color-mix(in srgb, var(--iw-color-text) 5%, transparent);
   }
 
-  /* Dialogs: a modal with a ruled header and footer */
   .iw-dialog {
     border: 1px solid var(--iw-card-border);
     border-radius: var(--iw-radius-lg);
@@ -601,7 +562,6 @@
     border-top: 1px solid var(--iw-color-border);
   }
 
-  /* App bars: navbars, with no border */
   .iw-app-bar {
     border-bottom: 0 none;
   }

package/src/styles/themes/inglorious.css

@@ -6,17 +6,10 @@
 
 .iw-theme-inglorious {
   --iw-font-family-sans: var(--iw-font-family);
-  /* The theme on the page itself: the element with the theme class, usually
-     <body>, takes its background, text color and font. */
   background-color: var(--iw-color-bg);
   color: var(--iw-color-text);
   font-family: var(--iw-font-family-sans);
 
-  /* ========================================
-     INGLORIOUS THEME - Neon Videogame Aesthetic
-     ======================================== */
-
-  /* Semantic Colors */
   --iw-color-bg: var(--iw-color-gray-900);
   --iw-color-bg-secondary: var(--iw-color-gray-800);
   --iw-color-bg-tertiary: var(--iw-color-black);
@@ -40,17 +33,11 @@
   --iw-color-accent-hover: #ff33ff;
   --iw-color-accent-active: #ff66ff;
 
-  /* Geometry: keep Inglorious mostly squared */
   --iw-radius-sm: 0;
   --iw-radius-md: 0;
   --iw-radius-lg: 0;
   --iw-radius-xl: 0;
 
-  /* ========================================
-     COMPONENT TOKENS
-     ======================================== */
-
-  /* Button */
   --iw-button-bg: var(--iw-color-primary);
   --iw-button-bg-hover: var(--iw-color-primary-hover);
   --iw-button-bg-active: var(--iw-color-primary-active);
@@ -73,7 +60,6 @@
   --iw-button-ghost-text: var(--iw-color-primary);
   --iw-button-ghost-border: transparent;
 
-  /* Input */
   --iw-input-bg: var(--iw-color-bg-tertiary);
   --iw-input-bg-hover: var(--iw-color-bg-secondary);
   --iw-input-bg-focus: var(--iw-color-bg-tertiary);
@@ -86,23 +72,18 @@
   --iw-input-shadow-focus:
     0 0 0 1px var(--iw-color-primary), 0 0 10px rgba(0, 255, 136, 0.3);
 
-  /* App bar */
   --iw-app-bar-bg: var(--iw-color-surface);
 
-  /* Drawer */
   --iw-drawer-bg: var(--iw-color-surface);
 
-  /* Card */
   --iw-card-bg: var(--iw-color-surface);
   --iw-card-border: var(--iw-color-border);
   --iw-card-radius: var(--iw-radius-none);
   --iw-card-shadow: var(--iw-shadow-lg);
   --iw-card-shadow-hover: var(--iw-shadow-xl), 0 0 15px rgba(0, 255, 136, 0.1);
 
-  /* Badge */
   --iw-badge-radius: var(--iw-radius-none);
 
-  /* List */
   --iw-list-item: transparent;
   --iw-list-item-selected: color-mix(
     in srgb,
@@ -110,13 +91,11 @@
     transparent
   );
 
-  /* Alert */
   --iw-alert-radius: var(--iw-radius-none);
   --iw-alert-shadow: none;
   color-scheme: dark;
 }
 
-/* Light variant */
 .iw-theme-inglorious.iw-theme-light {
   --iw-color-bg: var(--iw-color-white);
   --iw-color-bg-secondary: var(--iw-color-gray-50);