@vectoriox/iox-ui 5.38.0 → 5.40.0

package/src/generation-core/nav-shape.ts

@@ -67,6 +67,8 @@ export interface NavShapeOptions {
     barItems?: number;
     /** A new part's id (the builder passes its id generator). Default: `<nav id>-<suffix>`. */
     newId?: (suffix: string) => string;
+    /** The studio's pages, for a header that links to none (a hand-built one): its menu lists these. */
+    pages?: ReadonlyArray<NavPage>;
 }
 
 export interface NavShapeResult {
@@ -199,6 +201,21 @@ export function navPages(root: SerializedNode): NavPage[] {
     return source.filter(isPageLink).map(n => ({ label: textOf(n), route: String(prop(n, 'pageRoute')) }));
 }
 
+/** Where a phone menu's pages come from: the header's own page Links, else the studio's pages. */
+export enum NavPagesSource {
+    Header = 'header',
+    Site = 'site',
+    None = 'none',
+}
+
+/** The pages a phone menu lists: the header's (`navPages`), else `sitePages` — a hand-built header with no
+ *  page links still gets a working menu. */
+export function phoneMenuPages(root: SerializedNode, sitePages: ReadonlyArray<NavPage> = []): { pages: NavPage[]; source: NavPagesSource } {
+    const own = navPages(root);
+    if (own.length) return { pages: own, source: NavPagesSource.Header };
+    return sitePages.length ? { pages: [...sitePages], source: NavPagesSource.Site } : { pages: [], source: NavPagesSource.None };
+}
+
 /** A hand-built header: every page Link outside a drawer. */
 function collectHeaderLinks(root: SerializedNode): SerializedNode[] {
     const out: SerializedNode[] = [];
@@ -439,7 +456,7 @@ export function planNavShape(globals: ReadonlyArray<SerializedNode>, shape: NavS
     const kit = makeKit(out, root.id, options.newId);
 
     adoptRoles(root);
-    const pages = navPages(root);
+    const { pages } = phoneMenuPages(root, options.pages);
     const wantDrawer = shape !== NavShape.Bar;
     const wantBar = shape !== NavShape.Drawer;
     const wantMenuButton = shape === NavShape.Drawer;
@@ -538,7 +555,7 @@ export interface AddBarItemResult {
  * The bar's Items list "Add item" (board 2): one more item, before More — the next navigation page the
  * bar does not link to yet (Home when every page is there). Refused at five (Q2). Input not mutated.
  */
-export function addBarItem(globals: ReadonlyArray<SerializedNode>, options: Pick<NavShapeOptions, 'newId'> = {}): AddBarItemResult {
+export function addBarItem(globals: ReadonlyArray<SerializedNode>, options: Pick<NavShapeOptions, 'newId' | 'pages'> = {}): AddBarItemResult {
     const out = clone(globals) as SerializedNode[];
     const root = findNavRoot(out);
     const b = find(out, NavRole.Bar);
@@ -546,10 +563,43 @@ export function addBarItem(globals: ReadonlyArray<SerializedNode>, options: Pick
     const kids = b.children ?? (b.children = []);
     if (kids.length >= BAR_ITEMS_MAX) return { globals: out, added: false };
     const linked = new Set(kids.filter(c => c.role === NavRole.BarItem).map(c => prop(c, 'pageRoute')));
-    const page = barPages(root, navPages(root), BAR_ITEMS_MAX + 1).find(p => !linked.has(p.route))
+    const page = barPages(root, phoneMenuPages(root, options.pages).pages, BAR_ITEMS_MAX + 1).find(p => !linked.has(p.route))
         ?? { label: NAV_SHAPE_COPY.home, route: HOME_ROUTE };
     const item = barItem(makeKit(out, root.id, options.newId), kids.length, page);
     const more = kids.findIndex(c => c.role === NavRole.More);
     if (more >= 0) kids.splice(more, 0, item); else kids.push(item);
     return { globals: out, added: true };
 }
+
+export interface BarItemsEditResult {
+    globals: SerializedNode[];
+    /** False when nothing changed: no bar, an unknown item, or the bar would drop below three items (Q2). */
+    changed: boolean;
+}
+
+function barOf(globals: ReadonlyArray<SerializedNode>): { out: SerializedNode[]; kids: SerializedNode[] | null } {
+    const out = clone(globals) as SerializedNode[];
+    const b = find(out, NavRole.Bar);
+    return { out, kids: b ? (b.children ?? (b.children = [])) : null };
+}
+
+/**
+ * The bar's Items list "Remove" (board 2): the item goes, More included — refused below three items (Q2:
+ * 3–5), so the bar never shrinks into something a thumb cannot use. Input not mutated.
+ */
+export function removeBarItem(globals: ReadonlyArray<SerializedNode>, itemId: string): BarItemsEditResult {
+    const { out, kids } = barOf(globals);
+    const i = kids ? kids.findIndex(c => c.id === itemId) : -1;
+    if (!kids || i < 0 || kids.length <= BAR_ITEMS_MIN) return { globals: out, changed: false };
+    kids.splice(i, 1);
+    return { globals: out, changed: true };
+}
+
+/** The bar's Items list drag-to-reorder (board 2): item `from` moves to `to`. Input not mutated. */
+export function moveBarItem(globals: ReadonlyArray<SerializedNode>, from: number, to: number): BarItemsEditResult {
+    const { out, kids } = barOf(globals);
+    if (!kids || from === to || from < 0 || to < 0 || from >= kids.length || to >= kids.length) return { globals: out, changed: false };
+    const [item] = kids.splice(from, 1);
+    kids.splice(to, 0, item);
+    return { globals: out, changed: true };
+}

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

@@ -667,7 +667,10 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "htmlTag",
       "colorScheme",
       "multiple",
-      "defaultOn"
+      "defaultOn",
+      "activateOn",
+      "orientation",
+      "ariaLabel"
     ],
     "styleTraits": [
       "position",
@@ -2900,7 +2903,10 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "source",
       "limit",
       "multiple",
-      "defaultOn"
+      "defaultOn",
+      "activateOn",
+      "orientation",
+      "ariaLabel"
     ],
     "styleTraits": [
       "position",

package/src/generation-core/patterns.ts

@@ -67,6 +67,9 @@ export enum PatternRecipe {
     /** CC2: the Accordion — Manual (three placeholder items), or From content when the section names a list
      *  `binding` (`src: '$binding?'`): one template item bound to the type's question / answer fields. */
     Accordion = 'accordion',
+    /** CC4a: Tabs — Manual (three placeholder tabs), or From content when the section names a list `binding`: the tab
+     *  list and the panels are both Repeaters over it, one row giving its tab AND its panel. */
+    Tabs = 'tabs',
     /** CC3: the accessible carousel — a named Slider whose controls are parts, one quote per slide (placeholders). */
     Carousel = 'carousel',
     /** CC3: the Lightbox — a Dialog holding a Slider over the node's `src` (the gallery's own source). */

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

@@ -979,6 +979,52 @@ export const SPEC_SITE_PATTERNS = {
       ]
     }
   },
+  "feature.tabbed": {
+    "family": "feature",
+    "label": "Features — tabs that switch",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "c": [
+        {
+          "t": "Container",
+          "es": "box",
+          "lay": {
+            "display": "flex",
+            "flexDirection": "column",
+            "gap": "14px",
+            "maxWidth": "1100px",
+            "width": "100%",
+            "margin": "0px auto 0px auto"
+          },
+          "c": [
+            {
+              "t": "Text",
+              "es": "eyebrow",
+              "slot": "eyebrow",
+              "ph": "copy",
+              "text": "What we offer"
+            },
+            {
+              "t": "Heading",
+              "es": "h2",
+              "level": "h2",
+              "slot": "title",
+              "ph": "copy",
+              "text": "What we design"
+            },
+            {
+              "t": "Container",
+              "recipe": "tabs",
+              "src": "$binding?",
+              "ph": "copy",
+              "name": "What we design"
+            }
+          ]
+        }
+      ]
+    }
+  },
   "hero.full-bleed-media": {
     "family": "hero",
     "label": "Hero — words over a background video",

package/styles/iox-design.css

@@ -238,6 +238,22 @@ dialog[data-iox-dialog]:not([open]) {
   .iox-accordion-track { transition: none; }
 }
 
+/* ── CC4a: Tabs (complex-components boards 3 and 9; composite K2) ────────────────────────────────────
+   The renderers write ONE markup (composite-core tabs.ts): the list is role=tablist, each tab a <button role=tab>, each
+   panel role=tabpanel. Structural only — the look is the parts' element styles (tab-list, tab), on their own rules. */
+
+/* A tab is a real button: its UA look is reset at zero specificity, so the node's own rule (the `tab` style) wins. */
+:where(.iox-role-tabs-trigger) {
+  appearance: none; -webkit-appearance: none; background: none; border: 0 solid transparent; border-radius: 0; margin: 0;
+  font: inherit; color: inherit; cursor: pointer; box-sizing: border-box;
+}
+/* The ONE hiding rule for Tabs (board 9: "Tabs keep display:none"): a panel that is not on takes no space and leaves the
+   Tab order. `!important` because a panel is any Container: the author's display (its own rule, a breakpoint layer, a
+   state — each at (0,1,0) or (0,2,0), emitted after this sheet) must never bring an inactive panel back. */
+.iox-role-tabs-panel[hidden] { display: none !important; }
+/* A panel is a Tab stop of its own (APG): its focus ring is the look's. */
+.iox-role-tabs-panel:focus-visible { outline: none; box-shadow: var(--iox-focus-ring); }
+
 /* ── CC3: Video (complex-components plan §7b, board 5) ────────────────────────────────────────────────
    One markup from media-core `videoInnerHtml` (both engine paths, the canvas). The frame is the node (it wears
    `media`: radius, fit); the poster, the play button, the provider badge and the consent prompt are drawn by the