@vectoriox/iox-ui 5.39.0 → 5.41.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/composite-core/index.d.ts +210 -12
- package/design-core/index.d.ts +694 -17
- package/fesm2022/vectoriox-iox-ui-actions-core.mjs +4 -3
- package/fesm2022/vectoriox-iox-ui-actions-core.mjs.map +1 -1
- package/fesm2022/vectoriox-iox-ui-composite-core.mjs +535 -121
- package/fesm2022/vectoriox-iox-ui-composite-core.mjs.map +1 -1
- package/fesm2022/vectoriox-iox-ui-design-core.mjs +843 -45
- package/fesm2022/vectoriox-iox-ui-design-core.mjs.map +1 -1
- package/fesm2022/vectoriox-iox-ui-generation-core.mjs +894 -21
- package/fesm2022/vectoriox-iox-ui-generation-core.mjs.map +1 -1
- package/fesm2022/vectoriox-iox-ui.mjs +3945 -3914
- package/fesm2022/vectoriox-iox-ui.mjs.map +1 -1
- package/generation-core/index.d.ts +625 -5
- package/index.d.ts +22 -1
- package/package.json +1 -1
- package/src/actions-core/element-actions.ts +4 -3
- package/src/composite-core/accordion.ts +1 -0
- package/src/composite-core/composite-kinds.ts +42 -6
- package/src/composite-core/exclusive-runtime.ts +60 -10
- package/src/composite-core/exclusive.ts +64 -0
- package/src/composite-core/public-api.ts +5 -2
- package/src/composite-core/segmented.ts +349 -0
- package/src/composite-core/structure.ts +6 -1
- package/src/composite-core/tabs.ts +6 -3
- package/src/design-core/contrast-audit.ts +8 -3
- package/src/design-core/flavor-spec.generated.ts +832 -41
- package/src/generation-core/compose-site.ts +248 -12
- package/src/generation-core/nav-shape.ts +53 -3
- package/src/generation-core/node-baselines.generated.ts +49 -0
- package/src/generation-core/patterns.ts +20 -0
- package/src/generation-core/site-spec.generated.ts +595 -0
- package/styles/iox-design.css +19 -0
|
@@ -78,19 +78,21 @@ declare function removeFromComposite(root: CompositeNode, node: CompositeNode):
|
|
|
78
78
|
* The composites' kinds and roles. Two families:
|
|
79
79
|
* - OPEN/CLOSE (CC2 Accordion, CC2.1 Disclosure — composite plan T9 / T21): a Disclosure is a one-item accordion whose
|
|
80
80
|
* ROOT is its item, so both run the same state machine, attribute planners and runtime (`accordion-runtime.ts`);
|
|
81
|
-
* - EXCLUSIVE (CC4 Tabs — composite T17; the Segmented control
|
|
82
|
-
* its panel
|
|
81
|
+
* - EXCLUSIVE (CC4 Tabs — composite T17; CC4b the Segmented control — T32): exactly one item is on; a Tabs' trigger
|
|
82
|
+
* and its panel pair by `itemKey` (`tabs.ts`), a Segmented control's options have no panel (`segmented.ts`); both run
|
|
83
|
+
* `exclusive-runtime.ts`.
|
|
83
84
|
* Every consumer that treats "an item", "a trigger" or "a panel" alike asks these predicates, never a role literal.
|
|
84
85
|
*/
|
|
85
86
|
declare enum CompositeKind {
|
|
86
87
|
Accordion = "accordion",
|
|
87
88
|
Disclosure = "disclosure",
|
|
88
|
-
Tabs = "tabs"
|
|
89
|
+
Tabs = "tabs",
|
|
90
|
+
Segmented = "segmented"
|
|
89
91
|
}
|
|
90
92
|
/** The kinds the open/close runtime runs (`AccordionRuntime`). */
|
|
91
93
|
type ToggleCompositeKind = CompositeKind.Accordion | CompositeKind.Disclosure;
|
|
92
94
|
/** The kinds the exclusive runtime runs (`ExclusiveRuntime`): one item on at a time, always one. */
|
|
93
|
-
type ExclusiveCompositeKind = CompositeKind.Tabs;
|
|
95
|
+
type ExclusiveCompositeKind = CompositeKind.Tabs | CompositeKind.Segmented;
|
|
94
96
|
declare enum AccordionRole {
|
|
95
97
|
Accordion = "accordion",
|
|
96
98
|
Item = "accordion.item",
|
|
@@ -123,6 +125,16 @@ declare enum TabsRole {
|
|
|
123
125
|
Panels = "tabs.panels",
|
|
124
126
|
Panel = "tabs.panel"
|
|
125
127
|
}
|
|
128
|
+
/**
|
|
129
|
+
* SEGMENTED (CC4b — composite T32; complex-components board 10). One of a few, always one on, FIXED options (R3): the
|
|
130
|
+
* root IS the radio group and holds the options directly — no list, no panels. An option may hold the optional saving
|
|
131
|
+
* badge (inside it, so its words join the option's accessible name).
|
|
132
|
+
*/
|
|
133
|
+
declare enum SegmentedRole {
|
|
134
|
+
Segmented = "segmented",
|
|
135
|
+
Option = "segmented.option",
|
|
136
|
+
Badge = "segmented.badge"
|
|
137
|
+
}
|
|
126
138
|
interface RoleLike$2 {
|
|
127
139
|
role?: string | null;
|
|
128
140
|
}
|
|
@@ -135,11 +147,12 @@ interface CompositeKindRoles {
|
|
|
135
147
|
icon: string;
|
|
136
148
|
}
|
|
137
149
|
declare const COMPOSITE_KIND_ROLES: Readonly<Record<ToggleCompositeKind, CompositeKindRoles>>;
|
|
138
|
-
/** The roles each EXCLUSIVE kind plays: its root, the holder of its triggers
|
|
139
|
-
* a panel (Tabs; a Segmented control has none) — the
|
|
150
|
+
/** The roles each EXCLUSIVE kind plays: its root, the holder of its triggers (null when the root holds them — a
|
|
151
|
+
* Segmented control), its triggers, and — when its items show a panel (Tabs; a Segmented control has none) — the
|
|
152
|
+
* holder of its panels and the panels. */
|
|
140
153
|
interface ExclusiveKindRoles {
|
|
141
154
|
root: string;
|
|
142
|
-
list: string;
|
|
155
|
+
list: string | null;
|
|
143
156
|
trigger: string;
|
|
144
157
|
panels: string | null;
|
|
145
158
|
panel: string | null;
|
|
@@ -182,6 +195,14 @@ declare function isExclusivePanel(node: RoleLike$2 | null | undefined): boolean;
|
|
|
182
195
|
declare function isExclusiveItemPart(node: RoleLike$2 | null | undefined): boolean;
|
|
183
196
|
/** True for any part of a Tabs (its root included). */
|
|
184
197
|
declare function isTabsPart(node: RoleLike$2 | null | undefined): boolean;
|
|
198
|
+
/** True for any part of a Segmented control (its root included). */
|
|
199
|
+
declare function isSegmentedPart(node: RoleLike$2 | null | undefined): boolean;
|
|
200
|
+
/** The exclusive kind a node's role belongs to (`segmented.option` → Segmented), or null. */
|
|
201
|
+
declare function exclusiveKindOf(node: RoleLike$2 | null | undefined): ExclusiveCompositeKind | null;
|
|
202
|
+
/** True when an exclusive root holds its triggers itself (a Segmented control), not in a list part. */
|
|
203
|
+
declare function exclusiveRootHoldsTriggers(kind: ExclusiveCompositeKind): boolean;
|
|
204
|
+
/** True when an exclusive kind's items show a panel (Tabs), so a trigger and its panel are a pair. */
|
|
205
|
+
declare function exclusiveKindHasPanels(kind: ExclusiveCompositeKind | null | undefined): boolean;
|
|
185
206
|
/** A root of either family — anything that runs a composite runtime. */
|
|
186
207
|
declare function isAnyCompositeRoot(node: RoleLike$2 | null | undefined): boolean;
|
|
187
208
|
/** The exclusive root a node belongs to (the node itself when it is one), or null. `path` = its ancestors, root first. */
|
|
@@ -1224,8 +1245,11 @@ declare function tabsRemovalRefusal(root: CompositeNode | null | undefined, node
|
|
|
1224
1245
|
/** Every "Item open" (`trigger-on`) state inside a tab or a panel points at ITS tab or panel — the part that carries
|
|
1225
1246
|
* `data-iox-on` while its item is on. */
|
|
1226
1247
|
declare function tabsItemTriggerIds(root: CompositeNode): void;
|
|
1227
|
-
/** The render scope of one Tabs: its scope id, behaviour, every
|
|
1248
|
+
/** The render scope of one EXCLUSIVE composite (a Tabs; a Segmented control, CC4b): its kind, scope id, behaviour, every
|
|
1249
|
+
* item key in order and the one that is on. */
|
|
1228
1250
|
interface TabsScope {
|
|
1251
|
+
/** The exclusive kind it renders (a scope without one is a Tabs'). */
|
|
1252
|
+
kind?: ExclusiveCompositeKind;
|
|
1229
1253
|
rootId: string;
|
|
1230
1254
|
behaviour: TabsBehaviour;
|
|
1231
1255
|
keys: ReadonlyArray<string>;
|
|
@@ -1306,8 +1330,160 @@ declare function tabsToContent(root: CompositeNode, listRepeater: CompositeNode,
|
|
|
1306
1330
|
declare function tabsToManual(root: CompositeNode, list: CompositeNode, panels: CompositeNode, rows: ReadonlyArray<unknown>, clone: (template: CompositeNode) => CompositeNode, resolve: (row: unknown, binding: CompositeBinding) => unknown): TabPair[];
|
|
1307
1331
|
|
|
1308
1332
|
/**
|
|
1309
|
-
*
|
|
1310
|
-
*
|
|
1333
|
+
* THE SEGMENTED CONTROL (CC4b — composite K4 T32, pulled forward; complex-components board 10, APPROVED 2026-10-23 with
|
|
1334
|
+
* Q31–Q40 as recommended). One of a few, always one on, FIXED options (R3 / Q36). Not a component: a recipe of
|
|
1335
|
+
* ordinary nodes, each part carrying a role, so every option, its words and its optional badge are selectable on the
|
|
1336
|
+
* canvas, in the layer tree and the breadcrumb, and wear their own element styles (R2).
|
|
1337
|
+
*
|
|
1338
|
+
* Container `segmented` role segmented traits defaultOn (an option's key) · ariaLabel (its name)
|
|
1339
|
+
* └─ ButtonBlock `segmented-option` ×2–4 role segmented.option itemKey monthly · yearly … → <button role=radio>
|
|
1340
|
+
* ├─ Text `button-label` the words
|
|
1341
|
+
* └─ Container `badge-success` role segmented.badge (optional, off) › Icon + Text — a placeholder (a price claim)
|
|
1342
|
+
*
|
|
1343
|
+
* The ARIA shape is the APG RADIO GROUP (Q31): `role=radiogroup` + its accessible name on the root, `<button role=radio
|
|
1344
|
+
* aria-checked>` per option with a roving tabindex — one Tab stop; ← → follow the reading direction (mirrored under
|
|
1345
|
+
* RTL), ↑ ↓ the DOM order, every move wraps and turns the option on. It runs the EXCLUSIVE runtime the Tabs run
|
|
1346
|
+
* (`exclusive-runtime.ts`), on the builder canvas and both engine paths, from the attribute planners below. What follows
|
|
1347
|
+
* the control (a price) is an ordinary node OUTSIDE it styled "when its option is on" — the targeted `trigger-on`.
|
|
1348
|
+
*/
|
|
1349
|
+
declare enum SegmentedTrait {
|
|
1350
|
+
/** The option on at first paint — an option's key. */
|
|
1351
|
+
DefaultOn = "defaultOn",
|
|
1352
|
+
/** The radio group's accessible name (`aria-label` on the root). Empty → an audit finding. */
|
|
1353
|
+
Label = "ariaLabel"
|
|
1354
|
+
}
|
|
1355
|
+
/** Q40: two options at least, four at most (past four the words no longer fit a phone row — a Select or Tabs then). */
|
|
1356
|
+
declare const SEGMENTED_MIN_OPTIONS = 2;
|
|
1357
|
+
declare const SEGMENTED_MAX_OPTIONS = 4;
|
|
1358
|
+
interface SegmentedOptionWords {
|
|
1359
|
+
key: string;
|
|
1360
|
+
label: string;
|
|
1361
|
+
}
|
|
1362
|
+
/** A fresh Segmented control's options (board 10: a billing period) — generic words, the author's to rename. */
|
|
1363
|
+
declare const SEGMENTED_WORDS: ReadonlyArray<SegmentedOptionWords>;
|
|
1364
|
+
declare const SEGMENTED_NEW_OPTION_WORDS = "New option";
|
|
1365
|
+
/** The name a fresh control carries (board 10). */
|
|
1366
|
+
declare const SEGMENTED_NAME = "Billing period";
|
|
1367
|
+
/** Q33: the saving badge's words start as a PLACEHOLDER — a saving is a price claim, never invented. */
|
|
1368
|
+
declare const SEGMENTED_BADGE_WORDS = "Yearly saving";
|
|
1369
|
+
declare const SEGMENTED_BADGE_TONE = BadgeTone.Success;
|
|
1370
|
+
interface SegmentedOptions {
|
|
1371
|
+
options?: ReadonlyArray<SegmentedOptionWords>;
|
|
1372
|
+
/** The option on by default (its key); else the first. */
|
|
1373
|
+
defaultOn?: string;
|
|
1374
|
+
/** The radio group's accessible name. */
|
|
1375
|
+
label?: string;
|
|
1376
|
+
}
|
|
1377
|
+
/** One option: a ButtonBlock carrying its key, holding its words. */
|
|
1378
|
+
declare function buildSegmentedOption(create: CompositeNodeFactory, words: SegmentedOptionWords): CompositeNode;
|
|
1379
|
+
/** A fresh Segmented control: Monthly · Yearly, Monthly on, named "Billing period" (board 10 ▸ Palette). */
|
|
1380
|
+
declare function buildSegmentedRecipe(create: CompositeNodeFactory, options?: SegmentedOptions): CompositeNode;
|
|
1381
|
+
declare function isSegmentedRoot(node: {
|
|
1382
|
+
role?: string | null;
|
|
1383
|
+
} | null | undefined): boolean;
|
|
1384
|
+
/** The options in order. */
|
|
1385
|
+
declare function segmentedOptions(root: CompositeNode | null | undefined): CompositeNode[];
|
|
1386
|
+
/** The key an option renders with: its own key, else its index among the options. */
|
|
1387
|
+
declare function segmentedOptionKey(option: CompositeNode, index: number): string;
|
|
1388
|
+
/** Every option's key, in order. */
|
|
1389
|
+
declare function segmentedKeys(root: CompositeNode | null | undefined): string[];
|
|
1390
|
+
/** The words an option shows: its first Text that is not inside its badge. */
|
|
1391
|
+
declare function segmentedOptionLabelNodeOf(option: CompositeNode): CompositeNode | undefined;
|
|
1392
|
+
/** An option's name in the Options list, the layer tree, the item pickers and "Showing on canvas": its words. */
|
|
1393
|
+
declare function segmentedOptionLabel(option: CompositeNode): string;
|
|
1394
|
+
/** Options ▸ rename: the option's words. */
|
|
1395
|
+
declare function renameSegmentedOption(option: CompositeNode, words: string): boolean;
|
|
1396
|
+
/** The radio group's accessible name (empty when unnamed). */
|
|
1397
|
+
declare function segmentedLabel(root: CompositeNode | null | undefined): string;
|
|
1398
|
+
/** The option on by default: the stored key when it still names an option, else the first option. */
|
|
1399
|
+
declare function segmentedDefaultOn(root: CompositeNode | null | undefined): string | null;
|
|
1400
|
+
/** Behaviour ▸ On by default and Accessibility ▸ Name. False when the root has no such trait. */
|
|
1401
|
+
declare function setSegmentedBehaviour(root: CompositeNode, patch: {
|
|
1402
|
+
defaultOn?: string;
|
|
1403
|
+
label?: string;
|
|
1404
|
+
}): boolean;
|
|
1405
|
+
declare enum SegmentedEditRefusal {
|
|
1406
|
+
/** Q40: a Segmented control keeps at least two options. */
|
|
1407
|
+
MinOptions = "min-options",
|
|
1408
|
+
/** Q40: a Segmented control holds four options at most. */
|
|
1409
|
+
MaxOptions = "max-options"
|
|
1410
|
+
}
|
|
1411
|
+
/** Why adding an option to `root` is refused (four already), or null. */
|
|
1412
|
+
declare function segmentedAddRefusal(root: CompositeNode | null | undefined): SegmentedEditRefusal | null;
|
|
1413
|
+
/** Why removing an option from `root` is refused (two left), or null. */
|
|
1414
|
+
declare function segmentedRemovalRefusal(root: CompositeNode | null | undefined, node?: CompositeNode | null): SegmentedEditRefusal | null;
|
|
1415
|
+
/** A key no option of `root` holds yet (`k3`…). */
|
|
1416
|
+
declare function nextSegmentedKey(root: CompositeNode): string;
|
|
1417
|
+
/** Options ▸ Add option (and the toolbar's "Add option"): a fresh option after `after` (or at the end). Null when
|
|
1418
|
+
* refused (four already). */
|
|
1419
|
+
declare function addSegmentedOption(root: CompositeNode, create: CompositeNodeFactory, after?: CompositeNode | null, words?: string): CompositeNode | null;
|
|
1420
|
+
/** Options ▸ ✕: remove an option. False when refused (two left) or `option` is not one of the root's. A removed
|
|
1421
|
+
* default hands "On by default" to the first option left. */
|
|
1422
|
+
declare function removeSegmentedOption(root: CompositeNode, option: CompositeNode): boolean;
|
|
1423
|
+
/** Options ▸ drag to reorder: move an option to `toIndex` among the options. */
|
|
1424
|
+
declare function moveSegmentedOption(root: CompositeNode, option: CompositeNode, toIndex: number): boolean;
|
|
1425
|
+
/** The saving badge inside an option, or undefined. */
|
|
1426
|
+
declare function segmentedBadgeOf(option: CompositeNode | null | undefined): CompositeNode | undefined;
|
|
1427
|
+
/** Option ▸ Saving badge (Q33): stamp the badge (`badge-success` › Icon + Text, the placeholder words) inside the
|
|
1428
|
+
* option, after its words — or remove it. Returns the badge stamped, or null (removed / nothing changed). */
|
|
1429
|
+
declare function setSegmentedBadge(option: CompositeNode, on: boolean, create?: CompositeNodeFactory): CompositeNode | null;
|
|
1430
|
+
/** Every "Option on" (`trigger-on`) state inside an option points at ITS option — the part that carries
|
|
1431
|
+
* `data-iox-on` while it is on. */
|
|
1432
|
+
declare function segmentedItemTriggerIds(root: CompositeNode): void;
|
|
1433
|
+
/** A Segmented control behaves like a horizontal Tabs activated by a click — only its keys and markup differ. */
|
|
1434
|
+
declare const SEGMENTED_BEHAVIOUR: Readonly<TabsBehaviour>;
|
|
1435
|
+
/** The render scope of one Segmented control: its scope id, every option key in order, the one on at first paint (its
|
|
1436
|
+
* default) and its name — ONE decision for both engine paths. */
|
|
1437
|
+
declare function segmentedScopeFor(root: CompositeNode, rootCssId: string, rowKeys?: ReadonlyArray<string>): TabsScope;
|
|
1438
|
+
/** The root: the radio group, named; its default and (inside repeated rows) its scope id ride on it. */
|
|
1439
|
+
declare function segmentedRootAttributes(label: string, defaultOn: string | null, scopeId?: string): DomAttributes;
|
|
1440
|
+
/** The root's attributes read off the node itself (the engine writes a root's own attributes from its parent's scope). */
|
|
1441
|
+
declare function segmentedRootAttributesOf(root: CompositeNode, scopeId?: string): DomAttributes;
|
|
1442
|
+
/** An option: a real button announced as a radio — checked = the one option in the Tab order (roving tabindex). */
|
|
1443
|
+
declare function segmentedOptionAttributes(key: string, on: boolean): DomAttributes;
|
|
1444
|
+
/** The attributes a part of a Segmented control writes on its own element (both engine paths, SSR included). */
|
|
1445
|
+
declare function segmentedPartAttributes(node: {
|
|
1446
|
+
role?: string | null;
|
|
1447
|
+
}, scope: TabsScope, key: string | null, rowScoped?: boolean): DomAttributes;
|
|
1448
|
+
/**
|
|
1449
|
+
* The APG radio group's keys on an option: → / ↓ the next option, ← / ↑ the previous — ← and → follow the reading
|
|
1450
|
+
* direction (mirrored under RTL: ← is the next option), ↑ ↓ always the DOM order. Every move wraps and turns the option
|
|
1451
|
+
* on. Space / Enter are the button's own (a click: it turns on).
|
|
1452
|
+
*/
|
|
1453
|
+
declare function segmentedKeyAction(key: string, rtl?: boolean): AccordionKeyAction | null;
|
|
1454
|
+
|
|
1455
|
+
/**
|
|
1456
|
+
* ONE render decision for every EXCLUSIVE composite — a Tabs (CC4a) or a Segmented control (CC4b) — so both engine paths
|
|
1457
|
+
* (the string renderer and the component path) and the composer ask by kind once and never by role literal: the scope
|
|
1458
|
+
* a root renders its parts with, the root's own attributes, and each part's.
|
|
1459
|
+
*/
|
|
1460
|
+
type ExclusiveScope = TabsScope;
|
|
1461
|
+
/** The scope an exclusive root renders its parts with: a Segmented control's options and default, or a Tabs' keys —
|
|
1462
|
+
* From content, the rows its list's Repeater resolved (`rowsOf`). `rowKeys` = the repeated rows around the root. */
|
|
1463
|
+
declare function exclusiveScopeFor(root: CompositeNode, rootCssId: string, rowsOf: (list: CompositeNode) => ReadonlyArray<unknown> | null, rowKeys?: ReadonlyArray<string>): ExclusiveScope;
|
|
1464
|
+
/** The attributes an exclusive ROOT writes on its own element, read off the node (its scope id when it sits in
|
|
1465
|
+
* repeated rows). */
|
|
1466
|
+
declare function exclusiveRootAttributesOf(root: CompositeNode, scopeId?: string): DomAttributes;
|
|
1467
|
+
/** True when `node` is a part of the kind `scope` renders (a tab inside a Tabs' scope; an option inside a Segmented's). */
|
|
1468
|
+
declare function isPartOfExclusiveScope(node: {
|
|
1469
|
+
role?: string | null;
|
|
1470
|
+
} | null | undefined, scope: ExclusiveScope): boolean;
|
|
1471
|
+
/** The attributes a part of an exclusive composite writes on its own element (both engine paths, SSR included). */
|
|
1472
|
+
declare function exclusivePartAttributes(node: {
|
|
1473
|
+
role?: string | null;
|
|
1474
|
+
}, scope: ExclusiveScope, key: string | null, rowScoped?: boolean): DomAttributes;
|
|
1475
|
+
/** The behaviour an exclusive root runs with (a Segmented control: a click, a row — it has no Behaviour traits). */
|
|
1476
|
+
declare function exclusiveBehaviourOf(root: CompositeNode | null | undefined): TabsBehaviour;
|
|
1477
|
+
/** The accessible name an exclusive root gives its group (a Tabs' list, a Segmented control's radio group). */
|
|
1478
|
+
declare function exclusiveLabelOf(root: CompositeNode | null | undefined): string;
|
|
1479
|
+
/** The item an exclusive root shows with no other say (a Segmented control's On by default), or null (a Tabs: its first). */
|
|
1480
|
+
declare function exclusiveDefaultOf(root: CompositeNode | null | undefined): string | null;
|
|
1481
|
+
/** An exclusive item's words — a tab's, an option's (never its badge's) — for the pickers, the tree and the switchers. */
|
|
1482
|
+
declare function exclusiveItemLabel(part: CompositeNode): string;
|
|
1483
|
+
|
|
1484
|
+
/**
|
|
1485
|
+
* The EXCLUSIVE composites' RUNTIME (CC4a Tabs; CC4b the Segmented control) — ONE copy, DOM only, for the builder canvas
|
|
1486
|
+
* and the live site (both engine paths render the same markup from `tabs.ts`'s and `segmented.ts`'s attribute planners):
|
|
1311
1487
|
*
|
|
1312
1488
|
* [root] data-iox-composite="tabs" data-iox-activate-on data-iox-orientation [data-iox-scope]
|
|
1313
1489
|
* .iox-role-tabs-list role=tablist [aria-orientation=vertical]
|
|
@@ -1323,8 +1499,19 @@ declare function tabsToManual(root: CompositeNode, list: CompositeNode, panels:
|
|
|
1323
1499
|
* `iox-item-off` on the trigger AND its panel (the `itemOn` / `itemOff` interaction triggers). The item shown is
|
|
1324
1500
|
* FORCED ?? LIVE: the builder forces one (a selection inside an inactive panel); the live site forces nothing. The
|
|
1325
1501
|
* server's first state is trusted (no flash).
|
|
1502
|
+
*
|
|
1503
|
+
* A SEGMENTED control (CC4b) is the same machine with no panels and the APG RADIO GROUP's markup and keys:
|
|
1504
|
+
*
|
|
1505
|
+
* [root] data-iox-composite="segmented" role=radiogroup aria-label data-iox-default-on [data-iox-scope]
|
|
1506
|
+
* .iox-role-segmented-option role=radio aria-checked tabindex 0|-1 data-iox-item-key [data-iox-on]
|
|
1507
|
+
*
|
|
1508
|
+
* ← → move along the row (mirrored under RTL), ↑ ↓ the DOM order, each move wrapping and turning the option on; with no
|
|
1509
|
+
* server state the option on is the root's default (`data-iox-default-on`).
|
|
1326
1510
|
*/
|
|
1327
1511
|
interface ExclusiveRuntimeOptions {
|
|
1512
|
+
/** The kind it runs (else the root's `data-iox-composite`, else a Tabs) — the builder canvas knows it from the node
|
|
1513
|
+
* before the attribute is on the element. */
|
|
1514
|
+
kind?: ExclusiveCompositeKind;
|
|
1328
1515
|
/** The scope id the ARIA ids are built from (else `data-iox-scope`, else the root's `iox-node-<id>`). A function is
|
|
1329
1516
|
* read at every stamp (the builder canvas: a preview row's index is known once it is in the page). */
|
|
1330
1517
|
rootId?: string | (() => string);
|
|
@@ -1338,6 +1525,9 @@ interface ExclusiveRuntimeOptions {
|
|
|
1338
1525
|
onChange?: (key: string) => void;
|
|
1339
1526
|
/** Re-stamp when the markup under the root changes (the builder canvas re-renders parts). */
|
|
1340
1527
|
observe?: boolean;
|
|
1528
|
+
/** The key on when there is no server state (the builder canvas: a Segmented control's On by default), else the
|
|
1529
|
+
* root's `data-iox-default-on`, else the first item. */
|
|
1530
|
+
defaultKey?: () => string | null;
|
|
1341
1531
|
}
|
|
1342
1532
|
/** The exclusive composite an element belongs to (the element itself when it is a root). */
|
|
1343
1533
|
declare function closestExclusive(el: Element | null | undefined): HTMLElement | null;
|
|
@@ -1378,6 +1568,10 @@ declare class ExclusiveRuntime {
|
|
|
1378
1568
|
refresh(): void;
|
|
1379
1569
|
destroy(): void;
|
|
1380
1570
|
private keys;
|
|
1571
|
+
/** The key on with no server state: the asked default when it names an item, else the first item. */
|
|
1572
|
+
private defaultKey;
|
|
1573
|
+
/** True for a Segmented control: the root IS its radio group and holds its options. */
|
|
1574
|
+
private get holdsTriggers();
|
|
1381
1575
|
/** The element(s) that ARE the tablist: the ones a renderer already gave the role (the engine's component-path
|
|
1382
1576
|
* Repeater puts it on its inner root, which holds the tabs), else the elements carrying the list's role class. */
|
|
1383
1577
|
private lists;
|
|
@@ -1386,6 +1580,10 @@ declare class ExclusiveRuntime {
|
|
|
1386
1580
|
private rootId;
|
|
1387
1581
|
/** Write every part's state into its markup; announce what changed. */
|
|
1388
1582
|
private stamp;
|
|
1583
|
+
/** A Segmented control's markup (CC4b): the root a named radio group, each option a radio, one checked. */
|
|
1584
|
+
private stampRadioGroup;
|
|
1585
|
+
/** Move the shown key; dispatch iox-item-off on what was on and iox-item-on on what is on now. */
|
|
1586
|
+
private announce;
|
|
1389
1587
|
private ownTrigger;
|
|
1390
1588
|
private readonly onClick;
|
|
1391
1589
|
private readonly onHover;
|
|
@@ -1423,5 +1621,5 @@ declare function isCompositeItemOn(el: Element): boolean;
|
|
|
1423
1621
|
*/
|
|
1424
1622
|
declare function runCompositeItemAction(el: Element | null | undefined, action: CompositeItemAction): boolean | null;
|
|
1425
1623
|
|
|
1426
|
-
export { ACCORDION_BIND_PROP, ACCORDION_CONTENT_LIMIT, ACCORDION_DEFAULT_ONS, ACCORDION_ICONS, ACCORDION_ICON_GLYPH, ACCORDION_NEW_ITEM_WORDS, ACCORDION_WORDS, ACTIVATE_ON_ATTRIBUTE, AccordionClass, AccordionDefaultOn, AccordionEditRefusal, AccordionIcon, AccordionKeyAction, AccordionRole, AccordionRuntime, BADGE_TONES, BADGE_TONE_ICONS, BadgeTone, CARD_LAYOUTS, CARD_LAYOUT_CUSTOM, CARD_PARTS, CARD_PART_ROLE, CARD_STACK_BREAKPOINT, CARD_WORDS, CAROUSEL_QUOTES, CHIP_ICON, CHIP_STYLE, COMPOSITE_ATTRIBUTE, COMPOSITE_KIND_ROLES, COMPOSITE_ROLE_SPECS, CardLayout, CardPart, CardRole, CarouselA11y, CompositeBehaviourTrait, CompositeItemAction, CompositeKind, DEFAULT_ON_ATTRIBUTE, DISCLOSURE_ITEM_KEY, DISCLOSURE_WORDS, DisclosureRole, EXCLUSIVE_KIND_ROLES, ExclusiveRuntime, ITEM_KEY_ATTRIBUTE, ITEM_OFF_EVENT, ITEM_ON_EVENT, ITEM_OPEN_STATE, LIGHTBOX_ARROWS_HIDE_AT, LIGHTBOX_LABEL, MULTIPLE_ATTRIBUTE, NO_ELEMENT_STYLE, ON_ATTRIBUTE, ON_STATE, ORIENTATION_ATTRIBUTE, PILL_LABEL_STYLE, ROW_INDEX_ATTRIBUTE, SCOPE_ATTRIBUTE, SLIDER_NAME_TRAIT, SLIDER_PART_GLYPH, SLIDER_PART_ROLES, SLIDER_PLAY_GLYPH, SLIDER_TYPE, SLIDER_WORDS, SLIDE_TO_ROW, SLIDE_TYPE, SWIPER_THEME_COLOR, SliderFlag, SliderRole, StructureEdit, StructureRefusal, TABS_ACTIVATE_ONS, TABS_CONTENT_LIMIT, TABS_IMAGE_BIND_PROP, TABS_LABEL_BIND_PROP, TABS_NEW_TAB_WORDS, TABS_ORIENTATIONS, TABS_STACK_BREAKPOINT, TABS_TEXT_BIND_PROP, TABS_WORDS, TabsActivateOn, TabsBehaviourTrait, TabsEditRefusal, TabsOrientation, TabsRole, UNTIL_FOUND, acceptsRefusal, accordionAnswerOf, accordionBehaviour, accordionDomIds, accordionFocusIndex, accordionHeadingLevel, accordionItemAttributes, accordionItemLabel, accordionItemOf, accordionItemState, accordionItems, accordionKeyAction, accordionPanelAttributes, accordionPanelOf, accordionPartStyle, accordionQuestionOf, accordionRegionAttributes, accordionRemovalRefusal, accordionRootAttributes, accordionRootOf, accordionRootOfItem, accordionRuntimeOf, accordionScope, accordionToContent, accordionToManual, accordionTrackAttributes, accordionTriggerAttributes, accordionTriggerOf, addAccordionItem, addTabPair, applyCardLayout, attachAccordionAt, attachAccordions, attachCarouselA11y, attachCompositeAt, attachExclusiveAt, badgeStyleId, badgeToneOf, buildAccordionItem, buildAccordionRecipe, buildBadge, buildCardRecipe, buildCarouselRecipe, buildChip, buildCompositeIcon, buildDisclosureRecipe, buildLightboxRecipe, buildSliderPart, buildTabPair, buildTabsRecipe, canOpenAtClickedItem, cardPartsOf, cardRootOf, cardTitleOf, carouselOf, clearLayerStyles, closeAccordionItem, closestAccordion, closestAccordionItem, closestExclusive, closestExclusiveItemPart, compositeItemOf, compositeItems, compositeKindOfRole, compositeRootOf, compositeRowKeys, compositeScopeId, detachAccordion, detectAccordionIcon, detectCardLayout, disclosureOpenByDefault, domSafeKey, exclusiveItemPartOf, exclusiveRootOf, exclusiveRuntimeOf, findByRole, hasLabelledRegion, hasSliderParts, initialAccordionOpen, isAccordionFromContent, isAccordionItemOn, isAccordionPart, isAccordionRoot, isAnyCompositeRoot, isCardLinked, isCardRoot, isCompositeItem, isCompositeItemOn, isCompositePanel, isCompositeRoot, isCompositeTrigger, isDisclosurePart, isDisclosureRoot, isExclusiveItemOn, isExclusiveItemPart, isExclusiveKind, isExclusiveList, isExclusivePanel, isExclusivePanels, isExclusiveRoot, isExclusiveTrigger, isLockedPart, isPillNode, isSlider, isSliderPart, isTabsFromContent, isTabsPart, isTabsRoot, isToggleKind, itemOpenTriggerIds, lightboxSliderOf, makeCompositePart, manualTabKeys, migrateSliderControls, moveAccordionItem, moveTabPair, needsSliderMigration, nextAccordionState, nextItemKey, nextTabKey, onAccordionItemState, onCompositeItemState, onExclusiveItemState, openAccordionItem, parentInComposite, pickAccordionAutoBinds, pickTabsAutoBinds, readLayerStyle, readProp, readStyle, removeFromComposite, removeTabPair, renameAccordionItem, renameTab, repeatSourceOf, rowIndexOf, rowItemKey, rowSourceOf, runCompositeItemAction, sameRepeatSource, serializeDomAttributes, setAccordionBehaviour, setAccordionIcon, setBadgeTone, setCardLinked, setCardPart, setSliderFlag, setTabsBehaviour, shouldScrollToItem, slideIndexForRow, sliderLiveRegion, sliderPart, sliderPartElement, sliderPauseAttributes, sliderPauseGlyph, sliderSlides, sliderWords, splitSliderChildren, structureRefusal, syncSliderParts, tabLabel, tabLabelNodeOf, tabListAttributes, tabPanelAttributes, tabPanelImageOf, tabPanelOf, tabPanelTextOf, tabPartKey, tabTriggerAttributes, tabTriggerOf, tabsBehaviour, tabsItemState, tabsItemTriggerIds, tabsKeyAction, tabsLabel, tabsListOf, tabsPanels, tabsPanelsOf, tabsPartAttributes, tabsPartnerOf, tabsRemovalRefusal, tabsRootAttributes, tabsScope, tabsScopeFor, tabsToContent, tabsToManual, tabsTriggers, walkComposite, wantedSliderParts, writeLayerStyles, writeProp, writeStyles };
|
|
1427
|
-
export type { AccordionAutoBinds, AccordionBehaviour, AccordionDomIds, AccordionItemState, AccordionOptions, AccordionRuntimeOptions, AccordionScope, AccordionWords, BaselineStyles, CardEditOptions, CardLayoutResult, CardLayoutState, CardOptions, CardPartChange, CardWords, CarouselA11yOptions, CarouselOptions, CarouselQuote, CarouselSwiper, CompositeBinding, CompositeKindRoles, CompositeLayer, CompositeNode, CompositeNodeFactory, CompositeNodeSpec, CompositeRoleSpec, CompositeRuntime, CompositeTrait, ContentFieldLike, DisclosureOptions, DisclosureWords, DomAttributes, ExclusiveCompositeKind, ExclusiveKindRoles, ExclusiveRuntimeOptions, LegacySliderLook, LightboxOptions, PillOptions, RepeatSource, SliderPartsChange, SliderWords, TabPair, TabWords, TabsAutoBinds, TabsBehaviour, TabsItemState, TabsOptions, TabsScope, ToggleCompositeKind };
|
|
1624
|
+
export { ACCORDION_BIND_PROP, ACCORDION_CONTENT_LIMIT, ACCORDION_DEFAULT_ONS, ACCORDION_ICONS, ACCORDION_ICON_GLYPH, ACCORDION_NEW_ITEM_WORDS, ACCORDION_WORDS, ACTIVATE_ON_ATTRIBUTE, AccordionClass, AccordionDefaultOn, AccordionEditRefusal, AccordionIcon, AccordionKeyAction, AccordionRole, AccordionRuntime, BADGE_TONES, BADGE_TONE_ICONS, BadgeTone, CARD_LAYOUTS, CARD_LAYOUT_CUSTOM, CARD_PARTS, CARD_PART_ROLE, CARD_STACK_BREAKPOINT, CARD_WORDS, CAROUSEL_QUOTES, CHIP_ICON, CHIP_STYLE, COMPOSITE_ATTRIBUTE, COMPOSITE_KIND_ROLES, COMPOSITE_ROLE_SPECS, CardLayout, CardPart, CardRole, CarouselA11y, CompositeBehaviourTrait, CompositeItemAction, CompositeKind, DEFAULT_ON_ATTRIBUTE, DISCLOSURE_ITEM_KEY, DISCLOSURE_WORDS, DisclosureRole, EXCLUSIVE_KIND_ROLES, ExclusiveRuntime, ITEM_KEY_ATTRIBUTE, ITEM_OFF_EVENT, ITEM_ON_EVENT, ITEM_OPEN_STATE, LIGHTBOX_ARROWS_HIDE_AT, LIGHTBOX_LABEL, MULTIPLE_ATTRIBUTE, NO_ELEMENT_STYLE, ON_ATTRIBUTE, ON_STATE, ORIENTATION_ATTRIBUTE, PILL_LABEL_STYLE, ROW_INDEX_ATTRIBUTE, SCOPE_ATTRIBUTE, SEGMENTED_BADGE_TONE, SEGMENTED_BADGE_WORDS, SEGMENTED_BEHAVIOUR, SEGMENTED_MAX_OPTIONS, SEGMENTED_MIN_OPTIONS, SEGMENTED_NAME, SEGMENTED_NEW_OPTION_WORDS, SEGMENTED_WORDS, SLIDER_NAME_TRAIT, SLIDER_PART_GLYPH, SLIDER_PART_ROLES, SLIDER_PLAY_GLYPH, SLIDER_TYPE, SLIDER_WORDS, SLIDE_TO_ROW, SLIDE_TYPE, SWIPER_THEME_COLOR, SegmentedEditRefusal, SegmentedRole, SegmentedTrait, SliderFlag, SliderRole, StructureEdit, StructureRefusal, TABS_ACTIVATE_ONS, TABS_CONTENT_LIMIT, TABS_IMAGE_BIND_PROP, TABS_LABEL_BIND_PROP, TABS_NEW_TAB_WORDS, TABS_ORIENTATIONS, TABS_STACK_BREAKPOINT, TABS_TEXT_BIND_PROP, TABS_WORDS, TabsActivateOn, TabsBehaviourTrait, TabsEditRefusal, TabsOrientation, TabsRole, UNTIL_FOUND, acceptsRefusal, accordionAnswerOf, accordionBehaviour, accordionDomIds, accordionFocusIndex, accordionHeadingLevel, accordionItemAttributes, accordionItemLabel, accordionItemOf, accordionItemState, accordionItems, accordionKeyAction, accordionPanelAttributes, accordionPanelOf, accordionPartStyle, accordionQuestionOf, accordionRegionAttributes, accordionRemovalRefusal, accordionRootAttributes, accordionRootOf, accordionRootOfItem, accordionRuntimeOf, accordionScope, accordionToContent, accordionToManual, accordionTrackAttributes, accordionTriggerAttributes, accordionTriggerOf, addAccordionItem, addSegmentedOption, addTabPair, applyCardLayout, attachAccordionAt, attachAccordions, attachCarouselA11y, attachCompositeAt, attachExclusiveAt, badgeStyleId, badgeToneOf, buildAccordionItem, buildAccordionRecipe, buildBadge, buildCardRecipe, buildCarouselRecipe, buildChip, buildCompositeIcon, buildDisclosureRecipe, buildLightboxRecipe, buildSegmentedOption, buildSegmentedRecipe, buildSliderPart, buildTabPair, buildTabsRecipe, canOpenAtClickedItem, cardPartsOf, cardRootOf, cardTitleOf, carouselOf, clearLayerStyles, closeAccordionItem, closestAccordion, closestAccordionItem, closestExclusive, closestExclusiveItemPart, compositeItemOf, compositeItems, compositeKindOfRole, compositeRootOf, compositeRowKeys, compositeScopeId, detachAccordion, detectAccordionIcon, detectCardLayout, disclosureOpenByDefault, domSafeKey, exclusiveBehaviourOf, exclusiveDefaultOf, exclusiveItemLabel, exclusiveItemPartOf, exclusiveKindHasPanels, exclusiveKindOf, exclusiveLabelOf, exclusivePartAttributes, exclusiveRootAttributesOf, exclusiveRootHoldsTriggers, exclusiveRootOf, exclusiveRuntimeOf, exclusiveScopeFor, findByRole, hasLabelledRegion, hasSliderParts, initialAccordionOpen, isAccordionFromContent, isAccordionItemOn, isAccordionPart, isAccordionRoot, isAnyCompositeRoot, isCardLinked, isCardRoot, isCompositeItem, isCompositeItemOn, isCompositePanel, isCompositeRoot, isCompositeTrigger, isDisclosurePart, isDisclosureRoot, isExclusiveItemOn, isExclusiveItemPart, isExclusiveKind, isExclusiveList, isExclusivePanel, isExclusivePanels, isExclusiveRoot, isExclusiveTrigger, isLockedPart, isPartOfExclusiveScope, isPillNode, isSegmentedPart, isSegmentedRoot, isSlider, isSliderPart, isTabsFromContent, isTabsPart, isTabsRoot, isToggleKind, itemOpenTriggerIds, lightboxSliderOf, makeCompositePart, manualTabKeys, migrateSliderControls, moveAccordionItem, moveSegmentedOption, moveTabPair, needsSliderMigration, nextAccordionState, nextItemKey, nextSegmentedKey, nextTabKey, onAccordionItemState, onCompositeItemState, onExclusiveItemState, openAccordionItem, parentInComposite, pickAccordionAutoBinds, pickTabsAutoBinds, readLayerStyle, readProp, readStyle, removeFromComposite, removeSegmentedOption, removeTabPair, renameAccordionItem, renameSegmentedOption, renameTab, repeatSourceOf, rowIndexOf, rowItemKey, rowSourceOf, runCompositeItemAction, sameRepeatSource, segmentedAddRefusal, segmentedBadgeOf, segmentedDefaultOn, segmentedItemTriggerIds, segmentedKeyAction, segmentedKeys, segmentedLabel, segmentedOptionAttributes, segmentedOptionKey, segmentedOptionLabel, segmentedOptionLabelNodeOf, segmentedOptions, segmentedPartAttributes, segmentedRemovalRefusal, segmentedRootAttributes, segmentedRootAttributesOf, segmentedScopeFor, serializeDomAttributes, setAccordionBehaviour, setAccordionIcon, setBadgeTone, setCardLinked, setCardPart, setSegmentedBadge, setSegmentedBehaviour, setSliderFlag, setTabsBehaviour, shouldScrollToItem, slideIndexForRow, sliderLiveRegion, sliderPart, sliderPartElement, sliderPauseAttributes, sliderPauseGlyph, sliderSlides, sliderWords, splitSliderChildren, structureRefusal, syncSliderParts, tabLabel, tabLabelNodeOf, tabListAttributes, tabPanelAttributes, tabPanelImageOf, tabPanelOf, tabPanelTextOf, tabPartKey, tabTriggerAttributes, tabTriggerOf, tabsBehaviour, tabsItemState, tabsItemTriggerIds, tabsKeyAction, tabsLabel, tabsListOf, tabsPanels, tabsPanelsOf, tabsPartAttributes, tabsPartnerOf, tabsRemovalRefusal, tabsRootAttributes, tabsScope, tabsScopeFor, tabsToContent, tabsToManual, tabsTriggers, walkComposite, wantedSliderParts, writeLayerStyles, writeProp, writeStyles };
|
|
1625
|
+
export type { AccordionAutoBinds, AccordionBehaviour, AccordionDomIds, AccordionItemState, AccordionOptions, AccordionRuntimeOptions, AccordionScope, AccordionWords, BaselineStyles, CardEditOptions, CardLayoutResult, CardLayoutState, CardOptions, CardPartChange, CardWords, CarouselA11yOptions, CarouselOptions, CarouselQuote, CarouselSwiper, CompositeBinding, CompositeKindRoles, CompositeLayer, CompositeNode, CompositeNodeFactory, CompositeNodeSpec, CompositeRoleSpec, CompositeRuntime, CompositeTrait, ContentFieldLike, DisclosureOptions, DisclosureWords, DomAttributes, ExclusiveCompositeKind, ExclusiveKindRoles, ExclusiveRuntimeOptions, ExclusiveScope, LegacySliderLook, LightboxOptions, PillOptions, RepeatSource, SegmentedOptionWords, SegmentedOptions, SliderPartsChange, SliderWords, TabPair, TabWords, TabsAutoBinds, TabsBehaviour, TabsItemState, TabsOptions, TabsScope, ToggleCompositeKind };
|