@dogsbay/ui 0.2.0-beta.121 → 0.2.0-beta.122
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dogsbay/ui",
|
|
3
|
-
"version": "0.2.0-beta.
|
|
3
|
+
"version": "0.2.0-beta.122",
|
|
4
4
|
"description": "Accessible UI components for Astro, inspired by Base UI and shadcn",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
"katex": "^0.16.47",
|
|
23
23
|
"maplibre-gl": "^5.24.0",
|
|
24
24
|
"shiki": "^4.3.1",
|
|
25
|
-
"@dogsbay/elements": "0.2.0-beta.
|
|
26
|
-
"@dogsbay/icons": "0.2.0-beta.
|
|
27
|
-
"@dogsbay/primitives": "0.2.0-beta.
|
|
25
|
+
"@dogsbay/elements": "0.2.0-beta.122",
|
|
26
|
+
"@dogsbay/icons": "0.2.0-beta.122",
|
|
27
|
+
"@dogsbay/primitives": "0.2.0-beta.122"
|
|
28
28
|
},
|
|
29
29
|
"files": [
|
|
30
30
|
"src",
|
|
@@ -81,9 +81,12 @@ interface Props {
|
|
|
81
81
|
/** Whether the details starts open */
|
|
82
82
|
open?: boolean;
|
|
83
83
|
class?: string;
|
|
84
|
+
/** id, data-*, aria-*: passed to the <details> (an `id` is a link target) */
|
|
85
|
+
[key: string]: unknown;
|
|
84
86
|
}
|
|
85
87
|
|
|
86
|
-
|
|
88
|
+
// `icon` is accepted (the serializer passes it) but not drawn: the variant sets the icon
|
|
89
|
+
const { variant = "note", title, open = false, class: className, icon: _icon, ...rest } = Astro.props;
|
|
87
90
|
const v = variant || "note";
|
|
88
91
|
|
|
89
92
|
// `plain` is chrome — a disclosure, nothing more. No role at all:
|
|
@@ -104,6 +107,7 @@ const icon = contentVariants.has(v) ? icons[v] : null;
|
|
|
104
107
|
class:list={[wrapper({ variant, class: className }), "group/collapsible"]}
|
|
105
108
|
data-variant={variant}
|
|
106
109
|
open={open}
|
|
110
|
+
{...rest}
|
|
107
111
|
>
|
|
108
112
|
<summary class:list={[
|
|
109
113
|
"flex cursor-pointer items-center gap-2 px-4 py-3 text-sm font-semibold select-none",
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
---
|
|
2
|
+
/**
|
|
3
|
+
* DetailsSheet — wraps a CollapsibleAlert (a <details>) so it opens as a
|
|
4
|
+
* side sheet. The markup stays a working <details>: with no script the
|
|
5
|
+
* content is a normal collapsible block. `<db-details-sheet>` (from
|
|
6
|
+
* @dogsbay/elements) moves the body into a native modal <dialog> on the right
|
|
7
|
+
* while it is open.
|
|
8
|
+
*
|
|
9
|
+
* Usage:
|
|
10
|
+
* <DetailsSheet>
|
|
11
|
+
* <CollapsibleAlert title="Advanced options">…</CollapsibleAlert>
|
|
12
|
+
* </DetailsSheet>
|
|
13
|
+
*/
|
|
14
|
+
interface Props {
|
|
15
|
+
/** The close button's accessible name */
|
|
16
|
+
closeLabel?: string;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
const { closeLabel = "Close" } = Astro.props;
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
<db-details-sheet close-label={closeLabel}>
|
|
23
|
+
<slot />
|
|
24
|
+
</db-details-sheet>
|
|
25
|
+
|
|
26
|
+
<script>
|
|
27
|
+
import "@dogsbay/elements/db-details-sheet";
|
|
28
|
+
</script>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as DetailsSheet } from "./DetailsSheet.astro";
|