From fc87d9385697cf04c3fe4376870aaafbb9ed5603 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 21 Jun 2026 18:21:34 +0000
Subject: [PATCH 1/4] fix(automation-button): forward alert frame slots through
 abstract button

The abstract automation button rendered the underlying obc-automation-button
but only forwarded the badge slots. Slotted alert-frame content (icon, label,
timer) placed on a device such as obc-analog-valve never reached the alert
frame, so it could not be shown.

Forward the slots all the way down, remapping the public alert-frame-icon /
alert-frame-label / alert-frame-timer slots onto the automation button's
alert-icon / alert-label / alert-timer slots (which in turn feed the alert
frame's icon / label / timer slots). Document these slots on
ObcAbstractAutomationButton rather than on each device component.

Add an analog valve story that shows a bottom-flip alert frame with a custom
icon, an alert label and a clock, and add its visual baseline.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XWMYJ6JF3jpspmmoQMNt6m
---
 ...t-frame-with-icon-label-and-clock-auto.png | Bin 0 -> 9035 bytes
 .../analog-valve/analog-valve.stories.ts      |  37 ++++++++++++++++++
 .../abstract-automation-button.ts             |  34 ++++++++++++++++
 3 files changed, 71 insertions(+)
 create mode 100644 packages/openbridge-webcomponents/__vis__/linux/__baselines__/automation/analog-valve/analog-valve.stories.ts/alert-frame-with-icon-label-and-clock-auto.png

diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/automation/analog-valve/analog-valve.stories.ts/alert-frame-with-icon-label-and-clock-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/automation/analog-valve/analog-valve.stories.ts/alert-frame-with-icon-label-and-clock-auto.png
new file mode 100644
index 0000000000000000000000000000000000000000..12d3318f34b067d24819c8a50acf1978658a8ff2
GIT binary patch
literal 9035
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
Dsf$2+

literal 0
HcmV?d00001

diff --git a/packages/openbridge-webcomponents/src/automation/analog-valve/analog-valve.stories.ts b/packages/openbridge-webcomponents/src/automation/analog-valve/analog-valve.stories.ts
index d05d509c3..b1aa4be0d 100644
--- a/packages/openbridge-webcomponents/src/automation/analog-valve/analog-valve.stories.ts
+++ b/packages/openbridge-webcomponents/src/automation/analog-valve/analog-valve.stories.ts
@@ -1,10 +1,13 @@
 import type {Meta, StoryObj} from '@storybook/web-vite';
+import {html} from 'lit';
 import {ObcAnalogValve} from './analog-valve.js';
 import {AutomationButtonReadoutPosition} from '../automation-button/automation-button.js';
 import {AutomationButtonReadoutStackSize} from '../../components/automation-button-readout-stack/automation-button-readout-stack.js';
 import './analog-valve.js';
 import {crossDecorator} from '../../storybook-util.js';
 import '../automation-badge/automation-badge.js';
+import '../../icons/icon-placeholder.js';
+import '../../icons/icon-timer-google.js';
 import {argTypesAbstractAutomationButtonPassiveRound} from '../automation-button/abstract-automation-button-storybook-helpers.js';
 import {
   AutomationButtonBadgeAlert,
@@ -12,6 +15,7 @@ import {
   AutomationButtonBadgeControl,
   AutomationButtonBadgeInterlock,
 } from '../automation-button/abstract-automation-button.js';
+import {ObcAlertFrameType} from '../../components/alert-frame/alert-frame.js';
 
 const meta: Meta<typeof ObcAnalogValve> = {
   title: 'Automation/Automation Devices/Analog Valve',
@@ -60,3 +64,36 @@ export const WithBadges: Story = {
     badgeCommandLocked: AutomationButtonBadgeCommandLocked.CommandLocked,
   },
 };
+
+/**
+ * The analog valve forwards the `alert-frame-icon`, `alert-frame-label` and
+ * `alert-frame-timer` slots down to the alert frame. With the `bottom-flip`
+ * frame type the flap shows a custom icon together with a label and a clock.
+ * See `ObcAbstractAutomationButton` for the documentation of these slots.
+ */
+export const AlertFrameWithIconLabelAndClock: Story = {
+  args: {
+    open: true,
+    value: 20,
+    alert: true,
+    alertFrameType: ObcAlertFrameType.BottomFlip,
+    showAlertIcon: true,
+  },
+  render: (args) => html`
+    <obc-analog-valve
+      .open=${args.open}
+      .value=${args.value}
+      .tag=${args.tag}
+      .readoutPosition=${args.readoutPosition}
+      .readoutSize=${args.readoutSize}
+      .showReadoutStack=${args.showReadoutStack}
+      ?alert=${args.alert}
+      .alertFrameType=${args.alertFrameType}
+      .showAlertIcon=${args.showAlertIcon}
+    >
+      <obi-placeholder slot="alert-frame-icon"></obi-placeholder>
+      <span slot="alert-frame-label">Alert</span>
+      <obi-timer-google slot="alert-frame-timer"></obi-timer-google>
+    </obc-analog-valve>
+  `,
+};
diff --git a/packages/openbridge-webcomponents/src/automation/automation-button/abstract-automation-button.ts b/packages/openbridge-webcomponents/src/automation/automation-button/abstract-automation-button.ts
index 61f41bf99..b13f6efa0 100644
--- a/packages/openbridge-webcomponents/src/automation/automation-button/abstract-automation-button.ts
+++ b/packages/openbridge-webcomponents/src/automation/automation-button/abstract-automation-button.ts
@@ -56,6 +56,37 @@ export enum AutomationButtonBadgeCommandLocked {
   CommandLocked = 'command-locked',
 }
 
+/**
+ * Abstract base class for automation device buttons (e.g. valves, pumps,
+ * tanks). Subclasses provide the device symbol through the `icon` getter and
+ * its on/off state through `_on`, while this class renders the underlying
+ * `<obc-automation-button>` and forwards the shared slots and properties.
+ *
+ * ### Alert frame slots
+ *
+ * When `alert` is enabled the button is wrapped in an `<obc-alert-frame>`. The
+ * alert frame can show a custom icon, label and timer, depending on the
+ * selected `alertFrameType`. These are exposed as slots that are forwarded all
+ * the way down to the alert frame:
+ *
+ * | Slot Name          | Renders When...                                              | Purpose                                                                 |
+ * |--------------------|--------------------------------------------------------------|-------------------------------------------------------------------------|
+ * | alert-frame-icon   | `alert` and `showAlertIcon` and `alertFrameType` in [`large-side-flip`, `bottom-flip`, `top-flip`] | Custom icon shown in the alert frame flap, in addition to the alert category icon. |
+ * | alert-frame-label  | `alert` and `alertFrameType` in [`bottom-flip`, `top-flip`]  | Label text shown in the alert frame flap.                               |
+ * | alert-frame-timer  | `alert` and `alertFrameType` in [`bottom-flip`, `top-flip`]  | Timer / clock shown in the alert frame flap.                            |
+ *
+ * The slot content is remapped on its way down: `alert-frame-icon` ->
+ * `alert-icon` (`obc-automation-button`) -> `icon` (`obc-alert-frame`), and
+ * likewise for the label and timer slots.
+ *
+ * @slot alert-frame-icon - Custom icon shown in the alert frame flap (requires `showAlertIcon` and a flap variant that supports an icon).
+ * @slot alert-frame-label - Label text shown in the alert frame flap (`bottom-flip`/`top-flip`).
+ * @slot alert-frame-timer - Timer / clock shown in the alert frame flap (`bottom-flip`/`top-flip`).
+ * @slot badge-top-right - Custom badge in the top-right corner (overrides `badgeAlert`).
+ * @slot badge-top-left - Custom badge in the top-left corner (overrides `badgeControl`).
+ * @slot badge-bottom-left - Custom badge in the bottom-left corner (overrides `badgeInterlock`).
+ * @slot badge-bottom-right - Custom badge in the bottom-right corner (overrides `badgeCommandLocked`).
+ */
 export class ObcAbstractAutomationButton extends LitElement {
   @property({type: Boolean, attribute: false}) showReadoutStack: boolean = true;
   /** @availableWhen showReadoutStack==true */
@@ -262,6 +293,9 @@ export class ObcAbstractAutomationButton extends LitElement {
       .positioning=${this.positioning}
     >
       ${this.icon}
+      <slot name="alert-frame-icon" slot="alert-icon"></slot>
+      <slot name="alert-frame-label" slot="alert-label"></slot>
+      <slot name="alert-frame-timer" slot="alert-timer"></slot>
       <slot
         name="badge-top-right"
         slot="badge-top-right"

From 91628dd67dcc3f71d2430e9501d796501ec7e633 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 21 Jun 2026 19:11:31 +0000
Subject: [PATCH 2/4] docs(automation): use fitting alert-frame icons for valve
 and tank stories

Switch the analog valve alert story to a large-side-flip frame with a
pressure icon, which suits a valve alarm and fits the valve's small symbol
(the side flap has room for an icon but not a label/clock).

Add an equivalent tank story using a bottom-flip frame, which the larger tank
has room for: it shows a tank icon, a label and a clock via the tank's
alert-icon / alert-label / alert-timer slots.

Update the visual baselines accordingly.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XWMYJ6JF3jpspmmoQMNt6m
---
 .../alert-frame-with-icon-auto.png            | Bin 0 -> 8488 bytes
 ...t-frame-with-icon-label-and-clock-auto.png | Bin 9035 -> 0 bytes
 .../with-alert-bottom-flip-auto.png           | Bin 0 -> 11306 bytes
 .../analog-valve/analog-valve.stories.ts      |  21 ++++----
 .../automation-tank.stories.ts                |  51 ++++++++++++++++++
 5 files changed, 61 insertions(+), 11 deletions(-)
 create mode 100644 packages/openbridge-webcomponents/__vis__/linux/__baselines__/automation/analog-valve/analog-valve.stories.ts/alert-frame-with-icon-auto.png
 delete mode 100644 packages/openbridge-webcomponents/__vis__/linux/__baselines__/automation/analog-valve/analog-valve.stories.ts/alert-frame-with-icon-label-and-clock-auto.png
 create mode 100644 packages/openbridge-webcomponents/__vis__/linux/__baselines__/automation/automation-tank/automation-tank.stories.ts/with-alert-bottom-flip-auto.png

diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/automation/analog-valve/analog-valve.stories.ts/alert-frame-with-icon-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/automation/analog-valve/analog-valve.stories.ts/alert-frame-with-icon-auto.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb212f9e1d1f9f9f233bad339a9df7d3232c989e
GIT binary patch
literal 8488
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

literal 0
HcmV?d00001

diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/automation/analog-valve/analog-valve.stories.ts/alert-frame-with-icon-label-and-clock-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/automation/analog-valve/analog-valve.stories.ts/alert-frame-with-icon-label-and-clock-auto.png
deleted file mode 100644
index 12d3318f34b067d24819c8a50acf1978658a8ff2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 9035
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
Dsf$2+

diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/automation/automation-tank/automation-tank.stories.ts/with-alert-bottom-flip-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/automation/automation-tank/automation-tank.stories.ts/with-alert-bottom-flip-auto.png
new file mode 100644
index 0000000000000000000000000000000000000000..553bce9ba663e506a04043fb2996a17442ac02ee
GIT binary patch
literal 11306
zcmeHtX;f3$w(bTLN)f5j0;R7iR7Bdcp)o=%tr7tNOTZ`)615OR-*+Jd<fx}aKt&p9
zLLr?H8tD>92tg@8h=76+X_9~lAwUvH=#mg}H}}5#<Bjp&xZ}QY-grNr`$w8F_S$=`
zx#s-l{Jy#VyzFeJvRiXE001iX7k|A106W2-^6$Tq2fxnhImiLPw}AbxzqrNZFEUi)
z3nDRd%Lb@^)YBp8uE&YHZsPZqhmMiHV|#c(N`utP-_ezcM)c9_hOL4O{K&$$-`=y%
zNkdy+uE_Jr=vOHZu{@3W&0ujSg-39%Ja|tXb^p-E9d{h8i);)6c^PLyE)JEHIJw?s
ztxGzc3)$<N{XO<!S0&a|cE0P0GiUMvbIC-4gzH;~iINA}L$73P&k>M62mp!S?l1@c
z{P+zL{5<z<JNWsJ9}>aIfAb5V050J!pa=jz?2y|74*2HlfUj2i>Kb3;;VWu<h03q_
z;s1lAc=^<J@sNLZhA(@y*-^MBQf55$Paajab)w%&|3=uU6kHy9G$p(?=DIv!zEl37
zRp>)HCU&woTa`bW*S_r96q3;4YihVT<+&e7)Zf?M{-=3sFzY;3IwB=vh_m-nW^2*>
z2_KzPW++Fi7vsTH>0-lxbI!zNx{bs#m?2>oYLSR&-a}Y{AT`y!sc9F`eyDPP;&UQf
zztCYJnkiu>%)?oRtwQ-#TIlaXTQA;>DPPca<8Sdf3IPKo8u-?pT}WgXSGLZ#jq1DK
zQfot=%7r$a?GDYheW?k>`fwMno>_w-#$*MMeL$l9H`_N$7Y_{5GJ>0rBx!^X-p3Eo
zx^1H|-~xB)CGU9GTtw#gNqcFPE`binE;lIq;{*+HrA@-z0U-CuAIu3o4~ZJ7jdc_l
zhlYGiQc$}8;6Vd7;?_hEp@8xya^`Z>^R#!*Pn5eI^RY7$;wvkU!8Fj<U0q#GvyI4V
zoS?Y5eh6P1lEb_h_k4iefd7M>Nt>UaUsU!P&+OsYT(YcxvUr^GAQSI4>zmB+AwZl3
z0gpWgZ8wMrCjdC|V`9?&qGQ>P&VLzSH>&?jM^m%+ig|T+z#+)9sM+asC@!@m8?`u0
zr<d={yNAe1;ao7yrlnma{hasM+s4}XNW+u5`eKd_UK{h-K=`GrnY)Wx(Lo#{KP!!l
zn$Bd_T<rQarnKFt1&5)HM#Xg>gFbiQma`()I(l|nQ>yTIN9@zlpc#XVM_J+G;<p#-
zxdGE}Ss$0(GY1R+AY*@fd&7m?8|Pgd^i8UpjQxi^#;I6r)JYxt6r(<R)!&1A@*vSc
zr;D!mk6z639StfSs^7J1f5ksSN8WMLPaA!S(AU5?|0szp87!P?!$^(|*p@iHA02>7
zelM5in*^2XqpW?WHK6eTvTPS}@_F_>e{~q@pJk3|*IBm>z<N8+`C_!czyDCGan@j!
zgKwD@>ete7Wp(41Rc9S4o`<|MI0wV!yfrl%@G7BB+^oB1$X+34-3}LzU$PuTM2Km9
zsl8DR|LDh+yv>@B1JaVP7l47Bwzf7qJ<LgNVK4s5&;^g?kQ<ukP{I;@A$wq8-%-zF
z?`D@4pWY5n@bf(a6Ih|!^vUsyb=`wX9XK2GVE5UmpP~tsXM&lnt}ZsG<Nzy8`GYaH
z7eCb%*VOP@1~9ydmhk-tF>0ZHZ#;rfC=D_hE87AuG@r75&n*51=$1bH`*z^u)+fSU
zTwRAa<%Kl~){2~tBbcT9h(Y^tVz3JUlwAT83_L2_9AF|%P0f8d_fIAcsZB?mvXTRG
zG|SH_7>vDte>pHPP=4qt43>>)R0G=GKt_P8cK-5Uj{-mic9@5}P)q5A7autjw>0^S
z-pyzBbPLLIq##1|&)nQxu~-bc|8Bn^s&s7!@`#D^)05HIl`kv{&<N1gkFMR6S~Klr
zCX<Q7;mG_p$heIUy+&mJ8B0%m9<?^=YtY`{nkrLLygjC1A2x<6r)>040|)QePg<dZ
zg1qbhuqRL?G?~|msw;pDb58m%C`o(Om5Es2=%VV<W(u_k^8pECn-o9<jxZ|fH_uzP
zHXidW!ngVlK)WOwxETNq-8^m{apn6I24@DRlNZ!%LJjNl%>LdoaAE@HFdZWqdbDU8
z0Ma_pBuK(1igZNFg4ycRo#mvTEvw^rj#p+Iqx^${5cMyctNnj4Tn%L5po4E!d0J4g
zSjPR7m^AvLE^uZ(?Kf_)M>zAkiQ@ov{NcS8(m7L|fdiU?&ZL_aXFehNbx>cPFvwj_
z7Xjd}H~xu9*IzVCNAfHpnWICOTSJj(M0g-KU!mvD>#W|HE2h~lVKa?^=_jvvS|)&V
zJJY$_+}!c|v8-y3`a2xafqdd0zjup*WyvgY)6hc(rL*x7nxJZNlFk-71v=Sj$2u>h
zbpOYzz=8hHB<QCjJ}qrrdw<U#Q2~h2k=VY{Y>OkMVm1FUt)X2mmh~^2Zfx!VfS4=8
zOG_d0<{7##{S2!pe=U>n^$c)lSL#bk4<~Un)~}6G*7Q5gg3e%?EkXDCr`o@SGlghB
zi{eiZB83HT21Q{;T=rXFAlI?qqrUlP=;&fiUtSPngu#Mc+O6VL?Fg&!{=m!!_xJWw
zKoOby5CWkini9fguKIA#;PJ-Lju+vkUc|Cn@$@V)?;2LrL|n}()EpzM68b%_R!Qf^
zGOK?&2;^AHA57#NU7d*QQ(GYJEy+{iva7sDn9sC6)%gf#t09UcYUJ>YD8<yXp>er_
z)5*2;&KwRtFL^j@ly&kjXR*J(nnEES-o?NDpIQJM?Nc=Mz6SuhGr@^ziU||1LK_o2
z`!$>xAJishj0SA5Y!etf4g=$tsaTp`U#T&`TU5`e<dJCl4RrWgO<F*Ns5jFHmmeQ)
zH=et84h;YOmHUB<PrG%|0dJNuk~N(v4-A|bsMW(N3m?g+Ml2d7D5t=x;SD9W_Hn`F
z*l-s^E#s)@DBeXO5!IQid|FerAU*+YS`fcr61{d908X3-6dtdvthBCE_|h?Yn?=+s
zw_})j*Fw_9=M)2~cj#Ya-!DzAPL5f`RA{6%Ypjk`Y-ry*Zpj*jdbF3enZPN<4KPBg
z=S-ia34A0=eQ7eSZ#){r{}boHCpQuZZ7Zc_(q33w{f&<M0f*olP7CWw(2ds%-s_~E
zTA1d+gB+IEdH?ggrQ&-dYa<aV%@eF)SM5=~IgajiW_56&|LH|zcKpzb-<*oWqgD=p
zN&Yz~SsbhjVvy3((wy=vsu9$LkdURPj;5j>mjuDqI#t$Gi{TD=6TM9JI3b}SNOQQn
zsTx^HaforwRk)*8&}V7vr~Btz60Ysawn;%v#O0z^j7Tt3P*A{+9YFIy)LL&_rx;zW
zvif`qbh1@_>{=kpI%MMmgE3CBdr0&$PCFSG`^t($@Vrw~h-|UyQQO_}p{KZM4-m4s
z3kh79h@`_gGusRGp=E(s8o^z+#0o9-V!u35(v3k1jAlF`S%ebo-XKb-E4|3qG+WI3
z)O<tu$=Fm)$?m|z@RnWBMa#m}ayhRvpW}`L?RA2mF9L_wSy-7*Hk=T_8B8%H&Am}J
z^J?;QN24V*aIz_7WpHY0YIT9`64m+U#W34!e3NRSx)Ma%yoJH{!wDr7KNo(FCPXqD
zQJz@LdCYP19Q9zrXU}7)#@yK><mz~f>ME>UqQ*~&au@rprXNL9B@D#In**k88=o7K
zhQyeq*GfaFVJ(~6X1+*&XK99&kdi(R(}NfI3=&E@;*_bs>d4&MI_z27)`rhFI{E!z
zC*!7Vq4!>A@!hGx{mOrfy#9y5_3JIk4q6-Frd@Bi-IodTj-6~zYD_p_=Dm569uNRo
zpDsiY!fCVPgow!Xl>@YUWhb(YJzHKBH(_tFFAiBWrnN1&w>_q;5#5YSiyssy7VJ$o
z{q{g^*lsYCzXL<rz)jN%u2h4^=UtK7R)mIjw{Wnx9ynk;$&w-Hg6Dv?^i%O-$5Sya
zSwR8CNyF;T4Nhk0ReXH^*yZ6kB>2<Ep@c2ZY~rjVnM_zEf{_0X^y#4~r&mCX!&o~X
zE0eJM@}k{VAw`2{=~)G+!P&9XW14n~0+s4&6;5F%4!4WRZkeDnpd_z}iF~uwfR?6m
z%<v1Hf^o3}naGG=I9u~qf?OhMe><Rkv-6=E-5bq4xnS8h!RvP#SG4oq-TH!Jt<~E^
zNRR&*+=BLpVL7ijo}>%R<D?s*XxAby?W2~bh>aE{)f189SrffJDXV6HIR;$%^6q=*
zj@xwB<c$Q+J6n2O#gSM3+;S51agDM*mhYSx9&MR^uj({U7G_oJmpfWE7DnElerqRh
zz!)c!NGTZ4pas)sklL2b-i09U@^U-Sz5-SUY4|G$x(O^{V=#|QLv7(2W}UdVZjxH2
zCw!bZg^awKHgQ=E!^OLpJ)%Mn*10YVyiSNiO~36{HuIz$;yCvQ7-b(Y=~2t;hld9h
zEjaJo16)eCd@YakcnG)jYPvDLUzt>T6A>&!5*Uq(7(F<MvX6W2t({sJSwqw%jJFd~
zv)jUNVO$-<Yc{{QUkGb4q0PMcJj1q#W;7Nx3pPgzELFaQwcI7%R|Lu&0R?lL(j**@
zmsF>}YT{c>n!GDK?O|Y*ahe)4Oo9e;y|8_&o|25$TTEVrF+F0o-kn|TJzTd@Ve~92
zs4WuNBl5L4Fz*QoW;WYI&x-J^--3>nRS5<dSn}9h9=>u7{mXPD%!f>&P&hu0j*f54
z{yE6Q@t7Y5%pES+cD?lZec_pH-OEODZ8`P_)E&P-+b$O?&Hq)xEHh+%8XNhPt6d#`
zOZd5Kb_X!|>v#WMZT6)zkhAL0*;W9FUQ=^?u=ju@E-vao#x0$AO?^Z|tyQWPG-w@s
za`P+sJ?1nuvV~WisEk+AW~*ULtnrTikXxE+U%^jX&8}sgd2Dv5vm|m@GNQwn9KwDm
zC|IcVpjunA>jzr#6!YU@Zk7p~Jo}1Te_B?7f=UYH^jMw{Bx@(XK_*_WZWMwQlL6jT
zeA6QZmFbNczOR+tNWlk6oGhb>h>e!$(p@cR+9}vXGYUPvv)WZRz({-9pVt=N;Z6^-
zS1%ZS57RJ;(&<dq8~&ot%EWDn37Ir8gdRLGvC@{g58Q>lU=91uPr(MR;N*C<F}*5N
zUER!+fm{4E$e=d_+M#~$e(_=F$F36)j}$l@LoPpaO;h%p116do%69EYO}Sdtvgksu
z4yvwwcT~48^+385_lVxyj0p`t{tEpA>-}R_>c6{u;&l_)(Jv1>lLT|l71xZjloX>>
z*H+b(t5sa8aO#@50tJQ?U3Mns6D^DkfslJ|iR(i{J^iPDY`K0qSIbOCXk+b#iiWYB
z3dR-ZJ(a}=fSe=$KJ(N-{OR2=R!m2=y<HKOR^~}kd|E0JAT|GX+39a8rQTd#HdM`0
zmG0~0=Am;TSM`=xn`eqi%f+n*oi!>j#w&`|<x85Hp5y9=8RO`Oq7$sfs6N3+d|Mr6
zcqf-eU^ONP*BZvk1OgwB5rdmDTKzuiH7PPWfY}=8IoP<eDO9W-|M>ATqHyh2OW0OO
z>>-ozNLSr=I)a^1(SaO)I5X-?<2#+<R6VYZVdg_o+B#;obrz>(%DU_=Ty`O<1ykZW
zvT$kcJz4#I5XFZIm}FlZ(LpK?4CyDz-KKPP(gxtIXEd(kDN|*eFVvh=?v0!a{j%e8
zr@m38f(@qgTzEJ}=%%D<o!uPVos~pzPr=Rhy%g9*PTQef1fu&{Pa2BDTkhY#AOE9e
z*le^Z$1qztkT#$t?FWgNLam%)4B==Hb+yZ+=c#*O>b;S)waqoByl8bh7bI`ui9i2N
zAWks(=@WNh>`DMa5FyR`K5e#3xjSOJNX%6Oy|jj(=3mp+LcVtF$i3f;=w8inD;ddS
z{RlMk6in8m$INl;y|*^(&pIi%L2=cKzf$2lP7n+VJqx#_rMvCIr|%V0w@aK_znB;+
zxg2{{x2Eq$yx+$#+((0ggM;Hn2M3>;yLU2dI^$i1H~7h3iwhcWPo<(eW-C;6X*Slm
zT7@6b$8S#DLamRbe@|^*UYXif6n?r2T90~e`fmf}1GxqV3&oRl6B)%V%Ni8$Wp+;g
z2Q8Y0&UEbN^w`)~QBl#3z3#5A4Z*Co?A9-b|07(HR}bpyf;rN&H6~Pke+$1&GN@$l
z?(QxRgjDS?H}`x-o7r(>YDx~cRQNCN47D2{x3X#m`R$Iqr=oci;PS_|UwLL@G8qns
zr`w9}$UpFSg?w#qQ1EeNBntp8B?F4LQ*<Cv@xnaTCFD=FSm^>nIuF~<%Rhj$>nFIJ
zGjbmY$Kcw)jD;k`h-e6J1VZ-yyz1eQqim=G(0y<F5wXHq6F8|6RAZ9PtEj4Ok3RyA
zKPNt}k*)$F<k!B~|LkdxK|+)CFW>*Ky~nQ&*Z+52<}(mCcXyEgZX?I_9|QAXt)JCO
zuNWr%36_u`6vb^rk+D~^xg3zF0p_&-U5DK2gQAiW9*<w=G4k417RQPF$=Ass{(Srf
zIr-}%zDo}Pl)Jaj1%UTBYBf`-*f+&9VWUdSKL$zo>T0JqkT>T)w<jsAuCD&)DF1+f
zs>(_~6v`eM2VR2@TtUio3RK%afa3BH;EWur#N$C0Y$$Y5n*0@CQ87vkM#v9k**?xU
zR|PH=0E*6uQ+1GVcE8gB-nM$bqwGh_H+|1fuwMbX&Y)^M_5Gbmjipw$O)$L%4vAW{
zntA3rsEa#M8RsUy-+H4&@Dda`!Q4AL3s$1YUQi5_chi}ZikgdtoFReC)>yKgii%3<
z4e+Rem$ABwt?0{2eNBz2hRyZUa2D;VsGghqyZ5=xltWUAYN|tn1^G<K<XJ+2?XfjJ
ztI*b2H*T(I<;UM+UmPkNAT~CZOiu^RpB<=KdA$wspk`ojPV@l&K($}%RFJvnXQNC9
zP(a>4SJ$oUXgMg*(AIuuF{tg}d)p>|_VRHL8cN4UKfLQQ&A@xCQR#xucX?9X2F42g
z$=11sUMFIMs=x{B0~&Yqg7~DJSlKDs$R)OfoT6@$+e<f*Ep>xN{{k-XC+%ix^c)WD
z@4fP-yx@5kcj9+DQqzZLy}8FS@4ITgL%EjvWbQ57KbWfEQdwQymusy&-B>nwhNix+
z+xxZ_>ZyCwiJv9b((iP%^`$@GcFHsP=zBenTb9jnF_a|vPLJm0yW<kyCS-DuYesKB
zTR_}m2|rou_CiULb_LZVpjeJ~kQrtG?@E*^FW3sA`#A%s%{Q4%ctl?QwM=J7yuN4t
zB?aRJqQkV$uIwhn>72|E(rms()L2KRxpS%GGfsYhC0Z^#E0%*K74-FVHE`>+M%O;2
zt{j&@Vgn*!7wS_N&zIb{b5FZ!+K{>!1lx)mXnWEd6Zf2XPMqo+evCEyiBA#)mWgr?
z2hEHoH6k1IexGSc4uFhTpDBNwe=VK0nVJL@$EdfLtFD6+-v3>D`y=#Uq*78_4T<w5
zf-G*FtsHCVX>gd~_f#G1Uh@sRbJsa0(}ApOYog&wc!03%`>@#bemc#$`KS${w7Xx!
zvgOKHCZl(=r{=gs1=_}+9FPp9Do9mTRc#Z*zkp{@E`d7s2~$tG`};d~n*-(=VBLqj
ziVw1mWR58xBbV}}NR|l;^yoAkD6d`36Xv@f@DdmG1}&4!l##&XCy=$?ZYttJxd_p0
zFK?>QPz5mm4dln8c)x@jOeN;e(ITU8ZeTcWJZ@>q?jd5LdEHDlJDH3T!Awn9!l9`o
zJ21{FmXBO(f0VcA^s3Uu&x*?%mmt<9GZ1XV-&z;_SRu|^Fz>7wsjqoBOxk6yRf8J}
z^AJI?8yhAphYKzbOdqxBZY*Orp^?F{(`{Hz{9H8Cmgm9Tp$z0aQbSH^G)zwGRRx`H
zS<W>QXHkBRopmdmxE4P9c@P^fJD7Gne4e=}&X93xReAI1Ih9~7NmVzFW{VzV%Z#g8
z5$H*5{7<0nT0g&I^0~S12aeFxD=+8^R$4VST>Cu4Ia1gogbHvw3pXwkHX+AFFa(a*
zFIytx^PJ=S#(Gi>q|&CIy51(DN%LHKI``;_5<hRLJzd6EfG&tcMlj!1i0nMykHq!o
zbiHO4LRY#@b(&!gGx{luonY)dyDq1Q(@=&=4Klg+sT+USILV?m@?EKDT0R>Z{04tu
zWRqF5rslHvCA<Y;d-5NGmKIvSCW*>!cah=Oh*uXSvw`}_P2p@){wEoCyj!<msVif?
za<f+IAhL^Ag^EA@F^!6ZLCZz$193t}gh$%~&$_z&@bIvEWK$`B%Xj#0EJtb>$jl9?
z+8vB_9BzH1PZcUD@%TL#{KmY^*Dbx>pTCmm=v89+MwMlYFS@B)sUWEN?J!^3^Oo{C
zdjZRL%49SK?&fbuKeOU}7V|favYoF|^<lC0o_&splPksOy-+vzm;Upc4~o!ap^jsU
z)>aWug{?h@Zr+rV=b0;>oG1>NrG<{*yB9(>)z!V?Z;TN|FwA@%wV8KzAUPw|Y;)1z
zDMq45-Ky<*ovcDnh?`>;bacM9&c-y0Kb8sL&>ndBZ>(Bb|I)N%Uz)d+Pet94xU93p
z*mU#q4NEL_GGpNg8a%+I?F=XkBz93r@e^;~K&970r|B6OiIG0)g0AR-U;mwgSMl>K
zLD%4Vg85Q+c8O7AA4^nD!HVds!BU0|i;CZhMj$o^VO@F!M-%lZi)Mqgv2aA5vuVQe
z{hls7TP=zrSnYW|)l!?_liQ|RxSqChht>fndvDGsV^l3M3wnNI<Gn1&jW-`?P1Lz%
ztdyufU>L}-I4;cgKAI?(Xt>?>wGd?WQxis-U(e6F&SK}_=-Lfh@7wojlC*fp44GdL
z65p>;-BL=O2wC;vtW6_i^w+6~;5O;3jmV4VW5!(X8&{A2eEwFtbI2;Y@Ml>vUwhQ5
z+FC<sD|(P#?%0Ns-nLU+gKqxa)j=K->x>@VdzDT<tesJLPx+~|RDZy_nP_#qfnc%S
z?~>b-e@CUT<&QVZJM|=Imxb8qr6)-N(Q^jtyzvz-7$pTEf@y>_TVb66ohm9SjADC>
z9Tg6EduSNS=6GHHH8GoI!Ixqp@*Bfw(9tK%46y0!hiKSDbwA&wM8aD5E^FMfi=z6&
z#jH<HatZA8ciQ1;r-Ak-U{CTN4hwZ<+@1S%E029NYhLV7z^*L!zCF)wGr^9~wy`Q1
zt!L!DJ`?c=6TS6UWn0jIPoYk<Uud7OkiIFiDAhVY&PRVK(5r#0=a&V`reE8jhfZs5
zw09;Ww#r?%M8VON2%pn8mhi+!kkh=NMd~fuU8v|Rx7P<GabZi7Lun`WuVEHg3uZCl
ztM)3H2EXowt>1U=NLRz0Qv=K+-8*hMFDc~g0_m$8p-|Ys@3W@Ne3OCB^Nw38vg=AS
z-uOtWY!TTkT=2GNT^cZR&ND!pm{QyQyu)Tua2d{Y47y3?=Y*W&Y9XR~`?S^))|An<
zn?0cqob`Cy4Qj9(reSH3h@Ty1V^?P~`ixl^{%g2&T9KW<m4B#^<{X0)-en(_tm(~-
zW-g@!O_f6}WZ10_OnePP_`#@4r<WSW0oAb_+usGkh6HrX05jBX=XNfT+w-ouPHvAY
zeS=<T*g8$kBm@~HaE#6u^JA|zArlx{{oCgdR5$4g7$a6Zl0C4OngvprBl_Tshzr^M
zx+He_E^UgKSP11af@xHNTILhb!_{OwJQ^w#B}1`uOQKU|aj#L)EF4&v{GErCI}yYa
z?3H_0r_s9AwL%5=x;*{Ge1@h2i|Q|nw$Qt=HKA7P0IvGRPViuWQo=|B9@DurS5A2I
zt|Av<RlPv49thmF%9R4(-K&!q)f2+t@+XWjITZ+C@|!BK@_D<|j>E{Jy5D1Dr@XW;
z<=mC<sj^2W`Y*<ucE2aiWkYM%PSNn1>e~eaC>u9?<Pup4+YMC^7!0;k%GaY>|F@26
qZ9zf4Dw7d44c~%46t_!y1t3P@HGA!ccOX9o0Q=vZf2}!(y!&r?dlzZ|

literal 0
HcmV?d00001

diff --git a/packages/openbridge-webcomponents/src/automation/analog-valve/analog-valve.stories.ts b/packages/openbridge-webcomponents/src/automation/analog-valve/analog-valve.stories.ts
index b1aa4be0d..84fc4fb69 100644
--- a/packages/openbridge-webcomponents/src/automation/analog-valve/analog-valve.stories.ts
+++ b/packages/openbridge-webcomponents/src/automation/analog-valve/analog-valve.stories.ts
@@ -6,8 +6,7 @@ import {AutomationButtonReadoutStackSize} from '../../components/automation-butt
 import './analog-valve.js';
 import {crossDecorator} from '../../storybook-util.js';
 import '../automation-badge/automation-badge.js';
-import '../../icons/icon-placeholder.js';
-import '../../icons/icon-timer-google.js';
+import '../../icons/icon-pressure.js';
 import {argTypesAbstractAutomationButtonPassiveRound} from '../automation-button/abstract-automation-button-storybook-helpers.js';
 import {
   AutomationButtonBadgeAlert,
@@ -66,17 +65,19 @@ export const WithBadges: Story = {
 };
 
 /**
- * The analog valve forwards the `alert-frame-icon`, `alert-frame-label` and
- * `alert-frame-timer` slots down to the alert frame. With the `bottom-flip`
- * frame type the flap shows a custom icon together with a label and a clock.
- * See `ObcAbstractAutomationButton` for the documentation of these slots.
+ * The analog valve forwards the `alert-frame-icon` slot down to the alert
+ * frame. The valve symbol is small, so the `large-side-flip` frame type is
+ * used: its vertical flap has room for a custom icon (here a pressure icon,
+ * suited to a valve alarm) next to the alert category icon, but not for a
+ * label or clock. See `ObcAbstractAutomationButton` for the documentation of
+ * these slots.
  */
-export const AlertFrameWithIconLabelAndClock: Story = {
+export const AlertFrameWithIcon: Story = {
   args: {
     open: true,
     value: 20,
     alert: true,
-    alertFrameType: ObcAlertFrameType.BottomFlip,
+    alertFrameType: ObcAlertFrameType.LargeSideFlip,
     showAlertIcon: true,
   },
   render: (args) => html`
@@ -91,9 +92,7 @@ export const AlertFrameWithIconLabelAndClock: Story = {
       .alertFrameType=${args.alertFrameType}
       .showAlertIcon=${args.showAlertIcon}
     >
-      <obi-placeholder slot="alert-frame-icon"></obi-placeholder>
-      <span slot="alert-frame-label">Alert</span>
-      <obi-timer-google slot="alert-frame-timer"></obi-timer-google>
+      <obi-pressure slot="alert-frame-icon"></obi-pressure>
     </obc-analog-valve>
   `,
 };
diff --git a/packages/openbridge-webcomponents/src/automation/automation-tank/automation-tank.stories.ts b/packages/openbridge-webcomponents/src/automation/automation-tank/automation-tank.stories.ts
index 661623b08..f8f329ab6 100644
--- a/packages/openbridge-webcomponents/src/automation/automation-tank/automation-tank.stories.ts
+++ b/packages/openbridge-webcomponents/src/automation/automation-tank/automation-tank.stories.ts
@@ -10,6 +10,8 @@ import {
 } from './automation-tank.js';
 import './automation-tank.js';
 import {html} from 'lit';
+import '../../icons/icon-tank.js';
+import '../../icons/icon-timer-google.js';
 import {crossDecorator} from '../../storybook-util.js';
 import {AdviceType} from '../../navigation-instruments/watch/advice.js';
 import type {LinearAdvice} from '../../building-blocks/instrument-linear/advice.js';
@@ -484,6 +486,55 @@ export const WithAlertAlarm: Story = {
   `,
 };
 
+/**
+ * Alarm alert frame on a vertical atmospheric tank using the `bottom-flip`
+ * frame type. The tank is large enough to give the bottom flap room for all
+ * three slots, so it shows a custom icon (here a tank icon, suited to a tank
+ * alarm) via `alert-icon`, a label via `alert-label` and a clock via
+ * `alert-timer`. Smaller devices should fall back to a side-flip frame.
+ */
+export const WithAlertBottomFlip: Story = {
+  args: {
+    type: TankType.atmospheric,
+    alert: true,
+    alertFrameStatus: ObcAlertFrameStatus.Alarm,
+    alertFrameType: ObcAlertFrameType.BottomFlip,
+    showAlertIcon: true,
+  },
+  render: (args) => html`
+    <obc-automation-tank
+      .value=${args.value}
+      .max=${args.max}
+      .trend=${args.trend}
+      .tag=${args.tag}
+      .type=${args.type}
+      .orientation=${args.orientation}
+      .compact=${args.compact}
+      .static=${args.static}
+      .positioning=${args.positioning}
+      .chartMode=${args.chartMode}
+      .chartData=${args.chartData}
+      .advice=${args.advice}
+      .hasAdvice=${args.hasAdvice}
+      .hasGraphIcon=${args.hasGraphIcon}
+      .showTrendSymbol=${args.showTrendSymbol}
+      .percentFractionDigits=${args.percentFractionDigits}
+      .readout=${args.readout}
+      ?alert=${args.alert}
+      .alertFrameType=${args.alertFrameType}
+      .alertFrameThickness=${args.alertFrameThickness}
+      .alertFrameStatus=${args.alertFrameStatus}
+      .showAlertCategoryIcon=${args.showAlertCategoryIcon}
+      .showAlertIcon=${args.showAlertIcon}
+      .priority=${args.priority}
+    >
+      <obi-tank slot="alert-icon"></obi-tank>
+      <span slot="alert-label">Level alarm</span>
+      <obi-timer-google slot="alert-timer"></obi-timer-google>
+    </obc-automation-tank>
+  `,
+};
+
 /**
  * Warning-status alert on a horizontal atmospheric tank — demonstrates the
  * ring tracks the tank's host orientation correctly.

From 67b25a5102a4599818a9c7baec0da50ca8389feb Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 22 Jun 2026 04:31:52 +0000
Subject: [PATCH 3/4] docs(automation): drop story-level JSDoc blocks per
 coding guideline

Remove the description comments above the new analog valve and tank alert
stories to follow the repository's no-comments rule for TS files.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XWMYJ6JF3jpspmmoQMNt6m
---
 .../src/automation/analog-valve/analog-valve.stories.ts   | 8 --------
 .../automation/automation-tank/automation-tank.stories.ts | 7 -------
 2 files changed, 15 deletions(-)

diff --git a/packages/openbridge-webcomponents/src/automation/analog-valve/analog-valve.stories.ts b/packages/openbridge-webcomponents/src/automation/analog-valve/analog-valve.stories.ts
index 84fc4fb69..a0232a4d6 100644
--- a/packages/openbridge-webcomponents/src/automation/analog-valve/analog-valve.stories.ts
+++ b/packages/openbridge-webcomponents/src/automation/analog-valve/analog-valve.stories.ts
@@ -64,14 +64,6 @@ export const WithBadges: Story = {
   },
 };
 
-/**
- * The analog valve forwards the `alert-frame-icon` slot down to the alert
- * frame. The valve symbol is small, so the `large-side-flip` frame type is
- * used: its vertical flap has room for a custom icon (here a pressure icon,
- * suited to a valve alarm) next to the alert category icon, but not for a
- * label or clock. See `ObcAbstractAutomationButton` for the documentation of
- * these slots.
- */
 export const AlertFrameWithIcon: Story = {
   args: {
     open: true,
diff --git a/packages/openbridge-webcomponents/src/automation/automation-tank/automation-tank.stories.ts b/packages/openbridge-webcomponents/src/automation/automation-tank/automation-tank.stories.ts
index f8f329ab6..5f3a0041b 100644
--- a/packages/openbridge-webcomponents/src/automation/automation-tank/automation-tank.stories.ts
+++ b/packages/openbridge-webcomponents/src/automation/automation-tank/automation-tank.stories.ts
@@ -486,13 +486,6 @@ export const WithAlertAlarm: Story = {
   `,
 };
 
-/**
- * Alarm alert frame on a vertical atmospheric tank using the `bottom-flip`
- * frame type. The tank is large enough to give the bottom flap room for all
- * three slots, so it shows a custom icon (here a tank icon, suited to a tank
- * alarm) via `alert-icon`, a label via `alert-label` and a clock via
- * `alert-timer`. Smaller devices should fall back to a side-flip frame.
- */
 export const WithAlertBottomFlip: Story = {
   args: {
     type: TankType.atmospheric,

From b363176fc089029acf4dec971ce6fa5cfbd2f02f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 22 Jun 2026 07:39:15 +0000
Subject: [PATCH 4/4] refactor(automation-button): expose alert-frame slots for
 all positioning types

Rename the device-level alert-frame slots to alert-icon / alert-label /
alert-timer so they match the slot names already used by obc-automation-button
(and obc-automation-tank).

Previously the alert-icon / alert-label / alert-timer slots were only exposed
for `point` positioning; the `symbol` and `button` paths wrapped the content
with wrapWithAlertFrame, which did not forward the slots. Render the alert
frame through a shared renderAlertFrame() helper in both paths so slotted icon,
label and timer content reaches the frame for every positioning value.

Update the analog valve story and add an automation-button story that exercises
the slots with `button` positioning, plus its visual baseline.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XWMYJ6JF3jpspmmoQMNt6m
---
 .../valve-alert-button-positioning-auto.png   | Bin 0 -> 7293 bytes
 .../analog-valve/analog-valve.stories.ts      |   2 +-
 .../abstract-automation-button.ts             |  33 +++++-----
 .../automation-button.stories.ts              |  48 ++++++++++++++
 .../automation-button/automation-button.ts    |  60 ++++++++++--------
 5 files changed, 99 insertions(+), 44 deletions(-)
 create mode 100644 packages/openbridge-webcomponents/__vis__/linux/__baselines__/automation/automation-button/automation-button.stories.ts/valve-alert-button-positioning-auto.png

diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/automation/automation-button/automation-button.stories.ts/valve-alert-button-positioning-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/automation/automation-button/automation-button.stories.ts/valve-alert-button-positioning-auto.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b4d575ee586c333471e79153237487e174f84a8
GIT binary patch
literal 7293
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
AJOBUy

literal 0
HcmV?d00001

diff --git a/packages/openbridge-webcomponents/src/automation/analog-valve/analog-valve.stories.ts b/packages/openbridge-webcomponents/src/automation/analog-valve/analog-valve.stories.ts
index a0232a4d6..796731dac 100644
--- a/packages/openbridge-webcomponents/src/automation/analog-valve/analog-valve.stories.ts
+++ b/packages/openbridge-webcomponents/src/automation/analog-valve/analog-valve.stories.ts
@@ -84,7 +84,7 @@ export const AlertFrameWithIcon: Story = {
       .alertFrameType=${args.alertFrameType}
       .showAlertIcon=${args.showAlertIcon}
     >
-      <obi-pressure slot="alert-frame-icon"></obi-pressure>
+      <obi-pressure slot="alert-icon"></obi-pressure>
     </obc-analog-valve>
   `,
 };
diff --git a/packages/openbridge-webcomponents/src/automation/automation-button/abstract-automation-button.ts b/packages/openbridge-webcomponents/src/automation/automation-button/abstract-automation-button.ts
index b13f6efa0..b86f41bdc 100644
--- a/packages/openbridge-webcomponents/src/automation/automation-button/abstract-automation-button.ts
+++ b/packages/openbridge-webcomponents/src/automation/automation-button/abstract-automation-button.ts
@@ -66,22 +66,23 @@ export enum AutomationButtonBadgeCommandLocked {
  *
  * When `alert` is enabled the button is wrapped in an `<obc-alert-frame>`. The
  * alert frame can show a custom icon, label and timer, depending on the
- * selected `alertFrameType`. These are exposed as slots that are forwarded all
- * the way down to the alert frame:
+ * selected `alertFrameType`. These are exposed using the same slot names as
+ * `<obc-automation-button>` and are forwarded all the way down to the alert
+ * frame, for every `positioning` value:
  *
- * | Slot Name          | Renders When...                                              | Purpose                                                                 |
- * |--------------------|--------------------------------------------------------------|-------------------------------------------------------------------------|
- * | alert-frame-icon   | `alert` and `showAlertIcon` and `alertFrameType` in [`large-side-flip`, `bottom-flip`, `top-flip`] | Custom icon shown in the alert frame flap, in addition to the alert category icon. |
- * | alert-frame-label  | `alert` and `alertFrameType` in [`bottom-flip`, `top-flip`]  | Label text shown in the alert frame flap.                               |
- * | alert-frame-timer  | `alert` and `alertFrameType` in [`bottom-flip`, `top-flip`]  | Timer / clock shown in the alert frame flap.                            |
+ * | Slot Name    | Renders When...                                              | Purpose                                                                 |
+ * |--------------|--------------------------------------------------------------|-------------------------------------------------------------------------|
+ * | alert-icon   | `alert` and `showAlertIcon` and `alertFrameType` in [`large-side-flip`, `bottom-flip`, `top-flip`] | Custom icon shown in the alert frame flap, in addition to the alert category icon. |
+ * | alert-label  | `alert` and `alertFrameType` in [`bottom-flip`, `top-flip`]  | Label text shown in the alert frame flap.                               |
+ * | alert-timer  | `alert` and `alertFrameType` in [`bottom-flip`, `top-flip`]  | Timer / clock shown in the alert frame flap.                            |
  *
- * The slot content is remapped on its way down: `alert-frame-icon` ->
- * `alert-icon` (`obc-automation-button`) -> `icon` (`obc-alert-frame`), and
- * likewise for the label and timer slots.
+ * The slot content is remapped on its way down: `alert-icon`
+ * (`obc-automation-button`) -> `icon` (`obc-alert-frame`), and likewise for
+ * the label and timer slots.
  *
- * @slot alert-frame-icon - Custom icon shown in the alert frame flap (requires `showAlertIcon` and a flap variant that supports an icon).
- * @slot alert-frame-label - Label text shown in the alert frame flap (`bottom-flip`/`top-flip`).
- * @slot alert-frame-timer - Timer / clock shown in the alert frame flap (`bottom-flip`/`top-flip`).
+ * @slot alert-icon - Custom icon shown in the alert frame flap (requires `showAlertIcon` and a flap variant that supports an icon).
+ * @slot alert-label - Label text shown in the alert frame flap (`bottom-flip`/`top-flip`).
+ * @slot alert-timer - Timer / clock shown in the alert frame flap (`bottom-flip`/`top-flip`).
  * @slot badge-top-right - Custom badge in the top-right corner (overrides `badgeAlert`).
  * @slot badge-top-left - Custom badge in the top-left corner (overrides `badgeControl`).
  * @slot badge-bottom-left - Custom badge in the bottom-left corner (overrides `badgeInterlock`).
@@ -293,9 +294,9 @@ export class ObcAbstractAutomationButton extends LitElement {
       .positioning=${this.positioning}
     >
       ${this.icon}
-      <slot name="alert-frame-icon" slot="alert-icon"></slot>
-      <slot name="alert-frame-label" slot="alert-label"></slot>
-      <slot name="alert-frame-timer" slot="alert-timer"></slot>
+      <slot name="alert-icon" slot="alert-icon"></slot>
+      <slot name="alert-label" slot="alert-label"></slot>
+      <slot name="alert-timer" slot="alert-timer"></slot>
       <slot
         name="badge-top-right"
         slot="badge-top-right"
diff --git a/packages/openbridge-webcomponents/src/automation/automation-button/automation-button.stories.ts b/packages/openbridge-webcomponents/src/automation/automation-button/automation-button.stories.ts
index 1fddc7acc..2745c2767 100644
--- a/packages/openbridge-webcomponents/src/automation/automation-button/automation-button.stories.ts
+++ b/packages/openbridge-webcomponents/src/automation/automation-button/automation-button.stories.ts
@@ -196,6 +196,54 @@ export const ValveAlert: Story = {
   },
 };
 
+export const ValveAlertButtonPositioning: Story = {
+  argTypes: {
+    alertFrameType: {
+      options: Object.values(ObcAlertFrameType),
+      control: {
+        type: 'select',
+      },
+    },
+    alertFrameStatus: {
+      options: Object.values(ObcAlertFrameStatus),
+      control: {
+        type: 'select',
+      },
+    },
+  },
+  args: {
+    alert: true,
+    alertFrameType: ObcAlertFrameType.BottomFlip,
+    alertFrameStatus: ObcAlertFrameStatus.Alarm,
+    positioning: AutomationButtonPositioning.button,
+  },
+  render(args) {
+    const readouts: AutomationButtonReadoutStack[] = [];
+    const tag: string | null = '#0000';
+    return html` <obc-automation-button
+      state="open"
+      .showReadoutStack=${args.showReadoutStack}
+      .readouts=${readouts}
+      .tag=${tag}
+      .alertFrameStatus=${args.alertFrameStatus}
+      .alertFrameType=${args.alertFrameType}
+      .showAlertCategoryIcon=${args.showAlertCategoryIcon}
+      .showAlertIcon=${args.showAlertIcon}
+      .positioning=${args.positioning}
+      ?alert=${args.alert}
+    >
+      <obi-twoway-digital-open
+        usecsscolor
+        slot="icon"
+        style="display: block; transform: rotate(90deg); line-height: 0;"
+      ></obi-twoway-digital-open>
+      <obi-placeholder slot="alert-icon"></obi-placeholder>
+      <div slot="alert-label">Label</div>
+      <div slot="alert-timer">00:45</div>
+    </obc-automation-button>`;
+  },
+};
+
 export const ValveBadges: Story = {
   render(args) {
     const readouts: AutomationButtonReadoutStack[] = [];
diff --git a/packages/openbridge-webcomponents/src/automation/automation-button/automation-button.ts b/packages/openbridge-webcomponents/src/automation/automation-button/automation-button.ts
index 2814631c5..0bb0ade0f 100644
--- a/packages/openbridge-webcomponents/src/automation/automation-button/automation-button.ts
+++ b/packages/openbridge-webcomponents/src/automation/automation-button/automation-button.ts
@@ -18,7 +18,6 @@ import {
   ObcAlertFrameThickness,
   ObcAlertFrameType,
   ObcAlertFrameMode,
-  wrapWithAlertFrame,
 } from '../../components/alert-frame/alert-frame.js';
 import {AlertType} from '../../types.js';
 import {customElement} from '../../decorator.js';
@@ -196,19 +195,7 @@ export class ObcAutomationButton extends LitElement {
             `
           : nothing}
         ${this.alert && this.positioning === AutomationButtonPositioning.point
-          ? html` <obc-alert-frame
-              class="alert-frame"
-              .type=${this.alertFrameType}
-              .thickness=${this.alertFrameThickness}
-              .status=${this.alertFrameStatus}
-              .mode=${this.alertFrameMode}
-              .showAlertCategoryIcon=${this.showAlertCategoryIcon}
-              .showIcon=${this.showAlertIcon}
-            >
-              <span slot="icon"><slot name="alert-icon"></slot></span>
-              <span slot="label"><slot name="alert-label"></slot></span>
-              <span slot="timer"><slot name="alert-timer"></slot></span>
-            </obc-alert-frame>`
+          ? this.renderAlertFrame(nothing, true)
           : nothing}
       </button>
     `);
@@ -218,19 +205,9 @@ export class ObcAutomationButton extends LitElement {
     if (this.positioning === AutomationButtonPositioning.point) {
       return html`<div class="point-wrapper">${content}</div>`;
     }
-    const innerContent = wrapWithAlertFrame(
-      this.alert
-        ? {
-            type: this.alertFrameType,
-            thickness: this.alertFrameThickness,
-            status: this.alertFrameStatus,
-            mode: this.alertFrameMode,
-            showIcon: this.showAlertIcon,
-            showAlertCategoryIcon: this.showAlertCategoryIcon,
-          }
-        : false,
-      content
-    );
+    const innerContent = this.alert
+      ? this.renderAlertFrame(content, false)
+      : content;
     if (this.positioning === AutomationButtonPositioning.symbol) {
       return html`<div
         class=${classMap({
@@ -244,6 +221,35 @@ export class ObcAutomationButton extends LitElement {
     return innerContent;
   }
 
+  /**
+   * Renders the `<obc-alert-frame>` together with the `alert-icon`,
+   * `alert-label` and `alert-timer` slots so that slotted content reaches the
+   * frame regardless of the `positioning`. When `overlay` is true the frame is
+   * an absolutely-positioned overlay (used by `point` positioning) and
+   * `content` is empty; otherwise the frame wraps `content` (used by `symbol`
+   * and `button` positioning).
+   */
+  private renderAlertFrame(
+    content: HTMLTemplateResult | typeof nothing,
+    overlay: boolean
+  ): HTMLTemplateResult {
+    return html`<obc-alert-frame
+      class=${overlay ? 'alert-frame' : nothing}
+      .type=${this.alertFrameType}
+      .thickness=${this.alertFrameThickness}
+      .status=${this.alertFrameStatus}
+      .mode=${this.alertFrameMode}
+      .showAlertCategoryIcon=${this.showAlertCategoryIcon}
+      .showIcon=${this.showAlertIcon}
+      .wrapContent=${!overlay}
+    >
+      <span slot="icon"><slot name="alert-icon"></slot></span>
+      <span slot="label"><slot name="alert-label"></slot></span>
+      <span slot="timer"><slot name="alert-timer"></slot></span>
+      ${content}
+    </obc-alert-frame>`;
+  }
+
   static override styles = unsafeCSS(compentStyle);
 
   private get effectiveVariant(): AutomationButtonVariant {