@inglorious/ui 2.0.1 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -280,9 +280,10 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@inglorious/charts": "5.0.1",
-    "@inglorious/web": "5.0.1",
-    "@inglorious/utils": "3.8.0"
+    "@inglorious/charts": "6.0.0",
+    "@inglorious/store": "11.0.0",
+    "@inglorious/utils": "3.8.0",
+    "@inglorious/web": "6.0.0"
   },
   "devDependencies": {
     "@fontsource/material-symbols-outlined": "^5.2.36",
@@ -297,10 +298,10 @@
     "vite": "^7.3.1",
     "vitest": "^4.0.15",
     "@inglorious/eslint-config": "1.1.2",
-    "@inglorious/vite-plugin-jsx": "2.0.0",
-    "@inglorious/web": "5.0.1",
-    "@inglorious/store": "10.0.0",
-    "@inglorious/vite-plugin-vue": "1.0.1"
+    "@inglorious/store": "11.0.0",
+    "@inglorious/web": "6.0.0",
+    "@inglorious/vite-plugin-vue": "1.0.1",
+    "@inglorious/vite-plugin-jsx": "2.0.0"
   },
   "engines": {
     "node": ">= 22"

package/src/controls/button/template.js

@@ -3,7 +3,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

package/src/controls/button-group/template.js

@@ -3,7 +3,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 import { Button } from "../button/index.js"

package/src/controls/checkbox/template.js

@@ -3,7 +3,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

package/src/controls/combobox/template.js

@@ -4,7 +4,11 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref, repeat, when } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
+import { repeat } from "@inglorious/web/directives/repeat"
+import { when } from "@inglorious/web/directives/when"
 
 import { Chip } from "../../data-display/chip/index.js"
 import {

package/src/controls/input/template.js

@@ -3,7 +3,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

package/src/controls/radio-group/template.js

@@ -3,7 +3,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

package/src/controls/rating/template.js

@@ -3,7 +3,8 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
 
 const DEFAULT_VALUE = 0
 const DEFAULT_MAX = 5

package/src/controls/select/template.js

@@ -3,7 +3,10 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref, repeat } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
+import { repeat } from "@inglorious/web/directives/repeat"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 import { formatOption, getOptionValue, isOptionSelected } from "./helpers.js"

package/src/controls/slider/template.js

@@ -3,7 +3,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

package/src/controls/switch/template.js

@@ -3,7 +3,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

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

@@ -3,7 +3,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, styleMap } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { styleMap } from "@inglorious/web/directives/style-map"
 
 /**
  * Renders an avatar with image, initials, or fallback content.

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

@@ -3,7 +3,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, styleMap } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { styleMap } from "@inglorious/web/directives/style-map"
 
 /**
  * Renders a compact badge for status, labels, or counts.

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

@@ -3,7 +3,8 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
 
 /**
  * Renders a compact chip label with optional remove action.

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

@@ -1,4 +1,5 @@
-import { choose, html } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { choose } from "@inglorious/web/directives/choose"
 
 import { InputFilter } from "./input.js"
 import { RangeFilter } from "./range.js"

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

@@ -5,7 +5,10 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, repeat, when } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { repeat } from "@inglorious/web/directives/repeat"
+import { when } from "@inglorious/web/directives/when"
 
 import { Input } from "../../controls/input/index.js"
 import { Select } from "../../controls/select/index.js"

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

@@ -3,7 +3,8 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
 
 /**
  * Renders a horizontal or vertical divider line.

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

@@ -1,5 +1,6 @@
 import { VirtualList } from "@inglorious/ui/virtual-list"
-import { html, repeat } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { repeat } from "@inglorious/web/directives/repeat"
 
 import { Button } from "../../controls/button"
 import {

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

@@ -3,7 +3,8 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
 
 /**
  * Renders an inline icon element with size and color control.
@@ -11,12 +12,26 @@ import { classMap, html } from "@inglorious/web"
  * @param {IconProps} props
  * @returns {TemplateResult}
  */
-export function render({ children, size = "md", color = "current", onClick }) {
+export function render({
+  children,
+  size = "md",
+  color = "current",
+  className = "",
+  onClick,
+}) {
+  const extraClasses = Object.fromEntries(
+    className
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((name) => [name, true]),
+  )
+
   return html`<span
     class=${classMap({
       "iw-icon": true,
       [`iw-icon-${size}`]: size !== "md",
       "iw-icon-current": color === "current",
+      ...extraClasses,
     })}
     style=${color !== "current" ? `color: ${color};` : ""}
     aria-hidden="true"

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

@@ -36,11 +36,16 @@
 .iw-list-item {
   padding: var(--iw-space-3);
   border-radius: var(--iw-radius-sm);
+  background-color: var(--iw-list-item);
   transition:
     background-color 0.15s ease,
     color 0.15s ease;
 }
 
+.iw-list-item-icon {
+  padding: var(--iw-space-4);
+}
+
 .iw-list-item-inset .iw-list-item-content {
   margin-left: calc(var(--iw-space-3) + var(--iw-list-icon-size, 1.25rem));
 }
@@ -85,20 +90,18 @@
   color: var(--iw-color-text-muted, var(--iw-color-text));
 }
 
-.iw-list-item-clickable {
+.iw-list-item-clickable,
+.iw-list-item-expandable {
   cursor: pointer;
 }
 
-.iw-list-item-clickable:hover {
-  background-color: var(--iw-color-surface, rgba(0, 0, 0, 0.05));
+.iw-list-item-clickable:hover,
+.iw-list-item-expandable:hover {
+  filter: brightness(120%);
 }
 
 .iw-list-item-selected {
-  background-color: var(--iw-color-surface-active, rgba(0, 0, 0, 0.08));
-
-  .iw-list-item-icon {
-    color: var(--iw-color-text);
-  }
+  background-color: var(--iw-list-item-selected);
 }
 
 .iw-list-item-disabled {
@@ -117,3 +120,10 @@
   margin-top: var(--iw-space-1);
   padding-left: var(--iw-space-4);
 }
+
+.iw-theme-light {
+  .iw-list-item-clickable:hover,
+  .iw-list-item-expandable:hover {
+    filter: brightness(96%);
+  }
+}

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

@@ -19,9 +19,14 @@
  * }} ListItemMeta
  */
 
-import { classMap, html, ref, repeat, when } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+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 { applyElementProps } from "../../shared/applyElementProps.js"
 
@@ -145,12 +150,14 @@ export const List = {
     }
 
     const isClickable = !!props.onItemClick || !!onClick
-    const hasChildren = Array.isArray(children) && children.length > 0
+    const hasChildren = Array.isArray(children) && children.length
+    const isExpandable = !!hasChildren
     const hasAction = !!action
 
     const listItemClassName = [
       "iw-list-item",
       isClickable && "iw-list-item-clickable",
+      isExpandable && "iw-list-item-expandable",
       isDisabled && "iw-list-item-disabled",
       isSelected && "iw-list-item-selected",
       props.isInset && !icon && "iw-list-item-inset",
@@ -166,6 +173,13 @@ export const List = {
       onClick: (event) => {
         event.stopPropagation()
         if (isDisabled) return
+
+        if (isExpandable) {
+          onToggle?.(raw ?? item, path)
+          props.onItemToggle?.(raw ?? item, path)
+          return
+        }
+
         onClick?.(raw ?? item, path)
         props.onItemClick?.(raw ?? item, path)
       },
@@ -175,13 +189,11 @@ export const List = {
           gap: "sm",
           children: [
             when(icon, () =>
-              IconButton.render({
-                icon,
-                size: "sm",
-                color: "secondary",
-                variant: "ghost",
-                shape: "square",
+              Icon.render({
+                size: "lg",
+                color: "var(--iw-color-text-muted)",
                 className: "iw-list-item-icon",
+                children: icon,
               }),
             ),
             Flex.render({
@@ -200,10 +212,10 @@ export const List = {
               ],
             }),
             when(
-              hasChildren || hasAction,
+              isExpandable || hasAction,
               () =>
                 html`<span class="iw-list-item-trailing">
-                  ${when(hasChildren, () =>
+                  ${when(isExpandable, () =>
                     IconButton.render({
                       variant: "ghost",
                       color: "secondary",

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

@@ -1,4 +1,5 @@
-import { html, repeat } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { repeat } from "@inglorious/web/directives/repeat"
 
 import { MaterialIcon } from "."
 

package/src/data-display/material-icon/template.js

@@ -3,7 +3,8 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
 
 /**
  * Renders a Material Symbols icon by name.

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

@@ -4,7 +4,10 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref, repeat } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
+import { repeat } from "@inglorious/web/directives/repeat"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

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

@@ -3,7 +3,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

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

@@ -3,7 +3,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

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

@@ -4,7 +4,10 @@
  * @typedef {import('@inglorious/web').Api} Api
  */
 
-import { html, ref, repeat, styleMap } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { ref } from "@inglorious/web/directives/ref"
+import { repeat } from "@inglorious/web/directives/repeat"
+import { styleMap } from "@inglorious/web/directives/style-map"
 
 const PRETTY_INDEX = 1
 

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

@@ -30,7 +30,7 @@ export const AppDrawer = {
   },
 
   render(entity, api) {
-    const items = mapItemsForRender(entity.items ?? [], api)
+    const items = mapItemsForRender(entity, entity.items ?? [], api)
 
     return Drawer.render({
       ...entity,
@@ -52,15 +52,19 @@ export const AppDrawer = {
           isInset: true,
           padding: "sm",
           items,
-          onItemToggle: (_, path) =>
-            api.notify(`#${entity.id}:itemToggle`, { path }),
+          onItemToggle: (_, path) => {
+            api.notify(`#${entity.id}:itemToggle`, { path })
+            if (entity.isCollapsed) {
+              api.notify(`#${entity.id}:collapseToggle`)
+            }
+          },
         })}
       `,
     })
   },
 }
 
-function mapItemsForRender(items, api) {
+function mapItemsForRender(entity, items, api) {
   const router = api.getEntity("router")
 
   return items.map((item) => {
@@ -75,7 +79,14 @@ function mapItemsForRender(items, api) {
     }
 
     if (item.href) {
-      mappedItem.onClick = () => api.notify("#router:navigate", item.href)
+      mappedItem.onClick = () => {
+        api.notify("#router:navigate", item.href)
+
+        const isMobile = document.body.clientWidth < 64 * 16
+        if (isMobile) {
+          api.notify(`#${entity.id}:toggle`)
+        }
+      }
     }
 
     if (router?.path === item.href) {
@@ -83,7 +94,7 @@ function mapItemsForRender(items, api) {
     }
 
     if (Array.isArray(item.children)) {
-      mappedItem.children = mapItemsForRender(item.children, api)
+      mappedItem.children = mapItemsForRender(entity, item.children, api)
     }
 
     return mappedItem

package/src/examples/dashboard/dashboard.js

@@ -1,4 +1,5 @@
-import { html, when } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { when } from "@inglorious/web/directives/when"
 
 import { Container } from "../../layout/container/index.js"
 import { Flex } from "../../layout/flex/index.js"

package/src/feedback/alert/template.js

@@ -3,7 +3,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

package/src/feedback/backdrop/template.js

@@ -3,7 +3,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, when } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { when } from "@inglorious/web/directives/when"
 
 /**
  * Renders a fullscreen backdrop overlay when open.

package/src/feedback/dialog/template.js

@@ -3,7 +3,8 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
 
 /**
  * Renders a modal dialog with header, body, and actions when open.

package/src/feedback/progress/template.js

@@ -3,7 +3,8 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
 
 function clamp(value) {
   return Math.max(0, Math.min(100, value))

package/src/feedback/skeleton/template.js

@@ -3,7 +3,8 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
 
 /**
  * Renders a loading skeleton placeholder for text, blocks, or multiple lines.

package/src/feedback/snackbar/template.js

@@ -3,7 +3,8 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
 
 /**
  * Renders a transient snackbar message with optional action and dismiss control.

package/src/layout/container/template.js

@@ -3,7 +3,10 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref, styleMap } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
+import { styleMap } from "@inglorious/web/directives/style-map"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

package/src/layout/flex/template.js

@@ -3,7 +3,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, ref, staticHtml, unsafeStatic } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
+import { staticHtml, unsafeStatic } from "@inglorious/web/static"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

package/src/layout/grid/template.js

@@ -3,7 +3,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, styleMap } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { styleMap } from "@inglorious/web/directives/style-map"
 
 /**
  * Renders a CSS grid container with configurable columns, gaps, and alignment.

package/src/navigation/bottom-navigation/template.js

@@ -4,7 +4,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

package/src/navigation/breadcrumbs/template.js

@@ -4,7 +4,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

package/src/navigation/drawer/template.js

@@ -3,7 +3,8 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { html, when } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { when } from "@inglorious/web/directives/when"
 
 import { Button } from "../../controls/button"
 import { MaterialIcon } from "../../data-display/material-icon"

package/src/navigation/link/template.js

@@ -3,7 +3,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

package/src/navigation/menu/template.js

@@ -4,7 +4,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

package/src/navigation/pagination/template.js

@@ -5,7 +5,8 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
 
 import { Button } from "../../controls/button/index.js"
 

package/src/navigation/speed-dial/template.js

@@ -4,7 +4,8 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
 
 export const SpeedDial = {
   /**

package/src/navigation/stepper/template.js

@@ -4,7 +4,8 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
 
 export const Stepper = {
   /**

package/src/navigation/tabs/template.js

@@ -4,7 +4,8 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
 
 export const Tabs = {
   /**

package/src/styles/themes/bootstrap.css

@@ -77,6 +77,14 @@
   /* Badge */
   --iw-badge-radius: var(--iw-radius-md);
 
+  /* List */
+  --iw-list-item: var(--iw-color-white);
+  --iw-list-item-selected: color-mix(
+    in srgb,
+    var(--iw-color-primary) 8%,
+    var(--iw-color-white)
+  );
+
   /* Alert */
   --iw-alert-radius: var(--iw-radius-md);
   --iw-alert-shadow: none;
@@ -117,4 +125,12 @@
   --iw-button-outline-border: var(--iw-color-primary);
   --iw-button-ghost-bg-hover: #343a40;
   --iw-button-ghost-text: var(--iw-color-text);
+
+  --iw-list-item: #2c3036;
+  --iw-list-item-active: #343a40;
+  --iw-list-item-selected: color-mix(
+    in srgb,
+    var(--iw-color-primary) 12%,
+    #2c3036
+  );
 }

package/src/styles/themes/inglorious.css

@@ -85,6 +85,14 @@
   /* Badge */
   --iw-badge-radius: var(--iw-radius-none);
 
+  /* List */
+  --iw-list-item: var(--iw-color-gray-800);
+  --iw-list-item-selected: color-mix(
+    in srgb,
+    var(--iw-color-primary) 8%,
+    var(--iw-color-gray-800)
+  );
+
   /* Alert */
   --iw-alert-radius: var(--iw-radius-none);
   --iw-alert-shadow: none;
@@ -111,4 +119,12 @@
 
   --iw-button-shadow-hover: 0 0 10px var(--iw-color-primary);
   --iw-card-shadow-hover: var(--iw-shadow-xl), 0 0 15px rgba(0, 255, 136, 0.2);
+
+  --iw-list-item: var(--iw-color-white);
+  --iw-list-item-active: var(--iw-color-gray-100);
+  --iw-list-item-selected: color-mix(
+    in srgb,
+    var(--iw-color-primary) 8%,
+    var(--iw-color-white)
+  );
 }

package/src/styles/themes/material.css

@@ -81,6 +81,14 @@
   /* Badge */
   --iw-badge-radius: var(--iw-radius-sm);
 
+  /* List */
+  --iw-list-item: var(--iw-color-white);
+  --iw-list-item-selected: color-mix(
+    in srgb,
+    var(--iw-color-primary) 8%,
+    var(--iw-color-white)
+  );
+
   /* Alert */
   --iw-alert-radius: var(--iw-radius-md);
   --iw-alert-shadow: none;
@@ -123,4 +131,12 @@
 
   --iw-card-shadow:
     0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
+
+  --iw-list-item: #1e1e1e;
+  --iw-list-item-active: #2d2d2d;
+  --iw-list-item-selected: color-mix(
+    in srgb,
+    var(--iw-color-primary) 12%,
+    #1e1e1e
+  );
 }

package/src/surfaces/accordion/template.js

@@ -4,7 +4,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

package/src/surfaces/app-bar/template.js

@@ -3,7 +3,10 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref, when } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
+import { when } from "@inglorious/web/directives/when"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

package/src/surfaces/card/template.js

@@ -3,7 +3,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

package/src/surfaces/paper/template.js

@@ -3,7 +3,9 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html, ref } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 

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

@@ -5,6 +5,7 @@ export interface IconProps {
   children?: TemplateResult | string | number
   size?: "sm" | "md" | "lg"
   color?: string
+  className?: string
   onClick?: () => void
   [key: string]: unknown
 }

package/src/examples/dashboard/router.js

@@ -1,13 +0,0 @@
-import { setRoutes } from "@inglorious/web/router"
-export { Router } from "@inglorious/web/router"
-
-setRoutes({
-  "/": "dashboard",
-  "/layout/:name": "primitiveSection",
-  "/controls/:name": "primitiveSection",
-  "/data-display/:name": "primitiveSection",
-  "/feedback/:name": "primitiveSection",
-  "/navigation/:name": "primitiveSection",
-  "/surfaces/:name": "primitiveSection",
-  "*": "dashboard",
-})