@agentero/design-system 0.27.0 → 0.27.1
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/mcp/manifests/components.html +48 -4
- package/mcp/manifests/components.json +9 -2
- package/package.json +1 -1
- package/src/dropdown-menu/dropdown-menu.js +2 -2
- package/src/hover-card/hover-card.js +1 -1
- package/src/modal/modal.js +2 -2
- package/src/popover/popover.js +1 -1
- package/theme/base.css +19 -6
|
@@ -588,13 +588,13 @@
|
|
|
588
588
|
<header>
|
|
589
589
|
<div class="wrap">
|
|
590
590
|
<h1>Manifest Debugger</h1>
|
|
591
|
-
<div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">27 components ok</span><span class="filter-pill ok" aria-disabled="true">
|
|
591
|
+
<div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">27 components ok</span><span class="filter-pill ok" aria-disabled="true">215 stories ok</span></div>
|
|
592
592
|
</div>
|
|
593
593
|
</header>
|
|
594
594
|
<main>
|
|
595
595
|
<div class="wrap">
|
|
596
596
|
<div class="note ok" style="margin-bottom: 16px;">
|
|
597
|
-
Using <code>react-component-meta</code>. Generation took <strong>
|
|
597
|
+
Using <code>react-component-meta</code>. Generation took <strong>4.7s</strong>.
|
|
598
598
|
</div>
|
|
599
599
|
<h2 class="section-title">Components</h2>
|
|
600
600
|
<div class="grid" role="list">
|
|
@@ -5760,7 +5760,7 @@ entries summary follow along.</div>
|
|
|
5760
5760
|
<div class="badges">
|
|
5761
5761
|
<label for="c-17-components-popover-props" class="badge ok as-toggle">5 prop types</label>
|
|
5762
5762
|
|
|
5763
|
-
<label for="c-17-components-popover-stories" class="badge ok as-toggle">
|
|
5763
|
+
<label for="c-17-components-popover-stories" class="badge ok as-toggle">5 stories</label>
|
|
5764
5764
|
|
|
5765
5765
|
|
|
5766
5766
|
</div>
|
|
@@ -5826,7 +5826,7 @@ open?: boolean</code></pre>
|
|
|
5826
5826
|
<div class="row">
|
|
5827
5827
|
<span class="ex-name">Imports</span>
|
|
5828
5828
|
</div>
|
|
5829
|
-
<pre><code>import { Button, Popover } from "@agentero/design-system";</code></pre>
|
|
5829
|
+
<pre><code>import { Button, Modal, Popover } from "@agentero/design-system";</code></pre>
|
|
5830
5830
|
</div>
|
|
5831
5831
|
|
|
5832
5832
|
|
|
@@ -5928,6 +5928,50 @@ useful when the visual anchor differs from the toggle button.</div>
|
|
|
5928
5928
|
<p className="text-sm text-text-default-base-primary">Positioned against the anchor</p>
|
|
5929
5929
|
</Popover.Content>
|
|
5930
5930
|
</Popover.Root>
|
|
5931
|
+
);</code></pre>
|
|
5932
|
+
</div>
|
|
5933
|
+
<div class="note ok">
|
|
5934
|
+
<div class="row">
|
|
5935
|
+
<span class="ex-name">Modal From Inside Popover</span>
|
|
5936
|
+
<span class="badge ok">story ok</span>
|
|
5937
|
+
</div>
|
|
5938
|
+
<div>Modal opened from inside a Popover paints above it</div>
|
|
5939
|
+
<div class="hint">A Modal opened from a button inside the Popover. Both share
|
|
5940
|
+
`--z-index-top-layer`, so the modal opens last and paints over the popover
|
|
5941
|
+
while the overlay dims it. The popover stays mounted underneath, which keeps
|
|
5942
|
+
focus returning to its trigger once the modal closes.</div>
|
|
5943
|
+
<pre><code>const ModalFromInsidePopover = () => (
|
|
5944
|
+
<Popover.Root>
|
|
5945
|
+
<Popover.Trigger asChild>
|
|
5946
|
+
<Button variant="secondary">Renewal 2026</Button>
|
|
5947
|
+
</Popover.Trigger>
|
|
5948
|
+
<Popover.Content align="start">
|
|
5949
|
+
<div className="flex flex-col gap-3">
|
|
5950
|
+
<p className="text-sm text-text-default-base-primary">
|
|
5951
|
+
Applied to 12 contracts across 3 carriers.
|
|
5952
|
+
</p>
|
|
5953
|
+
<Modal.Root>
|
|
5954
|
+
<Modal.Trigger asChild>
|
|
5955
|
+
<Button variant="secondary" size="sm">
|
|
5956
|
+
Delete tag
|
|
5957
|
+
</Button>
|
|
5958
|
+
</Modal.Trigger>
|
|
5959
|
+
<Modal.Content>
|
|
5960
|
+
<Modal.Title>Delete this tag?</Modal.Title>
|
|
5961
|
+
<Modal.Description>
|
|
5962
|
+
It will be removed from the 12 contracts that carry it.
|
|
5963
|
+
</Modal.Description>
|
|
5964
|
+
<Modal.Footer>
|
|
5965
|
+
<Modal.Close asChild>
|
|
5966
|
+
<Button variant="ghost">Cancel</Button>
|
|
5967
|
+
</Modal.Close>
|
|
5968
|
+
<Button variant="primary">Delete</Button>
|
|
5969
|
+
</Modal.Footer>
|
|
5970
|
+
</Modal.Content>
|
|
5971
|
+
</Modal.Root>
|
|
5972
|
+
</div>
|
|
5973
|
+
</Popover.Content>
|
|
5974
|
+
</Popover.Root>
|
|
5931
5975
|
);</code></pre>
|
|
5932
5976
|
</div>
|
|
5933
5977
|
</div>
|
|
@@ -5610,9 +5610,16 @@
|
|
|
5610
5610
|
"snippet": "const WithAnchor = () => (\n <Popover.Root>\n <div className=\"flex flex-col items-center gap-4\">\n <Popover.Anchor className=\"rounded-md border border-border-default-base-primary px-4 py-2 text-sm text-text-default-base-secondary\">\n Anchored here\n </Popover.Anchor>\n <Popover.Trigger asChild>\n <Button variant=\"secondary\">Toggle from below</Button>\n </Popover.Trigger>\n </div>\n <Popover.Content side=\"top\">\n <p className=\"text-sm text-text-default-base-primary\">Positioned against the anchor</p>\n </Popover.Content>\n </Popover.Root>\n);",
|
|
5611
5611
|
"description": "`Anchor` positions the Content against an element other than the Trigger —\nuseful when the visual anchor differs from the toggle button.",
|
|
5612
5612
|
"summary": "Popover positioned against a separate `Anchor` element"
|
|
5613
|
+
},
|
|
5614
|
+
{
|
|
5615
|
+
"id": "components-popover--modal-from-inside-popover",
|
|
5616
|
+
"name": "Modal From Inside Popover",
|
|
5617
|
+
"snippet": "const ModalFromInsidePopover = () => (\n <Popover.Root>\n <Popover.Trigger asChild>\n <Button variant=\"secondary\">Renewal 2026</Button>\n </Popover.Trigger>\n <Popover.Content align=\"start\">\n <div className=\"flex flex-col gap-3\">\n <p className=\"text-sm text-text-default-base-primary\">\n Applied to 12 contracts across 3 carriers.\n </p>\n <Modal.Root>\n <Modal.Trigger asChild>\n <Button variant=\"secondary\" size=\"sm\">\n Delete tag\n </Button>\n </Modal.Trigger>\n <Modal.Content>\n <Modal.Title>Delete this tag?</Modal.Title>\n <Modal.Description>\n It will be removed from the 12 contracts that carry it.\n </Modal.Description>\n <Modal.Footer>\n <Modal.Close asChild>\n <Button variant=\"ghost\">Cancel</Button>\n </Modal.Close>\n <Button variant=\"primary\">Delete</Button>\n </Modal.Footer>\n </Modal.Content>\n </Modal.Root>\n </div>\n </Popover.Content>\n </Popover.Root>\n);",
|
|
5618
|
+
"description": "A Modal opened from a button inside the Popover. Both share\n`--z-index-top-layer`, so the modal opens last and paints over the popover\nwhile the overlay dims it. The popover stays mounted underneath, which keeps\nfocus returning to its trigger once the modal closes.",
|
|
5619
|
+
"summary": "Modal opened from inside a Popover paints above it"
|
|
5613
5620
|
}
|
|
5614
5621
|
],
|
|
5615
|
-
"import": "import { Button, Popover } from \"@agentero/design-system\";"
|
|
5622
|
+
"import": "import { Button, Modal, Popover } from \"@agentero/design-system\";"
|
|
5616
5623
|
},
|
|
5617
5624
|
"components-progress": {
|
|
5618
5625
|
"id": "components-progress",
|
|
@@ -7575,6 +7582,6 @@
|
|
|
7575
7582
|
},
|
|
7576
7583
|
"meta": {
|
|
7577
7584
|
"docgen": "react-component-meta",
|
|
7578
|
-
"durationMs":
|
|
7585
|
+
"durationMs": 4717
|
|
7579
7586
|
}
|
|
7580
7587
|
}
|
package/package.json
CHANGED
|
@@ -17,7 +17,7 @@ var s = ({ className: t, ...n }) => /* @__PURE__ */ r(a.Trigger, {
|
|
|
17
17
|
s.displayName = "DropdownMenu.Trigger";
|
|
18
18
|
var c = a.Portal, l = n({
|
|
19
19
|
base: [
|
|
20
|
-
"z-
|
|
20
|
+
"z-(--z-index-top-layer) flex flex-col rounded-lg bg-bg-default-base-primary p-1 shadow-xl",
|
|
21
21
|
"border border-border-default-base-primary",
|
|
22
22
|
"will-change-[transform,opacity]",
|
|
23
23
|
"data-[state=open]:animate-[dropdownSlideIn_200ms_ease-out]",
|
|
@@ -73,7 +73,7 @@ var h = ({ className: n, children: o, ...s }) => /* @__PURE__ */ i(a.SubTrigger,
|
|
|
73
73
|
});
|
|
74
74
|
h.displayName = "DropdownMenu.SubTrigger";
|
|
75
75
|
var g = n({ base: [
|
|
76
|
-
"z-
|
|
76
|
+
"z-(--z-index-top-layer) flex flex-col rounded-lg bg-bg-default-base-primary p-1 shadow-xl",
|
|
77
77
|
"border border-border-default-base-primary",
|
|
78
78
|
"will-change-[transform,opacity]",
|
|
79
79
|
"data-[state=open]:animate-[dropdownSlideIn_200ms_ease-out]",
|
|
@@ -14,7 +14,7 @@ var o = (e) => /* @__PURE__ */ n(i.Trigger, {
|
|
|
14
14
|
});
|
|
15
15
|
o.displayName = "HoverCard.Trigger";
|
|
16
16
|
var s = i.Portal, c = t({ base: [
|
|
17
|
-
"z-(--z-index-
|
|
17
|
+
"z-(--z-index-top-layer) max-w-80 rounded-lg bg-bg-default-base-primary p-4 shadow-xl",
|
|
18
18
|
"border border-border-default-base-primary",
|
|
19
19
|
"text-sm text-text-default-base-primary",
|
|
20
20
|
"will-change-[transform,opacity]",
|
package/src/modal/modal.js
CHANGED
|
@@ -20,12 +20,12 @@ u.displayName = "Modal.Trigger";
|
|
|
20
20
|
var d = o("dialog"), f = r({
|
|
21
21
|
slots: {
|
|
22
22
|
overlay: [
|
|
23
|
-
"fixed inset-0 z-(--z-index-
|
|
23
|
+
"fixed inset-0 z-(--z-index-top-layer) bg-overlay-dark-300",
|
|
24
24
|
"data-[state=open]:animate-modal-overlay-in data-[state=closed]:animate-modal-overlay-out",
|
|
25
25
|
"motion-reduce:animate-none!"
|
|
26
26
|
],
|
|
27
27
|
content: [
|
|
28
|
-
"fixed top-1/2 left-1/2 z-(--z-index-
|
|
28
|
+
"fixed top-1/2 left-1/2 z-(--z-index-top-layer) -translate-x-1/2 -translate-y-1/2",
|
|
29
29
|
"flex max-h-[calc(100dvh-4rem)] w-[calc(100vw-2rem)] flex-col gap-6",
|
|
30
30
|
"rounded-lg bg-bg-default-base-primary py-10 shadow-sm outline-none",
|
|
31
31
|
"data-[state=open]:animate-modal-content-in data-[state=closed]:animate-modal-content-out",
|
package/src/popover/popover.js
CHANGED
|
@@ -23,7 +23,7 @@ var o = (e) => /* @__PURE__ */ t(n.Close, {
|
|
|
23
23
|
});
|
|
24
24
|
o.displayName = "Popover.Close";
|
|
25
25
|
var s = n.Portal, c = e({ base: [
|
|
26
|
-
"z-(--z-index-
|
|
26
|
+
"z-(--z-index-top-layer) rounded-md bg-bg-default-base-primary px-2 py-3 shadow-md",
|
|
27
27
|
"border border-border-default-base-primary",
|
|
28
28
|
"will-change-[transform,opacity]",
|
|
29
29
|
"origin-(--radix-popover-content-transform-origin)",
|
package/theme/base.css
CHANGED
|
@@ -832,12 +832,25 @@
|
|
|
832
832
|
--z-index-floating: 1000;
|
|
833
833
|
--z-index-sticky: 1100;
|
|
834
834
|
--z-index-banner: 1200;
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
835
|
+
/*
|
|
836
|
+
* One tier for every surface that portals to the body and is mounted when it
|
|
837
|
+
* opens. Sharing a z-index makes them paint in DOM order, and a portal is
|
|
838
|
+
* appended to the body as it mounts, so they paint in the order they were
|
|
839
|
+
* opened in and the last one opened wins. That holds whichever way the
|
|
840
|
+
* surfaces are nested, which a tier per component cannot do: any fixed order
|
|
841
|
+
* between two tiers is the wrong one for one of the two nesting directions.
|
|
842
|
+
*
|
|
843
|
+
* A surface leaves the rule when its position in the DOM stops matching when
|
|
844
|
+
* it opened: content that is mounted before it opens, and content portalled
|
|
845
|
+
* into a container other than the body, which stacks inside that container's
|
|
846
|
+
* ancestors instead. Both then need a z-index of their own.
|
|
847
|
+
*/
|
|
848
|
+
--z-index-top-layer: 1300;
|
|
849
|
+
/* Deprecated alias of --z-index-top-layer; drop once @agentero/ui Combobox stops using it. */
|
|
850
|
+
--z-index-flyover: 1300;
|
|
851
|
+
--z-index-skip-nav: 1400;
|
|
852
|
+
--z-index-toast: 1500;
|
|
853
|
+
--z-index-tooltip: 1600;
|
|
841
854
|
|
|
842
855
|
/* ========================================
|
|
843
856
|
* BREAKPOINTS
|