@inglorious/ui 9.5.1 → 9.7.0

package/README.md

@@ -40,8 +40,11 @@ The public CSS exports are:
 - `@inglorious/ui/base.css`
 - `@inglorious/ui/tokens.css`
 - `@inglorious/ui/themes/inglorious.css`
-- `@inglorious/ui/themes/material.css`
+- `@inglorious/ui/themes/material-ui.css`
+- `@inglorious/ui/themes/material-3.css`
 - `@inglorious/ui/themes/bootstrap.css`
+- `@inglorious/ui/themes/ios-18.css`
+- `@inglorious/ui/themes/ios-26.css`
 - `@inglorious/ui/all.css`
 
 ## Icons

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.5.1",
+  "version": "9.7.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",
@@ -37,8 +37,11 @@
     "./tokens.css": "./src/styles/tokens.css",
     "./safe-area.css": "./src/styles/safe-area.css",
     "./themes/inglorious.css": "./src/styles/themes/inglorious.css",
-    "./themes/material.css": "./src/styles/themes/material.css",
+    "./themes/material-ui.css": "./src/styles/themes/material-ui.css",
+    "./themes/material-3.css": "./src/styles/themes/material-3.css",
     "./themes/bootstrap.css": "./src/styles/themes/bootstrap.css",
+    "./themes/ios-18.css": "./src/styles/themes/ios-18.css",
+    "./themes/ios-26.css": "./src/styles/themes/ios-26.css",
     "./before-after": {
       "types": "./types/data-display/before-after.d.ts",
       "import": "./src/data-display/before-after/index.js"
@@ -311,21 +314,21 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@inglorious/store": "12.0.0",
+    "@inglorious/store": "12.1.0",
     "@inglorious/utils": "5.1.0",
-    "@inglorious/web": "6.9.1"
+    "@inglorious/web": "6.10.0"
   },
   "devDependencies": {
     "@iconify-icons/fa7-brands": "^2.0.0",
     "@iconify-icons/fa7-regular": "^2.0.0",
     "@iconify-icons/fa7-solid": "^2.0.0",
     "@iconify-icons/material-symbols": "^2.0.6",
-    "@inglorious/charts": "12.2.2",
+    "@inglorious/charts": "12.2.3",
     "@inglorious/eslint-config": "1.2.0",
-    "@inglorious/store": "12.0.0",
+    "@inglorious/store": "12.1.0",
     "@inglorious/vite-plugin-jsx": "2.0.5",
     "@inglorious/vite-plugin-vue": "1.0.6",
-    "@inglorious/web": "6.9.1",
+    "@inglorious/web": "6.10.0",
     "@storybook/addon-docs": "^10.6.0",
     "@storybook/web-components-vite": "^10.6.0",
     "happy-dom": "^20.14.0",

package/src/controls/input/style.css

@@ -28,6 +28,7 @@
     padding: 0 var(--iw-space-3);
     border: 1px solid var(--iw-input-border);
     border-radius: var(--iw-input-radius);
+    background-color: var(--iw-input-bg);
     transition:
       border-color var(--iw-transition-fast),
       box-shadow var(--iw-transition-fast),

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

@@ -1,6 +1,9 @@
 import android from "@iconify-icons/fa7-brands/android"
+import apple from "@iconify-icons/fa7-brands/apple"
 import bootstrap from "@iconify-icons/fa7-brands/bootstrap"
+import react from "@iconify-icons/fa7-brands/react"
 import gamepad from "@iconify-icons/fa7-solid/gamepad"
+import mobile from "@iconify-icons/fa7-solid/mobile"
 import contrastOutline from "@iconify-icons/material-symbols/contrast-outline"
 import darkModeOutline from "@iconify-icons/material-symbols/dark-mode-outline"
 import formatListBulletedOutline from "@iconify-icons/material-symbols/format-list-bulleted-outline"
@@ -18,18 +21,22 @@ import { Flex } from "../../layout/flex/index.js"
 import { Breadcrumbs } from "../../navigation/breadcrumbs/index.js"
 import { AppBar } from "../../surfaces/app-bar/index.js"
 
+const THEME_ICONS = {
+  inglorious: gamepad,
+  "material-ui": react,
+  "material-3": android,
+  bootstrap,
+  "ios-18": mobile,
+  "ios-26": apple,
+}
+
 export const AppHeader = {
   render(entity, api) {
     const themeEntity = api.getEntity("theme")
     const modeEntity = api.getEntity("mode")
     const themeMode = modeEntity?.mode ?? "auto"
     const themeName = themeEntity?.theme ?? "inglorious"
-    const themeIcon =
-      themeName === "bootstrap"
-        ? bootstrap
-        : themeName === "material"
-          ? android
-          : gamepad
+    const themeIcon = THEME_ICONS[themeName] ?? gamepad
     const modeIcon =
       themeMode === "light"
         ? lightModeOutline

package/src/examples/dashboard/style.css

@@ -79,6 +79,7 @@
 
 .iw-dashboard-stat {
   overflow: hidden;
+  color: white;
 
   .iw-typography,
   .iw-icon,

package/src/examples/dashboard/theme-utils.js

@@ -1,6 +1,13 @@
 const DEFAULT_THEME = "inglorious"
 const DEFAULT_MODE = "auto"
-const THEME_CYCLE = ["inglorious", "material", "bootstrap"]
+const THEME_CYCLE = [
+  "inglorious",
+  "material-ui",
+  "material-3",
+  "bootstrap",
+  "ios-18",
+  "ios-26",
+]
 const MODE_CYCLE = ["auto", "light", "dark"]
 
 let currentTheme = DEFAULT_THEME
@@ -21,7 +28,7 @@ export function applyTheme(theme = currentTheme, mode = currentMode) {
     resolvedMode === "light" ? "iw-theme-light" : "iw-theme-dark"
 
   document.body.className = document.body.className.replace(
-    /iw-theme-(\w+)/g,
+    /iw-theme-([\w-]+)/g,
     "",
   )
   document.body.classList.add(themeClass, modeClass)

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

@@ -2,10 +2,11 @@
  * @typedef {import("../../../types/navigation/view-transitions").TransitionsStore} Store
  * @typedef {import("../../../types/navigation/view-transitions").ViewTransitionType} ViewTransitionType
  * @typedef {import("../../../types/navigation/view-transitions").TransitionsOptions} TransitionsOptions
+ * @typedef {(store: Store) => Store} Middleware
  */
 
 /**
- * Wraps a store so that the renders which follow a navigation are run inside a
+ * A store middleware that runs the renders which follow a navigation inside a
  * view transition, tagged with the direction they navigated in. Pair it with
  * `style.css` from this package, which turns those tags into a slide.
  *
@@ -20,7 +21,7 @@
  * import { withTransitions } from "@inglorious/ui/view-transitions"
  * import "@inglorious/ui/view-transitions.css"
  *
- * mount(withTransitions(store), renderApp, document.getElementById("root"))
+ * const store = createStore({ types, entities, middlewares: [withTransitions()] })
  *
  * Pass `routes` to choose which navigations animate; the rest change page
  * without a transition. A list of route names animates every navigation into
@@ -30,20 +31,23 @@
  *
  * @example
  * // Slide into and out of detail pages; switch tabs instantly.
- * withTransitions(store, { routes: ["eventDetail", "userDetail"] })
+ * withTransitions({ routes: ["eventDetail", "userDetail"] })
  *
  * @example
  * // Slide only when going deeper or coming back up, never sideways.
- * withTransitions(store, {
+ * withTransitions({
  *   routes: ({ from, to }) => from.path.startsWith(to.path) || to.path.startsWith(from.path),
  * })
  *
- * @param {Store} store - The store to wrap.
  * @param {TransitionsOptions} [options]
- * @returns {Store} The same store, with a wrapped `subscribe`.
- * @throws {Error} If the store has no `Router` type.
+ * @returns {Middleware} The middleware, which returns the store it is given with a
+ *   wrapped `subscribe`, and throws if the store has no `Router` type.
  */
-export function withTransitions(store, { routes } = {}) {
+export function withTransitions({ routes } = {}) {
+  return (store) => wrapStore(store, routes)
+}
+
+function wrapStore(store, routes) {
   if (!store.getType("Router")) {
     throw new Error(
       '[withTransitions] Requires the "Router" type from @inglorious/web. The ' +