@vectoriox/iox-ui 5.31.2 → 5.32.1

package/src/generation-core/node-baselines.generated.ts

@@ -200,7 +200,8 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "href": "",
       "pageRoute": "",
       "target": "_self",
-      "type": "button"
+      "type": "button",
+      "ariaLabel": ""
     },
     "styleProps": {
       "position": "static",
@@ -292,7 +293,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "href",
       "pageRoute",
       "target",
-      "type"
+      "type",
+      "__accessibilityLabel",
+      "ariaLabel"
     ],
     "styleTraits": [
       "position",
@@ -1337,7 +1340,8 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "linkType": "external",
       "url": "https://",
       "pageRoute": "",
-      "target": "_self"
+      "target": "_self",
+      "ariaLabel": ""
     },
     "styleProps": {
       "position": "static",
@@ -1428,7 +1432,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "linkType",
       "url",
       "pageRoute",
-      "target"
+      "target",
+      "__accessibilityLabel",
+      "ariaLabel"
     ],
     "styleTraits": [
       "position",
@@ -1529,7 +1535,8 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "url": "https://",
       "pageRoute": "",
       "target": "_self",
-      "colorScheme": "default"
+      "colorScheme": "default",
+      "ariaLabel": ""
     },
     "styleProps": {
       "position": "static",
@@ -1620,7 +1627,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "url",
       "pageRoute",
       "target",
-      "colorScheme"
+      "colorScheme",
+      "__accessibilityLabel",
+      "ariaLabel"
     ],
     "styleTraits": [
       "position",
@@ -4669,7 +4678,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "placement": "center",
       "closeOnBackdrop": true,
       "showCloseButton": true,
-      "consentRole": false
+      "consentRole": false,
+      "closeAbove": "",
+      "ariaLabel": ""
     },
     "styleProps": {
       "position": "static",
@@ -4759,7 +4770,11 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "placement",
       "closeOnBackdrop",
       "showCloseButton",
-      "consentRole"
+      "consentRole",
+      "__responsiveLabel",
+      "closeAbove",
+      "__accessibilityLabel",
+      "ariaLabel"
     ],
     "styleTraits": [
       "position",

package/src/generation-core/patterns.ts

@@ -16,9 +16,11 @@ import { SPEC_SITE_PATTERNS } from './site-spec.generated';
  * per page in the navigation (`$navPages`) · `href` a page route (`$page.route` = the stamped page's) ·
  * `param` the value of the route's `:param` · `optional` a part a page may leave out (`without`) ·
  * `preset` a forms-core form preset (its fields, submit and Success/Error words) · `control` / `label` /
- * `required` a Field's · `c` children · `recipe` a composite-core recipe stamped whole (`card`: Card v2 —
- * its `layout`, the optional `parts` it leaves out, and `binds`, a binding path per part: `image`,
- * `eyebrow`, `title`, `text`; `href` + `param` link the whole card through its title).
+ * `required` a Field's · `role` the node's part in its composite (`nav.brand`…) · `c` children · `recipe` a
+ * composite-core recipe stamped whole (`card`: Card v2 — its `layout`, the optional `parts` it leaves out, and
+ * `binds`, a binding path per part: `image`, `eyebrow`, `title`, `text`; `href` + `param` link the whole card
+ * through its title). A header pattern's `phoneMenu` names its phone shape (drawer · bar · both), stamped by
+ * `planNavShape` (CC1).
  */
 export interface PatternNode {
     readonly t: string;
@@ -44,6 +46,8 @@ export interface PatternNode {
     readonly control?: string;
     readonly label?: string;
     readonly required?: boolean;
+    /** The node's part in its composite (`nav.brand`, `nav.links`…), written to the node's `role`. */
+    readonly role?: string;
     readonly c?: ReadonlyArray<PatternNode>;
     readonly recipe?: string;
     readonly layout?: string;
@@ -79,6 +83,8 @@ export interface SitePattern {
     readonly label: string;
     /** Set on a header/footer pattern: it renders on every page, before or after the page. */
     readonly global?: `${PatternGlobalPosition}`;
+    /** A navigation pattern's phone shape (CC1): `planNavShape` adds it after the pattern is stamped. */
+    readonly phoneMenu?: 'drawer' | 'bar' | 'both';
     readonly node: PatternNode;
 }
 

package/src/generation-core/public-api.ts

@@ -19,3 +19,4 @@ export * from './templates';
 export * from './serialized-node';
 export * from './validate-site-plan';
 export * from './compose-site';
+export * from './nav-shape';

package/src/generation-core/serialized-node.ts

@@ -27,7 +27,8 @@ export interface SerializedNode {
     stateStyles?: Partial<Record<string, Record<string, unknown>>>;
     responsive?: SerializedResponsive;
     elementStyle?: string;
-    /** The part this node plays in a composite (composite-core: `card.title`). */
+    /** The part this node plays in a composite (composite-core: `card.title`; a navigation's `nav.drawer`,
+     *  written by `planNavShape`). Additive; a node without one is a plain node. */
     role?: string;
     bindings: SerializedBinding[];
     interactions: unknown[];

package/src/generation-core/site-spec.generated.ts

@@ -109,10 +109,12 @@ export const SPEC_SITE_PATTERNS = {
     "family": "nav",
     "label": "Navigation bar",
     "global": "before",
+    "phoneMenu": "drawer",
     "node": {
       "t": "Container",
       "es": "nav",
       "tag": "nav",
+      "role": "nav",
       "lay": {
         "display": "flex",
         "flexWrap": "wrap",
@@ -125,6 +127,7 @@ export const SPEC_SITE_PATTERNS = {
           "t": "LinkedContainer",
           "es": "box",
           "href": "/",
+          "role": "nav.brand",
           "c": [
             {
               "t": "Heading",
@@ -138,6 +141,7 @@ export const SPEC_SITE_PATTERNS = {
         {
           "t": "Container",
           "es": "box",
+          "role": "nav.links",
           "lay": {
             "display": "flex",
             "flexWrap": "wrap",
@@ -151,14 +155,16 @@ export const SPEC_SITE_PATTERNS = {
               "es": "link",
               "each": "$navPages",
               "bind": "page.name",
-              "href": "$page.route"
+              "href": "$page.route",
+              "role": "nav.link"
             },
             {
               "t": "ButtonBlock",
               "es": "button-primary",
               "href": "/contact",
               "slot": "cta",
-              "text": "Get in touch"
+              "text": "Get in touch",
+              "role": "nav.cta"
             }
           ]
         }

package/styles/iox-design.css

@@ -113,3 +113,97 @@ iox-gallery.iox-es-media[data-iox-empty] > .iox-gallery {
 .iox-role-card:has(.iox-card-link:focus-visible) {
     box-shadow: var(--iox-focus-ring);
 }
+
+/* ── CC1: mobile navigation (complex-components plan §7a, R1; boards 1–2) ─────────────────────── */
+
+/* The DRAWER (board 1, board-8 Q9): a Dialog wearing an element style, placed at the start or end edge, is
+   a full-height sheet on that edge — 100dvh (never 100vh: Safari's toolbar), no gap to the edge, the
+   radius kept on its LEADING edge only (a placement rule, not a token). It slides in over dur-base, which
+   the reduced-motion token block sets to 0ms: under reduced motion it simply appears. Beats the engine's
+   placement margins (0,2,1) and the node rule; a Dialog saved before element styles keeps its look. */
+dialog[data-iox-dialog].iox-es:is([data-iox-dialog-placement='end'], [data-iox-dialog-placement='start']) {
+    margin-block: 0;
+    height: 100dvh;
+    max-height: 100dvh;
+    transition: translate var(--iox-dur-base) var(--iox-ease-standard), overlay var(--iox-dur-base) allow-discrete, display var(--iox-dur-base) allow-discrete;
+}
+dialog[data-iox-dialog].iox-es[data-iox-dialog-placement='end'] {
+    margin-inline: auto 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+}
+dialog[data-iox-dialog].iox-es[data-iox-dialog-placement='start'] {
+    margin-inline: 0 auto;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+}
+@starting-style {
+    dialog[data-iox-dialog].iox-es[data-iox-dialog-placement='end'][open] { translate: 100% 0; }
+    dialog[data-iox-dialog].iox-es[data-iox-dialog-placement='start'][open] { translate: -100% 0; }
+    [dir='rtl'] dialog[data-iox-dialog].iox-es[data-iox-dialog-placement='end'][open] { translate: -100% 0; }
+    [dir='rtl'] dialog[data-iox-dialog].iox-es[data-iox-dialog-placement='start'][open] { translate: 100% 0; }
+}
+
+/* A navigation's link lists (board 1): no underline at rest — the current page's link is the one
+   underlined (the link's `current` state, link-current-decoration). Keyed on the list's ROLE, so a
+   composed or adopted header and its drawer read it and no Link holds a literal over its element style. */
+.iox-role-nav-links,
+.iox-role-nav-drawer-links {
+    --iox-link-decoration: none;
+}
+
+/* The BOTTOM BAR (board 2, "The CSS, exactly"): fixed to the bottom of the viewport (on the canvas, of the
+   global overlay — a transform contains fixed children). Attached flavors pad it above the home
+   indicator / gesture bar with env(safe-area-inset-bottom) (needs viewport-fit=cover); a FLOATING flavor
+   (tabbar-inset > 0: Glass) lifts the whole bar by the inset plus the safe area instead. The
+   `min(env(), inset × 1000)` term is the safe area when the bar floats and 0 when it is attached — no flag
+   token. Nothing reads 100vh or window.innerHeight. */
+.iox-es.iox-es-bottom-bar {
+    position: fixed;
+    z-index: 40;
+    inset-inline: var(--iox-tabbar-inset, 0px);
+    bottom: calc(var(--iox-tabbar-inset, 0px) + min(env(safe-area-inset-bottom, 0px), var(--iox-tabbar-inset, 0px) * 1000));
+    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px) - min(env(safe-area-inset-bottom, 0px), var(--iox-tabbar-inset, 0px) * 1000));
+    box-sizing: border-box;
+}
+/* An item's icon reads the item's ink and size; its label is centred and never wraps. Icon 24 + gap 3 + label 15 + padding 8 fits the 52px item, so the bar stays inside --iox-tabbar-height (the page reserve). Descendant, not child,
+   selectors: on the builder canvas the element-style class sits on the item's host, one level above its parts. */
+.iox-es-bottom-bar-item .iox-es-icon { font-size: 24px; line-height: 1; }
+.iox-es-bottom-bar-item .iox-es-button-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center; line-height: 1.25; }
+
+/* The page RESERVES the bar's height where the bar shows (the class comes from design-core
+   `barReserveClass`), so its last content is never under it, and scroll-padding keeps a focused link
+   clear of it (WCAG 2.4.11): the bar's height, plus its edge, the safe area and a floating bar's two
+   insets. The live page scrolls the document; the admin's own body never takes it
+   (the canvas reserves inside its own frame). */
+html:has(.iox-bar-reserve) { scroll-padding-bottom: calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + env(safe-area-inset-bottom, 0px) + var(--iox-tabbar-inset, 0px) * 2); }
+body:not(.builder-active):has(.iox-bar-reserve) { padding-bottom: calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + env(safe-area-inset-bottom, 0px) + var(--iox-tabbar-inset, 0px) * 2); }
+@media (max-width: 1200px) {
+    html:has(.iox-bar-reserve-laptop) { scroll-padding-bottom: calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + env(safe-area-inset-bottom, 0px) + var(--iox-tabbar-inset, 0px) * 2); }
+    body:not(.builder-active):has(.iox-bar-reserve-laptop) { padding-bottom: calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + env(safe-area-inset-bottom, 0px) + var(--iox-tabbar-inset, 0px) * 2); }
+}
+@media (max-width: 991px) {
+    html:has(.iox-bar-reserve-tablet) { scroll-padding-bottom: calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + env(safe-area-inset-bottom, 0px) + var(--iox-tabbar-inset, 0px) * 2); }
+    body:not(.builder-active):has(.iox-bar-reserve-tablet) { padding-bottom: calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + env(safe-area-inset-bottom, 0px) + var(--iox-tabbar-inset, 0px) * 2); }
+}
+@media (max-width: 767px) {
+    html:has(.iox-bar-reserve-mobile) { scroll-padding-bottom: calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + env(safe-area-inset-bottom, 0px) + var(--iox-tabbar-inset, 0px) * 2); }
+    body:not(.builder-active):has(.iox-bar-reserve-mobile) { padding-bottom: calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + env(safe-area-inset-bottom, 0px) + var(--iox-tabbar-inset, 0px) * 2); }
+}
+@media (max-width: 479px) {
+    html:has(.iox-bar-reserve-small) { scroll-padding-bottom: calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + env(safe-area-inset-bottom, 0px) + var(--iox-tabbar-inset, 0px) * 2); }
+    body:not(.builder-active):has(.iox-bar-reserve-small) { padding-bottom: calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + env(safe-area-inset-bottom, 0px) + var(--iox-tabbar-inset, 0px) * 2); }
+}
+
+/* A closed live dialog never shows, whatever display its node sets (a drawer lays its parts out as a
+   flex column): an author rule would otherwise beat the UA's `dialog:not([open]) { display: none }`. */
+dialog[data-iox-dialog]:not([open]) {
+    display: none;
+}
+
+/* A bottom-bar item reads the ITEM's ink (the contract's inkScopes): its icon and label change together. */
+.iox-es-bottom-bar-item {
+    --iox-icon-color: currentColor;
+    --iox-heading-color: currentColor;
+    --iox-text-muted: currentColor;
+}