@vectoriox/iox-ui 5.38.0 → 5.40.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -5864,8 +5864,10 @@ var ComponentState;
     ComponentState["Current"] = "current";
     /** A composite part that IS on — an open accordion item, its header, its panel (board 9 "Open"). */
     ComponentState["On"] = "on";
-    /** A part INSIDE an item, styled by its item being open (board 9 "Item open") — a TARGETED state: its
-     *  trigger is the item (`stateTriggers['trigger-on']`), compiled through `targetedStateSelector`. */
+    /** A part INSIDE an item, styled by its item being open (board 9 "Item open"; "Tab active" inside a tab or a panel)
+     *  — a TARGETED state: its trigger is the item (`stateTriggers['trigger-on']`), compiled through
+     *  `targetedStateSelector`. On a node OUTSIDE every item (composite T20, CC4a) the author PICKS the item — "when tab
+     *  Night is on" — the same state and the same `:has()` scoped to the nearest common ancestor. */
     ComponentState["ItemOpen"] = "trigger-on";
 })(ComponentState || (ComponentState = {}));
 /** The attribute selector each (non-targeted) component state compiles to. */
@@ -5874,21 +5876,26 @@ const COMPONENT_STATE_SELECTOR = {
     [ComponentState.On]: '[data-iox-on]',
 };
 /** The composite roles that are themselves "on" when their item is open (they carry `data-iox-on`): an accordion's
- *  item, header and panel; a disclosure (its own item), its toggle and its panel (CC2.1). The main entry does not
- *  import composite-core, so the roles are spelled here — `style-compiler.spec` pins them to its enums. */
-const ON_STATE_ROLES = ['accordion.item', 'accordion.trigger', 'accordion.panel', 'disclosure', 'disclosure.trigger', 'disclosure.panel'];
+ *  item, header and panel; a disclosure (its own item), its toggle and its panel (CC2.1); a tab and its panel (CC4a —
+ *  "Active"). The main entry does not import composite-core, so the roles are spelled here — `style-compiler.spec` pins
+ *  them to its enums. */
+const ON_STATE_ROLES = [
+    'accordion.item', 'accordion.trigger', 'accordion.panel', 'disclosure', 'disclosure.trigger', 'disclosure.panel', 'tabs.trigger', 'tabs.panel',
+];
 /**
  * The component states a node offers in the Style panel's "Component state" group: Current page (a link),
- * Open (an accordion's item, header or panel), Item open (any other part inside an item — `insideItem`).
+ * Open / Active (an accordion's item, header or panel; a tab or its panel), Item open (any other part inside an item —
+ * `insideItem`), and — on a node outside every item, on a page that has items to pick (`itemsToPick`, composite T20) —
+ * the same Item open state with a picked trigger.
  */
-function componentStatesFor(type, role, insideItem = false) {
-    // An accordion's header is a button that opens its item, never a link to a page: Open, not Current page.
+function componentStatesFor(type, role, insideItem = false, itemsToPick = false) {
+    // An accordion's header (a tab) is a button that opens its item, never a link to a page: Open, not Current page.
     if (role && ON_STATE_ROLES.includes(role))
         return [ComponentState.On];
     const out = [];
     if (type && CURRENT_LINK_TYPES.includes(type))
         out.push(ComponentState.Current);
-    if (insideItem)
+    if (insideItem || itemsToPick)
         out.push(ComponentState.ItemOpen);
     return out;
 }