@oicl/openbridge-webcomponents 2.0.0-next.171 → 2.0.0-next.173

package/bundle/openbridge-webcomponents.bundle.js

@@ -19783,12 +19783,17 @@ var MotorizedVariant = /* @__PURE__ */ function(MotorizedVariant) {
 * Not registered as a custom element. `obc-fan`, `obc-motor` and `obc-pump`
 * extend it and supply their own `icon` and `variant`.
 *
+* @property turnedOn - Whether the device is running. Selects the running
+* icon and the speed readout instead of the `Off` state. Not named `on`,
+* which Svelte binds as an event listener in markup (#1090).
+* @property on - Alias of `turnedOn` for 1.x markup: setting it sets
+* `turnedOn`.
 * @availableWhen direction variant in [double, forward, flatForward]
 */
 var ObcAbstractAutomationButtonMotorized = class extends ObcAbstractAutomationButton {
 	constructor(..._args) {
 		super(..._args);
-		this.on = false;
+		this.turnedOn = false;
 		this.speedInPercent = 0;
 		this.speedUnit = "%";
 		this.speedMaxDigits = 3;
@@ -19799,7 +19804,7 @@ var ObcAbstractAutomationButtonMotorized = class extends ObcAbstractAutomationBu
 	get extraReadouts() {
 		const speed = this.speed ?? this.speedInPercent;
 		if (!this.showStatus) return [];
-		if (speed !== void 0 && speed !== null && this.on) return [{
+		if (speed !== void 0 && speed !== null && this.turnedOn) return [{
 			type: "value",
 			value: speed,
 			nDigits: this.speedMaxDigits,
@@ -19807,17 +19812,22 @@ var ObcAbstractAutomationButtonMotorized = class extends ObcAbstractAutomationBu
 			direction: this.labelDirection,
 			icon: this.labelDirection === AutomationButtonLabelDirection.none ? "none" : "chevron"
 		}];
-		else if (!this.on) return [{
+		else if (!this.turnedOn) return [{
 			type: "state-off",
 			value: "Off",
 			hasIcon: true
 		}];
 		return [];
 	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has("on") && this.on !== void 0) this.turnedOn = this.on;
+	}
 	get _on() {
-		return this.on;
+		return this.turnedOn;
 	}
 };
+__decorate([n$4({ type: Boolean })], ObcAbstractAutomationButtonMotorized.prototype, "turnedOn", void 0);
 __decorate([n$4({ type: Boolean })], ObcAbstractAutomationButtonMotorized.prototype, "on", void 0);
 __decorate([n$4({ type: Number })], ObcAbstractAutomationButtonMotorized.prototype, "speedInPercent", void 0);
 __decorate([n$4({ type: Number })], ObcAbstractAutomationButtonMotorized.prototype, "speed", void 0);
@@ -19828,10 +19838,29 @@ __decorate([n$4({ type: String })], ObcAbstractAutomationButtonMotorized.prototy
 __decorate([n$4({ type: String })], ObcAbstractAutomationButtonMotorized.prototype, "direction", void 0);
 //#endregion
 //#region src/automation/automation-button/abstract-automation-button-squared.ts
+/**
+* Base class for two-state automation buttons.
+*
+* Extends `ObcAbstractAutomationButton` with the on/off state: the subclass
+* picks its icon from `turnedOn`, and the readout adds the `On` or `Off`
+* state row.
+*
+* ## Usage Guidelines
+*
+* Not registered as a custom element. `obc-switch`, `obc-converter`,
+* `obc-diodes` and the other two-state devices extend it and supply their own
+* `icon`.
+*
+* @property turnedOn - Whether the device is on. Selects the on icon and the
+* `On` state row instead of `Off`. Not named `on`, which Svelte binds as an
+* event listener in markup (#1090).
+* @property on - Alias of `turnedOn` for 1.x markup: setting it sets
+* `turnedOn`.
+*/
 var ObcAbstractAutomationButtonSquared = class extends ObcAbstractAutomationButton {
 	constructor(..._args) {
 		super(..._args);
-		this.on = false;
+		this.turnedOn = false;
 		this.variant = "square";
 		this.orientation = AutomationButtonOrientation.horizontal;
 	}
@@ -19840,7 +19869,7 @@ var ObcAbstractAutomationButtonSquared = class extends ObcAbstractAutomationButt
 	}
 	get extraReadouts() {
 		if (!this.showStatus) return [];
-		if (this.on) return [{
+		if (this.turnedOn) return [{
 			type: "state-on",
 			value: "On",
 			hasIcon: true
@@ -19851,10 +19880,15 @@ var ObcAbstractAutomationButtonSquared = class extends ObcAbstractAutomationButt
 			hasIcon: true
 		}];
 	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has("on") && this.on !== void 0) this.turnedOn = this.on;
+	}
 	get _on() {
-		return this.on;
+		return this.turnedOn;
 	}
 };
+__decorate([n$4({ type: Boolean })], ObcAbstractAutomationButtonSquared.prototype, "turnedOn", void 0);
 __decorate([n$4({ type: Boolean })], ObcAbstractAutomationButtonSquared.prototype, "on", void 0);
 __decorate([n$4({ type: String })], ObcAbstractAutomationButtonSquared.prototype, "variant", void 0);
 __decorate([n$4({ type: String })], ObcAbstractAutomationButtonSquared.prototype, "orientation", void 0);
@@ -19994,6 +20028,43 @@ function deepActiveElement() {
 	while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
 	return active;
 }
+/**
+* Whether `node` sits inside `root` in the composed tree.
+*
+* `Node.contains()` walks the DOM tree, where slotted light-DOM content is a
+* child of the host and not of the slot — so it answers no for exactly the
+* content a component projects into itself. This follows `assignedSlot` and
+* shadow hosts as well.
+*/
+function composedContains(root, node) {
+	let current = node;
+	while (current) {
+		if (current === root) return true;
+		current = current.assignedSlot ?? current.parentNode ?? (current instanceof ShadowRoot ? current.host : null);
+	}
+	return false;
+}
+/**
+* Moves focus out of `hidden`, to the first fallback that will take it.
+*
+* Call it just before a region becomes `inert` or is taken out of the page.
+* The browser blurs whatever it hides, and focus lands on `<body>` a frame or
+* two later, so the next Tab press starts from the top of the document instead
+* of where the user was.
+*
+* Each candidate is tried and then checked, rather than inspected first: a
+* `disabled` button, a hidden one and an element with no tabindex all refuse
+* focus for different reasons, and the only reliable question is whether focus
+* actually left.
+*/
+function releaseFocusBefore(hidden, ...fallbacks) {
+	if (!composedContains(hidden, deepActiveElement())) return;
+	for (const candidate of fallbacks) {
+		if (!candidate) continue;
+		candidate.focus();
+		if (!composedContains(hidden, deepActiveElement())) return;
+	}
+}
 function isTabbable(element) {
 	if (!element.matches(TABBABLE_SELECTOR)) return false;
 	if (element.tabIndex < 0) return false;
@@ -39230,7 +39301,7 @@ var ObcBipolarTransistor = class ObcBipolarTransistor extends ObcAbstractAutomat
 	}
 	get icon() {
 		switch (this.alternativeIcon) {
-			case "bipolarTransistor02": if (this.on) return b`<obi-bipolar-transistor-02-on
+			case "bipolarTransistor02": if (this.turnedOn) return b`<obi-bipolar-transistor-02-on
               usecsscolor
               slot="icon"
             ></obi-bipolar-transistor-02-on>
@@ -39246,7 +39317,7 @@ var ObcBipolarTransistor = class ObcBipolarTransistor extends ObcAbstractAutomat
               usecsscolor
               slot="icon-silhouette"
             ></obi-bipolar-transistor-02-off>`;
-			case "bipolarTransistor03": if (this.on) return b`<obi-bipolar-transistor-03-on
+			case "bipolarTransistor03": if (this.turnedOn) return b`<obi-bipolar-transistor-03-on
               usecsscolor
               slot="icon"
             ></obi-bipolar-transistor-03-on>
@@ -39262,7 +39333,7 @@ var ObcBipolarTransistor = class ObcBipolarTransistor extends ObcAbstractAutomat
               usecsscolor
               slot="icon-silhouette"
             ></obi-bipolar-transistor-03-off>`;
-			case "bipolarTransistor04": if (this.on) return b`<obi-bipolar-transistor-04-on
+			case "bipolarTransistor04": if (this.turnedOn) return b`<obi-bipolar-transistor-04-on
               usecsscolor
               slot="icon"
             ></obi-bipolar-transistor-04-on>
@@ -39294,7 +39365,7 @@ var ObcBipolarTransistor = class ObcBipolarTransistor extends ObcAbstractAutomat
             usecsscolor
             slot="icon-silhouette"
           ></obi-bipolar-transistor-04-flat>`;
-			default: if (this.on) return b`<obi-bipolar-transistor-on
+			default: if (this.turnedOn) return b`<obi-bipolar-transistor-on
               usecsscolor
               slot="icon"
             ></obi-bipolar-transistor-on>
@@ -39817,7 +39888,7 @@ var ObcCapacitor = class ObcCapacitor extends ObcAbstractAutomationButtonSquared
 	}
 	get icon() {
 		switch (this.alternativeIcon) {
-			case "capacitor02": if (this.on) return b`<obi-capacitor-02-on
+			case "capacitor02": if (this.turnedOn) return b`<obi-capacitor-02-on
               usecsscolor
               slot="icon"
             ></obi-capacitor-02-on>
@@ -39833,7 +39904,7 @@ var ObcCapacitor = class ObcCapacitor extends ObcAbstractAutomationButtonSquared
               usecsscolor
               slot="icon-silhouette"
             ></obi-capacitor-02-off>`;
-			case "capacitor03": if (this.on) return b`<obi-capacitor-03-on
+			case "capacitor03": if (this.turnedOn) return b`<obi-capacitor-03-on
               usecsscolor
               slot="icon"
             ></obi-capacitor-03-on>
@@ -39849,7 +39920,7 @@ var ObcCapacitor = class ObcCapacitor extends ObcAbstractAutomationButtonSquared
               usecsscolor
               slot="icon-silhouette"
             ></obi-capacitor-03-off>`;
-			case "capacitor04": if (this.on) return b`<obi-capacitor-04-on
+			case "capacitor04": if (this.turnedOn) return b`<obi-capacitor-04-on
               usecsscolor
               slot="icon"
             ></obi-capacitor-04-on>
@@ -39865,7 +39936,7 @@ var ObcCapacitor = class ObcCapacitor extends ObcAbstractAutomationButtonSquared
               usecsscolor
               slot="icon-silhouette"
             ></obi-capacitor-04-off>`;
-			default: if (this.on) return b`<obi-capacitor-01-on
+			default: if (this.turnedOn) return b`<obi-capacitor-01-on
               usecsscolor
               slot="icon"
             ></obi-capacitor-01-on>
@@ -40263,7 +40334,7 @@ var ObcConverter = class ObcConverter extends ObcAbstractAutomationButtonSquared
 	}
 	get icon() {
 		switch (this.alternativeIcon) {
-			case "converterDcac": if (this.on) return b`<obi-converter-dcac-on
+			case "converterDcac": if (this.turnedOn) return b`<obi-converter-dcac-on
               usecsscolor
               slot="icon"
             ></obi-converter-dcac-on>
@@ -40279,7 +40350,7 @@ var ObcConverter = class ObcConverter extends ObcAbstractAutomationButtonSquared
               usecsscolor
               slot="icon-silhouette"
             ></obi-converter-dcac-off>`;
-			case "converterAcdc": if (this.on) return b`<obi-converter-acdc-on
+			case "converterAcdc": if (this.turnedOn) return b`<obi-converter-acdc-on
               usecsscolor
               slot="icon"
             ></obi-converter-acdc-on>
@@ -40295,7 +40366,7 @@ var ObcConverter = class ObcConverter extends ObcAbstractAutomationButtonSquared
               usecsscolor
               slot="icon-silhouette"
             ></obi-converter-acdc-off>`;
-			case "converterFilter1": if (this.on) return b`<obi-converter-filter-1-on
+			case "converterFilter1": if (this.turnedOn) return b`<obi-converter-filter-1-on
               usecsscolor
               slot="icon"
             ></obi-converter-filter-1-on>
@@ -40311,7 +40382,7 @@ var ObcConverter = class ObcConverter extends ObcAbstractAutomationButtonSquared
               usecsscolor
               slot="icon-silhouette"
             ></obi-converter-filter-1-off>`;
-			default: if (this.on) return b`<obi-converter-dcdc-on
+			default: if (this.turnedOn) return b`<obi-converter-dcdc-on
               usecsscolor
               slot="icon"
             ></obi-converter-dcdc-on>
@@ -40559,7 +40630,7 @@ ObiDamperHorizontalOff = __decorate([customElement("obi-damper-horizontal-off")]
 //#region src/automation/damper/damper.ts
 var ObcDamper = class ObcDamper extends ObcAbstractAutomationButtonSquared {
 	get icon() {
-		if (this.on) return b`<obi-damper-horizontal-on
+		if (this.turnedOn) return b`<obi-damper-horizontal-on
           usecsscolor
           slot="icon"
         ></obi-damper-horizontal-on>
@@ -41178,7 +41249,7 @@ var ObcDiodes = class ObcDiodes extends ObcAbstractAutomationButtonSquared {
 	}
 	get icon() {
 		switch (this.alternativeIcon) {
-			case "diodes02": if (this.on) return b`<obi-diodes-02-on
+			case "diodes02": if (this.turnedOn) return b`<obi-diodes-02-on
               usecsscolor
               slot="icon"
             ></obi-diodes-02-on>
@@ -41194,7 +41265,7 @@ var ObcDiodes = class ObcDiodes extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-diodes-02-off>`;
-			case "diodes03": if (this.on) return b`<obi-diodes-03-on
+			case "diodes03": if (this.turnedOn) return b`<obi-diodes-03-on
               usecsscolor
               slot="icon"
             ></obi-diodes-03-on>
@@ -41210,7 +41281,7 @@ var ObcDiodes = class ObcDiodes extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-diodes-03-off>`;
-			case "diodes04": if (this.on) return b`<obi-diodes-04-on
+			case "diodes04": if (this.turnedOn) return b`<obi-diodes-04-on
               usecsscolor
               slot="icon"
             ></obi-diodes-04-on>
@@ -41226,7 +41297,7 @@ var ObcDiodes = class ObcDiodes extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-diodes-04-off>`;
-			case "diodes05": if (this.on) return b`<obi-diodes-05-on
+			case "diodes05": if (this.turnedOn) return b`<obi-diodes-05-on
               usecsscolor
               slot="icon"
             ></obi-diodes-05-on>
@@ -41242,7 +41313,7 @@ var ObcDiodes = class ObcDiodes extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-diodes-05-off>`;
-			case "diodes06": if (this.on) return b`<obi-diodes-06-on
+			case "diodes06": if (this.turnedOn) return b`<obi-diodes-06-on
               usecsscolor
               slot="icon"
             ></obi-diodes-06-on>
@@ -41258,7 +41329,7 @@ var ObcDiodes = class ObcDiodes extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-diodes-06-off>`;
-			default: if (this.on) return b`<obi-diodes-01-on
+			default: if (this.turnedOn) return b`<obi-diodes-01-on
               usecsscolor
               slot="icon"
             ></obi-diodes-01-on>
@@ -41510,7 +41581,7 @@ ObiFanOff = __decorate([customElement("obi-fan-off")], ObiFanOff);
 //#region src/automation/fan/fan.ts
 var ObcFan = class ObcFan extends ObcAbstractAutomationButtonMotorized {
 	get icon() {
-		if (this.on) return b`<obi-fan-on usecsscolor slot="icon"></obi-fan-on>
+		if (this.turnedOn) return b`<obi-fan-on usecsscolor slot="icon"></obi-fan-on>
         <obi-fan-on usecsscolor slot="icon-silhouette"></obi-fan-on>`;
 		else return b`<obi-fan-off usecsscolor slot="icon"></obi-fan-off>
         <obi-fan-off usecsscolor slot="icon-silhouette"></obi-fan-off>`;
@@ -41870,7 +41941,7 @@ var ObcFilter = class ObcFilter extends ObcAbstractAutomationButtonSquared {
 	}
 	get icon() {
 		switch (this.alternativeIcon) {
-			case "filter2": if (this.on) return b`<obi-filter-2-on
+			case "filter2": if (this.turnedOn) return b`<obi-filter-2-on
               usecsscolor
               slot="icon"
             ></obi-filter-2-on>
@@ -41886,7 +41957,7 @@ var ObcFilter = class ObcFilter extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-filter-2-off>`;
-			case "filter3": if (this.on) return b`<obi-filter-3-on
+			case "filter3": if (this.turnedOn) return b`<obi-filter-3-on
               usecsscolor
               slot="icon"
             ></obi-filter-3-on>
@@ -41902,7 +41973,7 @@ var ObcFilter = class ObcFilter extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-filter-3-off>`;
-			case "filter4": if (this.on) return b`<obi-filter-4-on
+			case "filter4": if (this.turnedOn) return b`<obi-filter-4-on
               usecsscolor
               slot="icon"
             ></obi-filter-4-on>
@@ -41918,7 +41989,7 @@ var ObcFilter = class ObcFilter extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-filter-4-off>`;
-			default: if (this.on) return b`<obi-filter-1-on
+			default: if (this.turnedOn) return b`<obi-filter-1-on
               usecsscolor
               slot="icon"
             ></obi-filter-1-on>
@@ -55213,7 +55284,7 @@ var ObcGround = class ObcGround extends ObcAbstractAutomationButtonSquared {
 	}
 	get icon() {
 		switch (this.alternativeIcon) {
-			case "ground2": if (this.on) return b`<obi-ground-2-on
+			case "ground2": if (this.turnedOn) return b`<obi-ground-2-on
               usecsscolor
               slot="icon"
             ></obi-ground-2-on>
@@ -55229,7 +55300,7 @@ var ObcGround = class ObcGround extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-ground-2-off>`;
-			case "ground3": if (this.on) return b`<obi-ground-3-on
+			case "ground3": if (this.turnedOn) return b`<obi-ground-3-on
               usecsscolor
               slot="icon"
             ></obi-ground-3-on>
@@ -55245,7 +55316,7 @@ var ObcGround = class ObcGround extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-ground-3-off>`;
-			default: if (this.on) return b`<obi-ground-1-on
+			default: if (this.turnedOn) return b`<obi-ground-1-on
               usecsscolor
               slot="icon"
             ></obi-ground-1-on>
@@ -58619,7 +58690,7 @@ var ObcLogic = class ObcLogic extends ObcAbstractAutomationButtonSquared {
 	}
 	get icon() {
 		switch (this.alternativeIcon) {
-			case "logic02": if (this.on) return b`<obi-logic-02-on
+			case "logic02": if (this.turnedOn) return b`<obi-logic-02-on
               usecsscolor
               slot="icon"
             ></obi-logic-02-on>
@@ -58635,7 +58706,7 @@ var ObcLogic = class ObcLogic extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-logic-02-off>`;
-			case "logic03": if (this.on) return b`<obi-logic-03-on
+			case "logic03": if (this.turnedOn) return b`<obi-logic-03-on
               usecsscolor
               slot="icon"
             ></obi-logic-03-on>
@@ -58651,7 +58722,7 @@ var ObcLogic = class ObcLogic extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-logic-03-off>`;
-			case "logic04": if (this.on) return b`<obi-logic-04-on
+			case "logic04": if (this.turnedOn) return b`<obi-logic-04-on
               usecsscolor
               slot="icon"
             ></obi-logic-04-on>
@@ -58667,7 +58738,7 @@ var ObcLogic = class ObcLogic extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-logic-04-off>`;
-			case "logic05": if (this.on) return b`<obi-logic-05-on
+			case "logic05": if (this.turnedOn) return b`<obi-logic-05-on
               usecsscolor
               slot="icon"
             ></obi-logic-05-on>
@@ -58683,7 +58754,7 @@ var ObcLogic = class ObcLogic extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-logic-05-off>`;
-			case "logic06": if (this.on) return b`<obi-logic-06-on
+			case "logic06": if (this.turnedOn) return b`<obi-logic-06-on
               usecsscolor
               slot="icon"
             ></obi-logic-06-on>
@@ -58699,7 +58770,7 @@ var ObcLogic = class ObcLogic extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-logic-06-off>`;
-			default: if (this.on) return b`<obi-logic-01-on
+			default: if (this.turnedOn) return b`<obi-logic-01-on
               usecsscolor
               slot="icon"
             ></obi-logic-01-on>
@@ -59445,7 +59516,7 @@ var ObcMosfet = class ObcMosfet extends ObcAbstractAutomationButtonSquared {
 	}
 	get icon() {
 		switch (this.alternativeIcon) {
-			case "mosfetNtype2": if (this.on) return b`<obi-mosfet-ntype-2-on
+			case "mosfetNtype2": if (this.turnedOn) return b`<obi-mosfet-ntype-2-on
               usecsscolor
               slot="icon"
             ></obi-mosfet-ntype-2-on>
@@ -59461,7 +59532,7 @@ var ObcMosfet = class ObcMosfet extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-mosfet-ntype-2-off>`;
-			case "mosfetNtype3": if (this.on) return b`<obi-mosfet-ntype-3-on
+			case "mosfetNtype3": if (this.turnedOn) return b`<obi-mosfet-ntype-3-on
               usecsscolor
               slot="icon"
             ></obi-mosfet-ntype-3-on>
@@ -59477,7 +59548,7 @@ var ObcMosfet = class ObcMosfet extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-mosfet-ntype-3-off>`;
-			case "mosfetNtype4": if (this.on) return b`<obi-mosfet-ntype-4-on
+			case "mosfetNtype4": if (this.turnedOn) return b`<obi-mosfet-ntype-4-on
               usecsscolor
               slot="icon"
             ></obi-mosfet-ntype-4-on>
@@ -59493,7 +59564,7 @@ var ObcMosfet = class ObcMosfet extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-mosfet-ntype-4-off>`;
-			case "mosfetPtype1": if (this.on) return b`<obi-mosfet-ptype-1-on
+			case "mosfetPtype1": if (this.turnedOn) return b`<obi-mosfet-ptype-1-on
               usecsscolor
               slot="icon"
             ></obi-mosfet-ptype-1-on>
@@ -59509,7 +59580,7 @@ var ObcMosfet = class ObcMosfet extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-mosfet-ptype-1-off>`;
-			case "mosfetPtype2": if (this.on) return b`<obi-mosfet-ptype-2-on
+			case "mosfetPtype2": if (this.turnedOn) return b`<obi-mosfet-ptype-2-on
               usecsscolor
               slot="icon"
             ></obi-mosfet-ptype-2-on>
@@ -59525,7 +59596,7 @@ var ObcMosfet = class ObcMosfet extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-mosfet-ptype-2-off>`;
-			case "mosfetPtype3": if (this.on) return b`<obi-mosfet-ptype-3-on
+			case "mosfetPtype3": if (this.turnedOn) return b`<obi-mosfet-ptype-3-on
               usecsscolor
               slot="icon"
             ></obi-mosfet-ptype-3-on>
@@ -59541,7 +59612,7 @@ var ObcMosfet = class ObcMosfet extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-mosfet-ptype-3-off>`;
-			case "mosfetPtype4": if (this.on) return b`<obi-mosfet-ptype-4-on
+			case "mosfetPtype4": if (this.turnedOn) return b`<obi-mosfet-ptype-4-on
               usecsscolor
               slot="icon"
             ></obi-mosfet-ptype-4-on>
@@ -59557,7 +59628,7 @@ var ObcMosfet = class ObcMosfet extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-mosfet-ptype-4-off>`;
-			default: if (this.on) return b`<obi-mosfet-ntype-1-on
+			default: if (this.turnedOn) return b`<obi-mosfet-ntype-1-on
               usecsscolor
               slot="icon"
             ></obi-mosfet-ntype-1-on>
@@ -59759,7 +59830,7 @@ var ObcMotor = class ObcMotor extends ObcAbstractAutomationButtonMotorized {
 	}
 	get icon() {
 		if (this.vertical) {
-			if (this.on) return b`<obi-motor-on-vertical
+			if (this.turnedOn) return b`<obi-motor-on-vertical
             usecsscolor
             slot="icon"
           ></obi-motor-on-vertical>
@@ -59775,7 +59846,7 @@ var ObcMotor = class ObcMotor extends ObcAbstractAutomationButtonMotorized {
             usecsscolor
             slot="icon-silhouette"
           ></obi-motor-off-vertical>`;
-		} else if (this.on) return b`<obi-motor-on-horizontal
+		} else if (this.turnedOn) return b`<obi-motor-on-horizontal
             usecsscolor
             slot="icon"
           ></obi-motor-on-horizontal>
@@ -59940,7 +60011,7 @@ var ObcPump = class ObcPump extends ObcAbstractAutomationButtonMotorized {
 	}
 	get icon() {
 		if (this.vertical) {
-			if (this.on) return b`<obi-pump-on-vertical
+			if (this.turnedOn) return b`<obi-pump-on-vertical
             usecsscolor
             slot="icon"
           ></obi-pump-on-vertical>
@@ -59956,7 +60027,7 @@ var ObcPump = class ObcPump extends ObcAbstractAutomationButtonMotorized {
             usecsscolor
             slot="icon-silhouette"
           ></obi-pump-off-vertical>`;
-		} else if (this.on) return b`<obi-pump-on-horizontal
+		} else if (this.turnedOn) return b`<obi-pump-on-horizontal
             usecsscolor
             slot="icon"
           ></obi-pump-on-horizontal>
@@ -60373,7 +60444,7 @@ var ObcResistor = class ObcResistor extends ObcAbstractAutomationButtonSquared {
 	}
 	get icon() {
 		switch (this.alternativeIcon) {
-			case "resistor2": if (this.on) return b`<obi-resistor-2-on
+			case "resistor2": if (this.turnedOn) return b`<obi-resistor-2-on
               usecsscolor
               slot="icon"
             ></obi-resistor-2-on>
@@ -60389,7 +60460,7 @@ var ObcResistor = class ObcResistor extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-resistor-2-off>`;
-			case "resistor3": if (this.on) return b`<obi-resistor-3-on
+			case "resistor3": if (this.turnedOn) return b`<obi-resistor-3-on
               usecsscolor
               slot="icon"
             ></obi-resistor-3-on>
@@ -60405,7 +60476,7 @@ var ObcResistor = class ObcResistor extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-resistor-3-off>`;
-			case "resistor4": if (this.on) return b`<obi-resistor-4-on
+			case "resistor4": if (this.turnedOn) return b`<obi-resistor-4-on
               usecsscolor
               slot="icon"
             ></obi-resistor-4-on>
@@ -60421,7 +60492,7 @@ var ObcResistor = class ObcResistor extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-resistor-4-off>`;
-			case "resistor5": if (this.on) return b`<obi-resistor-5-on
+			case "resistor5": if (this.turnedOn) return b`<obi-resistor-5-on
               usecsscolor
               slot="icon"
             ></obi-resistor-5-on>
@@ -60437,7 +60508,7 @@ var ObcResistor = class ObcResistor extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-resistor-5-off>`;
-			default: if (this.on) return b`<obi-resistor-1-on
+			default: if (this.turnedOn) return b`<obi-resistor-1-on
               usecsscolor
               slot="icon"
             ></obi-resistor-1-on>
@@ -60651,7 +60722,7 @@ var ObcRouter = class ObcRouter extends ObcAbstractAutomationButtonSquared {
 	}
 	get icon() {
 		switch (this.alternativeIcon) {
-			case "router2": if (this.on) return b`<obi-router-2-on
+			case "router2": if (this.turnedOn) return b`<obi-router-2-on
               usecsscolor
               slot="icon"
             ></obi-router-2-on>
@@ -60667,7 +60738,7 @@ var ObcRouter = class ObcRouter extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-router-2-off>`;
-			default: if (this.on) return b`<obi-router-on usecsscolor slot="icon"></obi-router-on>
+			default: if (this.turnedOn) return b`<obi-router-on usecsscolor slot="icon"></obi-router-on>
             <obi-router-on usecsscolor slot="icon-silhouette"></obi-router-on>`;
 			else return b`<obi-router-off usecsscolor slot="icon"></obi-router-off>
             <obi-router-off
@@ -61148,7 +61219,7 @@ var ObcSource = class ObcSource extends ObcAbstractAutomationButtonSquared {
 	}
 	get icon() {
 		switch (this.alternativeIcon) {
-			case "sources02": if (this.on) return b`<obi-sources-02-on
+			case "sources02": if (this.turnedOn) return b`<obi-sources-02-on
               usecsscolor
               slot="icon"
             ></obi-sources-02-on>
@@ -61164,7 +61235,7 @@ var ObcSource = class ObcSource extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-sources-02-off>`;
-			case "sources03": if (this.on) return b`<obi-sources-03-on
+			case "sources03": if (this.turnedOn) return b`<obi-sources-03-on
               usecsscolor
               slot="icon"
             ></obi-sources-03-on>
@@ -61180,7 +61251,7 @@ var ObcSource = class ObcSource extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-sources-03-off>`;
-			case "sources04": if (this.on) return b`<obi-sources-04-on
+			case "sources04": if (this.turnedOn) return b`<obi-sources-04-on
               usecsscolor
               slot="icon"
             ></obi-sources-04-on>
@@ -61196,7 +61267,7 @@ var ObcSource = class ObcSource extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-sources-04-off>`;
-			case "sources05": if (this.on) return b`<obi-sources-05-on
+			case "sources05": if (this.turnedOn) return b`<obi-sources-05-on
               usecsscolor
               slot="icon"
             ></obi-sources-05-on>
@@ -61212,7 +61283,7 @@ var ObcSource = class ObcSource extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-sources-05-off>`;
-			default: if (this.on) return b`<obi-sources-01-on
+			default: if (this.turnedOn) return b`<obi-sources-01-on
               usecsscolor
               slot="icon"
             ></obi-sources-01-on>
@@ -61835,7 +61906,7 @@ var ObcSwitch = class ObcSwitch extends ObcAbstractAutomationButtonSquared {
 	}
 	get icon() {
 		switch (this.alternativeIcon) {
-			case "s1": if (this.on) return b`<obi-switch-01-on
+			case "s1": if (this.turnedOn) return b`<obi-switch-01-on
               usecsscolor
               slot="icon"
             ></obi-switch-01-on>
@@ -61851,7 +61922,7 @@ var ObcSwitch = class ObcSwitch extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-switch-01-off>`;
-			case "s2": if (this.on) return b`<obi-switch-02-on
+			case "s2": if (this.turnedOn) return b`<obi-switch-02-on
               usecsscolor
               slot="icon"
             ></obi-switch-02-on>
@@ -61867,7 +61938,7 @@ var ObcSwitch = class ObcSwitch extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-switch-02-off>`;
-			case "s3": if (this.on) return b`<obi-switch-03-on
+			case "s3": if (this.turnedOn) return b`<obi-switch-03-on
               usecsscolor
               slot="icon"
             ></obi-switch-03-on>
@@ -61883,7 +61954,7 @@ var ObcSwitch = class ObcSwitch extends ObcAbstractAutomationButtonSquared {
               usecsscolor
               slot="icon-silhouette"
             ></obi-switch-03-off>`;
-			default: if (this.on) return b`<obi-switch-horizontal-on
+			default: if (this.turnedOn) return b`<obi-switch-horizontal-on
               usecsscolor
               slot="icon"
             ></obi-switch-horizontal-on>
@@ -62196,7 +62267,7 @@ var ObcTransformer = class ObcTransformer extends ObcAbstractAutomationButtonSqu
 	}
 	get icon() {
 		switch (this.alternativeIcon) {
-			case "transformer02": if (this.on) return b`<obi-transformer-02-on
+			case "transformer02": if (this.turnedOn) return b`<obi-transformer-02-on
               usecsscolor
               slot="icon"
             ></obi-transformer-02-on>
@@ -62212,7 +62283,7 @@ var ObcTransformer = class ObcTransformer extends ObcAbstractAutomationButtonSqu
               usecsscolor
               slot="icon-silhouette"
             ></obi-transformer-02-off>`;
-			default: if (this.on) return b`<obi-transformer-01-on
+			default: if (this.turnedOn) return b`<obi-transformer-01-on
               usecsscolor
               slot="icon"
             ></obi-transformer-01-on>
@@ -70631,6 +70702,9 @@ var accordion_card_default = i$7`* {
 
 :host {
   display: block;
+
+  /* TODO(designer): confirm the expand duration and curve. */
+  --_expand-duration: var(--obc-accordion-expand-duration, 200ms);
 }
 
 .wrapper {
@@ -70647,6 +70721,12 @@ var accordion_card_default = i$7`* {
     align-items: center;
     align-self: stretch;
     height: fit-content;
+    border-radius: var(--ui-components-accordion-border-radius);
+    /* The card surface is what the closing panel slides over; snapping it away
+       would drop the content onto the page background mid-slide. */
+    transition:
+      background-color var(--_expand-duration) ease,
+      box-shadow var(--_expand-duration) ease;
   }
 
 :is(.wrapper .content-button) {
@@ -70734,6 +70814,11 @@ var accordion_card_default = i$7`* {
     padding: 0;
     border: 0;
     overflow: hidden;
+    /* The bottom corners square on open; without this they round again while
+       the panel is still sliding away. */
+    transition:
+      border-radius var(--_expand-duration) ease,
+      box-shadow var(--_expand-duration) ease;
   }
 
 .wrapper .header-container {
@@ -70806,32 +70891,51 @@ var accordion_card_default = i$7`* {
     flex-shrink: 0;
   }
 
-.wrapper.state-expanded .container-content-additional {
-      color: var(--element-neutral-color);
-      font-family: var(--global-typography-font-family);
-      font-weight: var(--global-typography-ui-body-font-weight);
-      font-size: var(--global-typography-ui-body-font-size);
-      line-height: var(--global-typography-ui-body-line-height);
-      font-feature-settings:
+.wrapper .trailing-icon {
+    transition: transform var(--_expand-duration) ease;
+  }
+
+.wrapper.state-expanded .trailing-icon {
+    transform: rotate(-180deg);
+  }
+
+.wrapper .panel {
+    display: grid;
+    /* 0fr to 1fr is the only track that eases to content height in every engine. */
+    grid-template-rows: 0fr;
+    align-self: stretch;
+    transition: grid-template-rows var(--_expand-duration) ease;
+  }
+
+.wrapper .panel-inner {
+    /* The grid item cannot carry the inset: padding holds the track open at
+       16px when closed. It clips here, the padding sits one level down. */
+    min-height: 0;
+    overflow: hidden;
+  }
+
+.wrapper .container-content-additional {
+    color: var(--element-neutral-color);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-body-font-weight);
+    font-size: var(--global-typography-ui-body-font-size);
+    line-height: var(--global-typography-ui-body-line-height);
+    font-feature-settings:
     "liga" off,
     "clig" off,
     "ss04" on;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      flex: 1 0 0;
-      align-self: stretch;
-      height: 100%;
-      padding: 0 16px 16px 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 16px 16px 16px;
+  }
+
+.wrapper.state-expanded .panel {
+      grid-template-rows: 1fr;
     }
 
 .wrapper.state-expanded .card-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
       flex: 1 0 0;
-      align-self: stretch;
-      border-radius: var(--ui-components-accordion-border-radius);
       background: var(--container-background-color);
       box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
     }
@@ -70937,6 +71041,15 @@ var accordion_card_default = i$7`* {
 .alert.alert-level-diagnostic {
     z-index: 1;
   }
+
+@media (prefers-reduced-motion: reduce) {
+  .wrapper .panel,
+  .wrapper .card-container,
+  .wrapper .content-button,
+  .wrapper .trailing-icon {
+    transition: none;
+  }
+}
 `;
 //#endregion
 //#region src/components/accordion-card/accordion-card.ts
@@ -70973,6 +71086,20 @@ var ObcAccordionCard = class ObcAccordionCard extends i$4 {
 			cardTitle: this.cardTitle
 		} }));
 	}
+	/**
+	* Keeps the keyboard somewhere predictable when the panel closes.
+	*
+	* A collapsed panel is `inert`, and the browser drops focus out of anything
+	* it makes inert — onto `<body>`, two frames later. Clicking the header
+	* already leaves focus there; a consumer setting `expanded` while a slotted
+	* control has focus is the case that needs the transfer.
+	*/
+	willUpdate(changed) {
+		if (!changed.has("expanded") || this.expanded) return;
+		const panel = this.shadowRoot?.querySelector(".panel");
+		if (!panel) return;
+		releaseFocusBefore(panel, this.shadowRoot?.querySelector(".content-button"), this.shadowRoot?.querySelector(".wrapper"));
+	}
 	renderContentMain() {
 		return b`
       <div class="header-container">
@@ -70994,17 +71121,20 @@ var ObcAccordionCard = class ObcAccordionCard extends i$4 {
                   </div>
                 ` : ""}
           <div class="trailing-icon">
-            ${this.expanded ? b`<obi-chevron-up-google></obi-chevron-up-google>` : b`<obi-chevron-down-google></obi-chevron-down-google>`}
+            <obi-chevron-down-google></obi-chevron-down-google>
           </div>
         </div>
       </div>
     `;
 	}
 	renderContentAdditional() {
-		if (!this.expanded) return "";
 		return b`
-      <div class="container-content-additional">
-        <slot name="expanded-content"></slot>
+      <div class="panel" id="accordion-content" ?inert=${!this.expanded}>
+        <div class="panel-inner">
+          <div class="container-content-additional">
+            <slot name="expanded-content"></slot>
+          </div>
+        </div>
       </div>
     `;
 	}
@@ -71017,6 +71147,7 @@ var ObcAccordionCard = class ObcAccordionCard extends i$4 {
 	render() {
 		return b`
       <div
+        tabindex="-1"
         class=${e$2({
 			wrapper: true,
 			"state-expanded": this.expanded,
@@ -71092,6 +71223,11 @@ var accordion_item_default = i$7`* {
   box-sizing: border-box;
 }
 
+:host {
+  /* TODO(designer): confirm the expand duration and curve. */
+  --_expand-duration: var(--obc-accordion-expand-duration, 200ms);
+}
+
 .wrapper {
   display: flex;
   flex-direction: column;
@@ -71179,6 +71315,9 @@ var accordion_item_default = i$7`* {
   cursor: pointer;
   overflow: hidden;
   position: relative;
+  /* The bottom corners square on open; without this they round again while
+     the panel is still sliding away. */
+  transition: border-radius var(--_expand-duration) ease;
 }
 
 .content {
@@ -71248,7 +71387,7 @@ var accordion_item_default = i$7`* {
   height: var(--menu-navigation-components-navigation-item-icon-size);
   flex-shrink: 0;
   position: relative;
-  transition: transform 0.2s ease;
+  transition: transform var(--_expand-duration) ease;
 }
 
 .divider {
@@ -71265,19 +71404,29 @@ var accordion_item_default = i$7`* {
   transform: rotate(-180deg);
 }
 
-.content-container {
-  display: flex;
-  flex-direction: column;
+.panel {
+  display: grid;
+  /* 0fr to 1fr is the only track that eases to content height in every engine. */
+  grid-template-rows: 0fr;
   width: 100%;
-  flex-shrink: 0;
+  transition: grid-template-rows var(--_expand-duration) ease;
 }
 
-.wrapper.open-true .content-button {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+.wrapper.open-true .panel {
+  grid-template-rows: 1fr;
+}
+
+.panel-inner {
+  /* The grid item cannot carry the frame: its border is left out of the open
+     track and clipped off. It clips here, the frame sits one level down. */
+  min-height: 0;
+  overflow: hidden;
 }
 
-.wrapper.open-true .content-container {
+.content-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
   background: var(--container-background-color);
   border: 1px solid var(--flat-enabled-border-color);
   border-top: none;
@@ -71285,6 +71434,11 @@ var accordion_item_default = i$7`* {
   border-bottom-right-radius: var(--ui-components-accordion-item-border-radius);
 }
 
+.wrapper.open-true .content-button {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .wrapper.state-disabled .content-button {
   cursor: not-allowed;
 }
@@ -71293,6 +71447,14 @@ var accordion_item_default = i$7`* {
 .wrapper.state-disabled .trailing-icon {
   color: var(--element-disabled-color);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .panel,
+  .content-button,
+  .trailing-icon {
+    transition: none;
+  }
+}
 `;
 //#endregion
 //#region src/components/accordion-item/accordion-item.ts
@@ -71312,6 +71474,20 @@ var ObcAccordionItem = class ObcAccordionItem extends i$4 {
 			title: this.title
 		} }));
 	}
+	/**
+	* Keeps the keyboard somewhere predictable when the panel closes.
+	*
+	* A collapsed panel is `inert`, and the browser drops focus out of anything
+	* it makes inert — onto `<body>`, two frames later. Clicking the header
+	* already leaves focus there; a consumer setting `open` while a slotted
+	* control has focus is the case that needs the transfer.
+	*/
+	willUpdate(changed) {
+		if (!changed.has("open") || this.open) return;
+		const panel = this.shadowRoot?.querySelector(".panel");
+		if (!panel) return;
+		releaseFocusBefore(panel, this.shadowRoot?.querySelector(".content-button"), this.shadowRoot?.querySelector(".wrapper"));
+	}
 	renderContent() {
 		return b`
       <div class="content">
@@ -71327,10 +71503,13 @@ var ObcAccordionItem = class ObcAccordionItem extends i$4 {
     `;
 	}
 	renderExpandedContent() {
-		if (!this.open) return "";
 		return b`
-      <div class="content-container">
-        <slot name="expanded-content"></slot>
+      <div class="panel" id="accordion-content" ?inert=${!this.open}>
+        <div class="panel-inner">
+          <div class="content-container">
+            <slot name="expanded-content"></slot>
+          </div>
+        </div>
       </div>
     `;
 	}
@@ -71341,6 +71520,7 @@ var ObcAccordionItem = class ObcAccordionItem extends i$4 {
 	render() {
 		return b`
       <div
+        tabindex="-1"
         class=${e$2({
 			wrapper: true,
 			"state-disabled": this.disabled,
@@ -71353,6 +71533,7 @@ var ObcAccordionItem = class ObcAccordionItem extends i$4 {
           @click=${this.handleToggle}
           ?disabled=${this.disabled}
           aria-expanded=${this.open}
+          aria-controls="accordion-content"
         >
           ${this.renderContent()}
         </button>