@vectoriox/iox-ui 5.35.0 → 5.37.0

package/design-core/index.d.ts

@@ -789,6 +789,42 @@ declare const SPEC_TIERS: {
         readonly name: "tabbar-label-size";
         readonly type: "size";
         readonly default: "var(--iox-size-label)";
+    }, {
+        readonly name: "accordion-gap";
+        readonly type: "spacing";
+        readonly default: "0px";
+    }, {
+        readonly name: "accordion-item-bg";
+        readonly type: "color";
+        readonly default: "var(--iox-section-bg)";
+    }, {
+        readonly name: "accordion-item-border";
+        readonly type: "color";
+        readonly default: "var(--iox-line)";
+    }, {
+        readonly name: "accordion-item-border-width";
+        readonly type: "size";
+        readonly default: "0px 0px var(--iox-border-width) 0px";
+    }, {
+        readonly name: "accordion-item-radius";
+        readonly type: "radius";
+        readonly default: "0px";
+    }, {
+        readonly name: "accordion-item-pad";
+        readonly type: "spacing";
+        readonly default: "0px";
+    }, {
+        readonly name: "accordion-trigger-pad";
+        readonly type: "spacing";
+        readonly default: "20px 0px";
+    }, {
+        readonly name: "accordion-trigger-hover-ink";
+        readonly type: "color";
+        readonly default: "var(--iox-accent-text)";
+    }, {
+        readonly name: "accordion-panel-pad";
+        readonly type: "spacing";
+        readonly default: "0px 0px 20px 0px";
     }, {
         readonly name: "heading-color";
         readonly type: "color";
@@ -1532,6 +1568,46 @@ declare const SPEC_ELEMENT_STYLES: readonly [{
     readonly focus: {
         readonly boxShadow: "var(--iox-focus-ring)";
     };
+}, {
+    readonly id: "accordion-item";
+    readonly label: "Accordion item";
+    readonly group: "Layout";
+    readonly appliesTo: readonly ["Container"];
+    readonly base: {
+        readonly color: "inherit";
+        readonly backgroundColor: "var(--iox-accordion-item-bg)";
+        readonly borderStyle: "solid";
+        readonly borderWidth: "var(--iox-accordion-item-border-width)";
+        readonly borderColor: "var(--iox-accordion-item-border)";
+        readonly borderRadius: "var(--iox-accordion-item-radius)";
+        readonly padding: "var(--iox-accordion-item-pad)";
+    };
+}, {
+    readonly id: "accordion-trigger";
+    readonly label: "Accordion header";
+    readonly group: "Layout";
+    readonly appliesTo: readonly ["LinkedContainer"];
+    readonly base: {
+        readonly color: "var(--iox-heading-color)";
+        readonly padding: "var(--iox-accordion-trigger-pad)";
+        readonly transitionDuration: "var(--iox-dur-fast)";
+        readonly transitionTimingFunction: "var(--iox-ease-standard)";
+    };
+    readonly hover: {
+        readonly color: "var(--iox-accordion-trigger-hover-ink)";
+    };
+    readonly focus: {
+        readonly boxShadow: "var(--iox-focus-ring)";
+    };
+}, {
+    readonly id: "accordion-panel";
+    readonly label: "Accordion panel";
+    readonly group: "Layout";
+    readonly appliesTo: readonly ["Container"];
+    readonly base: {
+        readonly padding: "var(--iox-accordion-panel-pad)";
+        readonly color: "var(--iox-text-muted)";
+    };
 }, {
     readonly id: "media";
     readonly label: "Image";
@@ -3362,6 +3438,60 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "var(--iox-size-label)";
+    }, {
+        readonly name: "accordion-gap";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "0px";
+    }, {
+        readonly name: "accordion-item-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-section-bg)";
+    }, {
+        readonly name: "accordion-item-border";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-line)";
+    }, {
+        readonly name: "accordion-item-border-width";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "0px 0px var(--iox-border-width) 0px";
+    }, {
+        readonly name: "accordion-item-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "0px";
+    }, {
+        readonly name: "accordion-item-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "0px";
+    }, {
+        readonly name: "accordion-trigger-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "20px 0px";
+    }, {
+        readonly name: "accordion-trigger-hover-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "accordion-panel-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "0px 0px 20px 0px";
     }, {
         readonly name: "heading-color";
         readonly tier: "component";
@@ -4690,6 +4820,60 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "var(--iox-size-label)";
+    }, {
+        readonly name: "accordion-gap";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "0px";
+    }, {
+        readonly name: "accordion-item-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-section-bg)";
+    }, {
+        readonly name: "accordion-item-border";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-line)";
+    }, {
+        readonly name: "accordion-item-border-width";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "0px 0px var(--iox-border-width) 0px";
+    }, {
+        readonly name: "accordion-item-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "0px";
+    }, {
+        readonly name: "accordion-item-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "0px";
+    }, {
+        readonly name: "accordion-trigger-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "20px 0px";
+    }, {
+        readonly name: "accordion-trigger-hover-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "accordion-panel-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "0px 0px 20px 0px";
     }, {
         readonly name: "heading-color";
         readonly tier: "component";
@@ -6010,6 +6194,60 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "var(--iox-size-label)";
+    }, {
+        readonly name: "accordion-gap";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "0px";
+    }, {
+        readonly name: "accordion-item-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-section-bg)";
+    }, {
+        readonly name: "accordion-item-border";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-line)";
+    }, {
+        readonly name: "accordion-item-border-width";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "0px 0px var(--iox-border-width) 0px";
+    }, {
+        readonly name: "accordion-item-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "0px";
+    }, {
+        readonly name: "accordion-item-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "0px";
+    }, {
+        readonly name: "accordion-trigger-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "20px 0px";
+    }, {
+        readonly name: "accordion-trigger-hover-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "accordion-panel-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "0px 0px 20px 0px";
     }, {
         readonly name: "heading-color";
         readonly tier: "component";
@@ -7366,6 +7604,66 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "var(--iox-size-label)";
+    }, {
+        readonly name: "accordion-gap";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "12px";
+        readonly overridden: true;
+    }, {
+        readonly name: "accordion-item-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-surface-glass)";
+        readonly overridden: true;
+    }, {
+        readonly name: "accordion-item-border";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-glass-border)";
+        readonly overridden: true;
+    }, {
+        readonly name: "accordion-item-border-width";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "var(--iox-border-width)";
+        readonly overridden: true;
+    }, {
+        readonly name: "accordion-item-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "var(--iox-radius-md)";
+        readonly overridden: true;
+    }, {
+        readonly name: "accordion-item-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "0px var(--iox-space-pad)";
+        readonly overridden: true;
+    }, {
+        readonly name: "accordion-trigger-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "20px 0px";
+    }, {
+        readonly name: "accordion-trigger-hover-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "accordion-panel-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "0px 0px 20px 0px";
     }, {
         readonly name: "heading-color";
         readonly tier: "component";
@@ -8687,6 +8985,65 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "var(--iox-size-label)";
+    }, {
+        readonly name: "accordion-gap";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "12px";
+        readonly overridden: true;
+    }, {
+        readonly name: "accordion-item-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-surface-2)";
+        readonly overridden: true;
+    }, {
+        readonly name: "accordion-item-border";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-line)";
+    }, {
+        readonly name: "accordion-item-border-width";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "0px";
+        readonly overridden: true;
+    }, {
+        readonly name: "accordion-item-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "var(--iox-radius-md)";
+        readonly overridden: true;
+    }, {
+        readonly name: "accordion-item-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "0px var(--iox-space-pad)";
+        readonly overridden: true;
+    }, {
+        readonly name: "accordion-trigger-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "20px 0px";
+    }, {
+        readonly name: "accordion-trigger-hover-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "accordion-panel-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "0px 0px 20px 0px";
     }, {
         readonly name: "heading-color";
         readonly tier: "component";
@@ -10017,6 +10374,66 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "var(--iox-size-label)";
+    }, {
+        readonly name: "accordion-gap";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "12px";
+        readonly overridden: true;
+    }, {
+        readonly name: "accordion-item-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-surface)";
+        readonly overridden: true;
+    }, {
+        readonly name: "accordion-item-border";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-line-strong)";
+        readonly overridden: true;
+    }, {
+        readonly name: "accordion-item-border-width";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "var(--iox-border-width)";
+        readonly overridden: true;
+    }, {
+        readonly name: "accordion-item-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "var(--iox-radius-sm)";
+        readonly overridden: true;
+    }, {
+        readonly name: "accordion-item-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "0px var(--iox-space-pad)";
+        readonly overridden: true;
+    }, {
+        readonly name: "accordion-trigger-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "20px 0px";
+    }, {
+        readonly name: "accordion-trigger-hover-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "accordion-panel-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "0px 0px 20px 0px";
     }, {
         readonly name: "heading-color";
         readonly tier: "component";

package/fesm2022/vectoriox-iox-ui-actions-core.mjs

@@ -1,3 +1,5 @@
+import { AccordionRole, DisclosureRole, CompositeItemAction } from '@vectoriox/iox-ui/composite-core';
+
 /**
  * The ONE descriptor shape for everything an author can put in an ordered action list —
  * a form's after-submit steps today, element behaviour actions (A1) next. Promoted out of
@@ -38,6 +40,8 @@ function resolveActionAvailability(descriptor, ctx = {}) {
     return { state: 'available' };
 }
 
+/** The items an item action may target: an accordion's item, or a disclosure (its own one item). */
+const ITEM_TARGET_ROLES = [AccordionRole.Item, DisclosureRole.Disclosure];
 /**
  * The ELEMENT action catalog (actions plan A1) — what a node can DO, as data. One list feeds the
  * grouped picker, the two interaction engines, and the AI composer's validation (§9: the model
@@ -81,6 +85,15 @@ const ELEMENT_ACTION_DESCRIPTORS = Object.freeze([
         target: { required: true, types: ['Dialog'] } },
     { type: 'toggleDialog', labelKey: 'builder.actions.toggleDialog', kind: 'instant', group: 'dialog', builderBehaviour: 'run',
         target: { required: true, types: ['Dialog'] } },
+    // ── Item (CC2.1 — composite T14): drive an accordion item or a disclosure from anywhere ("See shipping"
+    // opens FAQ item 3). The canvas RUNS them, like the dialog actions: it is the same runtime, and an item you
+    // cannot open from the button is a button you cannot design.
+    { type: 'openItem', labelKey: 'builder.actions.openItem', kind: 'instant', group: 'item', builderBehaviour: 'run',
+        target: { required: true, roles: ITEM_TARGET_ROLES } },
+    { type: 'closeItem', labelKey: 'builder.actions.closeItem', kind: 'instant', group: 'item', builderBehaviour: 'run',
+        target: { required: true, roles: ITEM_TARGET_ROLES } },
+    { type: 'toggleItem', labelKey: 'builder.actions.toggleItem', kind: 'instant', group: 'item', builderBehaviour: 'run',
+        target: { required: true, roles: ITEM_TARGET_ROLES } },
     // ── Form (A1 — Tier A; the submit transport is the forms module's, I7 of its plan) ──
     // simulate in the CANVAS: the builder's Form is a container twin with no real <form>,
     // so there is nothing honest to run — the live engine requestSubmit()s the real one.
@@ -137,11 +150,22 @@ const SERVER_ELEMENT_ACTION_TYPES = new Set(['sendEmail', 'callWebhook', 'create
 /** The Tier-A behaviour executors' dispatch set (A1c) — the engines branch on it beside
  *  DIALOG/SWIPER. Dialog actions have their own set; context/visibility stay in the legacy path. */
 const BEHAVIOUR_ACTION_TYPES = new Set(['navigate', 'scrollTo', 'submitForm', 'copyToClipboard']);
+/** The item actions' dispatch set (T14) and what each does to its item — the engines branch on it beside
+ *  DIALOG/BEHAVIOUR, and composite-core `runCompositeItemAction` runs it on the target item's own runtime. */
+const ITEM_ACTION_TYPES = Object.freeze({
+    openItem: CompositeItemAction.Open,
+    closeItem: CompositeItemAction.Close,
+    toggleItem: CompositeItemAction.Toggle,
+});
+/** The item action an action type runs, or null when it is not one. */
+function itemActionOf(type) {
+    return (type && ITEM_ACTION_TYPES[type]) || null;
+}
 /** The consent actions' dispatch set (C3) — the engines branch on it beside DIALOG/BEHAVIOUR.
  *  `openConsentPreferences` is dialog-opening by nature and included so ONE branch owns consent. */
 const CONSENT_ACTION_TYPES = new Set(['grantConsent', 'denyConsent', 'setConsentCategory', 'openConsentPreferences']);
 /** Picker order — most-used groups first, services last (they are the shop window, not the shop). */
-const ELEMENT_ACTION_GROUP_ORDER = Object.freeze(['motion', 'visibility', 'navigate', 'dialog', 'form', 'data', 'consent', 'service']);
+const ELEMENT_ACTION_GROUP_ORDER = Object.freeze(['motion', 'visibility', 'navigate', 'dialog', 'item', 'form', 'data', 'consent', 'service']);
 /** The catalog, grouped and ordered for the picker — one derivation, no hand-kept second list. */
 function groupedElementActions() {
     return ELEMENT_ACTION_GROUP_ORDER
@@ -232,5 +256,5 @@ function dialogOpenersSelector(dialogDomIdValue) {
  * Generated bundle index. Do not edit.
  */
 
-export { BEHAVIOUR_ACTION_TYPES, CONSENT_ACTION_TYPES, DIALOG_ACTION_TYPE_SET, DIALOG_OPENER_ACTION_TYPES, DIALOG_OPENER_TRIGGER, DIALOG_SELECTOR, ELEMENT_ACTION_DESCRIPTORS, ELEMENT_ACTION_GROUP_ORDER, FORM_SUBMIT_ACTION_DESCRIPTORS, OpenerAttribute, SERVER_ELEMENT_ACTION_TYPES, addableActions, dialogDomId, dialogOpenerAttributes, dialogOpenersSelector, groupedElementActions, nodeIdOfDialogDomId, openedDialogId, resolveActionAvailability };
+export { BEHAVIOUR_ACTION_TYPES, CONSENT_ACTION_TYPES, DIALOG_ACTION_TYPE_SET, DIALOG_OPENER_ACTION_TYPES, DIALOG_OPENER_TRIGGER, DIALOG_SELECTOR, ELEMENT_ACTION_DESCRIPTORS, ELEMENT_ACTION_GROUP_ORDER, FORM_SUBMIT_ACTION_DESCRIPTORS, ITEM_ACTION_TYPES, OpenerAttribute, SERVER_ELEMENT_ACTION_TYPES, addableActions, dialogDomId, dialogOpenerAttributes, dialogOpenersSelector, groupedElementActions, itemActionOf, nodeIdOfDialogDomId, openedDialogId, resolveActionAvailability };
 //# sourceMappingURL=vectoriox-iox-ui-actions-core.mjs.map