@iyulab/modern-app 0.56.2 → 0.58.0

package/skills/modern-app/references/components/info-field.md

@@ -105,6 +105,27 @@ the `trend-icon` slot:
 </u-info-section>
 ```
 
+A small picture beside the figure — a trend sparkline, a progress ring — goes in the `visual` slot. It sits at the end
+of the value line, aligned to the figure's baseline edge, and takes no room when empty. The field does not draw the
+picture: it gives it a place. Mark a decorative picture `aria-hidden="true"`; give one that carries information its own
+name (`role="img"` and `aria-label`) (`0.57.0~`):
+
+```html
+<u-info-field appearance="tile" size="xl" label="Received today" .value=${48} trend="up" .trendLabel=${'+6 vs yesterday'}>
+  <svg slot="visual" aria-hidden="true" width="96" height="32" viewBox="0 0 96 32">
+    <polyline points="0,24 19,20 38,22 57,14 76,16 95,8" fill="none" stroke="currentColor" stroke-width="2" />
+  </svg>
+</u-info-field>
+```
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| (default) | The value, in place of the string `value` (the slot wins) |
+| `trend-icon` | A status mark at the start of the trend line, drawn when there is a trend line |
+| `visual` | A small picture at the end of the value line (sparkline, ring) — empty takes no room |
+
 ## CSS Parts
 
 | Part | Description |
@@ -112,6 +133,7 @@ the `trend-icon` slot:
 | `label` · `value` · `trend` | The label, the value, and the (optional) trend indicator |
 | `unit` | The unit, inside `value` (only when `unit` is set and the value is not blank) |
 | `description` | The supporting line (when `description` is set, or the value is blank and `blankReason` is set) |
+| `visual` | The box holding the `visual` slot (not drawn when the slot is empty) |
 
 ## CSS Custom Properties
 

package/skills/modern-app/references/layout.md

@@ -6,12 +6,15 @@
 interface SidebarLayoutConfig {
   type: 'sidebar';
 
-  /** Icon name (string) | image ({ src, alt?, href? }) | custom render function. Click navigates to `/` by default, or `href` if given (image variant). */
-  logo?: string | { src: string; alt?: string; href?: string } | ((state: SidebarState) => TemplateResult<1> | HTMLElement | string);
+  /** Icon name (string) | icon from a registered library ({ icon, lib? }) | image ({ src, alt?, href? }) | custom render function. Click navigates to `/` by default, or `href` if given (image variant). */
+  logo?: string | { icon: string; lib?: string } | { src: string; alt?: string; href?: string } | ((state: SidebarState) => TemplateResult<1> | HTMLElement | string);
 
   /** Application title displayed beside the logo. */
   title?: string;
 
+  /** One line under the title — what the app is. Shown in the expanded sidebar header only (hidden with the title when slim; the mobile header keeps one line). */
+  subtitle?: string;
+
   /** Main (top) navigation items. */
   main?: SidebarItem[];
 
@@ -445,6 +448,30 @@ on a component such as `UInput`) — `@iyulab/router` 0.16.1 and later report `r
 React has committed the screen. While the overlay is open the shell does none of this: the route
 underneath is inert and focus stays in the panel.
 
+## A screen without the shell
+
+A screen that owns the whole viewport — a wall display on the production floor, a kiosk, a full-screen viewer —
+asks for it in its route. While that screen is current the shell draws no sidebar, no mobile header and no page
+padding; the next screen that does not ask gets them back.
+
+```ts
+routes: [
+  { path: 'board', metadata: { shell: 'hidden' }, render: () => html`<floor-board></floor-board>` },
+]
+```
+
+The screen gives the way back itself (a link to the menu) — the shell has nothing on screen to return with. The
+state is the reflected `immersive` attribute on `u-sidebar-layout` (`0.58.0~`).
+
+A screen can also own its background: `metadata: { theme: 'dark' }` (or `'light'`) applies that theme while the screen
+is current, without changing or storing the user's choice (`Theme.override` from `@iyulab/components`), and the next
+screen that does not ask returns to it. A floor board stays dark on the TV and in a browser where the user picked
+light.
+
+```ts
+{ path: 'board', metadata: { shell: 'hidden', theme: 'dark' }, render: () => html`<floor-board></floor-board>` }
+```
+
 ## Printing
 
 On print media the shell drops its app chrome and lets the content flow across pages: the