@stainless-api/ui-primitives 0.1.0-beta.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.
Files changed (23) hide show
  1. package/.env +1 -0
  2. package/CHANGELOG.md +7 -0
  3. package/eslint.config.js +2 -0
  4. package/package.json +37 -0
  5. package/src/components/Button.tsx +94 -0
  6. package/src/components/Callout.tsx +31 -0
  7. package/src/components/DetailsGroup.tsx +17 -0
  8. package/src/components/DropdownButton.tsx +98 -0
  9. package/src/components/button.css +157 -0
  10. package/src/components/callout.css +72 -0
  11. package/src/components/details.css +126 -0
  12. package/src/components/dropdown-button.css +162 -0
  13. package/src/index.ts +4 -0
  14. package/src/scripts/dropdown-button.ts +55 -0
  15. package/src/scripts/index.ts +1 -0
  16. package/src/styles/layout.css +11 -0
  17. package/src/styles/scales.css +129 -0
  18. package/src/styles/starlight-compat.css +125 -0
  19. package/src/styles/swatches.css +87 -0
  20. package/src/styles/theme.css +49 -0
  21. package/src/styles/typography.css +199 -0
  22. package/src/styles.css +11 -0
  23. package/tsconfig.json +15 -0
package/.env ADDED
@@ -0,0 +1 @@
1
+ STAINLESS_API_KEY=stl_sk_001uwmod48VpDm2a1bvB1tUTdJ1ooZ5I
package/CHANGELOG.md ADDED
@@ -0,0 +1,7 @@
1
+ # @stainless-api/ui-primitives
2
+
3
+ ## 0.1.0-beta.0
4
+
5
+ ### Minor Changes
6
+
7
+ - ed77b46: prep packages for beta release
package/eslint.config.js ADDED
@@ -0,0 +1,2 @@
1
+ import { config } from '@stainless/eslint-config/astro';
2
+ export default config;
package/package.json ADDED
@@ -0,0 +1,37 @@
1
+ {
2
+ "name": "@stainless-api/ui-primitives",
3
+ "version": "0.1.0-beta.0",
4
+ "publishConfig": {
5
+ "access": "public"
6
+ },
7
+ "exports": {
8
+ ".": {
9
+ "types": "./src/index.ts",
10
+ "import": "./src/index.ts",
11
+ "require": "./src/index.ts"
12
+ },
13
+ "./scripts": {
14
+ "types": "./src/scripts/index.ts",
15
+ "import": "./src/scripts/index.ts",
16
+ "require": "./src/scripts/index.ts"
17
+ },
18
+ "./styles.css": "./src/styles.css"
19
+ },
20
+ "types": "./src/index.ts",
21
+ "peerDependencies": {
22
+ "react": ">=18.0.0",
23
+ "react-dom": ">=18.0.0"
24
+ },
25
+ "dependencies": {
26
+ "clsx": "^2.1.1",
27
+ "lucide-react": "^0.544.0"
28
+ },
29
+ "devDependencies": {
30
+ "@types/react": "^19.1.13",
31
+ "@types/react-dom": "^19.1.9",
32
+ "react": "^19.1.1",
33
+ "react-dom": "^19.1.1",
34
+ "typescript": "5.9.2",
35
+ "@stainless/eslint-config": "0.0.0"
36
+ }
37
+ }
package/src/components/Button.tsx ADDED
@@ -0,0 +1,94 @@
1
+ import React from 'react';
2
+ import clsx from 'clsx';
3
+ import { LucideIcon } from 'lucide-react';
4
+
5
+ export type ButtonVariant =
6
+ | 'outline'
7
+ | 'ghost'
8
+ | 'accent'
9
+ | 'accent-muted'
10
+ | 'muted'
11
+ | 'success'
12
+ | 'destructive'
13
+ | 'default';
14
+
15
+ type BaseProps = {
16
+ variant?: ButtonVariant;
17
+ className?: string;
18
+ children?: React.ReactNode;
19
+ size?: 'sm' | 'lg' | 'default';
20
+ };
21
+
22
+ type AnchorBranch = BaseProps &
23
+ Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> & {
24
+ href: string;
25
+ };
26
+
27
+ type ButtonBranch = BaseProps &
28
+ Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'> & {
29
+ href?: never;
30
+ };
31
+
32
+ export type ButtonProps = AnchorBranch | ButtonBranch;
33
+
34
+ // Because this code needs to run inside .astro files, we can’t use React.cloneElement
35
+ // (or radix-ui/react-slot). In .astro, children are passed as static HTML elements
36
+ // rather than React elements, so they can’t be cloned or modified to add class names.
37
+
38
+ export function Button(props: ButtonProps) {
39
+ const { variant, children } = props;
40
+
41
+ const classes = clsx(
42
+ 'stl-ui-button',
43
+ {
44
+ 'stl-ui-button--outline': variant === 'outline',
45
+ 'stl-ui-button--ghost': variant === 'ghost',
46
+ 'stl-ui-button--accent': variant === 'accent',
47
+ 'stl-ui-button--accent-muted': variant === 'accent-muted',
48
+ 'stl-ui-button--muted': variant === 'muted',
49
+ 'stl-ui-button--success': variant === 'success',
50
+ 'stl-ui-button--destructive': variant === 'destructive',
51
+ },
52
+ {
53
+ 'stl-ui-button--size-sm': props.size === 'sm',
54
+ 'stl-ui-button--size-lg': props.size === 'lg',
55
+ },
56
+ 'not-content',
57
+ props.className,
58
+ );
59
+
60
+ if ('href' in props) {
61
+ const { href, ...rest } = props as AnchorBranch;
62
+ return (
63
+ <a href={href} {...rest} className={classes}>
64
+ {children}
65
+ </a>
66
+ );
67
+ }
68
+
69
+ const { type, ...rest } = props as ButtonBranch;
70
+ return (
71
+ <button type={type ?? 'button'} {...rest} className={classes}>
72
+ {children}
73
+ </button>
74
+ );
75
+ }
76
+
77
+ type LabelProps = React.HTMLAttributes<HTMLSpanElement>;
78
+
79
+ Button.Label = function ButtonLabel({ className, ...rest }: LabelProps) {
80
+ return <span className={clsx('stl-ui-button-label leading-none', className)} {...rest} />;
81
+ };
82
+
83
+ type IconProps = {
84
+ icon: LucideIcon;
85
+ size?: number;
86
+ } & React.HTMLAttributes<HTMLSpanElement>;
87
+
88
+ Button.Icon = function ButtonIcon({ className, icon: Icon, size = 18 }: IconProps) {
89
+ return (
90
+ <span className={clsx('stl-ui-button__icon', className)}>
91
+ <Icon size={size} />
92
+ </span>
93
+ );
94
+ };
package/src/components/Callout.tsx ADDED
@@ -0,0 +1,31 @@
1
+ import React from 'react';
2
+ import clsx from 'clsx';
3
+ import { Info, CircleAlert, Lightbulb, Check, TriangleAlert, OctagonAlert } from 'lucide-react';
4
+
5
+ export type CalloutVariant = 'info' | 'note' | 'tip' | 'success' | 'warning' | 'danger';
6
+
7
+ export type CalloutProps = {
8
+ variant?: CalloutVariant;
9
+ className?: string;
10
+ children?: React.ReactNode;
11
+ } & Omit<React.ComponentProps<'aside'>, 'className' | 'children'>;
12
+
13
+ export function Callout({ variant = 'info', className, children, ...props }: CalloutProps) {
14
+ const classes = clsx('stl-ui-callout', `stl-ui-callout--${variant}`, className);
15
+
16
+ const Icon = {
17
+ info: Info,
18
+ note: CircleAlert,
19
+ tip: Lightbulb,
20
+ success: Check,
21
+ warning: TriangleAlert,
22
+ danger: OctagonAlert,
23
+ }[variant];
24
+
25
+ return (
26
+ <aside className={classes} {...props}>
27
+ <Icon className="stl-ui-callout__icon" />
28
+ <div className="stl-ui-callout__content">{children}</div>
29
+ </aside>
30
+ );
31
+ }
package/src/components/DetailsGroup.tsx ADDED
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import clsx from 'clsx';
3
+
4
+ export type DetailsGroupProps = React.ComponentProps<'div'>;
5
+
6
+ export function DetailsGroup({ className, children, ...props }: DetailsGroupProps) {
7
+ const classes = clsx('stl-ui-details-group', className);
8
+
9
+ // TODO: boolean `exclusive` prop assigns a unique `name` to each of the child <details> elements
10
+ // For now this can be handled by the user
11
+
12
+ return (
13
+ <div className={classes} {...props}>
14
+ {children}
15
+ </div>
16
+ );
17
+ }
package/src/components/DropdownButton.tsx ADDED
@@ -0,0 +1,98 @@
1
+ import { ChevronsUpDown, ExternalLink } from 'lucide-react';
2
+
3
+ export function DropdownButtonPrimaryActionText({ children }: { children?: React.ReactNode }) {
4
+ return <span data-part="primary-action-text">{children}</span>;
5
+ }
6
+
7
+ export function DropdownButtonPrimaryAction({ children }: { children?: React.ReactNode }) {
8
+ return (
9
+ <button
10
+ type="button"
11
+ data-part="primary-action"
12
+ className="stl-ui-dropdown-button__button stl-ui-dropdown-button--action"
13
+ >
14
+ {children}
15
+ </button>
16
+ );
17
+ }
18
+
19
+ export function DropdownButtonTrigger() {
20
+ return (
21
+ <button
22
+ className="stl-ui-dropdown-button__button stl-ui-dropdown-button__trigger"
23
+ aria-haspopup="listbox"
24
+ aria-expanded="false"
25
+ data-part="trigger"
26
+ >
27
+ <ChevronsUpDown size={16} />
28
+ </button>
29
+ );
30
+ }
31
+
32
+ export function DropdownButtonMenu({ children }: { children?: React.ReactNode }) {
33
+ return (
34
+ <div className="stl-ui-dropdown-button__menu" data-state="closed" data-part="menu">
35
+ {children}
36
+ </div>
37
+ );
38
+ }
39
+
40
+ export function DropdownButtonItemIcon({ children }: { children?: React.ReactNode }) {
41
+ return (
42
+ <div className="stl-ui-dropdown-button__menu-item-icon" data-part="item-icon">
43
+ {children}
44
+ </div>
45
+ );
46
+ }
47
+
48
+ export function DropdownButtonItemText({ children }: { children?: React.ReactNode }) {
49
+ return (
50
+ <span className="stl-ui-dropdown-button__menu-item-text" data-part="item-text">
51
+ {children}
52
+ </span>
53
+ );
54
+ }
55
+
56
+ export function DropdownButtonItemTextSubtle({ children }: { children?: React.ReactNode }) {
57
+ return (
58
+ <span className="stl-ui-dropdown-button__menu-item-text-subtle" data-part="item-text-subtle">
59
+ {children}
60
+ </span>
61
+ );
62
+ }
63
+
64
+ export function DropdownButtonItem({
65
+ children,
66
+ value,
67
+ isExternalLink,
68
+ }: {
69
+ children?: React.ReactNode;
70
+ value: string;
71
+ isExternalLink?: boolean;
72
+ }) {
73
+ return (
74
+ <div className="stl-ui-dropdown-button__menu-item" data-part="item" data-value={value}>
75
+ <div className="stl-ui-dropdown-button__menu-item-content">{children}</div>
76
+ {isExternalLink && (
77
+ <div
78
+ className="stl-ui-dropdown-button__menu-item-external-link-icon"
79
+ data-part="item-external-link-icon"
80
+ >
81
+ <ExternalLink size={16} />
82
+ </div>
83
+ )}
84
+ </div>
85
+ );
86
+ }
87
+
88
+ export function DropdownButtonDivider() {
89
+ return <div className="stl-ui-dropdown-button__divider" data-part="divider" />;
90
+ }
91
+
92
+ export function DropdownButton({ id, children }: { id: string; children?: React.ReactNode }) {
93
+ return (
94
+ <div className="stl-ui-dropdown-button stl-ui-not-prose not-content" id={id}>
95
+ {children}
96
+ </div>
97
+ );
98
+ }
package/src/components/button.css ADDED
@@ -0,0 +1,157 @@
1
+ @layer stl-ui {
2
+ .stl-ui-button {
3
+ --stl-ui-button-color: var(--stl-ui-inverse-foreground);
4
+ --stl-ui-button-background-color: var(--stl-ui-inverse-background);
5
+ --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-inverse-background) l c h / 0.9);
6
+
7
+ --stl-ui-button-border-color: transparent;
8
+ --stl-ui-button-border-color-hover: transparent;
9
+
10
+ --stl-ui-button-height: 32px;
11
+ --stl-ui-button-padding: 8px 10px;
12
+ --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius-sml);
13
+ --stl-ui-button-line-height: 150%;
14
+ --stl-ui-button-font-weight: 500;
15
+ --stl-ui-button-font-size: var(--stl-ui-type-scale-text-sm);
16
+ --stl-ui-button-font-family: var(--stl-ui-typography-font);
17
+
18
+ cursor: pointer;
19
+ display: inline-flex;
20
+ align-items: center;
21
+ justify-content: center;
22
+ gap: 2px;
23
+ white-space: nowrap;
24
+ flex-shrink: 0;
25
+
26
+ height: var(--stl-ui-button-height);
27
+ padding: var(--stl-ui-button-padding);
28
+ border-radius: var(--stl-ui-button-border-radius);
29
+ line-height: var(--stl-ui-button-line-height);
30
+ font-weight: var(--stl-ui-button-font-weight);
31
+ font-size: var(--stl-ui-button-font-size);
32
+
33
+ border: 1px solid var(--stl-ui-button-border-color);
34
+ font-family: var(--stl-ui-button-font-family);
35
+
36
+ color: var(--stl-ui-button-color);
37
+ background-color: var(--stl-ui-button-background-color);
38
+
39
+ &:hover {
40
+ background-color: var(--stl-ui-button-background-color-hover);
41
+ border-color: var(--stl-ui-button-border-color-hover);
42
+ }
43
+ }
44
+
45
+ /* --- COLOR VARIANTS --- */
46
+ .stl-ui-button--accent {
47
+ --stl-ui-button-color: var(--stl-ui-accent-foreground);
48
+ --stl-ui-button-background-color: var(--stl-ui-accent-background);
49
+ --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-accent-background) l c h / 0.9);
50
+ }
51
+
52
+ .stl-ui-button--accent-muted {
53
+ --stl-ui-button-color: var(--stl-ui-accent-muted-foreground);
54
+ --stl-ui-button-background-color: var(--stl-ui-accent-muted-background);
55
+ --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-accent-background) l c h / 0.1);
56
+ }
57
+
58
+ .stl-ui-button--muted {
59
+ --stl-ui-button-color: var(--stl-ui-foreground);
60
+ --stl-ui-button-background-color: var(--stl-ui-muted-background);
61
+ --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-foreground) l c h / 0.1);
62
+ }
63
+
64
+ .stl-ui-button--outline {
65
+ --stl-ui-button-color: var(--stl-ui-foreground);
66
+ --stl-ui-button-background-color: var(--stl-ui-card-background);
67
+ --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-foreground) l c h / 0.05);
68
+ --stl-ui-button-border-color: var(--stl-ui-border);
69
+ --stl-ui-button-border-color-hover: var(--stl-ui-border-emphasis);
70
+ }
71
+
72
+ .stl-ui-button--ghost {
73
+ --stl-ui-button-color: var(--stl-ui-foreground);
74
+ --stl-ui-button-background-color: transparent;
75
+ --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-foreground) l c h / 0.05);
76
+ }
77
+
78
+ .stl-ui-button--success {
79
+ --stl-ui-button-color: var(--stl-ui-swatch-gray-white);
80
+ --stl-ui-button-background-color: var(--stl-ui-swatch-green-base);
81
+ --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-swatch-green-base) l c h / 0.9);
82
+ }
83
+
84
+ .stl-ui-button--destructive {
85
+ --stl-ui-button-color: var(--stl-ui-swatch-gray-white);
86
+ --stl-ui-button-background-color: var(--stl-ui-swatch-red-base);
87
+ --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-swatch-red-base) l c h / 0.9);
88
+ }
89
+
90
+ /* --- SIZE VARIANTS --- */
91
+ .stl-ui-button--size-sm {
92
+ --stl-ui-button-height: 24px;
93
+ --stl-ui-button-padding: 0 6px;
94
+ --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius-xs);
95
+ --stl-ui-button-line-height: 100%;
96
+ --stl-ui-button-font-weight: 500;
97
+ --stl-ui-button-font-size: var(--stl-ui-typography-text-body-xs);
98
+ }
99
+
100
+ .stl-ui-button--size-lg {
101
+ --stl-ui-button-height: 40px;
102
+ --stl-ui-button-padding: 8px 14px;
103
+ --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius);
104
+ --stl-ui-button-line-height: 150%;
105
+ --stl-ui-button-font-weight: 500;
106
+ --stl-ui-button-font-size: var(--stl-ui-typography-text-body);
107
+ }
108
+
109
+ /* --- ICONS --- */
110
+ .stl-ui-button__icon {
111
+ flex-shrink: 0;
112
+ display: flex;
113
+ align-items: center;
114
+ justify-content: center;
115
+
116
+ svg {
117
+ margin-top: 0;
118
+ }
119
+ }
120
+
121
+ /* Left Icon */
122
+ .stl-ui-button:has(.stl-ui-button__icon:first-child) .stl-ui-button__icon {
123
+ margin-left: -4px;
124
+ margin-right: 4px;
125
+ }
126
+
127
+ .stl-ui-button:has(.stl-ui-button__icon:last-child) .stl-ui-button__icon {
128
+ /* Right Icon */
129
+ margin-right: -4px;
130
+ margin-left: 4px;
131
+
132
+ /* Right & Left Icon */
133
+ &:first-child {
134
+ margin-left: -4px;
135
+ margin-right: 4px;
136
+ }
137
+ }
138
+
139
+ /* Only Icon */
140
+ .stl-ui-button:not(:has(.stl-ui-button-label)):has(.stl-ui-button__icon:last-child):has(
141
+ .stl-ui-button__icon:first-child
142
+ ) {
143
+ width: var(--stl-ui-button-height);
144
+
145
+ .stl-ui-button__icon {
146
+ margin-left: -4px;
147
+ margin-right: -4px;
148
+ }
149
+ }
150
+
151
+ /* --- LINKS --- */
152
+
153
+ a.stl-ui-button {
154
+ text-decoration: none;
155
+ text-align: center;
156
+ }
157
+ }
package/src/components/callout.css ADDED
@@ -0,0 +1,72 @@
1
+ @layer stl-ui {
2
+ .stl-ui-callout {
3
+ --stl-ui-callout-background-color: var(--stl-ui-muted-background);
4
+ --stl-ui-callout-border-color: var(--stl-ui-border);
5
+ --stl-ui-callout-accent-color: var(--stl-ui-foreground-muted);
6
+
7
+ border: 1px solid var(--stl-ui-callout-border-color);
8
+ background-color: var(--stl-ui-callout-background-color);
9
+ border-radius: var(--stl-ui-layout-border-radius);
10
+ padding: 12px;
11
+ line-height: var(--stl-ui-typography-line-height);
12
+ font-weight: 400;
13
+ font-size: var(--stl-ui-typography-text-body);
14
+
15
+ display: flex;
16
+ align-items: flex-start;
17
+ gap: 8px;
18
+ }
19
+
20
+ .stl-ui-callout--info {
21
+ --stl-ui-callout-background-color: var(--stl-ui-muted-background);
22
+ --stl-ui-callout-border-color: var(--stl-ui-border);
23
+ --stl-ui-callout-accent-color: var(--stl-ui-foreground-muted);
24
+ }
25
+
26
+ .stl-ui-callout--note {
27
+ --stl-ui-callout-background-color: var(--stl-ui-swatch-blue-faint);
28
+ --stl-ui-callout-border-color: var(--stl-ui-swatch-blue-muted);
29
+ --stl-ui-callout-accent-color: var(--stl-ui-swatch-blue-base);
30
+ }
31
+
32
+ .stl-ui-callout--tip {
33
+ --stl-ui-callout-background-color: var(--stl-ui-swatch-purple-faint);
34
+ --stl-ui-callout-border-color: var(--stl-ui-swatch-purple-muted);
35
+ --stl-ui-callout-accent-color: var(--stl-ui-swatch-purple-base);
36
+ }
37
+
38
+ .stl-ui-callout--success {
39
+ --stl-ui-callout-background-color: var(--stl-ui-swatch-green-faint);
40
+ --stl-ui-callout-border-color: var(--stl-ui-swatch-green-muted);
41
+ --stl-ui-callout-accent-color: var(--stl-ui-swatch-green-base);
42
+ }
43
+
44
+ .stl-ui-callout--warning {
45
+ --stl-ui-callout-background-color: var(--stl-ui-swatch-yellow-faint);
46
+ --stl-ui-callout-border-color: var(--stl-ui-swatch-yellow-muted);
47
+ --stl-ui-callout-accent-color: var(--stl-ui-swatch-yellow-base);
48
+ }
49
+
50
+ .stl-ui-callout--danger {
51
+ --stl-ui-callout-background-color: var(--stl-ui-swatch-red-faint);
52
+ --stl-ui-callout-border-color: var(--stl-ui-swatch-red-muted);
53
+ --stl-ui-callout-accent-color: var(--stl-ui-swatch-red-base);
54
+ }
55
+
56
+ .stl-ui-callout__icon {
57
+ color: var(--stl-ui-callout-accent-color);
58
+ flex-shrink: 0;
59
+ width: 1em;
60
+ height: 1em;
61
+ margin: calc((1lh - 1em) / 2);
62
+ }
63
+
64
+ .stl-ui-callout__content {
65
+ flex: 1;
66
+ margin-top: 0;
67
+
68
+ & > :first-child {
69
+ margin-top: 0;
70
+ }
71
+ }
72
+ }
package/src/components/details.css ADDED
@@ -0,0 +1,126 @@
1
+ /* revert starlight details styles */
2
+ @layer starlight.content {
3
+ /* artificially increase specificity to outcompete selectors in the same layer whose styles we want to revert */
4
+ .stl-ui-prose .sl-markdown-content.sl-markdown-content.sl-markdown-content {
5
+ details,
6
+ summary,
7
+ summary::before,
8
+ summary::marker {
9
+ all: revert-layer;
10
+ }
11
+ }
12
+ }
13
+
14
+ @layer stl-ui {
15
+ @layer typography {
16
+ .stl-ui-prose {
17
+ details {
18
+ --stl-ui-details-padding: 12px;
19
+ --stl-ui-details-content-padding-bottom: 4px;
20
+ --stl-ui-details-marker-size: 1em;
21
+ --stl-ui-details-marker-margin: calc((1lh - var(--stl-ui-details-marker-size)) / 2);
22
+ --stl-ui-details-row-gap: 8px;
23
+ --stl-ui-details-summary-column-gap: 8px;
24
+ --stl-ui-details-border-radius: var(--stl-ui-layout-border-radius);
25
+ /* left inset to make content line up with summary content (after chevron) */
26
+ --stl-ui--internal--details-padding-start: calc(
27
+ var(--stl-ui-details-padding)
28
+ + var(--stl-ui-details-marker-size)
29
+ + var(--stl-ui-details-marker-margin) * 2
30
+ + var(--stl-ui-details-summary-column-gap)
31
+ );
32
+
33
+ background-color: var(--stl-ui-card-background);
34
+ border: 1px solid var(--stl-ui-border);
35
+ border-radius: var(--stl-ui-details-border-radius);
36
+ font-size: var(--stl-ui-typography-text-body);
37
+
38
+ padding: var(--stl-ui-details-padding);
39
+ /* indent content to line up with left edge of summary content */
40
+ padding-inline-start: var(--stl-ui--internal--details-padding-start);
41
+
42
+ summary {
43
+ display: block;
44
+ list-style: none;
45
+
46
+ /* summary extends to the edges of the element in order to increase click target */
47
+ padding: var(--stl-ui-details-padding);
48
+ padding-inline-start: var(--stl-ui--internal--details-padding-start);
49
+ margin: calc(-1 * var(--stl-ui-details-padding));
50
+ margin-inline-start: calc(-1 * var(--stl-ui--internal--details-padding-start));
51
+
52
+ cursor: pointer;
53
+ font-weight: 500;
54
+
55
+ border-radius: var(--stl-ui-details-border-radius);
56
+
57
+ &::before {
58
+ content: '';
59
+ width: var(--stl-ui-details-marker-size);
60
+ height: var(--stl-ui-details-marker-size);
61
+ margin: var(--stl-ui-details-marker-margin);
62
+ background-color: currentColor;
63
+ display: block;
64
+ position: absolute;
65
+ --stl-ui-details--internal--marker-width: calc(var(--stl-ui-details-marker-size) + var(--stl-ui-details-marker-margin) * 2);
66
+ --stl-ui-details--internal--summary-marker-transform: translateX(calc(-1 * var(--stl-ui-details--internal--marker-width) - var(--stl-ui-details-summary-column-gap)));
67
+ transform: var(--stl-ui-details--internal--summary-marker-transform);
68
+
69
+ --lucide-chevron-right: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tcmlnaHQtaWNvbiBsdWNpZGUtY2hldnJvbi1yaWdodCI+PHBhdGggZD0ibTkgMTggNi02LTYtNiIvPjwvc3ZnPg==');
70
+ mask-image: var(--lucide-chevron-right);
71
+ mask-size: contain;
72
+ mask-repeat: no-repeat;
73
+
74
+ transition: transform 0.1s ease-out;
75
+ }
76
+
77
+ & > :first-child {
78
+ margin-top: 0;
79
+ }
80
+ }
81
+
82
+ &[open] {
83
+ padding-bottom: calc(var(--stl-ui-details-padding) + var(--stl-ui-details-content-padding-bottom));
84
+
85
+ summary {
86
+ /* padding-bottom shouldn’t extend beyond the row gap while open, i.e. we shouldn’t be negative-margin-placing content overlapping summary */
87
+ --stl-ui--internal--summary-padding-bottom: min(var(--stl-ui-details-padding), var(--stl-ui-details-row-gap));
88
+ padding-bottom: var(--stl-ui--internal--summary-padding-bottom);
89
+ margin-bottom: calc(var(--stl-ui-details-row-gap) - var(--stl-ui--internal--summary-padding-bottom));
90
+ border-bottom-left-radius: 0;
91
+ border-bottom-right-radius: 0;
92
+
93
+ &::before {
94
+ transform: var(--stl-ui-details--internal--summary-marker-transform) rotate(90deg);
95
+ }
96
+ }
97
+ }
98
+
99
+ summary + * {
100
+ margin-top: 0;
101
+ }
102
+ }
103
+ }
104
+
105
+ .stl-ui-details-group {
106
+ & > details:has(+ details) {
107
+ border-bottom-left-radius: 0;
108
+ border-bottom-right-radius: 0;
109
+ summary {
110
+ border-bottom-left-radius: 0;
111
+ border-bottom-right-radius: 0;
112
+ }
113
+ }
114
+ & > details + details {
115
+ margin-top: 0;
116
+ border-top: 0;
117
+ border-top-left-radius: 0;
118
+ border-top-right-radius: 0;
119
+ summary {
120
+ border-top-left-radius: 0;
121
+ border-top-right-radius: 0;
122
+ }
123
+ }
124
+ }
125
+ }
126
+ }