@vectoriox/iox-ui 5.63.0 → 5.65.0

package/src/generation-core/validate-site-plan.ts

@@ -10,6 +10,7 @@ import {
     FACT_KEYS, GlobalSlot, PAGE_ARCHETYPES, SITE_NEED_IDS, PlanDataSourceMode, PlanDataSourceType, RelativeOp, REQUIRED_CONTENT_ROLES, SitePlan, SitePlanSourceKind,
     SITE_LOCALES, SITE_PLAN_VERSION,
 } from './site-plan.model';
+import { patternListGap } from './recipe-fields';
 import { SPEC_SITE_PLAN_SHAPE } from './site-spec.generated';
 import {
     isNonEmptyString, isPlainObject as isObject, PathIssue, PathIssueCollector, pathAt as at, PlainObject as Obj, requiredShapeKeys, ShapeEntry, shapeKeys,
@@ -187,7 +188,12 @@ function validateDesign(c: Collector, design: unknown): void {
     if (design['fonts'] !== undefined && !isObject(design['fonts'])) bad('fonts', 'must be an object');
 }
 
-interface ContentTypeInfo { fields: Set<string>; roles: Record<string, string>; }
+interface ContentTypeInfo {
+    fields: Set<string>;
+    /** The fields as a recipe's pickers read them (`recipe-fields`). */
+    described: Array<{ name: string; type?: string; controller?: string }>;
+    roles: Record<string, string>;
+}
 
 function validateContentTypes(c: Collector, list: unknown[]): Map<string, ContentTypeInfo> {
     const types = new Map<string, ContentTypeInfo>();
@@ -223,11 +229,13 @@ function validateContentTypes(c: Collector, list: unknown[]): Map<string, Conten
             }
         }
         if (name && types.has(name)) c.add(SitePlanIssueCode.Duplicate, `${path}.name`, `content type "${name}" is used twice`);
-        else if (name) types.set(name, { fields: fieldSet, roles });
+        else if (name) types.set(name, { fields: fieldSet, described: fields.filter(isObject).map(describeField), roles });
     });
     return types;
 }
 
+const describeField = (f: Obj) => ({ name: String(f['name']), type: typeof f['type'] === 'string' ? f['type'] : undefined, controller: typeof f['controller'] === 'string' ? f['controller'] : undefined });
+
 /** A content type's roles (L0-3): known roles only, each played by a field of the type; `title` always; `gallery` a list. */
 function validateRoles(c: Collector, roles: unknown, path: string, typeName: string | null, fields: Set<string>, fieldTypes: Map<unknown, unknown>): Record<string, string> {
     if (!isObject(roles)) { c.add(SitePlanIssueCode.Shape, path, 'must be an object (which field plays each role)'); return {}; }
@@ -396,6 +404,11 @@ function validatePages(c: Collector, list: unknown[], types: Map<string, Content
                     const src = sources.get(binding);
                     if (!src) c.add(SitePlanIssueCode.UnknownDataSource, `${sp}.binding`, `no data source "${binding}"`);
                     else if (src.type !== PlanDataSourceType.Cms || src.mode !== PlanDataSourceMode.Query) c.add(SitePlanIssueCode.Binding, `${sp}.binding`, `"${binding}" is not a list source`);
+                    else {
+                        const listed = src.contentType ? types.get(src.contentType) : undefined;
+                        const gap = listed ? patternListGap(pattern, listed.described) : null;
+                        if (gap) c.add(SitePlanIssueCode.Binding, `${sp}.binding`, `"${binding}" lists ${src.contentType}, which has no ${gap} — bind "${patternId}" to a list that has${patternNeedsBinding(pattern) ? '' : ', or to none'}`);
+                    }
                 }
             } else if (binding) c.add(SitePlanIssueCode.Binding, `${sp}.binding`, `"${patternId}" repeats nothing — it takes no binding`);
 

package/styles/iox-design.css

@@ -118,15 +118,17 @@ iox-gallery.iox-es-media[data-iox-empty] > .iox-gallery {
 
 /* 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. */
+   radius kept on its LEADING edge only (a placement rule, not a token). 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;
 }
+/* A NAVIGATION's drawer is padded like the header it opens from, so its Close (the menu button's size,
+   generation-core nav-shape) lands where the menu button is — the same button, turned into an X. The token is
+   re-declared, not the padding overridden: a padding the author sets on the drawer still wins. */
+.iox-es.iox-role-nav-drawer { --iox-dialog-pad: var(--iox-nav-pad); }
 dialog[data-iox-dialog].iox-es[data-iox-dialog-placement='end'] {
     margin-inline: auto 0;
     border-start-end-radius: 0;
@@ -137,11 +139,68 @@ dialog[data-iox-dialog].iox-es[data-iox-dialog-placement='start'] {
     border-start-start-radius: 0;
     border-end-start-radius: 0;
 }
+/* How a styled dialog COMES and GOES (CC1 follow-up). Three states, one look each:
+   · at rest, open — in place, the scrim on;
+   · entering (`@starting-style`) and leaving (`data-iox-closing`, set by actions-core `closeDialogAnimated`
+     for the whole exit, and `:not([open])` for a browser that closes it natively) — the drawer off its edge,
+     any other placement faded 12px toward where it sits, the scrim clear.
+   Entering decelerates (ease-enter), leaving accelerates (ease-exit), both over dur-base — the look's motion
+   tokens, which the reduced-motion token block collapses to 0ms: under reduced motion it simply appears and
+   goes. `overlay`/`display` allow-discrete keep a natively closed dialog in the top layer for its exit. */
+dialog[data-iox-dialog].iox-es {
+    --dialog-exit-x: 0px;
+    --dialog-exit-y: 12px;
+    --dialog-exit-opacity: 0;
+    transition:
+        translate var(--iox-dur-base) var(--iox-ease-enter),
+        opacity var(--iox-dur-base) var(--iox-ease-enter),
+        overlay var(--iox-dur-base) allow-discrete,
+        display var(--iox-dur-base) allow-discrete;
+}
+dialog[data-iox-dialog].iox-es[data-iox-dialog-placement='top'] { --dialog-exit-y: -12px; }
+dialog[data-iox-dialog].iox-es:is([data-iox-dialog-placement='end'], [data-iox-dialog-placement='start']) {
+    --dialog-exit-x: 100%;
+    --dialog-exit-y: 0px;
+    --dialog-exit-opacity: 1;
+}
+dialog[data-iox-dialog].iox-es[data-iox-dialog-placement='start'],
+[dir='rtl'] dialog[data-iox-dialog].iox-es[data-iox-dialog-placement='end'] { --dialog-exit-x: -100%; }
+[dir='rtl'] dialog[data-iox-dialog].iox-es[data-iox-dialog-placement='start'] { --dialog-exit-x: 100%; }
+dialog[data-iox-dialog].iox-es:is([data-iox-closing], :not([open])) {
+    translate: var(--dialog-exit-x) var(--dialog-exit-y);
+    opacity: var(--dialog-exit-opacity);
+    transition-timing-function: var(--iox-ease-exit);
+}
+@starting-style {
+    dialog[data-iox-dialog].iox-es[open] {
+        translate: var(--dialog-exit-x) var(--dialog-exit-y);
+        opacity: var(--dialog-exit-opacity);
+    }
+}
+dialog[data-iox-dialog].iox-es::backdrop {
+    transition:
+        opacity var(--iox-dur-base) var(--iox-ease-enter),
+        overlay var(--iox-dur-base) allow-discrete,
+        display var(--iox-dur-base) allow-discrete;
+}
+dialog[data-iox-dialog].iox-es:is([data-iox-closing], :not([open]))::backdrop {
+    opacity: 0;
+    transition-timing-function: var(--iox-ease-exit);
+}
 @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; }
+    dialog[data-iox-dialog].iox-es[open]::backdrop { opacity: 0; }
+}
+/* The drawer's pages follow it in, a beat apart (board 1) — a quarter of dur-fast per link, so they collapse
+   with the tokens under reduced motion. They leave with the sheet, not one by one. */
+dialog[data-iox-dialog].iox-es[open]:not([data-iox-closing]) .iox-role-nav-drawer-links > * {
+    animation: iox-drawer-link-in var(--iox-dur-base) var(--iox-ease-enter) both;
+}
+dialog[data-iox-dialog].iox-es[open] .iox-role-nav-drawer-links > :nth-child(2) { animation-delay: calc(var(--iox-dur-fast) * 0.25); }
+dialog[data-iox-dialog].iox-es[open] .iox-role-nav-drawer-links > :nth-child(3) { animation-delay: calc(var(--iox-dur-fast) * 0.5); }
+dialog[data-iox-dialog].iox-es[open] .iox-role-nav-drawer-links > :nth-child(4) { animation-delay: calc(var(--iox-dur-fast) * 0.75); }
+dialog[data-iox-dialog].iox-es[open] .iox-role-nav-drawer-links > :nth-child(n + 5) { animation-delay: var(--iox-dur-fast); }
+@keyframes iox-drawer-link-in {
+    from { opacity: 0; translate: 0 8px; }
 }
 
 /* A navigation's link lists (board 1): no underline at rest — the current page's link is the one