@rcarls/rc-adaptive-menu 0.6.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +186 -0
- package/README.md +8 -0
- package/dist/custom-elements.json +99 -30
- package/dist/rc-adaptive-menu-DlBZgaWr.js +383 -0
- package/dist/rc-adaptive-menu-DlBZgaWr.js.map +1 -0
- package/dist/rc-adaptive-menu-define.js +3 -1
- package/dist/rc-adaptive-menu-define.js.map +1 -1
- package/dist/rc-adaptive-menu.js +3 -2
- package/dist/types/packages/rc-adaptive-menu/src/rc-adaptive-menu.d.ts +46 -14
- package/package.json +2 -2
- package/dist/rc-adaptive-menu-BwvfkD_X.js +0 -589
- package/dist/rc-adaptive-menu-BwvfkD_X.js.map +0 -1
|
@@ -0,0 +1,383 @@
|
|
|
1
|
+
import { css as w, LitElement as y, html as x } from "lit";
|
|
2
|
+
import { property as d, query as b } from "lit/decorators.js";
|
|
3
|
+
import { MessagesController as k, FlowController as z, AnchorController as O, PopoverController as A, renderedOrientation as T, keyNavigation as p, isFocusable as g, cssText as S } from "@rcarls/rc-common";
|
|
4
|
+
const C = w`:host{inline-size:fit-content;max-inline-size:calc(100% + var(--rc-adaptive-menu-touch-target-overlap-inline-start,0px) + var(--rc-adaptive-menu-touch-target-overlap-inline-end,0px));min-inline-size:0;margin-inline-start:calc(-1 * var(--rc-adaptive-menu-touch-target-overlap-inline-start,0px));margin-inline-end:calc(-1 * var(--rc-adaptive-menu-touch-target-overlap-inline-end,0px));display:block}#root{align-items:center;gap:var(--rc-adaptive-menu-gap,var(--rc-control-gap,.25em));flex-direction:row;min-inline-size:0;max-inline-size:100%;display:flex}:host([orientation=vertical]){inline-size:100%}:host([orientation=vertical]) #root{flex-direction:column;align-items:stretch;block-size:100%;min-block-size:0;inline-size:100%}#actions,#overflow{display:contents}#overflow-trigger-target{box-sizing:border-box;min-inline-size:var(--rc-adaptive-menu-touch-target-inline-size,var(--rc-adaptive-menu-touch-target-block-size,3rem));min-block-size:var(--rc-adaptive-menu-touch-target-block-size,3rem);flex:none;place-items:center;display:grid;position:relative}#overflow-trigger{box-sizing:border-box;min-inline-size:var(--rc-adaptive-menu-trigger-inline-size,2.5em);min-block-size:var(--rc-adaptive-menu-trigger-block-size,2.5em);padding:var(--rc-adaptive-menu-trigger-padding,.5em);border:var(--rc-adaptive-menu-trigger-border,1px solid ButtonBorder);border-radius:var(--rc-adaptive-menu-trigger-radius,var(--rc-control-radius,0));background:var(--rc-adaptive-menu-trigger-background,ButtonFace);color:var(--rc-adaptive-menu-trigger-color,ButtonText);box-shadow:var(--rc-adaptive-menu-trigger-shadow,none);font:inherit;cursor:pointer;place-items:center;line-height:1;display:inline-grid;position:relative}#overflow-trigger:hover{background:var(--rc-adaptive-menu-trigger-hover-background,var(--rc-adaptive-menu-trigger-background,ButtonFace))}#overflow-trigger:active{box-shadow:var(--rc-adaptive-menu-trigger-active-shadow,var(--rc-adaptive-menu-trigger-shadow,none))}#overflow-trigger:before{content:"";inset-block:calc((var(--rc-adaptive-menu-touch-target-block-size,3rem) - 100%) / -2);inset-inline:calc(( var(--rc-adaptive-menu-touch-target-inline-size,var(--rc-adaptive-menu-touch-target-block-size,3rem)) - 100% ) / -2);position:absolute}:host(:not([data-overflow])) #overflow-trigger-target{visibility:hidden;pointer-events:none;position:fixed}#overflow-trigger:focus-visible{outline:var(--rc-focus-ring,auto);outline-offset:var(--rc-focus-ring-offset,0)}#overflow-icon{inline-size:var(--rc-adaptive-menu-icon-size,1.5em);block-size:var(--rc-adaptive-menu-icon-size,1.5em);fill:currentColor}#popup{box-sizing:border-box;min-inline-size:var(--rc-adaptive-menu-popup-min-inline-size,10em);max-inline-size:var(--rc-adaptive-menu-popup-max-inline-size,calc(100dvi - .5rem));max-block-size:var(--rc-adaptive-menu-popup-max-block-size,calc(100dvb - .5rem));padding-block:var(--rc-adaptive-menu-popup-padding-block,var(--rc-popup-padding-block,.25em));border:var(--rc-adaptive-menu-popup-border,var(--rc-popup-border,var(--rc-border,1px solid ButtonBorder)));border-radius:var(--rc-adaptive-menu-popup-radius,var(--rc-popup-radius,var(--rc-radius-sm,0)));background:var(--rc-adaptive-menu-popup-background,var(--rc-popup-background,var(--rc-surface,Canvas)));box-shadow:var(--rc-adaptive-menu-popup-shadow,var(--rc-popup-shadow,var(--rc-shadow,0 2px 8px color-mix(in srgb, CanvasText 15%, transparent))));color:var(--rc-adaptive-menu-popup-color,var(--rc-popup-color,var(--rc-field-text,CanvasText)));overscroll-behavior:contain;scrollbar-gutter:stable;flex-direction:column;margin:0;display:none;position:fixed;overflow:auto}#popup:is(:popover-open,[data-rc-popover-fallback-open]){display:flex}`;
|
|
5
|
+
var D = Object.defineProperty, E = Object.getOwnPropertyDescriptor, l = (h, e, t, o) => {
|
|
6
|
+
for (var i = o > 1 ? void 0 : o ? E(e, t) : e, n = h.length - 1, u; n >= 0; n--)
|
|
7
|
+
(u = h[n]) && (i = (o ? u(e, t, i) : u(i)) || i);
|
|
8
|
+
return o && i && D(e, t, i), i;
|
|
9
|
+
};
|
|
10
|
+
const $ = "rc-button, rc-chip, rc-menu-button", M = S`@layer rc-base{rc-adaptive-menu>[data-rc-action-promoted],rc-adaptive-menu>[data-rc-action-overflowed]{box-sizing:border-box;min-inline-size:0}rc-adaptive-menu>[data-rc-action-overflowed]{inline-size:100%;display:flex}rc-adaptive-menu>[data-rc-action-overflowed]>:is(button,a[href]),rc-adaptive-menu>:is(button,a[href])[data-rc-action-overflowed]{align-items:center;gap:var(--rc-adaptive-menu-item-gap,var(--rc-item-gap,.5em));box-sizing:border-box;inline-size:100%;min-block-size:var(--rc-adaptive-menu-item-min-block-size,2.5em);padding:var(--rc-adaptive-menu-item-padding-block,var(--rc-item-padding-block,.3em)) var(--rc-adaptive-menu-item-padding-inline,var(--rc-item-padding-inline,.75em));color:inherit;font:inherit;text-align:start;background:0 0;border:none;border-radius:0;text-decoration:none;display:flex}rc-adaptive-menu>rc-button[data-rc-action-overflowed]{--rc-button-block-size:var(--rc-adaptive-menu-item-min-block-size,2.5em);--rc-button-icon-size:100%;--rc-button-touch-target-inline-size:100%;--rc-button-touch-target-block-size:var(--rc-adaptive-menu-item-min-block-size,2.5em);--rc-button-padding-inline:var(--rc-adaptive-menu-item-padding-inline,var(--rc-item-padding-inline,.75em));--rc-button-padding-block:var(--rc-adaptive-menu-item-padding-block,var(--rc-item-padding-block,.3em));--rc-button-radius:0;--rc-button-bg:transparent;--rc-button-color:currentColor;--rc-button-border:0;--rc-button-state-layer-bg:currentColor;--rc-button-progress-color:currentColor;min-block-size:0;min-inline-size:100%;display:block}rc-adaptive-menu>rc-menu-button[data-rc-action-overflowed]{--rc-menu-button-trigger-block-size:var(--rc-adaptive-menu-item-min-block-size,2.5em);--rc-menu-button-icon-size:100%;--rc-menu-button-touch-target-inline-size:100%;--rc-menu-button-touch-target-block-size:var(--rc-adaptive-menu-item-min-block-size,2.5em);--rc-menu-button-trigger-padding-block:var(--rc-adaptive-menu-item-padding-block,var(--rc-item-padding-block,.3em));--rc-menu-button-trigger-padding-inline:var(--rc-adaptive-menu-item-padding-inline,var(--rc-item-padding-inline,.75em));--rc-menu-button-trigger-gap:var(--rc-adaptive-menu-item-gap,var(--rc-item-gap,.5em));--rc-menu-button-trigger-radius:0;--rc-menu-button-trigger-border:0;--rc-menu-button-trigger-background:transparent;--rc-menu-button-trigger-color:currentColor;--rc-menu-button-trigger-hover-color:currentColor;--rc-menu-button-trigger-open-color:currentColor;min-block-size:0;min-inline-size:100%;display:block}rc-adaptive-menu>rc-menu-button[data-rc-action-overflowed]>[slot=trigger]{justify-content:flex-start;inline-size:100%;min-inline-size:100%}rc-adaptive-menu [data-rc-menu-leading],rc-adaptive-menu [data-rc-menu-trailing]{flex:none;justify-content:center;align-items:center;display:inline-flex}rc-adaptive-menu>[data-rc-action-overflowed] [data-rc-menu-leading]{font-size:var(--rc-item-icon-size,inherit);line-height:var(--rc-item-icon-size,inherit)}rc-adaptive-menu [data-rc-menu-label]{flex:auto;min-inline-size:0}rc-adaptive-menu>[data-rc-action-overflowed] [data-rc-menu-label]{font-family:var(--rc-item-font-family,inherit);font-size:var(--rc-item-font-size,inherit);font-weight:var(--rc-item-font-weight,inherit);line-height:var(--rc-item-line-height,inherit);letter-spacing:var(--rc-item-letter-spacing,inherit)}rc-adaptive-menu [data-rc-menu-trailing],rc-adaptive-menu [data-rc-menu-shortcut],rc-adaptive-menu [data-menu-shortcut]{margin-inline-start:auto}}`, F = Object.freeze({
|
|
11
|
+
label: "Actions",
|
|
12
|
+
overflow: "More actions"
|
|
13
|
+
});
|
|
14
|
+
var s;
|
|
15
|
+
const c = (s = class extends y {
|
|
16
|
+
constructor() {
|
|
17
|
+
super(...arguments), this._messages = new k(
|
|
18
|
+
this,
|
|
19
|
+
"rc-adaptive-menu",
|
|
20
|
+
F,
|
|
21
|
+
{
|
|
22
|
+
overrides: () => this.messages
|
|
23
|
+
}
|
|
24
|
+
), this.maxShown = 3, this._defaultOpen = !1, this._openInitialized = !1, this.orientation = "horizontal", this._flow = new z(this), this._authored = /* @__PURE__ */ new Map(), this._applyingSlots = !1, this._restoreFocusWhenClosed = !1, this._focusWhenOpened = null, this._anchor = new O(this, {
|
|
25
|
+
anchor: () => this._$trigger,
|
|
26
|
+
floating: () => this._$popup,
|
|
27
|
+
placement: "block-end-end",
|
|
28
|
+
offset: 4,
|
|
29
|
+
shadowHost: () => this,
|
|
30
|
+
disabled: () => !this.open || !this.hasAttribute("data-overflow")
|
|
31
|
+
}), this._popover = new A(this, { element: () => this._$popup }), this._onSlotChange = () => {
|
|
32
|
+
this._applyingSlots || queueMicrotask(() => {
|
|
33
|
+
this.isConnected && !this._applyingSlots && this._syncActions();
|
|
34
|
+
});
|
|
35
|
+
}, this._onMutation = (e) => {
|
|
36
|
+
if (!(this._applyingSlots || !this.hasUpdated)) {
|
|
37
|
+
if (e.some((t) => t.type === "childList" || t.attributeName === "slot")) {
|
|
38
|
+
this._syncActions();
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
if (e.some((t) => t.attributeName === "data-priority")) {
|
|
42
|
+
this._applySlots();
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
this._syncToolbarTabStops();
|
|
46
|
+
}
|
|
47
|
+
}, this._onFocusIn = (e) => {
|
|
48
|
+
const t = e.composedPath()[0];
|
|
49
|
+
t instanceof HTMLElement && this._promotedFocusTargets().includes(t) && this._syncToolbarTabStops(t);
|
|
50
|
+
}, this._onToolbarNavigate = (e) => {
|
|
51
|
+
this._focusByNavigationAction(e, this._promotedFocusTargets());
|
|
52
|
+
}, this._onTriggerNavigate = (e) => {
|
|
53
|
+
switch (e) {
|
|
54
|
+
case "open-to-first":
|
|
55
|
+
this._requestUserOpen(!0, !1, "first");
|
|
56
|
+
break;
|
|
57
|
+
case "open-to-last":
|
|
58
|
+
this._requestUserOpen(!0, !1, "last");
|
|
59
|
+
break;
|
|
60
|
+
case "escape":
|
|
61
|
+
this._requestUserOpen(!1, !0);
|
|
62
|
+
break;
|
|
63
|
+
}
|
|
64
|
+
}, this._onOverflowNavigate = (e) => {
|
|
65
|
+
if (e === "escape") {
|
|
66
|
+
this._requestUserOpen(!1, !0);
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
this._focusByNavigationAction(e, this._overflowFocusTargets());
|
|
70
|
+
}, this._onTriggerClick = () => {
|
|
71
|
+
this._requestUserOpen(!this.open, !1, "none");
|
|
72
|
+
}, this._onDocumentPointerDown = (e) => {
|
|
73
|
+
this.open && !e.composedPath().includes(this) && this._requestUserOpen(!1, !1);
|
|
74
|
+
}, this._onDocumentKeydown = (e) => {
|
|
75
|
+
this.open && e.key === "Escape" && !e.composedPath().includes(this) && this._requestUserOpen(!1, !1);
|
|
76
|
+
}, this._onPopupClick = (e) => {
|
|
77
|
+
const t = e.composedPath(), o = Array.from(this._authored.entries()).find(
|
|
78
|
+
([n, u]) => n.hasAttribute("data-rc-action-overflowed") && (t.includes(n) || t.includes(u.focusTarget))
|
|
79
|
+
);
|
|
80
|
+
if (!o || this._isDisabled(o[1].focusTarget))
|
|
81
|
+
return;
|
|
82
|
+
const i = o[1].focusTarget;
|
|
83
|
+
t.includes(i) && i.getAttribute("aria-haspopup") === "menu" || this._requestUserOpen(!1, !0);
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
get open() {
|
|
87
|
+
return this._open ?? this._uncontrolledOpen ?? this._defaultOpen;
|
|
88
|
+
}
|
|
89
|
+
set open(e) {
|
|
90
|
+
const t = this.open;
|
|
91
|
+
this._open = e, this._openInitialized = !0, this.requestUpdate("open", t);
|
|
92
|
+
}
|
|
93
|
+
get defaultOpen() {
|
|
94
|
+
return this._defaultOpen;
|
|
95
|
+
}
|
|
96
|
+
set defaultOpen(e) {
|
|
97
|
+
const t = this._defaultOpen;
|
|
98
|
+
this._defaultOpen = e, !this._openInitialized && this._open === void 0 && this._uncontrolledOpen === void 0 && this.requestUpdate("open", t), this.requestUpdate("defaultOpen", t);
|
|
99
|
+
}
|
|
100
|
+
connectedCallback() {
|
|
101
|
+
super.connectedCallback(), s._ensureBaseStyles(this.getRootNode()), this.addEventListener("focusin", this._onFocusIn), this.ownerDocument.addEventListener("pointerdown", this._onDocumentPointerDown), this.ownerDocument.addEventListener("keydown", this._onDocumentKeydown), typeof MutationObserver == "function" && (this._mutationObserver = new MutationObserver(this._onMutation), this._mutationObserver.observe(this, {
|
|
102
|
+
attributeFilter: ["aria-disabled", "data-priority", "disabled", "slot"],
|
|
103
|
+
childList: !0,
|
|
104
|
+
subtree: !0
|
|
105
|
+
})), this.hasUpdated && queueMicrotask(() => {
|
|
106
|
+
this.isConnected && (this._syncActions(), this._syncOpenState());
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
disconnectedCallback() {
|
|
110
|
+
this.removeEventListener("focusin", this._onFocusIn), this.ownerDocument.removeEventListener("pointerdown", this._onDocumentPointerDown), this.ownerDocument.removeEventListener("keydown", this._onDocumentKeydown), this._mutationObserver?.disconnect(), this._mutationObserver = void 0;
|
|
111
|
+
for (const [e, t] of this._authored)
|
|
112
|
+
this._restoreAction(e, t);
|
|
113
|
+
this._authored.clear(), super.disconnectedCallback();
|
|
114
|
+
}
|
|
115
|
+
firstUpdated() {
|
|
116
|
+
this._syncActions(), this._syncOpenState();
|
|
117
|
+
}
|
|
118
|
+
updated(e) {
|
|
119
|
+
e.has("orientation") && this._anchor.setOptions({
|
|
120
|
+
placement: this.orientation === "vertical" ? "inline-end-start" : "block-end-end"
|
|
121
|
+
}), (e.has("maxShown") || e.has("orientation")) && this._applySlots(), e.has("open") && this._syncOpenState();
|
|
122
|
+
}
|
|
123
|
+
/** Original authored action elements in DOM order. */
|
|
124
|
+
get $actions() {
|
|
125
|
+
return this._entriesInDomOrder().map(([e]) => e);
|
|
126
|
+
}
|
|
127
|
+
/** Actions currently shown in the toolbar, in authored DOM order. */
|
|
128
|
+
get $promotedActions() {
|
|
129
|
+
return this.$actions.filter((e) => e.hasAttribute("data-rc-action-promoted"));
|
|
130
|
+
}
|
|
131
|
+
/** Actions currently assigned to the overflow menu, in authored DOM order. */
|
|
132
|
+
get $overflowedActions() {
|
|
133
|
+
return this.$actions.filter((e) => e.hasAttribute("data-rc-action-overflowed"));
|
|
134
|
+
}
|
|
135
|
+
/** Opens the overflow popup silently and optionally focuses an edge action. */
|
|
136
|
+
openMenu(e = "first") {
|
|
137
|
+
this.hasAttribute("data-overflow") && this._setProgrammaticOpen(!0, !1, e);
|
|
138
|
+
}
|
|
139
|
+
/** Closes the overflow popup silently. */
|
|
140
|
+
closeMenu(e = !1) {
|
|
141
|
+
this._setProgrammaticOpen(!1, e);
|
|
142
|
+
}
|
|
143
|
+
/** Toggles the overflow popup silently. */
|
|
144
|
+
toggleMenu(e = "first") {
|
|
145
|
+
!this.open && !this.hasAttribute("data-overflow") || this._setProgrammaticOpen(!this.open, this.open, e);
|
|
146
|
+
}
|
|
147
|
+
render() {
|
|
148
|
+
return x`
|
|
149
|
+
<div
|
|
150
|
+
id="root"
|
|
151
|
+
part="root"
|
|
152
|
+
role="toolbar"
|
|
153
|
+
aria-label=${this.label ?? this._messages.value.label}
|
|
154
|
+
aria-orientation=${T(this.orientation, this._flow.flow)}
|
|
155
|
+
${p(this._onToolbarNavigate, {
|
|
156
|
+
navigationAxis: this.orientation
|
|
157
|
+
})}
|
|
158
|
+
>
|
|
159
|
+
<slot id="actions" @slotchange=${this._onSlotChange}></slot>
|
|
160
|
+
<span id="overflow-trigger-target">
|
|
161
|
+
<button
|
|
162
|
+
id="overflow-trigger"
|
|
163
|
+
part="overflow-trigger"
|
|
164
|
+
type="button"
|
|
165
|
+
aria-haspopup="menu"
|
|
166
|
+
aria-expanded="false"
|
|
167
|
+
aria-controls="popup"
|
|
168
|
+
aria-label=${this._messages.value.overflow}
|
|
169
|
+
title=${this._messages.value.overflow}
|
|
170
|
+
${p(this._onTriggerNavigate, {
|
|
171
|
+
navigationAxis: this.orientation,
|
|
172
|
+
handleNavAxis: !1,
|
|
173
|
+
handleOpenAxis: !0,
|
|
174
|
+
handleEscape: this.open
|
|
175
|
+
})}
|
|
176
|
+
@click=${this._onTriggerClick}
|
|
177
|
+
>
|
|
178
|
+
<slot name="overflow-icon">
|
|
179
|
+
<svg id="overflow-icon" viewBox="0 0 24 24" aria-hidden="true">
|
|
180
|
+
<circle cx="12" cy="5" r="2"></circle>
|
|
181
|
+
<circle cx="12" cy="12" r="2"></circle>
|
|
182
|
+
<circle cx="12" cy="19" r="2"></circle>
|
|
183
|
+
</svg>
|
|
184
|
+
</slot>
|
|
185
|
+
</button>
|
|
186
|
+
</span>
|
|
187
|
+
</div>
|
|
188
|
+
<div
|
|
189
|
+
id="popup"
|
|
190
|
+
part="popup"
|
|
191
|
+
popover="manual"
|
|
192
|
+
role="menu"
|
|
193
|
+
aria-label=${this._messages.value.overflow}
|
|
194
|
+
${p(this._onOverflowNavigate, {
|
|
195
|
+
navigationAxis: "vertical",
|
|
196
|
+
handleEscape: !0
|
|
197
|
+
})}
|
|
198
|
+
@click=${this._onPopupClick}
|
|
199
|
+
>
|
|
200
|
+
<slot id="overflow" name="overflow" @slotchange=${this._onSlotChange}></slot>
|
|
201
|
+
</div>
|
|
202
|
+
`;
|
|
203
|
+
}
|
|
204
|
+
static _ensureBaseStyles(e) {
|
|
205
|
+
if (s._styledRoots.has(e))
|
|
206
|
+
return;
|
|
207
|
+
s._styledRoots.add(e);
|
|
208
|
+
const t = (e instanceof Document ? e : e.ownerDocument).createElement("style");
|
|
209
|
+
t.setAttribute("data-rc-light-dom-base", "rc-adaptive-menu"), t.textContent = M, e instanceof Document ? e.head.append(t) : e.append(t);
|
|
210
|
+
}
|
|
211
|
+
_syncActions() {
|
|
212
|
+
const e = /* @__PURE__ */ new Set();
|
|
213
|
+
for (const t of Array.from(this.children)) {
|
|
214
|
+
if (!(t instanceof HTMLElement) || t.slot === "overflow-icon")
|
|
215
|
+
continue;
|
|
216
|
+
const o = this._authored.get(t), i = o?.slot ?? t.slot;
|
|
217
|
+
if (i && i !== "overflow")
|
|
218
|
+
continue;
|
|
219
|
+
const n = o?.focusTarget ?? this._focusTarget(t);
|
|
220
|
+
n && (e.add(t), o || this._authored.set(t, {
|
|
221
|
+
slot: i,
|
|
222
|
+
focusTarget: n,
|
|
223
|
+
orientation: t.getAttribute("orientation"),
|
|
224
|
+
role: n.getAttribute("role"),
|
|
225
|
+
tabindex: n.getAttribute("tabindex"),
|
|
226
|
+
forcedOverflow: i === "overflow"
|
|
227
|
+
}));
|
|
228
|
+
}
|
|
229
|
+
for (const [t, o] of this._authored)
|
|
230
|
+
e.has(t) || (this._restoreAction(t, o), this._authored.delete(t));
|
|
231
|
+
this._applySlots();
|
|
232
|
+
}
|
|
233
|
+
_entriesInDomOrder() {
|
|
234
|
+
return Array.from(this.children).flatMap((e) => {
|
|
235
|
+
if (!(e instanceof HTMLElement))
|
|
236
|
+
return [];
|
|
237
|
+
const t = this._authored.get(e);
|
|
238
|
+
return t ? [[e, t]] : [];
|
|
239
|
+
});
|
|
240
|
+
}
|
|
241
|
+
/**
|
|
242
|
+
* Assigns each authored action to the default (promoted) or overflow slot.
|
|
243
|
+
* A purely declarative computation from `max-shown`, `data-priority`, and
|
|
244
|
+
* authored `slot` — no size measurement of any kind.
|
|
245
|
+
*/
|
|
246
|
+
_applySlots() {
|
|
247
|
+
const e = this._entriesInDomOrder(), t = (r) => {
|
|
248
|
+
const a = Number(r.dataset.priority ?? 0);
|
|
249
|
+
return Number.isFinite(a) ? a : 0;
|
|
250
|
+
}, o = ([r, a]) => a.forcedOverflow || t(r) < 0, i = e.filter((r) => !o(r)), n = i.map(([r], a) => ({
|
|
251
|
+
action: r,
|
|
252
|
+
index: a,
|
|
253
|
+
priority: t(r)
|
|
254
|
+
})).sort((r, a) => a.priority - r.priority || r.index - a.index), u = Number.isFinite(this.maxShown) ? Math.max(0, Math.trunc(this.maxShown)) : i.length, _ = Math.min(i.length, u), m = new Set(n.slice(0, _).map(({ action: r }) => r)), v = e.map(([r]) => r).filter((r) => !m.has(r)), f = e.find(
|
|
255
|
+
([, r]) => r.focusTarget === this.ownerDocument.activeElement
|
|
256
|
+
)?.[0];
|
|
257
|
+
this.toggleAttribute("data-overflow", v.length > 0), f && v.includes(f) && this._$trigger.focus(), this._applyingSlots = !0;
|
|
258
|
+
for (const [r, a] of e)
|
|
259
|
+
m.has(r) ? (r.slot = "", r.setAttribute("data-rc-action-promoted", ""), r.removeAttribute("data-rc-action-overflowed"), this._restoreOrientation(r, a), this._restoreRole(a)) : (r.slot = "overflow", r.removeAttribute("data-rc-action-promoted"), r.setAttribute("data-rc-action-overflowed", ""), r.matches("rc-menu-button") && r.setAttribute("orientation", "vertical"), a.focusTarget.setAttribute("role", "menuitem"), a.focusTarget.setAttribute("tabindex", "-1"));
|
|
260
|
+
this._syncToolbarTabStops(), queueMicrotask(() => {
|
|
261
|
+
this._applyingSlots = !1;
|
|
262
|
+
}), this._syncOpenState();
|
|
263
|
+
}
|
|
264
|
+
_focusTarget(e) {
|
|
265
|
+
return e.matches($) ? e.querySelector(
|
|
266
|
+
':scope > button, :scope > a[href], :scope > [slot="trigger"]'
|
|
267
|
+
) : e.matches("button, a[href]") ? e : null;
|
|
268
|
+
}
|
|
269
|
+
_promotedFocusTargets() {
|
|
270
|
+
const e = Array.from(this._authored.entries()).filter(([t]) => t.hasAttribute("data-rc-action-promoted")).map(([, t]) => t.focusTarget).filter((t) => g(t));
|
|
271
|
+
return this.hasAttribute("data-overflow") && e.push(this._$trigger), e;
|
|
272
|
+
}
|
|
273
|
+
_overflowFocusTargets() {
|
|
274
|
+
return Array.from(this._authored.entries()).filter(([e]) => e.hasAttribute("data-rc-action-overflowed")).map(([, e]) => e.focusTarget).filter((e) => g(e));
|
|
275
|
+
}
|
|
276
|
+
_syncToolbarTabStops(e) {
|
|
277
|
+
const t = this._promotedFocusTargets(), o = e && t.includes(e) ? e : t[0];
|
|
278
|
+
for (const i of t)
|
|
279
|
+
i.setAttribute("tabindex", i === o ? "0" : "-1");
|
|
280
|
+
}
|
|
281
|
+
_focusByNavigationAction(e, t) {
|
|
282
|
+
const o = this.ownerDocument.activeElement, i = o instanceof HTMLElement ? t.indexOf(o) : -1;
|
|
283
|
+
let n;
|
|
284
|
+
switch (e) {
|
|
285
|
+
case "next":
|
|
286
|
+
n = t[(i + 1) % t.length];
|
|
287
|
+
break;
|
|
288
|
+
case "prev":
|
|
289
|
+
n = t[(i - 1 + t.length) % t.length];
|
|
290
|
+
break;
|
|
291
|
+
case "start":
|
|
292
|
+
n = t[0];
|
|
293
|
+
break;
|
|
294
|
+
case "end":
|
|
295
|
+
n = t.at(-1);
|
|
296
|
+
break;
|
|
297
|
+
}
|
|
298
|
+
n?.focus();
|
|
299
|
+
}
|
|
300
|
+
_setProgrammaticOpen(e, t, o = "none") {
|
|
301
|
+
const i = this.open;
|
|
302
|
+
if (i === e) {
|
|
303
|
+
e && this._focusOverflowEdge(o);
|
|
304
|
+
return;
|
|
305
|
+
}
|
|
306
|
+
this._openInitialized ? this._open = e : this._uncontrolledOpen = e, this._restoreFocusWhenClosed = !e && t, this._focusWhenOpened = e ? o : null, this.requestUpdate("open", i), this._syncOpenState();
|
|
307
|
+
}
|
|
308
|
+
_requestUserOpen(e, t, o = "none") {
|
|
309
|
+
if (this.open !== e) {
|
|
310
|
+
if (this._restoreFocusWhenClosed = !e && t, this._focusWhenOpened = e ? o : null, this._open === void 0) {
|
|
311
|
+
const i = this.open;
|
|
312
|
+
this._uncontrolledOpen = e, this.requestUpdate("open", i), this._syncOpenState();
|
|
313
|
+
}
|
|
314
|
+
this.dispatchEvent(
|
|
315
|
+
new CustomEvent("rc-adaptive-menu-toggle", {
|
|
316
|
+
bubbles: !0,
|
|
317
|
+
composed: !0,
|
|
318
|
+
detail: { open: e }
|
|
319
|
+
})
|
|
320
|
+
);
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
_syncOpenState() {
|
|
324
|
+
if (this._$popup?.isConnected) {
|
|
325
|
+
if (this.open && this.hasAttribute("data-overflow")) {
|
|
326
|
+
if (this._popover.sync(!0), this._$trigger.setAttribute("aria-expanded", "true"), this._anchor.update(), this._focusWhenOpened !== null) {
|
|
327
|
+
const t = this._focusWhenOpened;
|
|
328
|
+
this._focusWhenOpened = null, requestAnimationFrame(() => this._focusOverflowEdge(t));
|
|
329
|
+
}
|
|
330
|
+
return;
|
|
331
|
+
}
|
|
332
|
+
this._popover.sync(!1), this._$trigger.setAttribute("aria-expanded", "false"), this._restoreFocusWhenClosed && (this._restoreFocusWhenClosed = !1, this._$trigger.focus());
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
_focusOverflowEdge(e) {
|
|
336
|
+
if (!this.open || e === "none")
|
|
337
|
+
return;
|
|
338
|
+
const t = this._overflowFocusTargets();
|
|
339
|
+
(e === "last" ? t.at(-1) : t[0])?.focus();
|
|
340
|
+
}
|
|
341
|
+
_restoreAction(e, t) {
|
|
342
|
+
e.slot = t.slot, e.removeAttribute("data-rc-action-promoted"), e.removeAttribute("data-rc-action-overflowed"), this._restoreOrientation(e, t), this._restoreRole(t), t.tabindex === null ? t.focusTarget.removeAttribute("tabindex") : t.focusTarget.setAttribute("tabindex", t.tabindex);
|
|
343
|
+
}
|
|
344
|
+
_restoreOrientation(e, t) {
|
|
345
|
+
e.matches("rc-menu-button") && (t.orientation === null ? e.removeAttribute("orientation") : e.setAttribute("orientation", t.orientation));
|
|
346
|
+
}
|
|
347
|
+
_restoreRole(e) {
|
|
348
|
+
e.role === null ? e.focusTarget.removeAttribute("role") : e.focusTarget.setAttribute("role", e.role);
|
|
349
|
+
}
|
|
350
|
+
_isDisabled(e) {
|
|
351
|
+
return e instanceof HTMLButtonElement && e.disabled || e.getAttribute("aria-disabled") === "true";
|
|
352
|
+
}
|
|
353
|
+
}, s.styles = C, s._styledRoots = /* @__PURE__ */ new WeakSet(), s);
|
|
354
|
+
l([
|
|
355
|
+
d({ attribute: !1 })
|
|
356
|
+
], c.prototype, "messages", 2);
|
|
357
|
+
l([
|
|
358
|
+
d({ type: String })
|
|
359
|
+
], c.prototype, "label", 2);
|
|
360
|
+
l([
|
|
361
|
+
d({ type: Number, attribute: "max-shown" })
|
|
362
|
+
], c.prototype, "maxShown", 2);
|
|
363
|
+
l([
|
|
364
|
+
d({ type: Boolean, reflect: !0 })
|
|
365
|
+
], c.prototype, "open", 1);
|
|
366
|
+
l([
|
|
367
|
+
d({ type: Boolean, attribute: "default-open" })
|
|
368
|
+
], c.prototype, "defaultOpen", 1);
|
|
369
|
+
l([
|
|
370
|
+
d({ type: String, reflect: !0 })
|
|
371
|
+
], c.prototype, "orientation", 2);
|
|
372
|
+
l([
|
|
373
|
+
b("#overflow-trigger")
|
|
374
|
+
], c.prototype, "_$trigger", 2);
|
|
375
|
+
l([
|
|
376
|
+
b("#popup")
|
|
377
|
+
], c.prototype, "_$popup", 2);
|
|
378
|
+
let U = c;
|
|
379
|
+
export {
|
|
380
|
+
F as D,
|
|
381
|
+
U as R
|
|
382
|
+
};
|
|
383
|
+
//# sourceMappingURL=rc-adaptive-menu-DlBZgaWr.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rc-adaptive-menu-DlBZgaWr.js","sources":["../src/rc-adaptive-menu.styles.ts","../src/rc-adaptive-menu.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const adaptiveMenuStyles = css`\n :host {\n display: block;\n inline-size: fit-content;\n /*\n * Raised past 100% by exactly the overlap amount so the cap only ever\n * bounds the host's own visible content, not the content plus the\n * intentional negative-margin overhang below. Inside a shrink-to-fit\n * flex/grid ancestor (a toolbar's trailing group, for example) the\n * ancestor's own auto size already accounts for the negative margin,\n * so a plain 100% cap would re-clamp the host down to that\n * already-shrunk size and silently cancel the overlap out from under\n * it — confirmed live: with a plain 100% cap the host visibly shrank\n * instead of overlapping.\n */\n max-inline-size: calc(\n 100% + var(--rc-adaptive-menu-touch-target-overlap-inline-start, 0px) +\n var(--rc-adaptive-menu-touch-target-overlap-inline-end, 0px)\n );\n min-inline-size: 0;\n /*\n * Zero by default. The overflow trigger's own touch-target inflation\n * (see #overflow-trigger-target below) is what typically leaves dead\n * space at a real edge, such as a toolbar's trailing-most control — but\n * the margin has to live on the host, not on that internal wrapper:\n * #root just lays out flush with the host's own edges, so a margin\n * placed there has no visible effect on where the host itself renders\n * in an outer flex/grid container. The host's own box is\n * fit-content-sized and is what an outer container's own trailing\n * alignment actually positions, so this is the point that needs to\n * move. A theme or consumer sets one of these on a host that sits at a\n * real edge (no neighbor on that side) to let it overlap into whatever\n * sits just outside, such as a container's own edge padding, instead of\n * also reserving layout space there — the same pattern as rc-button's\n * and rc-menu-button's own touch-target overlap tokens.\n */\n margin-inline-start: calc(-1 * var(--rc-adaptive-menu-touch-target-overlap-inline-start, 0px));\n margin-inline-end: calc(-1 * var(--rc-adaptive-menu-touch-target-overlap-inline-end, 0px));\n }\n\n #root {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--rc-adaptive-menu-gap, var(--rc-control-gap, 0.25em));\n min-inline-size: 0;\n max-inline-size: 100%;\n }\n\n :host([orientation='vertical']) {\n inline-size: 100%;\n }\n\n :host([orientation='vertical']) #root {\n flex-direction: column;\n align-items: stretch;\n min-block-size: 0;\n inline-size: 100%;\n block-size: 100%;\n }\n\n #actions,\n #overflow {\n display: contents;\n }\n\n #overflow-trigger-target {\n position: relative;\n flex: none;\n display: grid;\n place-items: center;\n box-sizing: border-box;\n min-inline-size: var(\n --rc-adaptive-menu-touch-target-inline-size,\n var(--rc-adaptive-menu-touch-target-block-size, 3rem)\n );\n min-block-size: var(--rc-adaptive-menu-touch-target-block-size, 3rem);\n }\n\n #overflow-trigger {\n position: relative;\n display: inline-grid;\n place-items: center;\n box-sizing: border-box;\n min-inline-size: var(--rc-adaptive-menu-trigger-inline-size, 2.5em);\n min-block-size: var(--rc-adaptive-menu-trigger-block-size, 2.5em);\n padding: var(--rc-adaptive-menu-trigger-padding, 0.5em);\n border: var(--rc-adaptive-menu-trigger-border, 1px solid ButtonBorder);\n border-radius: var(--rc-adaptive-menu-trigger-radius, var(--rc-control-radius, 0));\n background: var(--rc-adaptive-menu-trigger-background, ButtonFace);\n color: var(--rc-adaptive-menu-trigger-color, ButtonText);\n box-shadow: var(--rc-adaptive-menu-trigger-shadow, none);\n font: inherit;\n line-height: 1;\n cursor: pointer;\n }\n\n #overflow-trigger:hover {\n background: var(\n --rc-adaptive-menu-trigger-hover-background,\n var(--rc-adaptive-menu-trigger-background, ButtonFace)\n );\n }\n\n #overflow-trigger:active {\n box-shadow: var(\n --rc-adaptive-menu-trigger-active-shadow,\n var(--rc-adaptive-menu-trigger-shadow, none)\n );\n }\n\n #overflow-trigger::before {\n content: '';\n position: absolute;\n inset-block: calc((var(--rc-adaptive-menu-touch-target-block-size, 3rem) - 100%) / -2);\n inset-inline: calc(\n (\n var(\n --rc-adaptive-menu-touch-target-inline-size,\n var(--rc-adaptive-menu-touch-target-block-size, 3rem)\n ) -\n 100%\n ) /\n -2\n );\n }\n\n :host(:not([data-overflow])) #overflow-trigger-target {\n position: fixed;\n visibility: hidden;\n pointer-events: none;\n }\n\n #overflow-trigger:focus-visible {\n outline: var(--rc-focus-ring, auto);\n outline-offset: var(--rc-focus-ring-offset, 0);\n }\n\n #overflow-icon {\n inline-size: var(--rc-adaptive-menu-icon-size, 1.5em);\n block-size: var(--rc-adaptive-menu-icon-size, 1.5em);\n fill: currentColor;\n }\n\n #popup {\n position: fixed;\n display: none;\n flex-direction: column;\n box-sizing: border-box;\n min-inline-size: var(--rc-adaptive-menu-popup-min-inline-size, 10em);\n max-inline-size: var(--rc-adaptive-menu-popup-max-inline-size, calc(100dvi - 0.5rem));\n max-block-size: var(--rc-adaptive-menu-popup-max-block-size, calc(100dvb - 0.5rem));\n margin: 0;\n padding-block: var(\n --rc-adaptive-menu-popup-padding-block,\n var(--rc-popup-padding-block, 0.25em)\n );\n border: var(\n --rc-adaptive-menu-popup-border,\n var(--rc-popup-border, var(--rc-border, 1px solid ButtonBorder))\n );\n border-radius: var(\n --rc-adaptive-menu-popup-radius,\n var(--rc-popup-radius, var(--rc-radius-sm, 0))\n );\n background: var(\n --rc-adaptive-menu-popup-background,\n var(--rc-popup-background, var(--rc-surface, Canvas))\n );\n box-shadow: var(\n --rc-adaptive-menu-popup-shadow,\n var(\n --rc-popup-shadow,\n var(--rc-shadow, 0 2px 8px color-mix(in srgb, CanvasText 15%, transparent))\n )\n );\n color: var(\n --rc-adaptive-menu-popup-color,\n var(--rc-popup-color, var(--rc-field-text, CanvasText))\n );\n overflow: auto;\n overscroll-behavior: contain;\n scrollbar-gutter: stable;\n }\n\n #popup:is(:popover-open, [data-rc-popover-fallback-open]) {\n display: flex;\n }\n`;\n\nexport default adaptiveMenuStyles;\n","import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport {\n AnchorController,\n MessagesController,\n cssText,\n FlowController,\n isFocusable,\n type KeyboardNavigationAction,\n keyNavigation,\n PopoverController,\n renderedOrientation,\n} from '@rcarls/rc-common';\n\nimport adaptiveMenuStyles from './rc-adaptive-menu.styles.js';\n\n/** Detail payload for the `rc-adaptive-menu-toggle` event. */\nexport interface RCAdaptiveMenuToggleEvent {\n /** The open state requested by the user. */\n open: boolean;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'rc-adaptive-menu': RCAdaptiveMenu;\n }\n\n interface HTMLElementEventMap {\n 'rc-adaptive-menu-toggle': CustomEvent<RCAdaptiveMenuToggleEvent>;\n }\n}\n\ntype AuthoredState = {\n slot: string;\n focusTarget: HTMLElement;\n orientation: string | null;\n role: string | null;\n tabindex: string | null;\n forcedOverflow: boolean;\n};\n\nconst ACTION_WRAPPERS = 'rc-button, rc-chip, rc-menu-button';\n\nconst LIGHT_DOM_CSS = cssText`\n@layer rc-base {\n rc-adaptive-menu > [data-rc-action-promoted],\n rc-adaptive-menu > [data-rc-action-overflowed] {\n box-sizing: border-box;\n min-inline-size: 0;\n }\n\n rc-adaptive-menu > [data-rc-action-overflowed] {\n display: flex;\n inline-size: 100%;\n }\n\n rc-adaptive-menu > [data-rc-action-overflowed] > :is(button, a[href]),\n rc-adaptive-menu > :is(button, a[href])[data-rc-action-overflowed] {\n display: flex;\n align-items: center;\n gap: var(--rc-adaptive-menu-item-gap, var(--rc-item-gap, 0.5em));\n box-sizing: border-box;\n inline-size: 100%;\n min-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);\n padding: var(--rc-adaptive-menu-item-padding-block, var(--rc-item-padding-block, 0.3em))\n var(--rc-adaptive-menu-item-padding-inline, var(--rc-item-padding-inline, 0.75em));\n border: none;\n border-radius: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: start;\n text-decoration: none;\n }\n\n /*\n * Overflowed rc-button and rc-menu-button wrappers render as menu rows.\n * Their own tokens map onto the item tokens so a theme sizes every row\n * from one place.\n */\n rc-adaptive-menu > rc-button[data-rc-action-overflowed] {\n display: block;\n min-inline-size: 100%;\n min-block-size: 0;\n --rc-button-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);\n --rc-button-icon-size: 100%;\n --rc-button-touch-target-inline-size: 100%;\n --rc-button-touch-target-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);\n --rc-button-padding-inline: var(--rc-adaptive-menu-item-padding-inline, var(--rc-item-padding-inline, 0.75em));\n --rc-button-padding-block: var(--rc-adaptive-menu-item-padding-block, var(--rc-item-padding-block, 0.3em));\n --rc-button-radius: 0;\n --rc-button-bg: transparent;\n --rc-button-color: currentColor;\n --rc-button-border: 0;\n --rc-button-state-layer-bg: currentColor;\n --rc-button-progress-color: currentColor;\n }\n\n rc-adaptive-menu > rc-menu-button[data-rc-action-overflowed] {\n display: block;\n min-inline-size: 100%;\n min-block-size: 0;\n --rc-menu-button-trigger-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);\n --rc-menu-button-icon-size: 100%;\n --rc-menu-button-touch-target-inline-size: 100%;\n --rc-menu-button-touch-target-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);\n --rc-menu-button-trigger-padding-block: var(--rc-adaptive-menu-item-padding-block, var(--rc-item-padding-block, 0.3em));\n --rc-menu-button-trigger-padding-inline: var(--rc-adaptive-menu-item-padding-inline, var(--rc-item-padding-inline, 0.75em));\n --rc-menu-button-trigger-gap: var(--rc-adaptive-menu-item-gap, var(--rc-item-gap, 0.5em));\n --rc-menu-button-trigger-radius: 0;\n --rc-menu-button-trigger-border: 0;\n --rc-menu-button-trigger-background: transparent;\n --rc-menu-button-trigger-color: currentColor;\n --rc-menu-button-trigger-hover-color: currentColor;\n --rc-menu-button-trigger-open-color: currentColor;\n }\n\n rc-adaptive-menu > rc-menu-button[data-rc-action-overflowed] > [slot='trigger'] {\n justify-content: flex-start;\n inline-size: 100%;\n min-inline-size: 100%;\n }\n\n rc-adaptive-menu [data-rc-menu-leading],\n rc-adaptive-menu [data-rc-menu-trailing] {\n flex: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n rc-adaptive-menu > [data-rc-action-overflowed] [data-rc-menu-leading] {\n font-size: var(--rc-item-icon-size, inherit);\n line-height: var(--rc-item-icon-size, inherit);\n }\n\n rc-adaptive-menu [data-rc-menu-label] {\n flex: 1 1 auto;\n min-inline-size: 0;\n }\n\n rc-adaptive-menu > [data-rc-action-overflowed] [data-rc-menu-label] {\n font-family: var(--rc-item-font-family, inherit);\n font-size: var(--rc-item-font-size, inherit);\n font-weight: var(--rc-item-font-weight, inherit);\n line-height: var(--rc-item-line-height, inherit);\n letter-spacing: var(--rc-item-letter-spacing, inherit);\n }\n\n rc-adaptive-menu [data-rc-menu-trailing],\n rc-adaptive-menu [data-rc-menu-shortcut],\n rc-adaptive-menu [data-menu-shortcut] {\n margin-inline-start: auto;\n }\n}\n`;\n\n/** Built-in text of `rc-adaptive-menu`. */\nexport interface RCAdaptiveMenuMessages {\n /** Default accessible name of the toolbar, when `label` is unset. */\n label: string;\n /** Accessible name of the overflow trigger and popup. */\n overflow: string;\n}\n\nexport const DEFAULT_ADAPTIVE_MENU_MESSAGES: Readonly<RCAdaptiveMenuMessages> = Object.freeze({\n label: 'Actions',\n overflow: 'More actions',\n});\n\ndeclare module '@rcarls/rc-common' {\n interface RcMessageCatalog {\n 'rc-adaptive-menu': RCAdaptiveMenuMessages;\n }\n}\n\n/**\n * Priority-aware action toolbar that preserves authored light-DOM controls while moving\n * lower-priority actions into an overflow menu.\n *\n * Actions remain the same connected nodes in the same parent. The component\n * changes only their slot assignment and component-owned ARIA/focus state, so\n * framework listeners, native form behavior, dialog invokers, and references\n * continue to work after an action moves.\n *\n * Direct native buttons and links are supported. `rc-button`, `rc-chip`, and\n * `rc-menu-button` wrappers participate through their direct native trigger.\n * DOM order is the default priority; a numeric `data-priority` promotes larger\n * values first. Authoring `slot=\"overflow\"` keeps an action overflow-only. A\n * negative `data-priority` has the same effect: the action always overflows,\n * regardless of `max-shown`. The overflow menu itself renders in authored DOM\n * order (native slot distribution, not JS-ordered), so author negative-priority\n * actions after normal-priority ones to have them appear last.\n *\n * This is a purely declarative computation from authored state (`max-shown`,\n * `data-priority`, and authored `slot`) re-evaluated whenever that authored\n * state changes. The component performs no runtime size measurement: it does\n * not observe its own or its children's rendered size, and `max-shown`\n * actions are promoted regardless of whether they visually fit the available\n * space. A consumer that needs the promoted count to react to available\n * space — a responsive breakpoint, a container query, a window size class —\n * owns that decision itself and writes the resulting `max-shown` value down.\n *\n * Built-in text (the toolbar and overflow names) follows the element's own `lang`, else\n * `<html lang>`: per element through `messages`, or for every instance\n * through `registerMessages()` from `@rcarls/rc-common` under `rc-adaptive-menu`.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-adaptive-menu rc-adaptive-menu docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/ WAI-ARIA Toolbar pattern}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ WAI-ARIA Menu Button pattern}\n *\n * @slot default - Direct native actions or supported rc action wrappers.\n * @slot overflow - Overflow-only actions and actions re-slotted by the component.\n * @slot overflow-icon - Optional decorative icon for the overflow trigger.\n *\n * @fires rc-adaptive-menu-toggle - Fired when user interaction requests a change to `open`.\n *\n * @attr label - Accessible label for the toolbar. Defaults to the `label` message, `Actions`.\n * @attr max-shown - Maximum number of authored actions promoted ahead of the overflow trigger.\n * A static declarative cap, not a measurement of available space — actions beyond it move to\n * the overflow menu regardless of whether they'd visually fit. Defaults to 3.\n * @attr open - Whether the overflow menu is visible. Host writes are silent.\n * @attr default-open - Initial open state for uncontrolled usage.\n * @attr orientation - Toolbar layout along the inline (`horizontal`) or block (`vertical`) axis.\n * `aria-orientation` and the arrow keys follow the orientation actually rendered, which turns\n * over in vertical writing modes.\n *\n * @csspart root - Toolbar container.\n * @csspart overflow-trigger - Button that opens the overflow menu.\n * @csspart popup - Overflow menu popover.\n *\n * @cssprop [--rc-adaptive-menu-gap=var(--rc-control-gap)] - Gap between promoted actions and the overflow trigger.\n * @cssprop [--rc-adaptive-menu-trigger-inline-size=2.5em] - Overflow trigger minimum inline size.\n * @cssprop [--rc-adaptive-menu-trigger-block-size=2.5em] - Overflow trigger minimum block size.\n * @cssprop [--rc-adaptive-menu-touch-target-inline-size] - Minimum overflow trigger activation-area inline size. Defers to `--rc-adaptive-menu-touch-target-block-size` when unset.\n * @cssprop [--rc-adaptive-menu-touch-target-block-size=3rem] - Minimum overflow trigger activation-area block size.\n * @cssprop [--rc-adaptive-menu-touch-target-overlap-inline-start=0px] - Zero by default. A theme\n * or consumer sets this when the overflow trigger sits at a real leading edge (no neighbor on\n * that side) to let its touch-target inflation overlap into whatever sits just outside the\n * host, such as a container's own edge padding, instead of also reserving layout space there.\n * @cssprop [--rc-adaptive-menu-touch-target-overlap-inline-end=0px] - The trailing-edge\n * counterpart to `--rc-adaptive-menu-touch-target-overlap-inline-start` — the overflow trigger\n * is conventionally the trailing-most control in a toolbar, so this is the one commonly set.\n * @cssprop [--rc-adaptive-menu-trigger-padding=0.5em] - Overflow trigger padding.\n * @cssprop [--rc-adaptive-menu-trigger-border=1px solid ButtonBorder] - Overflow trigger border.\n * @cssprop [--rc-adaptive-menu-trigger-radius=var(--rc-control-radius)] - Overflow trigger radius.\n * @cssprop [--rc-adaptive-menu-trigger-background=ButtonFace] - Overflow trigger background.\n * @cssprop [--rc-adaptive-menu-trigger-color=ButtonText] - Overflow trigger color.\n * @cssprop [--rc-adaptive-menu-trigger-hover-background=var(--rc-adaptive-menu-trigger-background)] - Overflow trigger background under the pointer.\n * @cssprop [--rc-adaptive-menu-trigger-shadow=none] - Overflow trigger box shadow.\n * @cssprop [--rc-adaptive-menu-trigger-active-shadow=var(--rc-adaptive-menu-trigger-shadow)] - Overflow trigger box shadow while pressed.\n * @cssprop [--rc-item-font-family=inherit] - Overflow action label font family; shared with menu and listbox items.\n * @cssprop [--rc-item-font-size=inherit] - Overflow action label font size; shared with menu and listbox items.\n * @cssprop [--rc-item-font-weight=inherit] - Overflow action label font weight; shared with menu and listbox items.\n * @cssprop [--rc-item-line-height=inherit] - Overflow action label line height; shared with menu and listbox items.\n * @cssprop [--rc-item-letter-spacing=inherit] - Overflow action label letter spacing; shared with menu and listbox items.\n * @cssprop [--rc-item-icon-size=inherit] - Overflow action leading icon size; shared with menu items.\n * @cssprop [--rc-adaptive-menu-icon-size=1.5em] - Default overflow icon size.\n * @cssprop [--rc-adaptive-menu-popup-min-inline-size=10em] - Overflow popup minimum inline size.\n * @cssprop [--rc-adaptive-menu-popup-max-inline-size=calc(100dvi - 0.5rem)] - Overflow popup viewport-aware inline limit.\n * @cssprop [--rc-adaptive-menu-popup-max-block-size=calc(100dvb - 0.5rem)] - Overflow popup viewport-aware block limit.\n * @cssprop [--rc-adaptive-menu-popup-padding-block=var(--rc-popup-padding-block)] - Overflow popup block padding.\n * @cssprop [--rc-adaptive-menu-popup-border=var(--rc-popup-border)] - Overflow popup border.\n * @cssprop [--rc-adaptive-menu-popup-radius=var(--rc-popup-radius)] - Overflow popup radius.\n * @cssprop [--rc-adaptive-menu-popup-background=var(--rc-popup-background)] - Overflow popup background.\n * @cssprop [--rc-adaptive-menu-popup-shadow=var(--rc-popup-shadow)] - Overflow popup shadow.\n * @cssprop [--rc-adaptive-menu-popup-color=var(--rc-popup-color)] - Overflow popup foreground.\n * @cssprop [--rc-adaptive-menu-item-min-block-size=2.5em] - Overflow action minimum block size.\n * @cssprop [--rc-adaptive-menu-item-padding-block=var(--rc-item-padding-block)] - Overflow action block padding.\n * @cssprop [--rc-adaptive-menu-item-padding-inline=var(--rc-item-padding-inline)] - Overflow action inline padding.\n * @cssprop [--rc-adaptive-menu-item-gap=var(--rc-item-gap)] - Overflow action content gap.\n */\nexport class RCAdaptiveMenu extends LitElement {\n static override styles = adaptiveMenuStyles;\n\n /** Built-in text overrides; unset keys fall back to registered text, then English. */\n @property({ attribute: false })\n messages: Partial<RCAdaptiveMenuMessages> | undefined;\n\n private readonly _messages = new MessagesController(\n this,\n 'rc-adaptive-menu',\n DEFAULT_ADAPTIVE_MENU_MESSAGES,\n {\n overrides: () => this.messages,\n },\n );\n\n private static readonly _styledRoots = new WeakSet<Document | ShadowRoot>();\n\n /** Accessible label for the toolbar. Defaults to the `label` message. */\n @property({ type: String })\n label: string | undefined;\n\n /**\n * Maximum authored actions promoted ahead of the overflow trigger. A\n * static declarative cap, re-evaluated whenever it changes — not a\n * measurement of available space.\n */\n @property({ type: Number, attribute: 'max-shown' })\n maxShown = 3;\n\n private _open: boolean | undefined;\n private _defaultOpen = false;\n private _uncontrolledOpen: boolean | undefined;\n private _openInitialized = false;\n\n /** Whether the overflow menu is visible. Host writes are silent. */\n @property({ type: Boolean, reflect: true })\n get open(): boolean {\n return this._open ?? this._uncontrolledOpen ?? this._defaultOpen;\n }\n\n set open(value: boolean | undefined) {\n const oldValue = this.open;\n\n this._open = value;\n this._openInitialized = true;\n this.requestUpdate('open', oldValue);\n }\n\n /** Initial open state for uncontrolled usage. */\n @property({ type: Boolean, attribute: 'default-open' })\n get defaultOpen(): boolean {\n return this._defaultOpen;\n }\n\n set defaultOpen(value: boolean) {\n const oldValue = this._defaultOpen;\n\n this._defaultOpen = value;\n\n if (\n !this._openInitialized &&\n this._open === undefined &&\n this._uncontrolledOpen === undefined\n ) {\n this.requestUpdate('open', oldValue);\n }\n\n this.requestUpdate('defaultOpen', oldValue);\n }\n\n /** Toolbar layout and arrow-key navigation axis. */\n @property({ type: String, reflect: true })\n orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /** Keeps the exposed aria-orientation on the orientation actually rendered. */\n protected readonly _flow = new FlowController(this);\n\n @query('#overflow-trigger')\n private _$trigger!: HTMLButtonElement;\n\n @query('#popup')\n private _$popup!: HTMLDivElement;\n\n private readonly _authored = new Map<HTMLElement, AuthoredState>();\n private _mutationObserver?: MutationObserver;\n private _applyingSlots = false;\n private _restoreFocusWhenClosed = false;\n private _focusWhenOpened: 'first' | 'last' | 'none' | null = null;\n\n private readonly _anchor = new AnchorController(this, {\n anchor: () => this._$trigger,\n floating: () => this._$popup,\n placement: 'block-end-end',\n offset: 4,\n shadowHost: () => this,\n disabled: () => !this.open || !this.hasAttribute('data-overflow'),\n });\n\n private readonly _popover = new PopoverController(this, { element: () => this._$popup });\n\n override connectedCallback(): void {\n super.connectedCallback();\n RCAdaptiveMenu._ensureBaseStyles(this.getRootNode() as Document | ShadowRoot);\n this.addEventListener('focusin', this._onFocusIn);\n this.ownerDocument.addEventListener('pointerdown', this._onDocumentPointerDown);\n this.ownerDocument.addEventListener('keydown', this._onDocumentKeydown);\n\n if (typeof MutationObserver === 'function') {\n this._mutationObserver = new MutationObserver(this._onMutation);\n\n this._mutationObserver.observe(this, {\n attributeFilter: ['aria-disabled', 'data-priority', 'disabled', 'slot'],\n childList: true,\n subtree: true,\n });\n }\n\n if (this.hasUpdated) {\n queueMicrotask(() => {\n if (!this.isConnected) {\n return;\n }\n\n this._syncActions();\n this._syncOpenState();\n });\n }\n }\n\n override disconnectedCallback(): void {\n this.removeEventListener('focusin', this._onFocusIn);\n this.ownerDocument.removeEventListener('pointerdown', this._onDocumentPointerDown);\n this.ownerDocument.removeEventListener('keydown', this._onDocumentKeydown);\n this._mutationObserver?.disconnect();\n this._mutationObserver = undefined;\n\n for (const [action, state] of this._authored) {\n this._restoreAction(action, state);\n }\n\n this._authored.clear();\n super.disconnectedCallback();\n }\n\n protected override firstUpdated(): void {\n this._syncActions();\n this._syncOpenState();\n\n if (import.meta.env.DEV && this.children.length === 0) {\n console.warn(\n '[rc-adaptive-menu] No direct actions found. Place native buttons, links, or supported rc action wrappers directly inside the component.',\n this,\n );\n }\n }\n\n protected override updated(changed: Map<PropertyKey, unknown>): void {\n if (changed.has('orientation')) {\n this._anchor.setOptions({\n placement: this.orientation === 'vertical' ? 'inline-end-start' : 'block-end-end',\n });\n }\n\n if (changed.has('maxShown') || changed.has('orientation')) {\n this._applySlots();\n }\n\n if (changed.has('open')) {\n this._syncOpenState();\n }\n }\n\n /** Original authored action elements in DOM order. */\n get $actions(): HTMLElement[] {\n return this._entriesInDomOrder().map(([action]) => action);\n }\n\n /** Actions currently shown in the toolbar, in authored DOM order. */\n get $promotedActions(): HTMLElement[] {\n return this.$actions.filter((action) => action.hasAttribute('data-rc-action-promoted'));\n }\n\n /** Actions currently assigned to the overflow menu, in authored DOM order. */\n get $overflowedActions(): HTMLElement[] {\n return this.$actions.filter((action) => action.hasAttribute('data-rc-action-overflowed'));\n }\n\n /** Opens the overflow popup silently and optionally focuses an edge action. */\n openMenu(focus: 'first' | 'last' | 'none' = 'first'): void {\n if (!this.hasAttribute('data-overflow')) {\n return;\n }\n\n this._setProgrammaticOpen(true, false, focus);\n }\n\n /** Closes the overflow popup silently. */\n closeMenu(returnFocus = false): void {\n this._setProgrammaticOpen(false, returnFocus);\n }\n\n /** Toggles the overflow popup silently. */\n toggleMenu(focus: 'first' | 'last' | 'none' = 'first'): void {\n if (!this.open && !this.hasAttribute('data-overflow')) {\n return;\n }\n\n this._setProgrammaticOpen(!this.open, this.open, focus);\n }\n\n protected override render() {\n return html`\n <div\n id=\"root\"\n part=\"root\"\n role=\"toolbar\"\n aria-label=${this.label ?? this._messages.value.label}\n aria-orientation=${renderedOrientation(this.orientation, this._flow.flow)}\n ${keyNavigation(this._onToolbarNavigate, {\n navigationAxis: this.orientation,\n })}\n >\n <slot id=\"actions\" @slotchange=${this._onSlotChange}></slot>\n <span id=\"overflow-trigger-target\">\n <button\n id=\"overflow-trigger\"\n part=\"overflow-trigger\"\n type=\"button\"\n aria-haspopup=\"menu\"\n aria-expanded=\"false\"\n aria-controls=\"popup\"\n aria-label=${this._messages.value.overflow}\n title=${this._messages.value.overflow}\n ${keyNavigation(this._onTriggerNavigate, {\n navigationAxis: this.orientation,\n handleNavAxis: false,\n handleOpenAxis: true,\n handleEscape: this.open,\n })}\n @click=${this._onTriggerClick}\n >\n <slot name=\"overflow-icon\">\n <svg id=\"overflow-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"5\" r=\"2\"></circle>\n <circle cx=\"12\" cy=\"12\" r=\"2\"></circle>\n <circle cx=\"12\" cy=\"19\" r=\"2\"></circle>\n </svg>\n </slot>\n </button>\n </span>\n </div>\n <div\n id=\"popup\"\n part=\"popup\"\n popover=\"manual\"\n role=\"menu\"\n aria-label=${this._messages.value.overflow}\n ${keyNavigation(this._onOverflowNavigate, {\n navigationAxis: 'vertical',\n handleEscape: true,\n })}\n @click=${this._onPopupClick}\n >\n <slot id=\"overflow\" name=\"overflow\" @slotchange=${this._onSlotChange}></slot>\n </div>\n `;\n }\n\n private static _ensureBaseStyles(root: Document | ShadowRoot): void {\n if (RCAdaptiveMenu._styledRoots.has(root)) {\n return;\n }\n\n RCAdaptiveMenu._styledRoots.add(root);\n\n const $style = (root instanceof Document ? root : root.ownerDocument).createElement('style');\n\n $style.setAttribute('data-rc-light-dom-base', 'rc-adaptive-menu');\n $style.textContent = LIGHT_DOM_CSS;\n\n if (root instanceof Document) {\n root.head.append($style);\n } else {\n root.append($style);\n }\n }\n\n private _onSlotChange = (): void => {\n if (this._applyingSlots) {\n return;\n }\n\n queueMicrotask(() => {\n if (this.isConnected && !this._applyingSlots) {\n this._syncActions();\n }\n });\n };\n\n private _onMutation = (records: MutationRecord[]): void => {\n // Before the first render the shadow trigger doesn't exist yet, and\n // firstUpdated() syncs every action anyway.\n if (this._applyingSlots || !this.hasUpdated) {\n return;\n }\n\n if (records.some((record) => record.type === 'childList' || record.attributeName === 'slot')) {\n this._syncActions();\n\n return;\n }\n\n // A data-priority change reorders which actions are promoted; other\n // watched attributes (aria-disabled, disabled) don't affect slotting.\n if (records.some((record) => record.attributeName === 'data-priority')) {\n this._applySlots();\n\n return;\n }\n\n this._syncToolbarTabStops();\n };\n\n private _syncActions(): void {\n const current = new Set<HTMLElement>();\n\n for (const $child of Array.from(this.children)) {\n if (!($child instanceof HTMLElement) || $child.slot === 'overflow-icon') {\n continue;\n }\n\n const existing = this._authored.get($child);\n const authoredSlot = existing?.slot ?? $child.slot;\n\n if (authoredSlot && authoredSlot !== 'overflow') {\n if (import.meta.env.DEV && !existing) {\n console.warn(\n `[rc-adaptive-menu] Ignoring a child with the incompatible authored slot \"${authoredSlot}\". Actions may use only the default or overflow slot.`,\n $child,\n );\n }\n\n continue;\n }\n\n const $focusTarget = existing?.focusTarget ?? this._focusTarget($child);\n\n if (!$focusTarget) {\n if (import.meta.env.DEV && !existing) {\n console.warn(\n '[rc-adaptive-menu] Ignoring a direct child without a supported focusable action.',\n $child,\n );\n }\n\n continue;\n }\n\n current.add($child);\n\n if (!existing) {\n this._authored.set($child, {\n slot: authoredSlot,\n focusTarget: $focusTarget,\n orientation: $child.getAttribute('orientation'),\n role: $focusTarget.getAttribute('role'),\n tabindex: $focusTarget.getAttribute('tabindex'),\n forcedOverflow: authoredSlot === 'overflow',\n });\n }\n }\n\n for (const [$action, state] of this._authored) {\n if (!current.has($action)) {\n this._restoreAction($action, state);\n this._authored.delete($action);\n }\n }\n\n this._applySlots();\n }\n\n private _entriesInDomOrder(): [HTMLElement, AuthoredState][] {\n return Array.from(this.children).flatMap(($child) => {\n if (!($child instanceof HTMLElement)) {\n return [];\n }\n\n const state = this._authored.get($child);\n\n return state ? [[$child, state] as [HTMLElement, AuthoredState]] : [];\n });\n }\n\n /**\n * Assigns each authored action to the default (promoted) or overflow slot.\n * A purely declarative computation from `max-shown`, `data-priority`, and\n * authored `slot` — no size measurement of any kind.\n */\n private _applySlots(): void {\n const entries = this._entriesInDomOrder();\n\n const priorityOf = (action: HTMLElement): number => {\n const parsedPriority = Number(action.dataset.priority ?? 0);\n\n return Number.isFinite(parsedPriority) ? parsedPriority : 0;\n };\n\n // A negative data-priority forces overflow, the same as an authored\n // `slot=\"overflow\"`, regardless of max-shown.\n const isForcedOverflow = ([action, state]: [HTMLElement, AuthoredState]): boolean =>\n state.forcedOverflow || priorityOf(action) < 0;\n const candidates = entries.filter((entry) => !isForcedOverflow(entry));\n\n const ranked = candidates\n .map(([action], index) => ({\n action,\n index,\n priority: priorityOf(action),\n }))\n .sort((a, b) => b.priority - a.priority || a.index - b.index);\n\n const requestedCap = Number.isFinite(this.maxShown)\n ? Math.max(0, Math.trunc(this.maxShown))\n : candidates.length;\n const cap = Math.min(candidates.length, requestedCap);\n const promotedSet = new Set(ranked.slice(0, cap).map(({ action }) => action));\n const overflowed = entries\n .map(([action]) => action)\n .filter((action) => !promotedSet.has(action));\n const focusedAction = entries.find(\n ([, state]) => state.focusTarget === this.ownerDocument.activeElement,\n )?.[0];\n\n this.toggleAttribute('data-overflow', overflowed.length > 0);\n\n if (focusedAction && overflowed.includes(focusedAction)) {\n this._$trigger.focus();\n }\n\n this._applyingSlots = true;\n\n for (const [action, state] of entries) {\n if (promotedSet.has(action)) {\n action.slot = '';\n action.setAttribute('data-rc-action-promoted', '');\n action.removeAttribute('data-rc-action-overflowed');\n this._restoreOrientation(action, state);\n this._restoreRole(state);\n } else {\n action.slot = 'overflow';\n action.removeAttribute('data-rc-action-promoted');\n action.setAttribute('data-rc-action-overflowed', '');\n\n if (action.matches('rc-menu-button')) {\n action.setAttribute('orientation', 'vertical');\n }\n\n state.focusTarget.setAttribute('role', 'menuitem');\n state.focusTarget.setAttribute('tabindex', '-1');\n }\n }\n\n this._syncToolbarTabStops();\n\n queueMicrotask(() => {\n this._applyingSlots = false;\n });\n\n this._syncOpenState();\n }\n\n private _focusTarget($action: HTMLElement): HTMLElement | null {\n if ($action.matches(ACTION_WRAPPERS)) {\n return $action.querySelector<HTMLElement>(\n ':scope > button, :scope > a[href], :scope > [slot=\"trigger\"]',\n );\n }\n\n return $action.matches('button, a[href]') ? $action : null;\n }\n\n private _promotedFocusTargets(): HTMLElement[] {\n const targets = Array.from(this._authored.entries())\n .filter(([action]) => action.hasAttribute('data-rc-action-promoted'))\n .map(([, state]) => state.focusTarget)\n .filter(($target) => isFocusable($target));\n\n if (this.hasAttribute('data-overflow')) {\n targets.push(this._$trigger);\n }\n\n return targets;\n }\n\n private _overflowFocusTargets(): HTMLElement[] {\n return Array.from(this._authored.entries())\n .filter(([action]) => action.hasAttribute('data-rc-action-overflowed'))\n .map(([, state]) => state.focusTarget)\n .filter(($target) => isFocusable($target));\n }\n\n private _syncToolbarTabStops(active?: HTMLElement): void {\n const targets = this._promotedFocusTargets();\n const selected = active && targets.includes(active) ? active : targets[0];\n\n for (const target of targets) {\n target.setAttribute('tabindex', target === selected ? '0' : '-1');\n }\n }\n\n private _onFocusIn = (event: FocusEvent): void => {\n const $target = event.composedPath()[0];\n\n if ($target instanceof HTMLElement && this._promotedFocusTargets().includes($target)) {\n this._syncToolbarTabStops($target);\n }\n };\n\n private _onToolbarNavigate = (action: KeyboardNavigationAction): void => {\n this._focusByNavigationAction(action, this._promotedFocusTargets());\n };\n\n private _onTriggerNavigate = (action: KeyboardNavigationAction): void => {\n switch (action) {\n case 'open-to-first':\n this._requestUserOpen(true, false, 'first');\n break;\n case 'open-to-last':\n this._requestUserOpen(true, false, 'last');\n break;\n case 'escape':\n this._requestUserOpen(false, true);\n break;\n }\n };\n\n private _onOverflowNavigate = (action: KeyboardNavigationAction): void => {\n if (action === 'escape') {\n this._requestUserOpen(false, true);\n\n return;\n }\n\n this._focusByNavigationAction(action, this._overflowFocusTargets());\n };\n\n private _focusByNavigationAction(\n action: KeyboardNavigationAction,\n $targets: HTMLElement[],\n ): void {\n const $active = this.ownerDocument.activeElement;\n const index = $active instanceof HTMLElement ? $targets.indexOf($active) : -1;\n let $target: HTMLElement | undefined;\n\n switch (action) {\n case 'next':\n $target = $targets[(index + 1) % $targets.length];\n break;\n case 'prev':\n $target = $targets[(index - 1 + $targets.length) % $targets.length];\n break;\n case 'start':\n $target = $targets[0];\n break;\n case 'end':\n $target = $targets.at(-1);\n break;\n }\n\n $target?.focus();\n }\n\n private _onTriggerClick = (): void => {\n this._requestUserOpen(!this.open, false, 'none');\n };\n\n private _onDocumentPointerDown = (event: PointerEvent): void => {\n if (this.open && !event.composedPath().includes(this)) {\n this._requestUserOpen(false, false);\n }\n };\n\n private _onDocumentKeydown = (event: KeyboardEvent): void => {\n if (this.open && event.key === 'Escape' && !event.composedPath().includes(this)) {\n this._requestUserOpen(false, false);\n }\n };\n\n private _onPopupClick = (event: MouseEvent): void => {\n const path = event.composedPath();\n const entry = Array.from(this._authored.entries()).find(\n ([action, state]) =>\n action.hasAttribute('data-rc-action-overflowed') &&\n (path.includes(action) || path.includes(state.focusTarget)),\n );\n\n if (!entry || this._isDisabled(entry[1].focusTarget)) {\n return;\n }\n\n const $focusTarget = entry[1].focusTarget;\n\n // A menu-button trigger must keep the containing overflow menu open while\n // its submenu is shown. Leaf selections still dismiss the outer menu.\n if (path.includes($focusTarget) && $focusTarget.getAttribute('aria-haspopup') === 'menu') {\n return;\n }\n\n this._requestUserOpen(false, true);\n };\n\n private _setProgrammaticOpen(\n open: boolean,\n returnFocus: boolean,\n focus: 'first' | 'last' | 'none' = 'none',\n ): void {\n const oldValue = this.open;\n\n if (oldValue === open) {\n if (open) {\n this._focusOverflowEdge(focus);\n }\n\n return;\n }\n\n if (this._openInitialized) {\n this._open = open;\n } else {\n this._uncontrolledOpen = open;\n }\n\n this._restoreFocusWhenClosed = !open && returnFocus;\n this._focusWhenOpened = open ? focus : null;\n this.requestUpdate('open', oldValue);\n this._syncOpenState();\n }\n\n private _requestUserOpen(\n open: boolean,\n returnFocus: boolean,\n focus: 'first' | 'last' | 'none' = 'none',\n ): void {\n if (this.open === open) {\n return;\n }\n\n this._restoreFocusWhenClosed = !open && returnFocus;\n this._focusWhenOpened = open ? focus : null;\n\n if (this._open === undefined) {\n const oldValue = this.open;\n\n this._uncontrolledOpen = open;\n this.requestUpdate('open', oldValue);\n this._syncOpenState();\n }\n\n this.dispatchEvent(\n new CustomEvent<RCAdaptiveMenuToggleEvent>('rc-adaptive-menu-toggle', {\n bubbles: true,\n composed: true,\n detail: { open },\n }),\n );\n }\n\n private _syncOpenState(): void {\n const $popup = this._$popup;\n\n if (!$popup?.isConnected) {\n return;\n }\n\n if (this.open && this.hasAttribute('data-overflow')) {\n this._popover.sync(true);\n this._$trigger.setAttribute('aria-expanded', 'true');\n this._anchor.update();\n\n if (this._focusWhenOpened !== null) {\n const focus = this._focusWhenOpened;\n\n this._focusWhenOpened = null;\n requestAnimationFrame(() => this._focusOverflowEdge(focus));\n }\n\n return;\n }\n\n this._popover.sync(false);\n this._$trigger.setAttribute('aria-expanded', 'false');\n\n if (this._restoreFocusWhenClosed) {\n this._restoreFocusWhenClosed = false;\n this._$trigger.focus();\n }\n }\n\n private _focusOverflowEdge(focus: 'first' | 'last' | 'none'): void {\n if (!this.open || focus === 'none') {\n return;\n }\n\n const $items = this._overflowFocusTargets();\n const $target = focus === 'last' ? $items.at(-1) : $items[0];\n\n $target?.focus();\n }\n\n private _restoreAction(action: HTMLElement, state: AuthoredState): void {\n action.slot = state.slot;\n action.removeAttribute('data-rc-action-promoted');\n action.removeAttribute('data-rc-action-overflowed');\n this._restoreOrientation(action, state);\n this._restoreRole(state);\n\n if (state.tabindex === null) {\n state.focusTarget.removeAttribute('tabindex');\n } else {\n state.focusTarget.setAttribute('tabindex', state.tabindex);\n }\n }\n\n private _restoreOrientation(action: HTMLElement, state: AuthoredState): void {\n if (!action.matches('rc-menu-button')) {\n return;\n }\n\n if (state.orientation === null) {\n action.removeAttribute('orientation');\n } else {\n action.setAttribute('orientation', state.orientation);\n }\n }\n\n private _restoreRole(state: AuthoredState): void {\n if (state.role === null) {\n state.focusTarget.removeAttribute('role');\n } else {\n state.focusTarget.setAttribute('role', state.role);\n }\n }\n\n private _isDisabled(target: HTMLElement): boolean {\n return (\n (target instanceof HTMLButtonElement && target.disabled) ||\n target.getAttribute('aria-disabled') === 'true'\n );\n }\n}\n\nexport default RCAdaptiveMenu;\n"],"names":["adaptiveMenuStyles","css","ACTION_WRAPPERS","LIGHT_DOM_CSS","cssText","DEFAULT_ADAPTIVE_MENU_MESSAGES","_RCAdaptiveMenu","_a","LitElement","MessagesController","FlowController","AnchorController","PopoverController","records","record","event","$target","action","path","entry","state","$focusTarget","value","oldValue","changed","focus","returnFocus","html","renderedOrientation","keyNavigation","root","$style","current","$child","existing","authoredSlot","$action","entries","priorityOf","parsedPriority","isForcedOverflow","candidates","ranked","index","a","b","requestedCap","cap","promotedSet","overflowed","focusedAction","targets","isFocusable","active","selected","target","$targets","$active","open","$items","__decorateClass","property","query","RCAdaptiveMenu"],"mappings":"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"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import { R as e } from "./rc-adaptive-menu-
|
|
1
|
+
import { R as e } from "./rc-adaptive-menu-DlBZgaWr.js";
|
|
2
|
+
import { D as o } from "./rc-adaptive-menu-DlBZgaWr.js";
|
|
2
3
|
customElements.get("rc-adaptive-menu") || customElements.define("rc-adaptive-menu", e);
|
|
3
4
|
export {
|
|
5
|
+
o as DEFAULT_ADAPTIVE_MENU_MESSAGES,
|
|
4
6
|
e as RCAdaptiveMenu
|
|
5
7
|
};
|
|
6
8
|
//# sourceMappingURL=rc-adaptive-menu-define.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rc-adaptive-menu-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCAdaptiveMenu } from './rc-adaptive-menu.js';\n\nif (!customElements.get('rc-adaptive-menu')) {\n customElements.define('rc-adaptive-menu', RCAdaptiveMenu);\n}\n\nexport * from './index.js';\n"],"names":["RCAdaptiveMenu"],"mappings":"
|
|
1
|
+
{"version":3,"file":"rc-adaptive-menu-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCAdaptiveMenu } from './rc-adaptive-menu.js';\n\nif (!customElements.get('rc-adaptive-menu')) {\n customElements.define('rc-adaptive-menu', RCAdaptiveMenu);\n}\n\nexport * from './index.js';\n"],"names":["RCAdaptiveMenu"],"mappings":";;AAEK,eAAe,IAAI,kBAAkB,KACxC,eAAe,OAAO,oBAAoBA,CAAc;"}
|
package/dist/rc-adaptive-menu.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { R as
|
|
1
|
+
import { D as a, R as e } from "./rc-adaptive-menu-DlBZgaWr.js";
|
|
2
2
|
export {
|
|
3
|
-
|
|
3
|
+
a as DEFAULT_ADAPTIVE_MENU_MESSAGES,
|
|
4
|
+
e as RCAdaptiveMenu
|
|
4
5
|
};
|
|
5
6
|
//# sourceMappingURL=rc-adaptive-menu.js.map
|