@inglorious/ui 8.0.0 → 8.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "8.0.0",
+  "version": "8.1.1",
   "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",
@@ -301,21 +301,21 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@inglorious/charts": "10.0.6",
-    "@inglorious/store": "11.0.3",
+    "@inglorious/store": "11.0.4",
     "@inglorious/utils": "5.0.0",
-    "@inglorious/web": "6.6.0"
+    "@inglorious/web": "6.6.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": "10.0.7",
     "@inglorious/eslint-config": "1.1.2",
-    "@inglorious/store": "11.0.3",
-    "@inglorious/vite-plugin-jsx": "2.0.3",
-    "@inglorious/vite-plugin-vue": "1.0.4",
-    "@inglorious/web": "6.6.0",
+    "@inglorious/store": "11.0.4",
+    "@inglorious/vite-plugin-jsx": "2.0.4",
+    "@inglorious/vite-plugin-vue": "1.0.5",
+    "@inglorious/web": "6.6.1",
     "@storybook/addon-docs": "^10.6.0",
     "@storybook/web-components-vite": "^10.6.0",
     "happy-dom": "^20.14.0",

package/src/controls/select/template.js

@@ -5,10 +5,12 @@
 
 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 { Icon } from "../../data-display/icon/index.js"
+import { applyElementProps } from "../../shared/applyElementProps.js"
 import { formatOption, getOptionValue, isOptionSelected } from "./helpers.js"
 
 /**
@@ -63,6 +65,7 @@ export const Select = {
   renderSelect(props) {
     const {
       id,
+      name,
       label,
       hint,
       error,
@@ -121,6 +124,7 @@ export const Select = {
       error,
       icon,
       size = "md",
+      ariaLabel,
       isOpen,
       isMulti,
       isRequired,
@@ -157,6 +161,9 @@ export const Select = {
         @change=${(event) => onChange?.(event.target.value)}
         @blur=${onBlur}
         @focus=${onFocus}
+        ${ref((element) =>
+          applyElementProps(element, { "aria-label": ariaLabel || null }),
+        )}
       >
         ${repeat(
           options,

package/src/examples/dashboard/style.css

@@ -55,11 +55,12 @@
 
   .iw-dashboard-header-row {
     width: 100%;
-    padding-inline: var(--iw-space-4);
   }
 
+  /* Outside the app bar, so it pads itself to line up with it. */
   .iw-dashboard-breadcrumbs {
     min-height: var(--iw-space-12);
+    padding-inline: var(--iw-space-4);
   }
 }
 
@@ -324,6 +325,8 @@
 @media (max-width: 64rem) {
   .iw-dashboard-header-row {
     flex-wrap: wrap;
+  }
+  .iw-dashboard-header .iw-dashboard-breadcrumbs {
     padding-inline: var(--iw-space-3);
   }
   .iw-dashboard-content {

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/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