@inglorious/ui 7.8.1 → 8.1.0

package/src/styles/themes/bootstrap.css

@@ -1,4 +1,8 @@
 .iw-theme-bootstrap {
+  /* The theme on the page itself: the element with the theme class, usually
+     <body>, takes its background, text color and font. */
+  background-color: var(--iw-color-bg);
+  color: var(--iw-color-text);
   font-family: var(--iw-font-family-sans);
 
   /* ========================================

package/src/styles/themes/inglorious.css

@@ -6,6 +6,11 @@
 
 .iw-theme-inglorious {
   --iw-font-family-sans: var(--iw-font-family);
+  /* The theme on the page itself: the element with the theme class, usually
+     <body>, takes its background, text color and font. */
+  background-color: var(--iw-color-bg);
+  color: var(--iw-color-text);
+  font-family: var(--iw-font-family-sans);
 
   /* ========================================
      INGLORIOUS THEME - Neon Videogame Aesthetic

package/src/styles/themes/material.css

@@ -1,4 +1,8 @@
 .iw-theme-material {
+  /* The theme on the page itself: the element with the theme class, usually
+     <body>, takes its background, text color and font. */
+  background-color: var(--iw-color-bg);
+  color: var(--iw-color-text);
   font-family: var(--iw-font-family-sans);
 
   /* ========================================

package/src/surfaces/app-bar/style.css

@@ -3,6 +3,9 @@
   align-items: center;
   min-height: var(--iw-space-16);
   /* gap: var(--iw-space-3); */
+  /* Room either side of the title and controls, so they do not touch the
+     edges of the screen. */
+  padding-inline: var(--iw-space-4);
   background: var(--iw-app-bar-bg, var(--iw-color-surface));
   color: var(--iw-color-text);
   border-bottom: 1px solid var(--iw-color-border);

package/types/controls/select.d.ts

@@ -20,6 +20,8 @@ export interface SelectProps {
   isDisabled?: boolean
   isFullWidth?: boolean
   label?: string
+  /** Names the control for assistive tech when it has no visible `label`. */
+  ariaLabel?: string
   hint?: string
   error?: string
   isMulti?: boolean

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

@@ -1,10 +1,34 @@
 import type { TemplateResult } from "@inglorious/web"
 
+/**
+ * An icon in the Iconify format, as every set on `@iconify-icons/*` exports
+ * it: `import arrowBack from "@iconify-icons/material-symbols/arrow-back"`.
+ */
+export interface IconData {
+  /** The SVG content, without the `<svg>` element. */
+  body: string
+  /** The viewBox. Defaults to 16 by 16 at the origin. */
+  width?: number
+  height?: number
+  left?: number
+  top?: number
+}
+
 export interface IconProps {
   id?: string
+  /** The icon to draw, as inline SVG at the size's font size. */
+  icon?: IconData
+  /** Shown when there is no `icon`: an emoji, a glyph, any markup. */
   children?: TemplateResult | string | number
   size?: "sm" | "md" | "lg"
   color?: string
+  /**
+   * The direction of the text the icon sits in. An icon that points along the
+   * line (a back arrow, a chevron) is mirrored with `"rtl"`. Defaults to `"ltr"`.
+   */
+  direction?: "ltr" | "rtl"
+  /** Names an icon that means something on its own. Without it the icon is decorative. */
+  label?: string
   className?: string
   onClick?: () => void
   [key: string]: unknown

package/types/index.d.ts

@@ -68,17 +68,13 @@ export type {
   DataGridVirtualization,
 } from "./data-display/data-grid"
 export type { DividerProps, DividerType } from "./data-display/divider"
-export type { IconProps, IconType } from "./data-display/icon"
+export type { IconData, IconProps, IconType } from "./data-display/icon"
 export type { ListProps, ListType, ListItem } from "./data-display/list"
 export type {
   VirtualListEntity,
   VirtualListItem,
   VirtualListType,
 } from "./data-display/virtual-list"
-export type {
-  MaterialIconProps,
-  MaterialIconType,
-} from "./data-display/material-icon"
 export type {
   TableProps,
   TableType,

package/types/navigation/view-transitions.d.ts

@@ -5,7 +5,7 @@ export type ViewTransitionType = "forward" | "back" | "replace"
 /** The part of a store this module needs. Declared structurally rather than
  * imported, so any store-shaped object works. */
 export interface TransitionsStore<S = unknown> {
-  subscribe(listener: (state: S) => void): () => void
+  subscribe(listener: () => void): () => void
   getState(): S
   getType(name: string): unknown
 }
@@ -33,10 +33,11 @@ export interface TransitionsOptions {
 }
 
 export interface WithTransitions {
-  <S>(
-    store: TransitionsStore<S>,
+  /** Returns the store it was given, so it still fits wherever the store did, such as `mount`. */
+  <Store extends TransitionsStore<any>>(
+    store: Store,
     options?: TransitionsOptions,
-  ): TransitionsStore<S>
+  ): Store
 }
 
 export declare const withTransitions: WithTransitions

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

@@ -1,3 +0,0 @@
-import * as renderers from "./template.js"
-
-export const MaterialIcon = { ...renderers }

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

@@ -1,100 +0,0 @@
-import { html } from "@inglorious/web"
-import { repeat } from "@inglorious/web/directives/repeat"
-
-import { MaterialIcon } from "."
-
-const materialIcons = [
-  "search",
-  "home",
-  "menu",
-  "settings",
-  "favorite",
-  "visibility",
-  "notifications",
-  "shopping_cart",
-  "person",
-  "calendar_today",
-  "mail",
-  "chat",
-  "help",
-  "info",
-  "warning",
-  "check_circle",
-  "cancel",
-  "delete",
-  "download",
-  "upload",
-  "lock",
-  "star",
-  "play_arrow",
-  "pause",
-  "stop",
-  "cloud",
-  "camera_alt",
-  "bolt",
-  "palette",
-  "code",
-  "analytics",
-  "schedule",
-]
-
-export default {
-  title: "Data Display/Material Icon",
-  tags: ["autodocs"],
-  argTypes: {
-    size: {
-      control: "select",
-      options: ["sm", "md", "lg"],
-    },
-    isFilled: {
-      control: "boolean",
-    },
-    columns: {
-      control: "number",
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Material Symbols icon set (requires Material Symbols font to be loaded).",
-      },
-    },
-  },
-}
-
-export const Gallery = {
-  args: {
-    size: "lg",
-    isFilled: false,
-    columns: 6,
-  },
-  render: (args) => {
-    const columns = Math.max(4, Number(args.columns ?? 6))
-    const size = args.size ?? "lg"
-    const isFilled = Boolean(args.isFilled)
-
-    return html`
-      <div
-        style=${[
-          "display: grid",
-          `grid-template-columns: repeat(${columns}, minmax(0, 1fr))`,
-          "gap: 1rem",
-          "align-items: center",
-          "justify-items: center",
-        ].join("; ")}
-      >
-        ${repeat(
-          materialIcons,
-          (name) => name,
-          (name) =>
-            MaterialIcon.render({
-              name,
-              size,
-              isFilled,
-            }),
-        )}
-      </div>
-    `
-  },
-}

package/src/data-display/material-icon/style.css

@@ -1,33 +0,0 @@
-.iw-material-icon {
-  font-family: "Material Symbols Outlined", "Material Symbols";
-  font-variation-settings:
-    "FILL" 0,
-    "wght" 400,
-    "GRAD" 0,
-    "opsz" 24;
-  line-height: 1;
-  display: inline-flex;
-  cursor: pointer;
-
-  &.iw-material-icon-filled {
-    font-variation-settings:
-      "FILL" 1,
-      "wght" 400,
-      "GRAD" 0,
-      "opsz" 24;
-  }
-
-  &.iw-material-icon-sm {
-    font-size: 0.875rem;
-  }
-
-  &.iw-material-icon-lg {
-    font-size: 1.5rem;
-  }
-
-  /* `scale` rather than `transform`, so it adds to a rotation set elsewhere
-     instead of replacing it. */
-  &.iw-material-icon-rtl {
-    scale: -1 1;
-  }
-}

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

@@ -1,39 +0,0 @@
-/**
- * @typedef {import('../../../types/data-display/material-icon').MaterialIconProps} MaterialIconProps
- * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
- */
-
-import { html } from "@inglorious/web"
-import { classMap } from "@inglorious/web/directives/class-map"
-
-/**
- * Renders a Material Symbols icon by name.
- * Requires the Material Symbols font and supports filled and size variants.
- * `direction` is the direction of the text the icon sits in. An icon that
- * points along the line, such as a back arrow or a chevron, is mirrored with
- * `"rtl"`: in right-to-left text, back points right.
- * @param {MaterialIconProps} props
- * @returns {TemplateResult}
- */
-export function render(props) {
-  const {
-    name = "help",
-    size = "md",
-    isFilled = true,
-    direction = "ltr",
-    onClick,
-  } = props
-
-  return html`<span
-    class=${classMap({
-      "iw-material-icon": true,
-      "material-symbols-outlined": true,
-      "iw-material-icon-filled": isFilled,
-      "iw-material-icon-rtl": direction === "rtl",
-      [`iw-material-icon-${size}`]: size !== "md",
-    })}
-    aria-hidden="true"
-    @click=${onClick}
-    >${name}</span
-  >`
-}

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

@@ -1,21 +0,0 @@
-import type { TemplateResult } from "@inglorious/web"
-
-export interface MaterialIconProps {
-  id?: string
-  name?: string
-  size?: "sm" | "md" | "lg"
-  isFilled?: boolean
-  /**
-   * The direction of the text the icon sits in. An icon that points along the
-   * line (a back arrow, a chevron) is mirrored with `"rtl"`. Defaults to `"ltr"`.
-   */
-  direction?: "ltr" | "rtl"
-  onClick?: () => void
-  [key: string]: unknown
-}
-
-export interface MaterialIconType {
-  render(props: MaterialIconProps): TemplateResult
-}
-
-export declare const MaterialIcon: MaterialIconType