@dogsbay/ui 0.2.0-beta.120 → 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";
|
|
@@ -51,10 +51,68 @@ const { method, path, baseUrl, summary, description, deprecated = false, class:
|
|
|
51
51
|
|
|
52
52
|
{summary && <p class="text-sm text-muted-foreground">{summary}</p>}
|
|
53
53
|
{description && description !== summary && (
|
|
54
|
-
<div class="text-sm text-muted-foreground" set:html={description} />
|
|
54
|
+
<div class="api-description text-sm text-muted-foreground" set:html={description} />
|
|
55
55
|
)}
|
|
56
56
|
|
|
57
57
|
<div class="space-y-3">
|
|
58
58
|
<slot />
|
|
59
59
|
</div>
|
|
60
60
|
</div>
|
|
61
|
+
|
|
62
|
+
<style is:global>
|
|
63
|
+
/* An operation's description is Markdown rendered to HTML (lists, code,
|
|
64
|
+
paragraphs), placed where the page's prose styles do not reach: without
|
|
65
|
+
these a bulleted field list reads as loose lines. */
|
|
66
|
+
.api-description > * + * {
|
|
67
|
+
margin-top: 0.5rem;
|
|
68
|
+
}
|
|
69
|
+
.api-description ul {
|
|
70
|
+
list-style: disc;
|
|
71
|
+
padding-left: 1.25rem;
|
|
72
|
+
}
|
|
73
|
+
.api-description ol {
|
|
74
|
+
list-style: decimal;
|
|
75
|
+
padding-left: 1.25rem;
|
|
76
|
+
}
|
|
77
|
+
.api-description li + li,
|
|
78
|
+
.api-description li > ul,
|
|
79
|
+
.api-description li > ol {
|
|
80
|
+
margin-top: 0.125rem;
|
|
81
|
+
}
|
|
82
|
+
.api-description ul ul {
|
|
83
|
+
list-style: circle;
|
|
84
|
+
}
|
|
85
|
+
/* Field names (`id`, `scm_type`) stand out in the JSON key colour,
|
|
86
|
+
on a faint tint of it. Override --api-field in the theme to change it; a site
|
|
87
|
+
scaffolded before the token existed gets --api-post, the same blue. */
|
|
88
|
+
.api-description code {
|
|
89
|
+
font-family: var(--font-mono, ui-monospace, monospace);
|
|
90
|
+
font-size: 0.85em;
|
|
91
|
+
font-weight: 600;
|
|
92
|
+
color: var(--api-field, var(--api-post, var(--foreground)));
|
|
93
|
+
background-color: color-mix(in oklab, var(--api-field, var(--api-post, var(--foreground))) 8%, transparent);
|
|
94
|
+
border-radius: 0.25rem;
|
|
95
|
+
padding: 0.0625rem 0.3rem;
|
|
96
|
+
}
|
|
97
|
+
/* A code block in a description (a JSON shape, `?order_by=`) is one
|
|
98
|
+
full-width block, as Swagger UI shows it: the chip styling above,
|
|
99
|
+
applied per line, read as a stack of separate highlights. */
|
|
100
|
+
.api-description pre {
|
|
101
|
+
overflow-x: auto;
|
|
102
|
+
border-radius: 0.375rem;
|
|
103
|
+
padding: 0.5rem 0.75rem;
|
|
104
|
+
background-color: var(--code-background, color-mix(in oklab, var(--foreground) 6%, transparent));
|
|
105
|
+
}
|
|
106
|
+
.api-description pre code {
|
|
107
|
+
display: block;
|
|
108
|
+
padding: 0;
|
|
109
|
+
border-radius: 0;
|
|
110
|
+
background: none;
|
|
111
|
+
white-space: pre;
|
|
112
|
+
}
|
|
113
|
+
.api-description a {
|
|
114
|
+
color: var(--primary);
|
|
115
|
+
text-decoration: underline;
|
|
116
|
+
text-underline-offset: 2px;
|
|
117
|
+
}
|
|
118
|
+
</style>
|