@starci/grammar 0.4.8 → 0.4.10
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/dist/common/styles.css
CHANGED
|
@@ -2384,10 +2384,22 @@
|
|
|
2384
2384
|
.starci-core-text[data-loading="true"][data-size="metric-lead"] { width: 10rem; }
|
|
2385
2385
|
|
|
2386
2386
|
/* --- Text action: one recipe, eight appearances, selected by data attributes. --- */
|
|
2387
|
+
/*
|
|
2388
|
+
* A TextAction is a BUTTON however text-shaped it looks, so the family's pressable floor belongs
|
|
2389
|
+
* to the recipe rather than to one appearance. `route` carried it alone until 0.4.10, which left
|
|
2390
|
+
* the padding-less appearances - inline, muted, disclosure, plain - collapsing to their line box:
|
|
2391
|
+
* a rail action measured 86 x 20 CSS px against a 44px floor. The floor moves up to the recipe
|
|
2392
|
+
* here and `route` keeps its own row, now redundant but harmless, so no appearance can lose it
|
|
2393
|
+
* again. `min-block-size` rather than `padding-block` for the reason `route` already states:
|
|
2394
|
+
* these appearances draw no background at rest, so the extra block size is invisible chrome
|
|
2395
|
+
* around unchanged FONT-2/PADDING-2 typography and never a bigger pill. `align-items: center`
|
|
2396
|
+
* above keeps the glyph and label centred inside the taller box.
|
|
2397
|
+
*/
|
|
2387
2398
|
.starci-core-text-action {
|
|
2388
2399
|
display: inline-flex;
|
|
2389
2400
|
width: fit-content;
|
|
2390
2401
|
min-width: 0;
|
|
2402
|
+
min-block-size: var(--starci-core-control-min-size, 2.75rem);
|
|
2391
2403
|
flex: none;
|
|
2392
2404
|
align-items: center;
|
|
2393
2405
|
gap: 0.5rem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/branch/Tabs/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAUpF,mEAAmE;AACnE,MAAM,MAAM,OAAO,GAAG;IAClB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAA;CAC/B,CAAA;AAED,8EAA8E;AAC9E,MAAM,MAAM,SAAS,GAAG;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IACtC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1C,4FAA4F;IAC5F,QAAQ,CAAC,eAAe,CAAC,EAAE,YAAY,GAAG,QAAQ,CAAA;IAClD,+EAA+E;IAC/E,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACnC,CAAA;AAED,qFAAqF;AACrF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/branch/Tabs/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAUpF,mEAAmE;AACnE,MAAM,MAAM,OAAO,GAAG;IAClB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAA;CAC/B,CAAA;AAED,8EAA8E;AAC9E,MAAM,MAAM,SAAS,GAAG;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IACtC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1C,4FAA4F;IAC5F,QAAQ,CAAC,eAAe,CAAC,EAAE,YAAY,GAAG,QAAQ,CAAA;IAClD,+EAA+E;IAC/E,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACnC,CAAA;AAED,qFAAqF;AACrF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,gCAwEpC,CAAA"}
|
|
@@ -10,19 +10,47 @@ export const Tabs = (props) => {
|
|
|
10
10
|
const frameRef = useRef(null);
|
|
11
11
|
useEffect(() => setIsClientReady(true), []);
|
|
12
12
|
useLayoutEffect(() => {
|
|
13
|
-
|
|
13
|
+
const frame = frameRef.current;
|
|
14
|
+
const panelId = props.panelId;
|
|
15
|
+
if (!isClientReady || frame === null || panelId === undefined)
|
|
14
16
|
return;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
// HeroUI's collection may mount or update after this layout effect. Observe
|
|
18
|
+
// only the owned relationship, preserving the actual vendor value for cleanup.
|
|
19
|
+
const relationships = new Map();
|
|
20
|
+
const syncPanelIds = () => {
|
|
21
|
+
frame.querySelectorAll("[data-grammar-tab-id]").forEach((identity) => {
|
|
22
|
+
const itemId = identity.dataset.grammarTabId;
|
|
23
|
+
const tab = identity.closest("[role='tab']");
|
|
24
|
+
if (itemId === undefined || tab === null)
|
|
25
|
+
return;
|
|
26
|
+
const current = tab.getAttribute("aria-controls");
|
|
27
|
+
const previous = relationships.get(tab);
|
|
28
|
+
const expected = panelId(itemId);
|
|
29
|
+
const original = previous !== undefined && current === previous.applied ? previous.original : current;
|
|
30
|
+
relationships.set(tab, { original, applied: expected });
|
|
31
|
+
if (current !== expected)
|
|
32
|
+
tab.setAttribute("aria-controls", expected);
|
|
33
|
+
});
|
|
34
|
+
};
|
|
35
|
+
const observer = new MutationObserver(syncPanelIds);
|
|
36
|
+
observer.observe(frame, { childList: true, subtree: true, attributes: true, attributeFilter: ["aria-controls", "data-grammar-tab-id"] });
|
|
37
|
+
syncPanelIds();
|
|
38
|
+
return () => {
|
|
39
|
+
observer.disconnect();
|
|
40
|
+
relationships.forEach(({ original, applied }, tab) => {
|
|
41
|
+
if (tab.getAttribute("aria-controls") !== applied)
|
|
42
|
+
return;
|
|
43
|
+
if (original === null)
|
|
44
|
+
tab.removeAttribute("aria-controls");
|
|
45
|
+
else
|
|
46
|
+
tab.setAttribute("aria-controls", original);
|
|
47
|
+
});
|
|
48
|
+
};
|
|
49
|
+
}, [isClientReady, props.items, props.panelId, props.selectedKey]);
|
|
22
50
|
const inset = props.inset ?? "none";
|
|
23
51
|
const frameContract = inset === "page" ? "PADDING-5" : undefined;
|
|
24
52
|
if (!isClientReady)
|
|
25
53
|
return _jsx("div", { "aria-hidden": "true", className: tabsFrameClassName, "data-contract": frameContract, "data-grammar-tabs": "true", "data-grammar-tabs-client": "pending", "data-grammar-tabs-inset": inset, style: { minHeight: "3rem" } });
|
|
26
|
-
return _jsx("div", { ref: frameRef, className: tabsFrameClassName, "data-contract": frameContract, "data-grammar-tabs": "true", "data-grammar-tabs-client": "ready", "data-grammar-tabs-inset": inset, "data-grammar-tab-labels": props.labelVisibility ?? "responsive", children: _jsx(HorizontalScrollRegion, { className: tabsScrollClassName, "data-contract": "OVERFLOW-4", "data-grammar-tabs-overflow": "scroll", hideScrollBar: true, children: _jsx(HeroTabs, { variant: "secondary", selectedKey: props.selectedKey, onSelectionChange: (key) => props.onSelect?.(String(key)), className: tabsClassName ?? "", "data-contract": "FLOW-2", children: _jsx(HeroTabs.ListContainer, { children: _jsx(HeroTabs.List, { "aria-label": props.label, children: props.items.map((item) => (_jsxs(HeroTabs.Tab, { id: item.id, "aria-label": item.label, "
|
|
54
|
+
return _jsx("div", { ref: frameRef, className: tabsFrameClassName, "data-contract": frameContract, "data-grammar-tabs": "true", "data-grammar-tabs-client": "ready", "data-grammar-tabs-inset": inset, "data-grammar-tab-labels": props.labelVisibility ?? "responsive", children: _jsx(HorizontalScrollRegion, { className: tabsScrollClassName, "data-contract": "OVERFLOW-4", "data-grammar-tabs-overflow": "scroll", hideScrollBar: true, children: _jsx(HeroTabs, { variant: "secondary", selectedKey: props.selectedKey, onSelectionChange: (key) => props.onSelect?.(String(key)), className: tabsClassName ?? "", "data-contract": "FLOW-2", children: _jsx(HeroTabs.ListContainer, { children: _jsx(HeroTabs.List, { "aria-label": props.label, children: props.items.map((item) => (_jsxs(HeroTabs.Tab, { id: item.id, "aria-label": item.label, "data-contract": "PADDING-3", children: [_jsxs("span", { className: tabContentClassName, "data-contract": "GAP-2", "data-grammar-tab-id": item.id, children: [item.leading, _jsx("span", { className: tabLabelClassName, style: props.labelVisibility === "always" ? { display: "inline" } : undefined, children: item.label })] }), _jsx(HeroTabs.Indicator, {})] }, item.id))) }) }) }) }) });
|
|
27
55
|
};
|
|
28
56
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/branch/Tabs/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAA;AACpF,OAAO,EAAE,sBAAsB,EAAE,MAAM,iDAAiD,CAAA;AACxF,OAAO,EACH,mBAAmB,EACnB,iBAAiB,EACjB,aAAa,EACb,kBAAkB,EAClB,mBAAmB,GACtB,MAAM,iBAAiB,CAAA;AAsBxB,qFAAqF;AACrF,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE;IACrC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACzD,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC7C,SAAS,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;IAC3C,eAAe,CAAC,GAAG,EAAE;QACjB,IAAI,CAAC,aAAa,IAAI,KAAK,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/branch/Tabs/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAA;AACpF,OAAO,EAAE,sBAAsB,EAAE,MAAM,iDAAiD,CAAA;AACxF,OAAO,EACH,mBAAmB,EACnB,iBAAiB,EACjB,aAAa,EACb,kBAAkB,EAClB,mBAAmB,GACtB,MAAM,iBAAiB,CAAA;AAsBxB,qFAAqF;AACrF,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE;IACrC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACzD,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC7C,SAAS,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;IAC3C,eAAe,CAAC,GAAG,EAAE;QACjB,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAA;QAC9B,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAA;QAC7B,IAAI,CAAC,aAAa,IAAI,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS;YAAE,OAAM;QAErE,4EAA4E;QAC5E,+EAA+E;QAC/E,MAAM,aAAa,GAAG,IAAI,GAAG,EAA6D,CAAA;QAC1F,MAAM,YAAY,GAAG,GAAG,EAAE;YACtB,KAAK,CAAC,gBAAgB,CAAc,uBAAuB,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;gBAC9E,MAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAA;gBAC5C,MAAM,GAAG,GAAG,QAAQ,CAAC,OAAO,CAAc,cAAc,CAAC,CAAA;gBACzD,IAAI,MAAM,KAAK,SAAS,IAAI,GAAG,KAAK,IAAI;oBAAE,OAAM;gBAChD,MAAM,OAAO,GAAG,GAAG,CAAC,YAAY,CAAC,eAAe,CAAC,CAAA;gBACjD,MAAM,QAAQ,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;gBACvC,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA;gBAChC,MAAM,QAAQ,GAAG,QAAQ,KAAK,SAAS,IAAI,OAAO,KAAK,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAA;gBACrG,aAAa,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAA;gBACvD,IAAI,OAAO,KAAK,QAAQ;oBAAE,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAA;YACzE,CAAC,CAAC,CAAA;QACN,CAAC,CAAA;QACD,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,YAAY,CAAC,CAAA;QACnD,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,eAAe,EAAE,qBAAqB,CAAC,EAAE,CAAC,CAAA;QACxI,YAAY,EAAE,CAAA;QACd,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,UAAU,EAAE,CAAA;YACrB,aAAa,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE;gBACjD,IAAI,GAAG,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,OAAO;oBAAE,OAAM;gBACzD,IAAI,QAAQ,KAAK,IAAI;oBAAE,GAAG,CAAC,eAAe,CAAC,eAAe,CAAC,CAAA;;oBACtD,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAA;YACpD,CAAC,CAAC,CAAA;QACN,CAAC,CAAA;IACL,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAA;IAElE,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,MAAM,CAAA;IACnC,MAAM,aAAa,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAA;IAChE,IAAI,CAAC,aAAa;QAAE,OAAO,6BAAiB,MAAM,EAAC,SAAS,EAAE,kBAAkB,mBAAiB,aAAa,uBAAoB,MAAM,8BAA0B,SAAS,6BAA0B,KAAK,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,GAAI,CAAA;IAE5O,OAAO,cAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,kBAAkB,mBAAiB,aAAa,uBAAoB,MAAM,8BAA0B,OAAO,6BAA0B,KAAK,6BAA2B,KAAK,CAAC,eAAe,IAAI,YAAY,YAC5O,KAAC,sBAAsB,IAAC,SAAS,EAAE,mBAAmB,mBAAgB,YAAY,gCAA4B,QAAQ,EAAC,aAAa,kBAChI,KAAC,QAAQ,IACL,OAAO,EAAC,WAAW,EACnB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,iBAAiB,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,EACzD,SAAS,EAAE,aAAa,IAAI,EAAE,mBAChB,QAAQ,YAEtB,KAAC,QAAQ,CAAC,aAAa,cACnB,KAAC,QAAQ,CAAC,IAAI,kBAAa,KAAK,CAAC,KAAK,YACjC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACvB,MAAC,QAAQ,CAAC,GAAG,IAET,EAAE,EAAE,IAAI,CAAC,EAAE,gBACC,IAAI,CAAC,KAAK,mBACR,WAAW,aAEzB,gBAAM,SAAS,EAAE,mBAAmB,mBAAgB,OAAO,yBAAsB,IAAI,CAAC,EAAE,aACnF,IAAI,CAAC,OAAO,EACb,eAAM,SAAS,EAAE,iBAAiB,EAAE,KAAK,EAAE,KAAK,CAAC,eAAe,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,YAAG,IAAI,CAAC,KAAK,GAAQ,IACnI,EACP,KAAC,QAAQ,CAAC,SAAS,KAAG,KATjB,IAAI,CAAC,EAAE,CAUD,CAClB,CAAC,GACU,GACK,GAClB,GACU,GACvB,CAAA;AACV,CAAC,CAAA"}
|