@inglorious/ui 8.4.0 → 8.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "8.4.0",
+  "version": "8.4.2",
   "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",
@@ -306,21 +306,21 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@inglorious/store": "11.3.0",
-    "@inglorious/utils": "5.0.0",
-    "@inglorious/web": "6.8.0"
+    "@inglorious/store": "12.0.0",
+    "@inglorious/utils": "5.1.0",
+    "@inglorious/web": "6.8.1"
   },
   "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": "11.1.5",
-    "@inglorious/eslint-config": "1.1.4",
-    "@inglorious/store": "11.3.0",
-    "@inglorious/vite-plugin-jsx": "2.0.4",
-    "@inglorious/vite-plugin-vue": "1.0.5",
-    "@inglorious/web": "6.8.0",
+    "@inglorious/charts": "11.1.6",
+    "@inglorious/eslint-config": "1.2.0",
+    "@inglorious/store": "12.0.0",
+    "@inglorious/vite-plugin-jsx": "2.0.5",
+    "@inglorious/vite-plugin-vue": "1.0.6",
+    "@inglorious/web": "6.8.1",
     "@storybook/addon-docs": "^10.6.0",
     "@storybook/web-components-vite": "^10.6.0",
     "happy-dom": "^20.14.0",

package/src/controls/fab/fab.stories.js

@@ -1,6 +1,6 @@
 import { html } from "@inglorious/web"
 
-import { Icon } from "../../data-display/icon"
+import { Icon } from "../../data-display/icon/index.js"
 import { createRender } from "../../stories/notify-story.js"
 import { Fab } from "."
 

package/src/controls/select/template.js

@@ -12,40 +12,6 @@ import { Icon } from "../../data-display/icon/index.js"
 import { fallbackLabel } from "../../shared/fallback-label.js"
 import { formatOption, getOptionValue, isOptionSelected } from "./helpers.js"
 
-/**
- * Opens the native dropdown when the arrow strip is pressed.
- *
- * The arrow is a sibling of the select, not an overlay on it, so a press on it
- * has no control underneath to hit. A native popup only opens from a trusted
- * gesture on the select itself, and the strip is outside it.
- *
- * `showPicker()` is the API for that. It needs transient user activation, which
- * a real click has and a dispatched event does not, and it throws rather than
- * silently doing nothing, so the fallback covers the browsers without it.
- *
- * Deliberately on `click`, not `pointerdown`: focusing from pointerdown gets
- * the focus moved away again by the browser's own mousedown handling, which
- * showed up as a focus immediately followed by a blur.
- *
- * @param {MouseEvent} event
- */
-function openFromArrowStrip(event) {
-  const frame = event.currentTarget
-  const select = frame?.querySelector("select")
-  if (!select || select.disabled || event.target === select) return
-
-  event.preventDefault()
-  if (typeof select.showPicker === "function") {
-    try {
-      select.showPicker()
-      return
-    } catch {
-      // No user activation, or the popup is already showing.
-    }
-  }
-  select.focus()
-}
-
 /**
  * Renders a styled native select control with optional single or multi-select modes.
  * Options can be primitives or objects and are rendered with consistent theming.
@@ -208,3 +174,37 @@ export const Select = {
     </div>`
   },
 }
+
+/**
+ * Opens the native dropdown when the arrow strip is pressed.
+ *
+ * The arrow is a sibling of the select, not an overlay on it, so a press on it
+ * has no control underneath to hit. A native popup only opens from a trusted
+ * gesture on the select itself, and the strip is outside it.
+ *
+ * `showPicker()` is the API for that. It needs transient user activation, which
+ * a real click has and a dispatched event does not, and it throws rather than
+ * silently doing nothing, so the fallback covers the browsers without it.
+ *
+ * Deliberately on `click`, not `pointerdown`: focusing from pointerdown gets
+ * the focus moved away again by the browser's own mousedown handling, which
+ * showed up as a focus immediately followed by a blur.
+ *
+ * @param {MouseEvent} event
+ */
+function openFromArrowStrip(event) {
+  const frame = event.currentTarget
+  const select = frame?.querySelector("select")
+  if (!select || select.disabled || event.target === select) return
+
+  event.preventDefault()
+  if (typeof select.showPicker === "function") {
+    try {
+      select.showPicker()
+      return
+    } catch {
+      // No user activation, or the popup is already showing.
+    }
+  }
+  select.focus()
+}

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

@@ -8,14 +8,6 @@ import { Carousel } from "./index.js"
 
 const COLORS = ["#22d3ee", "#4f46e5", "#f59e0b", "#10b981", "#ef4444"]
 
-const slide = (index) =>
-  html`<div
-    style="display:grid;place-items:center;height:14rem;border-radius:0.5rem;
-           background:${COLORS[index]};color:#fff;font:700 2rem sans-serif;"
-  >
-    ${index + 1}
-  </div>`
-
 const items = COLORS.map((color, index) => slide(index))
 
 export default {
@@ -164,3 +156,12 @@ ManyPerView.args = {
 ManyPerView.decorators = [
   (story) => html`<div style="--iw-carousel-item-size: 14rem">${story()}</div>`,
 ]
+
+function slide(index) {
+  return html`<div
+    style="display:grid;place-items:center;height:14rem;border-radius:0.5rem;
+           background:${COLORS[index]};color:#fff;font:700 2rem sans-serif;"
+  >
+    ${index + 1}
+  </div>`
+}

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

@@ -44,16 +44,6 @@ const baseColumns = [
   },
 ]
 
-function createRows(count) {
-  return Array.from({ length: count }, (_, index) => ({
-    id: index + 1,
-    name: `User ${index + 1}`,
-    age: 20 + (index % 35),
-    active: index % 3 !== 0,
-    role: index % 4 === 0 ? "Admin" : "User",
-  }))
-}
-
 export default {
   title: "Data Display/DataGrid",
   tags: ["autodocs"],
@@ -156,3 +146,13 @@ export const Virtualized = {
     },
   },
 }
+
+function createRows(count) {
+  return Array.from({ length: count }, (_, index) => ({
+    id: index + 1,
+    name: `User ${index + 1}`,
+    age: 20 + (index % 35),
+    active: index % 3 !== 0,
+    role: index % 4 === 0 ? "Admin" : "User",
+  }))
+}

package/src/data-display/data-grid/filters/input.js

@@ -1,5 +1,5 @@
-import { Input } from "../../../controls/input"
-import { format } from "./helpers"
+import { Input } from "../../../controls/input/index.js"
+import { format } from "./helpers.js"
 
 const DEFAULT_PLACEHOLDER = {
   number: "=",

package/src/data-display/data-grid/filters/range.js

@@ -1,7 +1,7 @@
 import { html } from "@inglorious/web"
 
-import { Input } from "../../../controls/input"
-import { format } from "./helpers"
+import { Input } from "../../../controls/input/index.js"
+import { format } from "./helpers.js"
 
 const RANGE_TYPE = {
   range: "number",

package/src/data-display/data-grid/filters/select.js

@@ -1,5 +1,5 @@
-import { Select } from "../../../controls/select"
-import { format } from "./helpers"
+import { Select } from "../../../controls/select/index.js"
+import { format } from "./helpers.js"
 
 export const SelectFilter = {
   render(entity, column) {

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

@@ -14,7 +14,7 @@ import { Input } from "../../controls/input/index.js"
 import { Select } from "../../controls/select/index.js"
 import { Pagination } from "../../navigation/pagination/index.js"
 import { VirtualList } from "../virtual-list/index.js"
-import { Filters } from "./filters"
+import { Filters } from "./filters/index.js"
 import {
   getPaginationInfo,
   getRowKeyValue,

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

@@ -2,7 +2,7 @@ import { VirtualList } from "@inglorious/ui/virtual-list"
 import { html } from "@inglorious/web"
 import { repeat } from "@inglorious/web/directives/repeat"
 
-import { Button } from "../../controls/button"
+import { Button } from "../../controls/button/index.js"
 import {
   createEntityRender,
   notifyActionArgType,

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

@@ -25,9 +25,9 @@ import { ref } from "@inglorious/web/directives/ref"
 import { repeat } from "@inglorious/web/directives/repeat"
 import { when } from "@inglorious/web/directives/when"
 
-import { IconButton } from "../../controls/icon-button"
-import { Icon } from "../../data-display/icon"
-import { Flex } from "../../layout/flex"
+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"
 
 const PRETTY_INDEX = 1

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

@@ -15,27 +15,6 @@ const PRETTY_INDEX = 1
 // 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.
@@ -125,3 +104,24 @@ export function renderItem(entity, { item, index }, api) {
     ${index + PRETTY_INDEX}. ${JSON.stringify(item)}
   </div>`
 }
+
+/**
+ * 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)
+}

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

@@ -7,12 +7,12 @@ import notificationsOutline from "@iconify-icons/material-symbols/notifications-
 import speedOutline from "@iconify-icons/material-symbols/speed-outline"
 import { html } from "@inglorious/web"
 
-import { Avatar } from "../../data-display/avatar"
-import { Badge } from "../../data-display/badge"
-import { Icon } from "../../data-display/icon"
-import { List } from "../../data-display/list"
-import { Flex } from "../../layout/flex"
-import { Drawer } from "../../navigation/drawer"
+import { Avatar } from "../../data-display/avatar/index.js"
+import { Badge } from "../../data-display/badge/index.js"
+import { Icon } from "../../data-display/icon/index.js"
+import { List } from "../../data-display/list/index.js"
+import { Flex } from "../../layout/flex/index.js"
+import { Drawer } from "../../navigation/drawer/index.js"
 
 export const AppDrawer = {
   create(entity) {

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

@@ -10,13 +10,13 @@ import menuOutline from "@iconify-icons/material-symbols/menu-outline"
 import notificationsOutline from "@iconify-icons/material-symbols/notifications-outline"
 import { html } from "@inglorious/web"
 
-import { Button } from "../../controls/button"
-import { Avatar } from "../../data-display/avatar"
-import { Divider } from "../../data-display/divider"
-import { Icon } from "../../data-display/icon"
-import { Flex } from "../../layout/flex"
-import { Breadcrumbs } from "../../navigation/breadcrumbs"
-import { AppBar } from "../../surfaces/app-bar"
+import { Button } from "../../controls/button/index.js"
+import { Avatar } from "../../data-display/avatar/index.js"
+import { Divider } from "../../data-display/divider/index.js"
+import { Icon } from "../../data-display/icon/index.js"
+import { Flex } from "../../layout/flex/index.js"
+import { Breadcrumbs } from "../../navigation/breadcrumbs/index.js"
+import { AppBar } from "../../surfaces/app-bar/index.js"
 
 export const AppHeader = {
   render(entity, api) {

package/src/examples/dashboard/before-after-data.js

@@ -1,10 +1,22 @@
+export const beforeAfterImages = {
+  before: {
+    src: svg("BEFORE", "#9ca3af", "#374151"),
+    alt: "Before — grayscale",
+  },
+  after: {
+    src: svg("AFTER", "#22d3ee", "#4f46e5"),
+    alt: "After — color graded",
+  },
+}
+
 // Self-contained demo images for the Before/After control, so the dashboard
 // renders the comparison without any network requests.
 
-const svg = (label, from, to) =>
-  "data:image/svg+xml," +
-  encodeURIComponent(
-    `<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540">
+function svg(label, from, to) {
+  return (
+    "data:image/svg+xml," +
+    encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540">
       <defs>
         <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
           <stop offset="0" stop-color="${from}"/>
@@ -15,15 +27,6 @@ const svg = (label, from, to) =>
       <text x="48" y="496" font-family="sans-serif" font-size="72" font-weight="700"
             fill="rgba(255,255,255,0.92)">${label}</text>
     </svg>`,
+    )
   )
-
-export const beforeAfterImages = {
-  before: {
-    src: svg("BEFORE", "#9ca3af", "#374151"),
-    alt: "Before — grayscale",
-  },
-  after: {
-    src: svg("AFTER", "#22d3ee", "#4f46e5"),
-    alt: "After — color graded",
-  },
 }

package/src/examples/dashboard/primitive-content.js

@@ -114,38 +114,8 @@ const categoryMeta = {
   },
 }
 
-const previewRow = (children) =>
-  html`<div class="iw-primitive-preview-row">${children}</div>`
-
-const previewColumn = (children) =>
-  html`<div class="iw-primitive-preview-column">${children}</div>`
-
 const livePreviews = new Map()
 
-/**
- * Entity-driven primitives render their controls from state, so a preview
- * without a store freezes: a carousel arrow would recompute from the same page
- * forever, and a dragged divider would never move. Give each one its own store,
- * created once and reused on every re-render so the preview keeps its state.
- * @param {Object.<string, any>} types
- * @param {Object.<string, any>} entity
- * @returns {HTMLElement}
- */
-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 } })
-    mount(store, (api) => api.render(entity.id), container)
-    livePreviews.set(entity.id, container)
-  }
-
-  return livePreviews.get(entity.id)
-}
-
 const carouselSlides = [
   "#22d3ee",
   "#4f46e5",
@@ -1542,3 +1512,35 @@ function toTitleCase(slug) {
     .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
     .join(" ")
 }
+
+/**
+ * Entity-driven primitives render their controls from state, so a preview
+ * without a store freezes: a carousel arrow would recompute from the same page
+ * forever, and a dragged divider would never move. Give each one its own store,
+ * created once and reused on every re-render so the preview keeps its state.
+ * @param {Object.<string, any>} types
+ * @param {Object.<string, any>} entity
+ * @returns {HTMLElement}
+ */
+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 } })
+    mount(store, (api) => api.render(entity.id), container)
+    livePreviews.set(entity.id, container)
+  }
+
+  return livePreviews.get(entity.id)
+}
+
+function previewRow(children) {
+  return html`<div class="iw-primitive-preview-row">${children}</div>`
+}
+
+function previewColumn(children) {
+  return html`<div class="iw-primitive-preview-column">${children}</div>`
+}

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

@@ -1,11 +1,11 @@
 import { Area, Chart } from "@inglorious/charts"
 import { html } from "@inglorious/web"
 
-import { Divider } from "../../data-display/divider"
-import { Icon } from "../../data-display/icon"
-import { Typography } from "../../data-display/typography"
-import { Grid } from "../../layout/grid"
-import { Card } from "../../surfaces/card"
+import { Divider } from "../../data-display/divider/index.js"
+import { Icon } from "../../data-display/icon/index.js"
+import { Typography } from "../../data-display/typography/index.js"
+import { Grid } from "../../layout/grid/index.js"
+import { Card } from "../../surfaces/card/index.js"
 
 export const SocialCard = {
   render(entity, api) {

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

@@ -2,10 +2,10 @@ import moreVertOutline from "@iconify-icons/material-symbols/more-vert-outline"
 import { Area, Bar, Chart, Dots, Line } from "@inglorious/charts"
 import { html } from "@inglorious/web"
 
-import { Button } from "../../controls/button"
-import { Icon } from "../../data-display/icon"
-import { Typography } from "../../data-display/typography"
-import { Card } from "../../surfaces/card"
+import { Button } from "../../controls/button/index.js"
+import { Icon } from "../../data-display/icon/index.js"
+import { Typography } from "../../data-display/typography/index.js"
+import { Card } from "../../surfaces/card/index.js"
 
 export const StatCard = {
   render(entity, api) {

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

@@ -61,6 +61,11 @@ export function nextMode(mode) {
   return MODE_CYCLE[(index + 1) % MODE_CYCLE.length]
 }
 
+export const DEFAULTS = {
+  theme: DEFAULT_THEME,
+  mode: DEFAULT_MODE,
+}
+
 function resolveMode(mode) {
   if (mode !== "auto") return mode
   return getSystemMode()
@@ -88,8 +93,3 @@ function ensureSystemListener() {
     systemMedia.addListener(systemListener)
   }
 }
-
-export const DEFAULTS = {
-  theme: DEFAULT_THEME,
-  mode: DEFAULT_MODE,
-}

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

@@ -9,15 +9,15 @@ import {
 } from "@inglorious/charts"
 import { html } from "@inglorious/web"
 
-import { Button } from "../../controls/button"
-import { ButtonGroup } from "../../controls/button-group"
-import { Icon } from "../../data-display/icon"
-import { Typography } from "../../data-display/typography"
-import { Progress } from "../../feedback/progress"
-import { Flex } from "../../layout/flex"
-import { Grid } from "../../layout/grid"
-import { Card } from "../../surfaces/card"
-import { trafficSeries, trafficSummary } from "./data"
+import { Button } from "../../controls/button/index.js"
+import { ButtonGroup } from "../../controls/button-group/index.js"
+import { Icon } from "../../data-display/icon/index.js"
+import { Typography } from "../../data-display/typography/index.js"
+import { Progress } from "../../feedback/progress/index.js"
+import { Flex } from "../../layout/flex/index.js"
+import { Grid } from "../../layout/grid/index.js"
+import { Card } from "../../surfaces/card/index.js"
+import { trafficSeries, trafficSummary } from "./data.js"
 
 export const TrafficCard = {
   render(entity, api) {

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

@@ -1,17 +1,17 @@
 import moreVertOutline from "@iconify-icons/material-symbols/more-vert-outline"
 import { html } from "@inglorious/web"
 
-import { Button } from "../../controls/button"
-import { Avatar } from "../../data-display/avatar"
-import { Badge } from "../../data-display/badge"
-import { Icon } from "../../data-display/icon"
-import { Table } from "../../data-display/table"
-import { Typography } from "../../data-display/typography"
-import { Progress } from "../../feedback/progress"
-import { Flex } from "../../layout/flex"
-import { Grid } from "../../layout/grid"
-import { Card } from "../../surfaces/card"
-import { clientBars, sourceBars, userRows } from "./data"
+import { Button } from "../../controls/button/index.js"
+import { Avatar } from "../../data-display/avatar/index.js"
+import { Badge } from "../../data-display/badge/index.js"
+import { Icon } from "../../data-display/icon/index.js"
+import { Table } from "../../data-display/table/index.js"
+import { Typography } from "../../data-display/typography/index.js"
+import { Progress } from "../../feedback/progress/index.js"
+import { Flex } from "../../layout/flex/index.js"
+import { Grid } from "../../layout/grid/index.js"
+import { Card } from "../../surfaces/card/index.js"
+import { clientBars, sourceBars, userRows } from "./data.js"
 
 export const TrafficSalesCard = {
   render(entity, api) {

package/src/feedback/progress/template.js

@@ -6,10 +6,6 @@
 import { html } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 
-function clamp(value) {
-  return Math.max(0, Math.min(100, value))
-}
-
 /**
  * Renders a linear or circular progress indicator.
  * Indeterminate mode is used when no explicit value is provided.
@@ -90,3 +86,7 @@ export function render(props) {
     </div>
   </div>`
 }
+
+function clamp(value) {
+  return Math.max(0, Math.min(100, value))
+}

package/src/navigation/drawer/template.js

@@ -6,10 +6,10 @@
 import { html } from "@inglorious/web"
 import { when } from "@inglorious/web/directives/when"
 
-import { Button } from "../../controls/button"
-import { Icon } from "../../data-display/icon"
-import { Backdrop } from "../../feedback/backdrop"
-import { Flex } from "../../layout/flex"
+import { Button } from "../../controls/button/index.js"
+import { Icon } from "../../data-display/icon/index.js"
+import { Backdrop } from "../../feedback/backdrop/index.js"
+import { Flex } from "../../layout/flex/index.js"
 import { close, leftPanelClose } from "../../shared/icons.js"
 
 /**

package/src/shared/apply-element-props.js

@@ -1,5 +1,32 @@
 const previousKeysByElement = new WeakMap()
 
+/**
+ * Apply arbitrary properties/attributes to an element.
+ * Useful when entities include extra DOM fields beyond the typed API.
+ *
+ * @param {Element | null} element
+ * @param {Record<string, unknown>} props
+ */
+export function applyElementProps(element, props) {
+  if (!element) return
+
+  const previousKeys = previousKeysByElement.get(element) ?? new Set()
+  const nextKeys = new Set(Object.keys(props))
+
+  for (const key of previousKeys) {
+    if (!nextKeys.has(key)) {
+      clearProp(element, key)
+    }
+  }
+
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "class" || key === "className") continue
+    setProp(element, key, value)
+  }
+
+  previousKeysByElement.set(element, nextKeys)
+}
+
 function clearProp(element, key) {
   if (key in element && !key.includes("-")) {
     try {
@@ -50,30 +77,3 @@ function setProp(element, key, value) {
 
   element.setAttribute(key, String(value))
 }
-
-/**
- * Apply arbitrary properties/attributes to an element.
- * Useful when entities include extra DOM fields beyond the typed API.
- *
- * @param {Element | null} element
- * @param {Record<string, unknown>} props
- */
-export function applyElementProps(element, props) {
-  if (!element) return
-
-  const previousKeys = previousKeysByElement.get(element) ?? new Set()
-  const nextKeys = new Set(Object.keys(props))
-
-  for (const key of previousKeys) {
-    if (!nextKeys.has(key)) {
-      clearProp(element, key)
-    }
-  }
-
-  for (const [key, value] of Object.entries(props)) {
-    if (key === "class" || key === "className") continue
-    setProp(element, key, value)
-  }
-
-  previousKeysByElement.set(element, nextKeys)
-}