@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.118 → 2.0.0-next.119

package/custom-elements.json

@@ -32302,7 +32302,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "Vertical line component\n\nThe vertical line is 24px * length + 1px. +1 px to make sure that connecting lines are overlapping, to hide the gap between them.",
           "name": "ObcVerticalLine",
           "members": [
             {
@@ -32359,6 +32359,7 @@
             "name": "LitElement",
             "package": "lit"
           },
+          "deprecated": "true",
           "tagName": "obc-vertical-line",
           "customElement": true
         }

package/dist/automation/vertical-line/vertical-line.d.ts

@@ -1,5 +1,11 @@
 import { LitElement } from 'lit';
 import { LineMedium, LineType } from '../index.js';
+/**
+ * Vertical line component
+ *
+ * The vertical line is 24px * length + 1px. +1 px to make sure that connecting lines are overlapping, to hide the gap between them.
+ * @deprecated
+ */
 export declare class ObcVerticalLine extends LitElement {
     medium: LineMedium;
     lineType: LineType;

package/dist/automation/vertical-line/vertical-line.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vertical-line.d.ts","sourceRoot":"","sources":["../../../src/automation/vertical-line/vertical-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAa,QAAQ,EAAY,MAAM,aAAa,CAAC;AAQvE,qBACa,eAAgB,SAAQ,UAAU;IACnB,MAAM,EAAE,UAAU,CAAqB;IACvC,QAAQ,EAAE,QAAQ,CAAkB;IACpC,MAAM,EAAE,MAAM,CAAK;IAEpC,MAAM;IAgEf,OAAgB,MAAM,0BAWpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"vertical-line.d.ts","sourceRoot":"","sources":["../../../src/automation/vertical-line/vertical-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAa,QAAQ,EAAY,MAAM,aAAa,CAAC;AAGvE;;;;;GAKG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACnB,MAAM,EAAE,UAAU,CAAqB;IACvC,QAAQ,EAAE,QAAQ,CAAkB;IACpC,MAAM,EAAE,MAAM,CAAK;IAEpC,MAAM;IAgEf,OAAgB,MAAM,0BAWpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/automation/vertical-line/vertical-line.js.map

@@ -1 +1 @@
-{"version":3,"file":"vertical-line.js","sources":["../../../src/automation/vertical-line/vertical-line.ts"],"sourcesContent":["import {LitElement, html, css} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {LineMedium, lineColor, LineType, lineWidth} from '../index.js';\nimport {customElement} from '../../decorator.js';\n\n/* Vertical line component\n *\n * The vertical line is 24px * length + 1px. +1 px to make sure that connecting lines are overlapping, to hide the gap between them.\n * @deprecated\n */\n@customElement('obc-vertical-line')\nexport class ObcVerticalLine extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.normal;\n  @property({type: String}) lineType: LineType = LineType.fluid;\n  @property({type: Number}) length: number = 1;\n\n  override render() {\n    if (this.lineType === LineType.connector) {\n      const length = this.length * 24;\n      return html`<svg\n        width=\"24\"\n        height=\"${length}\"\n        viewBox=\"0 0 24 ${length}\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <line\n          y1=\"0\"\n          x1=\"12\"\n          y2=\"${length}\"\n          x2=\"12\"\n          stroke-width=\"1\"\n          stroke=\"var(--element-neutral-color)\"\n          stroke-dasharray=\"4,2\"\n          stroke-dashoffset=\"2\"\n        />\n      </svg> `;\n    }\n\n    const length = this.length * 24 + 1;\n    const color = lineColor(this.medium);\n    const width = lineWidth(this.lineType);\n    return html`\n      <div class=\"wrapper\" style=\"width: 24px; height: ${this.length * 24}px;\">\n        <svg\n          class=\"line\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 -.5  24 ${length}\"\n          width=\"24\"\n          height=${length}\n        >\n          <line\n            y1=\"-.5\"\n            x1=\"12\"\n            y2=\"${length - 0.5}\"\n            x2=\"12\"\n            stroke-width=${width}\n            stroke=\"var(${color.inner})\"\n          />\n          <line\n            y1=\"-.5\"\n            x1=${12 - 0.5 - width / 2}\n            y2=\"${length - 0.5}\"\n            x2=${12 - 0.5 - width / 2}\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n          />\n          <line\n            y1=\"-.5\"\n            x1=${12 + 0.5 + width / 2}\n            y2=\"${length - 0.5}\"\n            x2=${12 + 0.5 + width / 2}\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n          />\n        </svg>\n      </div>\n    `;\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      line-height: 0;\n    }\n\n    svg {\n      position: relative;\n      top: -0.5px;\n      left: -12px;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-vertical-line': ObcVerticalLine;\n  }\n}\n"],"names":["length"],"mappings":";;;;;;;;;;;;;;AAWO,IAAM,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAChC,SAAA,WAAqB,SAAS;AAC9B,SAAA,SAAiB;AAAA,EAAA;AAAA,EAElC,SAAS;AAChB,QAAI,KAAK,aAAa,SAAS,WAAW;AACxC,YAAMA,UAAS,KAAK,SAAS;AAC7B,aAAO;AAAA;AAAA,kBAEKA,OAAM;AAAA,0BACEA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOhBA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQlB;AAEA,UAAM,SAAS,KAAK,SAAS,KAAK;AAClC,UAAM,QAAQ,UAAU,KAAK,MAAM;AACnC,UAAM,QAAQ,UAAU,KAAK,QAAQ;AACrC,WAAO;AAAA,yDAC8C,KAAK,SAAS,EAAE;AAAA;AAAA;AAAA;AAAA,+BAI1C,MAAM;AAAA;AAAA,mBAElB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKP,SAAS,GAAG;AAAA;AAAA,2BAEH,KAAK;AAAA,0BACN,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,iBAIpB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACnB,SAAS,GAAG;AAAA,iBACb,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEX,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,iBAIpB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACnB,SAAS,GAAG;AAAA,iBACb,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEX,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnC;AAcF;AAjFa,gBAqEK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AApEC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,gBACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAFb,gBAEe,WAAA,YAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAHb,gBAGe,WAAA,UAAA,CAAA;AAHf,kBAAN,gBAAA;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB,eAAA;"}
+{"version":3,"file":"vertical-line.js","sources":["../../../src/automation/vertical-line/vertical-line.ts"],"sourcesContent":["import {LitElement, html, css} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {LineMedium, lineColor, LineType, lineWidth} from '../index.js';\nimport {customElement} from '../../decorator.js';\n\n/**\n * Vertical line component\n *\n * The vertical line is 24px * length + 1px. +1 px to make sure that connecting lines are overlapping, to hide the gap between them.\n * @deprecated\n */\n@customElement('obc-vertical-line')\nexport class ObcVerticalLine extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.normal;\n  @property({type: String}) lineType: LineType = LineType.fluid;\n  @property({type: Number}) length: number = 1;\n\n  override render() {\n    if (this.lineType === LineType.connector) {\n      const length = this.length * 24;\n      return html`<svg\n        width=\"24\"\n        height=\"${length}\"\n        viewBox=\"0 0 24 ${length}\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <line\n          y1=\"0\"\n          x1=\"12\"\n          y2=\"${length}\"\n          x2=\"12\"\n          stroke-width=\"1\"\n          stroke=\"var(--element-neutral-color)\"\n          stroke-dasharray=\"4,2\"\n          stroke-dashoffset=\"2\"\n        />\n      </svg> `;\n    }\n\n    const length = this.length * 24 + 1;\n    const color = lineColor(this.medium);\n    const width = lineWidth(this.lineType);\n    return html`\n      <div class=\"wrapper\" style=\"width: 24px; height: ${this.length * 24}px;\">\n        <svg\n          class=\"line\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 -.5  24 ${length}\"\n          width=\"24\"\n          height=${length}\n        >\n          <line\n            y1=\"-.5\"\n            x1=\"12\"\n            y2=\"${length - 0.5}\"\n            x2=\"12\"\n            stroke-width=${width}\n            stroke=\"var(${color.inner})\"\n          />\n          <line\n            y1=\"-.5\"\n            x1=${12 - 0.5 - width / 2}\n            y2=\"${length - 0.5}\"\n            x2=${12 - 0.5 - width / 2}\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n          />\n          <line\n            y1=\"-.5\"\n            x1=${12 + 0.5 + width / 2}\n            y2=\"${length - 0.5}\"\n            x2=${12 + 0.5 + width / 2}\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n          />\n        </svg>\n      </div>\n    `;\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      line-height: 0;\n    }\n\n    svg {\n      position: relative;\n      top: -0.5px;\n      left: -12px;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-vertical-line': ObcVerticalLine;\n  }\n}\n"],"names":["length"],"mappings":";;;;;;;;;;;;;;AAYO,IAAM,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAChC,SAAA,WAAqB,SAAS;AAC9B,SAAA,SAAiB;AAAA,EAAA;AAAA,EAElC,SAAS;AAChB,QAAI,KAAK,aAAa,SAAS,WAAW;AACxC,YAAMA,UAAS,KAAK,SAAS;AAC7B,aAAO;AAAA;AAAA,kBAEKA,OAAM;AAAA,0BACEA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOhBA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQlB;AAEA,UAAM,SAAS,KAAK,SAAS,KAAK;AAClC,UAAM,QAAQ,UAAU,KAAK,MAAM;AACnC,UAAM,QAAQ,UAAU,KAAK,QAAQ;AACrC,WAAO;AAAA,yDAC8C,KAAK,SAAS,EAAE;AAAA;AAAA;AAAA;AAAA,+BAI1C,MAAM;AAAA;AAAA,mBAElB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKP,SAAS,GAAG;AAAA;AAAA,2BAEH,KAAK;AAAA,0BACN,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,iBAIpB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACnB,SAAS,GAAG;AAAA,iBACb,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEX,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,iBAIpB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACnB,SAAS,GAAG;AAAA,iBACb,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEX,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnC;AAcF;AAjFa,gBAqEK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AApEC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,gBACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAFb,gBAEe,WAAA,YAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAHb,gBAGe,WAAA,UAAA,CAAA;AAHf,kBAAN,gBAAA;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB,eAAA;"}

package/dist/components/pivot-item-group/pivot-item-group.d.ts

@@ -46,6 +46,7 @@ import { ObcPivotItemDirection } from '../pivot-item/pivot-item.js';
  *
  * @slot - Default slot for one or more `<obc-pivot-item>` elements.
  * @fires {CustomEvent<{selectedValue: string}>} change - Fired when the selected value changes.
+ * @stable
  */
 export declare class ObcPivotItemGroup extends LitElement {
     /**

package/dist/components/pivot-item-group/pivot-item-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pivot-item-group.d.ts","sourceRoot":"","sources":["../../../src/components/pivot-item-group/pivot-item-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAKhE,OAAO,EAAC,qBAAqB,EAAe,MAAM,6BAA6B,CAAC;AAEhF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C;;;;;OAKG;IACuB,SAAS,EAAE,qBAAqB,CACvB;IAEnC;;;;OAIG;IACuB,aAAa,SAAM;IAE7C;;;;;OAKG;IACwB,aAAa,UAAS;IAEjD,OAAO,CAAC,kBAAkB;IAqB1B,OAAO,CAAC,gBAAgB;IAWf,YAAY;IAMZ,OAAO,CAAC,iBAAiB,EAAE,cAAc;IASzC,MAAM;IAef,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,iBAAiB,CAAC;KAC3C;CACF"}
+{"version":3,"file":"pivot-item-group.d.ts","sourceRoot":"","sources":["../../../src/components/pivot-item-group/pivot-item-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAKhE,OAAO,EAAC,qBAAqB,EAAe,MAAM,6BAA6B,CAAC;AAEhF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C;;;;;OAKG;IACuB,SAAS,EAAE,qBAAqB,CACvB;IAEnC;;;;OAIG;IACuB,aAAa,SAAM;IAE7C;;;;;OAKG;IACwB,aAAa,UAAS;IAEjD,OAAO,CAAC,kBAAkB;IAqB1B,OAAO,CAAC,gBAAgB;IAWf,YAAY;IAMZ,OAAO,CAAC,iBAAiB,EAAE,cAAc;IASzC,MAAM;IAef,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,iBAAiB,CAAC;KAC3C;CACF"}

package/dist/components/pivot-item-group/pivot-item-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"pivot-item-group.js","sources":["../../../src/components/pivot-item-group/pivot-item-group.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './pivot-item-group.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ObcPivotItemDirection, ObcPivotItem} from '../pivot-item/pivot-item.js';\n\n/**\n * `<obc-pivot-item-group>` – A container for managing a set of pivot items (tab-like or segmented controls) with single selection.\n *\n * Groups multiple `<obc-pivot-item>` components and handles their selection logic, ensuring only one item is selected at a time (or none, if allowed). Provides a way to visually and functionally organize navigation or filtering controls in either a horizontal or vertical layout.\n *\n * ### Features\n * - **Single selection management:** Only one pivot item can be selected at a time. Optionally allows deselecting all.\n * - **Layout direction:** Supports `horizontal` (default, items in a row) or `vertical` (items stacked in a column) via the `direction` property.\n * - **Deselect option:** When `allowDeselect` is true, clicking the selected item will deselect it (no item selected).\n * - **Syncs child state:** Automatically updates all child `<obc-pivot-item>` components to reflect the current selection and layout direction.\n * - **Change event:** Emits a `change` event whenever the selection changes, with the new value.\n *\n * ### Usage Guidelines\n * Use `obc-pivot-item-group` to present a set of mutually exclusive options, such as navigation tabs, segmented controls, or filter toggles. Ideal for scenarios where users need to switch between views, categories, or modes.\n * For independent toggles, use a different component (e.g., checkboxes or chips).\n *\n * - Set the `direction` property to `vertical` for sidebar or stacked layouts, or leave as `horizontal` for toolbar/tab layouts.\n * - Use `allowDeselect` if you want to permit users to clear their selection entirely.\n * - Place one or more `<obc-pivot-item>` elements as children; each should have a unique `value` property.\n *\n * **TODO(designer):** Clarify if there are recommended use cases or visual constraints for horizontal vs. vertical layouts, and if there are accessibility guidelines for keyboard navigation.\n *\n * ### Slots and Content Structure\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | (default) | Always          | Place one or more `<obc-pivot-item>` elements here. Each represents a selectable option. |\n *\n * ### Events\n * - `change` – Fired whenever the selected value changes. Event detail: `{selectedValue: string}`.\n *\n * ### Best Practices and Constraints\n * - Ensure each child `<obc-pivot-item>` has a unique `value` property.\n * - Only use `allowDeselect` if having no selection is a valid state for your use case.\n * - For accessibility, ensure the group and items are labeled appropriately (see `<obc-pivot-item>` docs for ARIA guidance).\n *\n * **Example:**\n * ```html\n * <obc-pivot-item-group direction=\"horizontal\" selectedValue=\"a\">\n *   <obc-pivot-item value=\"a\">Option A</obc-pivot-item>\n *   <obc-pivot-item value=\"b\">Option B</obc-pivot-item>\n *   <obc-pivot-item value=\"c\">Option C</obc-pivot-item>\n * </obc-pivot-item-group>\n * ```\n *\n * @slot - Default slot for one or more `<obc-pivot-item>` elements.\n * @fires {CustomEvent<{selectedValue: string}>} change - Fired when the selected value changes.\n */\n@customElement('obc-pivot-item-group')\nexport class ObcPivotItemGroup extends LitElement {\n  /**\n   * Layout direction for the group: `'horizontal'` (default, items in a row) or `'vertical'` (items stacked).\n   * Changing this updates the direction of all child pivot items.\n   *\n   * @default ObcPivotItemDirection.horizontal\n   */\n  @property({type: String}) direction: ObcPivotItemDirection =\n    ObcPivotItemDirection.horizontal;\n\n  /**\n   * The value of the currently selected pivot item.\n   * Set this to control selection programmatically, or listen for the `change` event to react to user selection.\n   * Defaults to empty string (no selection).\n   */\n  @property({type: String}) selectedValue = '';\n\n  /**\n   * If true, allows the user to deselect the currently selected item by clicking it again (resulting in no selection).\n   * If false (default), one item is always selected unless `selectedValue` is empty.\n   *\n   * @availableWhen selectedValue!=''\n   */\n  @property({type: Boolean}) allowDeselect = false;\n\n  private handleItemSelected(event: CustomEvent) {\n    event.stopPropagation();\n    const {value} = event.detail;\n\n    if (this.allowDeselect && this.selectedValue === value) {\n      this.selectedValue = '';\n    } else {\n      this.selectedValue = value;\n    }\n\n    this.updateChildItems();\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {selectedValue: this.selectedValue},\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private updateChildItems() {\n    const items = this.querySelectorAll(\n      'obc-pivot-item'\n    ) as NodeListOf<ObcPivotItem>;\n\n    items.forEach((item) => {\n      item.selected = item.value === this.selectedValue;\n      item.direction = this.direction;\n    });\n  }\n\n  override firstUpdated() {\n    this.updateComplete.then(() => {\n      this.updateChildItems();\n    });\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    if (\n      changedProperties.has('selectedValue') ||\n      changedProperties.has('direction')\n    ) {\n      this.updateChildItems();\n    }\n  }\n\n  override render() {\n    const classes = classMap({\n      'pivot-group': true,\n      'direction-horizontal':\n        this.direction === ObcPivotItemDirection.horizontal,\n      'direction-vertical': this.direction === ObcPivotItemDirection.vertical,\n    });\n\n    return html`\n      <div class=${classes} @selected=${this.handleItemSelected}>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-pivot-item-group': ObcPivotItemGroup;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuDO,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AAOqB,SAAA,YACxB,sBAAsB;AAOE,SAAA,gBAAgB;AAQf,SAAA,gBAAgB;AAAA,EAAA;AAAA,EAEnC,mBAAmB,OAAoB;AAC7C,UAAM,gBAAA;AACN,UAAM,EAAC,UAAS,MAAM;AAEtB,QAAI,KAAK,iBAAiB,KAAK,kBAAkB,OAAO;AACtD,WAAK,gBAAgB;AAAA,IACvB,OAAO;AACL,WAAK,gBAAgB;AAAA,IACvB;AAEA,SAAK,iBAAA;AAEL,SAAK;AAAA,MACH,IAAI,YAAY,UAAU;AAAA,QACxB,QAAQ,EAAC,eAAe,KAAK,cAAA;AAAA,QAC7B,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,mBAAmB;AACzB,UAAM,QAAQ,KAAK;AAAA,MACjB;AAAA,IAAA;AAGF,UAAM,QAAQ,CAAC,SAAS;AACtB,WAAK,WAAW,KAAK,UAAU,KAAK;AACpC,WAAK,YAAY,KAAK;AAAA,IACxB,CAAC;AAAA,EACH;AAAA,EAES,eAAe;AACtB,SAAK,eAAe,KAAK,MAAM;AAC7B,WAAK,iBAAA;AAAA,IACP,CAAC;AAAA,EACH;AAAA,EAES,QAAQ,mBAAmC;AAClD,QACE,kBAAkB,IAAI,eAAe,KACrC,kBAAkB,IAAI,WAAW,GACjC;AACA,WAAK,iBAAA;AAAA,IACP;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM,UAAU,SAAS;AAAA,MACvB,eAAe;AAAA,MACf,wBACE,KAAK,cAAc,sBAAsB;AAAA,MAC3C,sBAAsB,KAAK,cAAc,sBAAsB;AAAA,IAAA,CAChE;AAED,WAAO;AAAA,mBACQ,OAAO,cAAc,KAAK,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAI7D;AAGF;AAxFa,kBAuFK,SAAS,UAAU,cAAc;AAhFvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAPb,kBAOe,WAAA,aAAA,CAAA;AAQA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAfb,kBAee,WAAA,iBAAA,CAAA;AAQC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAvBd,kBAuBgB,WAAA,iBAAA,CAAA;AAvBhB,oBAAN,gBAAA;AAAA,EADN,cAAc,sBAAsB;AAAA,GACxB,iBAAA;"}
+{"version":3,"file":"pivot-item-group.js","sources":["../../../src/components/pivot-item-group/pivot-item-group.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './pivot-item-group.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ObcPivotItemDirection, ObcPivotItem} from '../pivot-item/pivot-item.js';\n\n/**\n * `<obc-pivot-item-group>` – A container for managing a set of pivot items (tab-like or segmented controls) with single selection.\n *\n * Groups multiple `<obc-pivot-item>` components and handles their selection logic, ensuring only one item is selected at a time (or none, if allowed). Provides a way to visually and functionally organize navigation or filtering controls in either a horizontal or vertical layout.\n *\n * ### Features\n * - **Single selection management:** Only one pivot item can be selected at a time. Optionally allows deselecting all.\n * - **Layout direction:** Supports `horizontal` (default, items in a row) or `vertical` (items stacked in a column) via the `direction` property.\n * - **Deselect option:** When `allowDeselect` is true, clicking the selected item will deselect it (no item selected).\n * - **Syncs child state:** Automatically updates all child `<obc-pivot-item>` components to reflect the current selection and layout direction.\n * - **Change event:** Emits a `change` event whenever the selection changes, with the new value.\n *\n * ### Usage Guidelines\n * Use `obc-pivot-item-group` to present a set of mutually exclusive options, such as navigation tabs, segmented controls, or filter toggles. Ideal for scenarios where users need to switch between views, categories, or modes.\n * For independent toggles, use a different component (e.g., checkboxes or chips).\n *\n * - Set the `direction` property to `vertical` for sidebar or stacked layouts, or leave as `horizontal` for toolbar/tab layouts.\n * - Use `allowDeselect` if you want to permit users to clear their selection entirely.\n * - Place one or more `<obc-pivot-item>` elements as children; each should have a unique `value` property.\n *\n * **TODO(designer):** Clarify if there are recommended use cases or visual constraints for horizontal vs. vertical layouts, and if there are accessibility guidelines for keyboard navigation.\n *\n * ### Slots and Content Structure\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | (default) | Always          | Place one or more `<obc-pivot-item>` elements here. Each represents a selectable option. |\n *\n * ### Events\n * - `change` – Fired whenever the selected value changes. Event detail: `{selectedValue: string}`.\n *\n * ### Best Practices and Constraints\n * - Ensure each child `<obc-pivot-item>` has a unique `value` property.\n * - Only use `allowDeselect` if having no selection is a valid state for your use case.\n * - For accessibility, ensure the group and items are labeled appropriately (see `<obc-pivot-item>` docs for ARIA guidance).\n *\n * **Example:**\n * ```html\n * <obc-pivot-item-group direction=\"horizontal\" selectedValue=\"a\">\n *   <obc-pivot-item value=\"a\">Option A</obc-pivot-item>\n *   <obc-pivot-item value=\"b\">Option B</obc-pivot-item>\n *   <obc-pivot-item value=\"c\">Option C</obc-pivot-item>\n * </obc-pivot-item-group>\n * ```\n *\n * @slot - Default slot for one or more `<obc-pivot-item>` elements.\n * @fires {CustomEvent<{selectedValue: string}>} change - Fired when the selected value changes.\n * @stable\n */\n@customElement('obc-pivot-item-group')\nexport class ObcPivotItemGroup extends LitElement {\n  /**\n   * Layout direction for the group: `'horizontal'` (default, items in a row) or `'vertical'` (items stacked).\n   * Changing this updates the direction of all child pivot items.\n   *\n   * @default ObcPivotItemDirection.horizontal\n   */\n  @property({type: String}) direction: ObcPivotItemDirection =\n    ObcPivotItemDirection.horizontal;\n\n  /**\n   * The value of the currently selected pivot item.\n   * Set this to control selection programmatically, or listen for the `change` event to react to user selection.\n   * Defaults to empty string (no selection).\n   */\n  @property({type: String}) selectedValue = '';\n\n  /**\n   * If true, allows the user to deselect the currently selected item by clicking it again (resulting in no selection).\n   * If false (default), one item is always selected unless `selectedValue` is empty.\n   *\n   * @availableWhen selectedValue!=''\n   */\n  @property({type: Boolean}) allowDeselect = false;\n\n  private handleItemSelected(event: CustomEvent) {\n    event.stopPropagation();\n    const {value} = event.detail;\n\n    if (this.allowDeselect && this.selectedValue === value) {\n      this.selectedValue = '';\n    } else {\n      this.selectedValue = value;\n    }\n\n    this.updateChildItems();\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {selectedValue: this.selectedValue},\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private updateChildItems() {\n    const items = this.querySelectorAll(\n      'obc-pivot-item'\n    ) as NodeListOf<ObcPivotItem>;\n\n    items.forEach((item) => {\n      item.selected = item.value === this.selectedValue;\n      item.direction = this.direction;\n    });\n  }\n\n  override firstUpdated() {\n    this.updateComplete.then(() => {\n      this.updateChildItems();\n    });\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    if (\n      changedProperties.has('selectedValue') ||\n      changedProperties.has('direction')\n    ) {\n      this.updateChildItems();\n    }\n  }\n\n  override render() {\n    const classes = classMap({\n      'pivot-group': true,\n      'direction-horizontal':\n        this.direction === ObcPivotItemDirection.horizontal,\n      'direction-vertical': this.direction === ObcPivotItemDirection.vertical,\n    });\n\n    return html`\n      <div class=${classes} @selected=${this.handleItemSelected}>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-pivot-item-group': ObcPivotItemGroup;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAwDO,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AAOqB,SAAA,YACxB,sBAAsB;AAOE,SAAA,gBAAgB;AAQf,SAAA,gBAAgB;AAAA,EAAA;AAAA,EAEnC,mBAAmB,OAAoB;AAC7C,UAAM,gBAAA;AACN,UAAM,EAAC,UAAS,MAAM;AAEtB,QAAI,KAAK,iBAAiB,KAAK,kBAAkB,OAAO;AACtD,WAAK,gBAAgB;AAAA,IACvB,OAAO;AACL,WAAK,gBAAgB;AAAA,IACvB;AAEA,SAAK,iBAAA;AAEL,SAAK;AAAA,MACH,IAAI,YAAY,UAAU;AAAA,QACxB,QAAQ,EAAC,eAAe,KAAK,cAAA;AAAA,QAC7B,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,mBAAmB;AACzB,UAAM,QAAQ,KAAK;AAAA,MACjB;AAAA,IAAA;AAGF,UAAM,QAAQ,CAAC,SAAS;AACtB,WAAK,WAAW,KAAK,UAAU,KAAK;AACpC,WAAK,YAAY,KAAK;AAAA,IACxB,CAAC;AAAA,EACH;AAAA,EAES,eAAe;AACtB,SAAK,eAAe,KAAK,MAAM;AAC7B,WAAK,iBAAA;AAAA,IACP,CAAC;AAAA,EACH;AAAA,EAES,QAAQ,mBAAmC;AAClD,QACE,kBAAkB,IAAI,eAAe,KACrC,kBAAkB,IAAI,WAAW,GACjC;AACA,WAAK,iBAAA;AAAA,IACP;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM,UAAU,SAAS;AAAA,MACvB,eAAe;AAAA,MACf,wBACE,KAAK,cAAc,sBAAsB;AAAA,MAC3C,sBAAsB,KAAK,cAAc,sBAAsB;AAAA,IAAA,CAChE;AAED,WAAO;AAAA,mBACQ,OAAO,cAAc,KAAK,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAI7D;AAGF;AAxFa,kBAuFK,SAAS,UAAU,cAAc;AAhFvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAPb,kBAOe,WAAA,aAAA,CAAA;AAQA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAfb,kBAee,WAAA,iBAAA,CAAA;AAQC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAvBd,kBAuBgB,WAAA,iBAAA,CAAA;AAvBhB,oBAAN,gBAAA;AAAA,EADN,cAAc,sBAAsB;AAAA,GACxB,iBAAA;"}

package/eslint.config.mjs

@@ -1,6 +1,7 @@
 import typescriptEslint from '@typescript-eslint/eslint-plugin';
 import globals from 'globals';
 import tsParser from '@typescript-eslint/parser';
+import fs from 'node:fs';
 import path from 'node:path';
 import {fileURLToPath} from 'node:url';
 import js from '@eslint/js';
@@ -159,6 +160,174 @@ function toTitleCase(segment) {
   });
 }
 
+// --- Component lifecycle tags (AGENTS.md § 3) -------------------------------
+// The class-level JSDoc tag on an `@customElement` class is the single source
+// of truth for a component's lifecycle state; a story's `meta.tags` mirrors it.
+
+const LIFECYCLE_JSDOC_TAGS = ['stable', 'beta', 'experimental', 'deprecated'];
+
+// `@stable` deliberately maps to no story tag, so a sidebar badge always means
+// "there is a caveat here" rather than decorating every entry.
+const LIFECYCLE_STORY_TAG = {
+  beta: 'beta',
+  experimental: 'experimental',
+  deprecated: 'deprecated',
+};
+
+// Story tags this rule owns and will rewrite. `wip` and `alpha` are the retired
+// names, listed so the autofix removes them.
+const OWNED_STORY_TAGS = new Set([
+  'beta',
+  'experimental',
+  'deprecated',
+  'wip',
+  'alpha',
+]);
+
+const SRC_DIR = path.join(__dirname, 'src');
+
+// A JSDoc block (`/** … */` — never a plain `/* … */`) immediately preceding a
+// `@customElement('…')` decorator. The inner group forbids `*/` so an earlier,
+// unrelated JSDoc block cannot be stretched across intervening code to reach
+// the decorator.
+const CUSTOM_ELEMENT_WITH_DOC =
+  /\/\*\*((?:(?!\*\/)[\s\S])*)\*\/\s*@customElement\(\s*['"]([^'"]+)['"]\s*\)/g;
+// Anchored to the start of a line so a `@customElement(…)` written inside a
+// JSDoc code fence (where the line starts with ` * `) is not mistaken for a
+// real decorator.
+const CUSTOM_ELEMENT_ANY =
+  /(?:^|\r?\n)[ \t]*@customElement\(\s*['"]([^'"]+)['"]\s*\)/g;
+
+const lifecycleTagPatterns = new Map(
+  LIFECYCLE_JSDOC_TAGS.map((tag) => [
+    tag,
+    new RegExp(`^[ \\t]*\\*?[ \\t]*@${tag}\\b`, 'm'),
+  ])
+);
+
+// Every `@customElement` in a source text, with the lifecycle tags declared in
+// its class JSDoc. Shared by both rules so they can never disagree.
+function extractComponents(source) {
+  const components = [];
+  const seen = new Set();
+  let match;
+
+  CUSTOM_ELEMENT_WITH_DOC.lastIndex = 0;
+  while ((match = CUSTOM_ELEMENT_WITH_DOC.exec(source)) !== null) {
+    const doc = match[1];
+    const decoratorOffset = match[0].lastIndexOf('@customElement');
+    components.push({
+      tag: match[2],
+      tags: LIFECYCLE_JSDOC_TAGS.filter((tag) =>
+        lifecycleTagPatterns.get(tag).test(doc)
+      ),
+      index: match.index + decoratorOffset,
+      length: match[0].length - decoratorOffset,
+    });
+    seen.add(match[2]);
+  }
+
+  CUSTOM_ELEMENT_ANY.lastIndex = 0;
+  while ((match = CUSTOM_ELEMENT_ANY.exec(source)) !== null) {
+    if (seen.has(match[1])) continue;
+    seen.add(match[1]);
+    const decoratorOffset = match[0].indexOf('@customElement');
+    components.push({
+      tag: match[1],
+      tags: [],
+      index: match.index + decoratorOffset,
+      length: match[0].length - decoratorOffset,
+    });
+  }
+
+  return components;
+}
+
+function collectComponentSources(dir, out) {
+  for (const entry of fs.readdirSync(dir, {withFileTypes: true})) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      // Icons are generated and carry no lifecycle tags by design.
+      if (entry.name === 'icons' && dir === SRC_DIR) continue;
+      collectComponentSources(full, out);
+    } else if (
+      entry.name.endsWith('.ts') &&
+      !entry.name.endsWith('.stories.ts')
+    ) {
+      out.push(full);
+    }
+  }
+  return out;
+}
+
+// ESLint has no cross-file API, so the tag → lifecycle map is built by reading
+// the sources directly. The result is cached: rebuilt at most once every two
+// seconds so a long-lived editor process still picks up JSDoc edits, while a
+// single CLI run over hundreds of story files pays for it only a few times.
+const COMPONENT_INDEX_TTL_MS = 2000;
+let componentIndex = null;
+let componentIndexBuiltAt = 0;
+let componentIndexPinned = false;
+
+function getComponentIndex() {
+  if (componentIndexPinned) return componentIndex;
+
+  const now = Date.now();
+  if (componentIndex && now - componentIndexBuiltAt < COMPONENT_INDEX_TTL_MS) {
+    return componentIndex;
+  }
+
+  const index = new Map();
+  let files;
+  try {
+    files = collectComponentSources(SRC_DIR, []);
+  } catch {
+    files = [];
+  }
+
+  for (const file of files) {
+    let source;
+    try {
+      source = fs.readFileSync(file, 'utf8');
+    } catch {
+      continue;
+    }
+    if (!source.includes('@customElement')) continue;
+    for (const component of extractComponents(source)) {
+      index.set(component.tag, {file, tags: component.tags});
+    }
+  }
+
+  componentIndex = index;
+  componentIndexBuiltAt = now;
+  return index;
+}
+
+function unwrapTypeExpression(node) {
+  let current = node;
+  while (
+    current &&
+    (current.type === 'TSSatisfiesExpression' || current.type === 'TSAsExpression')
+  ) {
+    current = current.expression;
+  }
+  return current;
+}
+
+function findObjectProperty(objectExpression, name) {
+  return objectExpression.properties.find(
+    (property) =>
+      property.type === 'Property' &&
+      !property.computed &&
+      property.key.type === 'Identifier' &&
+      property.key.name === name
+  );
+}
+
+function quoteList(names) {
+  return names.map((name) => `'${name}'`).join(', ');
+}
+
 // Custom plugin for local OpenBridge lint rules
 const openbridgePlugin = {
   rules: {
@@ -268,6 +437,166 @@ const openbridgePlugin = {
         };
       },
     },
+    'component-lifecycle-tag': {
+      meta: {
+        type: 'suggestion',
+        docs: {
+          description:
+            'Require exactly one lifecycle tag (@stable, @beta, @experimental, @deprecated) in the class JSDoc of every @customElement',
+        },
+        schema: [],
+      },
+      create(context) {
+        const sourceCode = context.sourceCode ?? context.getSourceCode();
+
+        return {
+          'Program:exit'() {
+            const text = sourceCode.getText();
+            if (!text.includes('@customElement')) return;
+
+            for (const component of extractComponents(text)) {
+              if (component.tags.length === 1) continue;
+
+              context.report({
+                loc: {
+                  start: sourceCode.getLocFromIndex(component.index),
+                  end: sourceCode.getLocFromIndex(
+                    component.index + component.length
+                  ),
+                },
+                message:
+                  component.tags.length === 0
+                    ? `<${component.tag}> has no lifecycle tag in its class JSDoc. Add exactly one of @stable, @beta, @experimental or @deprecated (see AGENTS.md § 3).`
+                    : `<${component.tag}> declares more than one lifecycle tag (${component.tags
+                        .map((tag) => `@${tag}`)
+                        .join(', ')}). Exactly one is allowed.`,
+              });
+            }
+          },
+        };
+      },
+    },
+    'story-lifecycle-tags': {
+      meta: {
+        type: 'problem',
+        docs: {
+          description:
+            "Keep a story's meta.tags lifecycle entry in sync with the class JSDoc lifecycle tag of its meta.component",
+        },
+        fixable: 'code',
+        schema: [],
+      },
+      create(context) {
+        const sourceCode = context.sourceCode ?? context.getSourceCode();
+
+        return {
+          VariableDeclarator(node) {
+            if (node.id.type !== 'Identifier' || node.id.name !== 'meta') return;
+
+            const meta = unwrapTypeExpression(node.init);
+            if (!meta || meta.type !== 'ObjectExpression') return;
+
+            const componentProperty = findObjectProperty(meta, 'component');
+            if (
+              !componentProperty ||
+              componentProperty.value.type !== 'Literal' ||
+              typeof componentProperty.value.value !== 'string'
+            )
+              return;
+
+            const componentTag = componentProperty.value.value;
+            const component = getComponentIndex().get(componentTag);
+
+            // A component with no tag, or more than one, is reported against
+            // its own source file by `component-lifecycle-tag`; there is no
+            // single correct story tag to fix towards here.
+            if (!component || component.tags.length !== 1) return;
+
+            const lifecycle = component.tags[0];
+            const expected = LIFECYCLE_STORY_TAG[lifecycle];
+            const desired = expected ? [expected] : [];
+            const tagsProperty = findObjectProperty(meta, 'tags');
+
+            if (!tagsProperty) {
+              if (!expected) return;
+
+              context.report({
+                node: componentProperty.value,
+                message: `<${componentTag}> is @${lifecycle}, so meta.tags must contain '${expected}', but meta has no tags.`,
+                fix(fixer) {
+                  const titleProperty = findObjectProperty(meta, 'title');
+                  if (titleProperty) {
+                    const next = sourceCode.getTokenAfter(titleProperty);
+                    return next && next.value === ','
+                      ? fixer.insertTextAfter(next, `\n  tags: ['${expected}'],`)
+                      : fixer.insertTextAfter(
+                          titleProperty,
+                          `,\n  tags: ['${expected}']`
+                        );
+                  }
+                  const first = meta.properties[0];
+                  return first
+                    ? fixer.insertTextBefore(
+                        first,
+                        `tags: ['${expected}'],\n  `
+                      )
+                    : null;
+                },
+              });
+              return;
+            }
+
+            if (tagsProperty.value.type !== 'ArrayExpression') return;
+
+            const elements = tagsProperty.value.elements.filter(Boolean);
+            const owned = elements.filter(
+              (element) =>
+                element.type === 'Literal' &&
+                typeof element.value === 'string' &&
+                OWNED_STORY_TAGS.has(element.value)
+            );
+            const found = owned.map((element) => element.value);
+
+            if (
+              found.length === desired.length &&
+              found.every((name, i) => name === desired[i])
+            )
+              return;
+
+            const kept = elements.filter((element) => !owned.includes(element));
+            const nextElements = [
+              ...kept.map((element) => sourceCode.getText(element)),
+              ...desired.map((name) => `'${name}'`),
+            ];
+
+            context.report({
+              node: tagsProperty.value,
+              message: expected
+                ? `<${componentTag}> is @${lifecycle}, so meta.tags must carry ${quoteList(desired)}, but it carries ${found.length ? quoteList(found) : 'no lifecycle tag'}.`
+                : `<${componentTag}> is @${lifecycle}, so meta.tags must carry no lifecycle tag, but it carries ${quoteList(found)}.`,
+              fix(fixer) {
+                if (nextElements.length > 0) {
+                  return fixer.replaceText(
+                    tagsProperty.value,
+                    `[${nextElements.join(', ')}]`
+                  );
+                }
+                const previous = sourceCode.getTokenBefore(tagsProperty);
+                const next = sourceCode.getTokenAfter(tagsProperty);
+                const start = previous
+                  ? previous.range[1]
+                  : tagsProperty.range[0];
+                const end =
+                  next && next.value === ','
+                    ? next.range[1]
+                    : tagsProperty.range[1];
+                return fixer.removeRange([start, end]);
+              },
+            });
+          },
+        };
+      },
+    },
     'prefer-boolean-property-default-false': {
       meta: {
         type: 'problem',
@@ -539,7 +868,9 @@ export default [
       'openbridge/prefer-enum-over-string-literal-union': 'error',
       'openbridge/prefer-boolean-property-default-false': 'error',
       'openbridge/prefer-array-property-type-and-item-interface': 'error',
+      'openbridge/component-lifecycle-tag': 'warn',
       'openbridge/storybook-title-case': 'off',
+      'openbridge/story-lifecycle-tags': 'off',
       // Disabled because eslint-plugin-file-extension-in-import-ts is not yet
       // compatible with ESLint v10 (it still uses deprecated context methods).
       'file-extension-in-import-ts/file-extension-in-import-ts': 'off',
@@ -574,11 +905,35 @@ export default [
       'openbridge/prefer-enum-over-string-literal-union': 'off',
     },
   },
+  {
+    // Icon components carry no lifecycle tags by design.
+    files: ['src/icons/**/*.ts', 'src/manual-icon/**/*.ts'],
+
+    rules: {
+      'openbridge/component-lifecycle-tag': 'off',
+    },
+  },
   {
     files: ['**/*.stories.ts'],
 
     rules: {
       'openbridge/storybook-title-case': 'error',
+      'openbridge/story-lifecycle-tags': 'error',
+      'openbridge/component-lifecycle-tag': 'off',
     },
   },
 ];
+
+// ESLint reads only the default export. These named exports exist so the
+// lifecycle-tag rules can be unit-tested (script/eslint-rules.test.ts) without
+// depending on the real state of src/.
+export const __testables = {
+  openbridgePlugin,
+  extractComponents,
+  pinComponentIndex(entries) {
+    componentIndex = new Map(
+      Object.entries(entries).map(([tag, tags]) => [tag, {file: tag, tags}])
+    );
+    componentIndexPinned = true;
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-full-bundle",
-  "version": "2.0.0-next.118",
+  "version": "2.0.0-next.119",
   "type": "module",
   "repository": {
     "type": "git",
@@ -147,6 +147,8 @@
     "lint:icons": "tsx ./script/check-icon-hex-leaks.ts",
     "lint:eslint": "eslint 'src/**/*.ts'",
     "lint:lit-analyzer": "lit-analyzer --strict --maxWarnings 0",
+    "lint:fix:stories": "eslint 'src/**/*.stories.ts' --fix",
+    "test:rules": "vitest run --project rules",
     "fix-imports": "node fix-imports.mjs",
     "fix-imports:check": "node fix-imports.mjs --dry-run",
     "test:browser": "vitest --config=vitest.browser.config.ts",