@inglorious/ui 8.4.1 → 8.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "8.4.1",
+  "version": "8.5.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",
@@ -308,19 +308,19 @@
   "peerDependencies": {
     "@inglorious/store": "12.0.0",
     "@inglorious/utils": "5.1.0",
-    "@inglorious/web": "6.8.1"
+    "@inglorious/web": "6.9.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": "11.1.6",
-    "@inglorious/eslint-config": "1.1.4",
+    "@inglorious/charts": "11.1.7",
+    "@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",
+    "@inglorious/web": "6.9.0",
     "@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/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/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/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/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/snackbar/snackbar.stories.js

@@ -10,7 +10,14 @@ export default {
     message: { control: "text" },
     position: {
       control: "select",
-      options: ["bottom-left", "bottom-right", "top-left", "top-right"],
+      options: [
+        "bottom-left",
+        "bottom-center",
+        "bottom-right",
+        "top-left",
+        "top-center",
+        "top-right",
+      ],
     },
     onClose: { action: "onClose" },
   },
@@ -23,3 +30,20 @@ export const Default = {
     position: "bottom-left",
   },
 }
+
+// A phone app keeps a bar at the bottom: the snackbar rises above it.
+export const AboveBottomNavigation = {
+  args: {
+    isOpen: true,
+    message: "New version available",
+    position: "bottom-center",
+  },
+  decorators: [
+    (story) => {
+      const container = document.createElement("div")
+      container.style.setProperty("--iw-snackbar-offset-bottom", "4.875rem")
+      container.append(story())
+      return container
+    },
+  ],
+}

package/src/feedback/snackbar/style.css

@@ -1,26 +1,47 @@
+/* Fixed to the viewport, clear of the system bars. A bottom snackbar also
+   clears whatever bar the app keeps at the bottom: the app sets
+   --iw-snackbar-offset-bottom to that bar's height while it shows, and the
+   offset then stands in for the safe area, which the bar already covers.
+   Only the app knows when its bar is on screen, so nothing is guessed here. */
 .iw-snackbar {
+  --iw-snackbar-gap: var(--iw-space-4);
   position: fixed;
   z-index: var(--iw-z-popover, 1060);
+  max-width: calc(100vw - 2 * var(--iw-snackbar-gap));
 }
 
-.iw-snackbar-bottom-left {
-  left: var(--iw-space-4);
-  bottom: var(--iw-space-4);
+.iw-snackbar-bottom-left,
+.iw-snackbar-bottom-center,
+.iw-snackbar-bottom-right {
+  bottom: calc(
+    var(--iw-snackbar-gap) +
+      var(--iw-snackbar-offset-bottom, var(--safe-area-bottom, 0px))
+  );
 }
 
-.iw-snackbar-bottom-right {
-  right: var(--iw-space-4);
-  bottom: var(--iw-space-4);
+.iw-snackbar-top-left,
+.iw-snackbar-top-center,
+.iw-snackbar-top-right {
+  top: calc(var(--iw-snackbar-gap) + var(--safe-area-top, 0px));
 }
 
+.iw-snackbar-bottom-left,
 .iw-snackbar-top-left {
-  left: var(--iw-space-4);
-  top: var(--iw-space-4);
+  left: var(--iw-snackbar-gap);
 }
 
+.iw-snackbar-bottom-right,
 .iw-snackbar-top-right {
-  right: var(--iw-space-4);
-  top: var(--iw-space-4);
+  right: var(--iw-snackbar-gap);
+}
+
+/* Both insets and auto margins: the snackbar is as wide as its content, up
+   to the gutters, and centered within them. */
+.iw-snackbar-bottom-center,
+.iw-snackbar-top-center {
+  inset-inline: var(--iw-snackbar-gap);
+  width: fit-content;
+  margin-inline: auto;
 }
 
 .iw-snackbar-content {

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/types/feedback/snackbar.d.ts

@@ -6,7 +6,13 @@ export interface SnackbarProps {
   isOpen?: boolean
   message?: TemplateResult | string | number
   action?: TemplateResult | string | number
-  position?: "bottom-left" | "bottom-right" | "top-left" | "top-right"
+  position?:
+    | "bottom-left"
+    | "bottom-center"
+    | "bottom-right"
+    | "top-left"
+    | "top-center"
+    | "top-right"
   className?: string
   onClose?: () => void
   [key: string]: unknown