@inglorious/ui 7.3.0 → 7.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "7.3.0",
+  "version": "7.4.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/data-display/icon/style.css

@@ -1,3 +1,7 @@
+/* The size is a floor, not a fixed box. A font glyph takes the size's
+   font-size and fits it exactly; content that sizes itself (a Material icon
+   at lg, 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;
@@ -5,20 +9,20 @@
   cursor: pointer;
 
   &.iw-icon-sm {
-    width: var(--iw-space-3);
-    height: var(--iw-space-3);
+    min-width: var(--iw-space-3);
+    min-height: var(--iw-space-3);
     font-size: var(--iw-font-size-sm);
   }
 
   &.iw-icon-md {
-    width: var(--iw-space-4);
-    height: var(--iw-space-4);
+    min-width: var(--iw-space-4);
+    min-height: var(--iw-space-4);
     font-size: var(--iw-font-size-base);
   }
 
   &.iw-icon-lg {
-    width: var(--iw-space-6);
-    height: var(--iw-space-6);
+    min-width: var(--iw-space-6);
+    min-height: var(--iw-space-6);
     font-size: var(--iw-font-size-2xl);
   }
 }

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

@@ -42,12 +42,21 @@
     color 0.15s ease;
 }
 
+/* The leading icon is an Icon of size lg, which fixes its own width and
+   height. Its spacing therefore goes outside it, as margin: padding on the
+   same element fought that fixed size, and under border-box it ate the box,
+   leaving 32px of padding around a glyph that overflowed. */
 .iw-list-item-icon {
-  padding: var(--iw-space-4);
+  margin: var(--iw-list-icon-spacing, var(--iw-space-4));
 }
 
+/* An item without an icon lines its text up with the items that have one:
+   the icon, the margin either side of it, and the row gap. */
 .iw-list-item-inset .iw-list-item-content {
-  margin-left: calc(var(--iw-space-3) + var(--iw-list-icon-size, 1.25rem));
+  margin-left: calc(
+    var(--iw-list-icon-size, var(--iw-space-6)) + 2 *
+      var(--iw-list-icon-spacing, var(--iw-space-4)) + var(--iw-space-2)
+  );
 }
 
 .iw-list-title {

package/src/examples/dashboard/app-drawer.js

@@ -40,7 +40,6 @@ export const AppDrawer = {
       title: Flex.render({
         align: "center",
         gap: "sm",
-        padding: "md",
         className: "iw-dashboard-brand",
         children: [
           Avatar.render({ src: "/transparent.png", shape: "square" }),

package/src/navigation/drawer/style.css

@@ -14,7 +14,10 @@
   bottom: 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);
     flex-shrink: 0;
 
@@ -65,6 +68,28 @@
       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;
+    }
+
+    .iw-list-item-icon {
+      margin-inline: 0;
+    }
+
+    .iw-list-item-content,
+    .iw-list-item-trailing {
+      display: none;
+    }
+
     .iw-drawer-toggler > span {
       transform: rotate(180deg);
     }

package/src/navigation/drawer/template.js

@@ -65,6 +65,7 @@ export function render(props) {
               align: "center",
               justify: "between",
               gap: "sm",
+              padding: "sm",
               className: "iw-drawer-header",
               children: [
                 when(