@inglorious/ui 8.1.1 → 8.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "8.1.1",
+  "version": "8.2.1",
   "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",
@@ -310,8 +310,8 @@
     "@iconify-icons/fa7-regular": "^2.0.0",
     "@iconify-icons/fa7-solid": "^2.0.0",
     "@iconify-icons/material-symbols": "^2.0.6",
-    "@inglorious/charts": "10.0.7",
-    "@inglorious/eslint-config": "1.1.2",
+    "@inglorious/charts": "11.1.0",
+    "@inglorious/eslint-config": "1.1.3",
     "@inglorious/store": "11.0.4",
     "@inglorious/vite-plugin-jsx": "2.0.4",
     "@inglorious/vite-plugin-vue": "1.0.5",
@@ -321,6 +321,7 @@
     "happy-dom": "^20.14.0",
     "jsdom": "^30.0.1",
     "prettier": "^3.9.6",
+    "remark-gfm": "^4.0.1",
     "storybook": "^10.6.0",
     "vite": "^8.2.2",
     "vitest": "^5.0.0"

package/src/controls/button/style.css

@@ -8,6 +8,8 @@
   font-size: var(--iw-font-size-base);
   font-weight: var(--iw-font-weight-normal);
   line-height: var(--iw-line-height-normal);
+  text-transform: var(--iw-label-text-transform);
+  letter-spacing: var(--iw-label-letter-spacing);
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;

package/src/data-display/icon/icon-utf8.stories.js

@@ -9,7 +9,7 @@ import {
 } from "../../stories/notifyStory.js"
 import { Icon } from "."
 
-const unicodeList = {
+const UnicodeList = {
   ...VirtualList,
 
   create(entity) {
@@ -38,7 +38,7 @@ const unicodeList = {
   render(entity, api) {
     return VirtualList.render(entity, {
       ...api,
-      getType: () => unicodeList,
+      getType: () => UnicodeList,
     })
   },
 
@@ -88,7 +88,7 @@ const unicodeList = {
 
 export default {
   title: "Data Display/Icon",
-  render: createEntityRender({ unicodeList }),
+  render: createEntityRender({ UnicodeList }),
   argTypes: {
     ...notifyActionArgType,
     start: {

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

@@ -15,6 +15,15 @@
     width: 100%;
   }
 
+  &.iw-table-wrapping {
+    min-width: 0;
+
+    .iw-table-header-cell,
+    .iw-table-cell {
+      overflow-wrap: anywhere;
+    }
+  }
+
   &.iw-table-striped {
     .iw-table-row-even {
       background: color-mix(

package/src/data-display/table/table.stories.js

@@ -10,6 +10,11 @@ export default {
     rows: { control: "object", description: "Row records." },
     isFullWidth: { control: "boolean", description: "Stretch table width." },
     isStriped: { control: "boolean", description: "Enable zebra rows." },
+    isWrapping: {
+      control: "boolean",
+      description:
+        "Wrap cell content to fit the container instead of scrolling.",
+    },
     onRowClick: { action: "onRowClick" },
   },
   parameters: {

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

@@ -37,6 +37,7 @@ export const Table = {
       rows = [],
       isFullWidth = false,
       isStriped = false,
+      isWrapping = false,
       onRowClick,
       ...rest
     } = props
@@ -45,6 +46,7 @@ export const Table = {
       "iw-table": true,
       "iw-table-full-width": isFullWidth,
       "iw-table-striped": isStriped,
+      "iw-table-wrapping": isWrapping,
     }
 
     return html`

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

@@ -45,12 +45,17 @@ export function scroll(entity, containerEl) {
  */
 export function mount(entity, containerEl) {
   const firstItem = containerEl.querySelector("[data-index]")
-  if (!firstItem) return
+  // 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
   entity.visibleRange = {
     start: 0,
-    end: Math.ceil(entity.viewportHeight / entity.itemHeight),
+    end: Math.min(
+      Math.ceil(entity.viewportHeight / entity.itemHeight),
+      entity.items?.length ?? Infinity,
+    ),
   }
 }
 

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

@@ -11,6 +11,31 @@ 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()
+
+/**
+ * Notifies `mount` once per list element, after a frame and once it is in the
+ * document: before that it has no layout to measure.
+ * @param {HTMLElement} el
+ * @param {VirtualListEntity} entity
+ * @param {Api} api
+ */
+function measureOnce(el, entity, api) {
+  if (measured.has(el)) return
+  measured.add(el)
+
+  const measure = () => {
+    if (!el.isConnected) {
+      requestAnimationFrame(measure)
+      return
+    }
+    api.notify(`#${entity.id}:mount`, el)
+  }
+  requestAnimationFrame(measure)
+}
+
 /**
  * Renders a virtualized list that only mounts visible items for performance.
  * Uses item height estimates to compute scroll ranges and notifies on mount/scroll.
@@ -49,11 +74,7 @@ export function render(entity, api) {
       style=${styleMap({ height: `${viewportHeight}px`, overflow: "auto" })}
       @scroll=${(e) => api.notify(`#${entity.id}:scroll`, e.currentTarget)}
       ${ref((el) => {
-        if (el && !itemHeight) {
-          queueMicrotask(() => {
-            api.notify(`#${entity.id}:mount`, el)
-          })
-        }
+        if (el && !itemHeight) measureOnce(el, entity, api)
       })}
     >
       <div

package/src/examples/dashboard/social-card.js

@@ -1,4 +1,4 @@
-import { Chart } from "@inglorious/charts"
+import { Area, Chart } from "@inglorious/charts"
 import { html } from "@inglorious/web"
 
 import { Divider } from "../../data-display/divider"
@@ -55,7 +55,7 @@ export const SocialCard = {
         height: 200,
         padding: 0,
         children: [
-          Chart.Area({
+          Area({
             dataKey: "value",
             stroke: "rgba(255,255,255,0.9)",
             fill: "rgba(255,255,255,0.35)",

package/src/examples/dashboard/stat-card.js

@@ -1,5 +1,5 @@
 import moreVertOutline from "@iconify-icons/material-symbols/more-vert-outline"
-import { Chart } from "@inglorious/charts"
+import { Area, Bar, Chart, Dots, Line } from "@inglorious/charts"
 import { html } from "@inglorious/web"
 
 import { Button } from "../../controls/button"
@@ -66,20 +66,16 @@ export const StatCard = {
     const children = []
 
     if (entity.chartType === "area") {
-      children.push(
-        Chart.Area({ dataKey: "value", fill: "rgba(255,255,255,0.3)" }),
-      )
+      children.push(Area({ dataKey: "value", fill: "rgba(255,255,255,0.3)" }))
     } else if (entity.chartType === "bar") {
-      children.push(
-        Chart.Bar({ dataKey: "value", fill: "rgba(255,255,255,0.3)" }),
-      )
+      children.push(Bar({ dataKey: "value", fill: "rgba(255,255,255,0.3)" }))
     } else if (entity.chartType === "line") {
-      children.push(Chart.Line({ dataKey: "value", stroke: "white" }))
+      children.push(Line({ dataKey: "value", stroke: "white" }))
     }
 
     if (entity.hasDots) {
       children.push(
-        Chart.Dots({ dataKey: "value", stroke: "white", fill: "#39a2f1" }),
+        Dots({ dataKey: "value", stroke: "white", fill: "#39a2f1" }),
       )
     }
 

package/src/examples/dashboard/traffic-card.js

@@ -1,5 +1,12 @@
 import downloadOutline from "@iconify-icons/material-symbols/download-outline"
-import { Chart } from "@inglorious/charts"
+import {
+  Area,
+  CartesianGrid,
+  Chart,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "@inglorious/charts"
 import { html } from "@inglorious/web"
 
 import { Button } from "../../controls/button"
@@ -94,15 +101,15 @@ export const TrafficCard = {
         height: 320,
         dataKeys: ["visits", "unique"],
         children: [
-          Chart.CartesianGrid({
+          CartesianGrid({
             stroke: "rgba(255,255,255,0.08)",
             strokeDasharray: "4 4",
           }),
-          Chart.XAxis({ dataKey: "month" }),
-          Chart.YAxis({ width: "auto" }),
-          Chart.Area({ dataKey: "visits", stroke: "#39a2f1", strokeWidth: 3 }),
-          Chart.Area({ dataKey: "unique", stroke: "#2eb85c", strokeWidth: 3 }),
-          Chart.Tooltip({}),
+          XAxis({ dataKey: "month" }),
+          YAxis(),
+          Area({ dataKey: "visits", stroke: "#39a2f1", strokeWidth: 3 }),
+          Area({ dataKey: "unique", stroke: "#2eb85c", strokeWidth: 3 }),
+          Tooltip({}),
         ],
       },
       api,

package/src/feedback/progress/template.js

@@ -77,6 +77,7 @@ export function render(props) {
     class=${classMap({
       "iw-progress": true,
       "iw-progress-linear": true,
+      [`iw-progress-${color}`]: true,
       "iw-progress-indeterminate": progress == null,
       ...extraClasses,
     })}

package/src/navigation/tabs/style.css

@@ -22,6 +22,8 @@
   align-items: center;
   gap: var(--iw-space-2);
   padding: var(--iw-space-3) var(--iw-space-4);
+  text-transform: var(--iw-label-text-transform);
+  letter-spacing: var(--iw-label-letter-spacing);
   cursor: pointer;
 }
 

package/src/styles/themes/material.css

@@ -33,6 +33,10 @@
   --iw-color-accent-hover: #c2185b;
   --iw-color-accent-active: #ad1457;
 
+  /* Buttons and tabs carry their labels in capitals, as Material does. */
+  --iw-label-text-transform: uppercase;
+  --iw-label-letter-spacing: 0.06em;
+
   /* ========================================
      COMPONENT TOKENS
      ======================================== */

package/src/styles/tokens.css

@@ -125,6 +125,10 @@
   --iw-line-height-normal: 1.5;
   --iw-line-height-relaxed: 1.75;
 
+  /* Labels of buttons and tabs: a theme can set them in capitals. */
+  --iw-label-text-transform: none;
+  --iw-label-letter-spacing: normal;
+
   /* ========================================
      SHADOWS
      ======================================== */

package/types/controls/button-group.d.ts

@@ -7,7 +7,14 @@ export interface ButtonGroupItem {
   children?: TemplateResult | string | number
   isDisabled?: boolean
   variant?: "default" | "outline" | "ghost"
-  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  color?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
   size?: "sm" | "md" | "lg"
   icon?: string
   iconAfter?: string
@@ -23,7 +30,14 @@ export interface ButtonGroupProps {
   isAttached?: boolean
   size?: "sm" | "md" | "lg"
   variant?: "default" | "outline" | "ghost"
-  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  color?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
   isDisabled?: boolean
   onChange?: (value?: string | string[]) => void
   [key: string]: unknown

package/types/controls/button.d.ts

@@ -5,7 +5,14 @@ export interface ButtonProps {
   type: "Button"
   children?: TemplateResult | string | number
   variant?: "default" | "outline" | "ghost"
-  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  color?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
   size?: "sm" | "md" | "lg"
   shape?: "rectangle" | "pill" | "round" | "square"
   isDisabled?: boolean

package/types/controls/fab.d.ts

@@ -3,7 +3,14 @@ import type { TemplateResult } from "@inglorious/web"
 export interface FabProps {
   id?: string
   children?: TemplateResult | string | number
-  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  color?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
   size?: "sm" | "md" | "lg"
   isDisabled?: boolean
   type?: "button" | "submit" | "reset" | "menu"

package/types/controls/icon-button.d.ts

@@ -9,7 +9,14 @@ export interface IconButtonProps {
   direction?: "row" | "column"
   ariaLabel?: string
   variant?: "default" | "outline" | "ghost"
-  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  color?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
   size?: "sm" | "md" | "lg"
   isDisabled?: boolean
   isFullWidth?: boolean

package/types/data-display/table.d.ts

@@ -17,6 +17,7 @@ export interface TableProps {
   rows?: TableRow[]
   isFullWidth?: boolean
   isStriped?: boolean
+  isWrapping?: boolean
   onRowClick?: (row: TableRow) => void
   [key: string]: unknown
 }

package/types/data-display/tooltip.d.ts

@@ -9,7 +9,7 @@ export interface TooltipProps {
   isOpen?: boolean
   maxWidth?: string
   className?: string
-  onClick: () => void
+  onClick?: () => void
   [key: string]: unknown
 }
 

package/types/feedback/progress.d.ts

@@ -5,6 +5,14 @@ export interface ProgressProps {
   type?: string
   variant?: "linear" | "circular"
   value?: number
+  color?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
   size?: number
   thickness?: number
   className?: string

package/types/navigation/tabs.d.ts

@@ -15,7 +15,7 @@ export interface TabsProps {
   id?: string
   type?: string
   items?: TabItem[]
-  value?: string | number
+  value?: string | number | null
   isCentered?: boolean
   isFullWidth?: boolean
   onChange?: (value: string | number) => void