@duskmoon-dev/el-accordion 0.5.0 → 0.6.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.
- package/README.md +138 -0
- package/dist/cjs/index.js +25 -84
- package/dist/cjs/index.js.map +3 -3
- package/dist/cjs/register.js +25 -84
- package/dist/cjs/register.js.map +3 -3
- package/dist/esm/index.js +21 -80
- package/dist/esm/index.js.map +3 -3
- package/dist/esm/register.js +21 -80
- package/dist/esm/register.js.map +3 -3
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/el-dm-accordion.d.ts +2 -34
- package/dist/types/el-dm-accordion.d.ts.map +1 -1
- package/package.json +6 -5
package/README.md
ADDED
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
# @duskmoon-dev/el-accordion
|
|
2
|
+
|
|
3
|
+
A collapsible accordion component built with Web Components.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
bun add @duskmoon-dev/el-accordion
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Auto-Register
|
|
14
|
+
|
|
15
|
+
```typescript
|
|
16
|
+
import '@duskmoon-dev/el-accordion/register';
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<el-dm-accordion>
|
|
21
|
+
<el-dm-accordion-item label="Section 1">
|
|
22
|
+
Content for section 1
|
|
23
|
+
</el-dm-accordion-item>
|
|
24
|
+
<el-dm-accordion-item label="Section 2">
|
|
25
|
+
Content for section 2
|
|
26
|
+
</el-dm-accordion-item>
|
|
27
|
+
</el-dm-accordion>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Manual Registration
|
|
31
|
+
|
|
32
|
+
```typescript
|
|
33
|
+
import { ElDmAccordion, ElDmAccordionItem, register } from '@duskmoon-dev/el-accordion';
|
|
34
|
+
|
|
35
|
+
// Register with default tag names
|
|
36
|
+
register();
|
|
37
|
+
|
|
38
|
+
// Or register with custom tag names
|
|
39
|
+
customElements.define('my-accordion', ElDmAccordion);
|
|
40
|
+
customElements.define('my-accordion-item', ElDmAccordionItem);
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Attributes (el-dm-accordion)
|
|
44
|
+
|
|
45
|
+
| Attribute | Type | Default | Description |
|
|
46
|
+
|-----------|------|---------|-------------|
|
|
47
|
+
| `multiple` | `boolean` | `false` | Allow multiple items open |
|
|
48
|
+
| `value` | `string` | - | Currently open item(s) |
|
|
49
|
+
|
|
50
|
+
## Attributes (el-dm-accordion-item)
|
|
51
|
+
|
|
52
|
+
| Attribute | Type | Default | Description |
|
|
53
|
+
|-----------|------|---------|-------------|
|
|
54
|
+
| `label` | `string` | `''` | Item header label |
|
|
55
|
+
| `value` | `string` | - | Item value (auto-generated if not set) |
|
|
56
|
+
| `disabled` | `boolean` | `false` | Disable the item |
|
|
57
|
+
| `open` | `boolean` | `false` | Whether the item is open |
|
|
58
|
+
|
|
59
|
+
## CSS Parts (el-dm-accordion)
|
|
60
|
+
|
|
61
|
+
| Part | Description |
|
|
62
|
+
|------|-------------|
|
|
63
|
+
| `container` | The accordion container |
|
|
64
|
+
|
|
65
|
+
## Events
|
|
66
|
+
|
|
67
|
+
| Event | Detail | Description |
|
|
68
|
+
|-------|--------|-------------|
|
|
69
|
+
| `change` | `{ value, openItems }` | Fired when open items change |
|
|
70
|
+
|
|
71
|
+
## Examples
|
|
72
|
+
|
|
73
|
+
### Basic
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<el-dm-accordion>
|
|
77
|
+
<el-dm-accordion-item label="What is this?">
|
|
78
|
+
This is an accordion component.
|
|
79
|
+
</el-dm-accordion-item>
|
|
80
|
+
<el-dm-accordion-item label="How does it work?">
|
|
81
|
+
Click on the headers to expand/collapse.
|
|
82
|
+
</el-dm-accordion-item>
|
|
83
|
+
</el-dm-accordion>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### Multiple Open
|
|
87
|
+
|
|
88
|
+
```html
|
|
89
|
+
<el-dm-accordion multiple>
|
|
90
|
+
<el-dm-accordion-item label="Section 1">Content 1</el-dm-accordion-item>
|
|
91
|
+
<el-dm-accordion-item label="Section 2">Content 2</el-dm-accordion-item>
|
|
92
|
+
<el-dm-accordion-item label="Section 3">Content 3</el-dm-accordion-item>
|
|
93
|
+
</el-dm-accordion>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Default Open
|
|
97
|
+
|
|
98
|
+
```html
|
|
99
|
+
<el-dm-accordion>
|
|
100
|
+
<el-dm-accordion-item label="Open by default" open>
|
|
101
|
+
This section is open by default.
|
|
102
|
+
</el-dm-accordion-item>
|
|
103
|
+
<el-dm-accordion-item label="Closed">
|
|
104
|
+
This section is closed.
|
|
105
|
+
</el-dm-accordion-item>
|
|
106
|
+
</el-dm-accordion>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### Disabled Item
|
|
110
|
+
|
|
111
|
+
```html
|
|
112
|
+
<el-dm-accordion>
|
|
113
|
+
<el-dm-accordion-item label="Normal">Content</el-dm-accordion-item>
|
|
114
|
+
<el-dm-accordion-item label="Disabled" disabled>
|
|
115
|
+
Can't open this
|
|
116
|
+
</el-dm-accordion-item>
|
|
117
|
+
</el-dm-accordion>
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### FAQ Example
|
|
121
|
+
|
|
122
|
+
```html
|
|
123
|
+
<el-dm-accordion>
|
|
124
|
+
<el-dm-accordion-item label="How do I get started?">
|
|
125
|
+
Install the package and import the component.
|
|
126
|
+
</el-dm-accordion-item>
|
|
127
|
+
<el-dm-accordion-item label="Is it accessible?">
|
|
128
|
+
Yes, it follows ARIA accordion patterns.
|
|
129
|
+
</el-dm-accordion-item>
|
|
130
|
+
<el-dm-accordion-item label="Can I style it?">
|
|
131
|
+
Yes, use CSS custom properties and parts.
|
|
132
|
+
</el-dm-accordion-item>
|
|
133
|
+
</el-dm-accordion>
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
## License
|
|
137
|
+
|
|
138
|
+
MIT
|
package/dist/cjs/index.js
CHANGED
|
@@ -36,8 +36,10 @@ __export(exports_src, {
|
|
|
36
36
|
module.exports = __toCommonJS(exports_src);
|
|
37
37
|
|
|
38
38
|
// src/el-dm-accordion.ts
|
|
39
|
-
var
|
|
40
|
-
var
|
|
39
|
+
var import_el_base = require("@duskmoon-dev/el-base");
|
|
40
|
+
var import_accordion = require("@duskmoon-dev/core/components/accordion");
|
|
41
|
+
var coreStyles = import_accordion.css.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
|
|
42
|
+
var styles = import_el_base.css`
|
|
41
43
|
:host {
|
|
42
44
|
display: block;
|
|
43
45
|
}
|
|
@@ -46,20 +48,16 @@ var styles = import_el_core.css`
|
|
|
46
48
|
display: none !important;
|
|
47
49
|
}
|
|
48
50
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
flex-direction: column;
|
|
52
|
-
border: 1px solid var(--color-outline, #e0e0e0);
|
|
53
|
-
border-radius: 0.5rem;
|
|
54
|
-
overflow: hidden;
|
|
55
|
-
}
|
|
51
|
+
/* Import core accordion styles */
|
|
52
|
+
${coreStyles}
|
|
56
53
|
|
|
54
|
+
/* Web component specific: slotted item borders */
|
|
57
55
|
::slotted(el-dm-accordion-item:not(:last-child)) {
|
|
58
56
|
border-bottom: 1px solid var(--color-outline, #e0e0e0);
|
|
59
57
|
}
|
|
60
58
|
`;
|
|
61
59
|
|
|
62
|
-
class ElDmAccordion extends
|
|
60
|
+
class ElDmAccordion extends import_el_base.BaseElement {
|
|
63
61
|
static properties = {
|
|
64
62
|
multiple: { type: Boolean, reflect: true },
|
|
65
63
|
value: { type: String, reflect: true }
|
|
@@ -134,7 +132,7 @@ class ElDmAccordion extends import_el_core.BaseElement {
|
|
|
134
132
|
`;
|
|
135
133
|
}
|
|
136
134
|
}
|
|
137
|
-
var itemStyles =
|
|
135
|
+
var itemStyles = import_el_base.css`
|
|
138
136
|
:host {
|
|
139
137
|
display: block;
|
|
140
138
|
}
|
|
@@ -143,80 +141,23 @@ var itemStyles = import_el_core.css`
|
|
|
143
141
|
display: none !important;
|
|
144
142
|
}
|
|
145
143
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
}
|
|
144
|
+
/* Import core accordion styles */
|
|
145
|
+
${coreStyles}
|
|
149
146
|
|
|
147
|
+
/* Web component specific adjustments */
|
|
150
148
|
.accordion-header {
|
|
151
|
-
display: flex;
|
|
152
|
-
align-items: center;
|
|
153
|
-
justify-content: space-between;
|
|
154
|
-
width: 100%;
|
|
155
|
-
padding: 1rem 1.25rem;
|
|
156
|
-
border: none;
|
|
157
|
-
background: transparent;
|
|
158
|
-
cursor: pointer;
|
|
159
149
|
font-family: inherit;
|
|
160
150
|
font-size: 1rem;
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
text-align: left;
|
|
164
|
-
transition: background-color 150ms ease;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
.accordion-header:hover:not(:disabled) {
|
|
168
|
-
background-color: var(--color-surface-variant, #f5f5f5);
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
.accordion-header:focus-visible {
|
|
172
|
-
outline: 2px solid var(--color-primary, #6366f1);
|
|
173
|
-
outline-offset: -2px;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.accordion-header:disabled {
|
|
177
|
-
cursor: not-allowed;
|
|
178
|
-
opacity: 0.5;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
.header-content {
|
|
182
|
-
flex: 1;
|
|
183
|
-
display: flex;
|
|
184
|
-
align-items: center;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
.chevron {
|
|
188
|
-
width: 1.25rem;
|
|
189
|
-
height: 1.25rem;
|
|
190
|
-
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
191
|
-
flex-shrink: 0;
|
|
192
|
-
margin-left: 0.75rem;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
:host([open]) .chevron {
|
|
196
|
-
transform: rotate(180deg);
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
.content-wrapper {
|
|
200
|
-
display: grid;
|
|
201
|
-
grid-template-rows: 0fr;
|
|
202
|
-
transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
:host([open]) .content-wrapper {
|
|
206
|
-
grid-template-rows: 1fr;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
.content-inner {
|
|
210
|
-
overflow: hidden;
|
|
151
|
+
justify-content: space-between;
|
|
152
|
+
padding: 1rem 1.25rem;
|
|
211
153
|
}
|
|
212
154
|
|
|
213
|
-
.accordion-
|
|
155
|
+
.accordion-body-inner {
|
|
214
156
|
padding: 0 1.25rem 1rem;
|
|
215
|
-
color: var(--color-on-surface-variant, #4a4a4a);
|
|
216
157
|
}
|
|
217
158
|
`;
|
|
218
159
|
|
|
219
|
-
class ElDmAccordionItem extends
|
|
160
|
+
class ElDmAccordionItem extends import_el_base.BaseElement {
|
|
220
161
|
static properties = {
|
|
221
162
|
value: { type: String, reflect: true },
|
|
222
163
|
disabled: { type: Boolean, reflect: true },
|
|
@@ -252,13 +193,13 @@ class ElDmAccordionItem extends import_el_core.BaseElement {
|
|
|
252
193
|
}
|
|
253
194
|
}
|
|
254
195
|
render() {
|
|
255
|
-
const
|
|
256
|
-
<svg class="
|
|
196
|
+
const expandSvg = `
|
|
197
|
+
<svg class="accordion-expand" part="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="20" height="20">
|
|
257
198
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
258
199
|
</svg>
|
|
259
200
|
`;
|
|
260
201
|
return `
|
|
261
|
-
<div class="accordion-item">
|
|
202
|
+
<div class="accordion-item ${this.open ? "open" : ""}">
|
|
262
203
|
<button
|
|
263
204
|
class="accordion-header"
|
|
264
205
|
part="header"
|
|
@@ -267,15 +208,15 @@ class ElDmAccordionItem extends import_el_core.BaseElement {
|
|
|
267
208
|
aria-controls="content-${this.value || "item"}"
|
|
268
209
|
${this.disabled ? "disabled" : ""}
|
|
269
210
|
>
|
|
270
|
-
<span class="
|
|
211
|
+
<span class="accordion-title">
|
|
271
212
|
<slot name="header"></slot>
|
|
272
213
|
</span>
|
|
273
|
-
${
|
|
214
|
+
${expandSvg}
|
|
274
215
|
</button>
|
|
275
|
-
<div class="content
|
|
276
|
-
<div class="
|
|
216
|
+
<div class="accordion-content">
|
|
217
|
+
<div class="accordion-body">
|
|
277
218
|
<div
|
|
278
|
-
class="accordion-
|
|
219
|
+
class="accordion-body-inner"
|
|
279
220
|
part="content"
|
|
280
221
|
id="content-${this.value || "item"}"
|
|
281
222
|
role="region"
|
|
@@ -306,5 +247,5 @@ function register() {
|
|
|
306
247
|
}
|
|
307
248
|
}
|
|
308
249
|
|
|
309
|
-
//# debugId=
|
|
250
|
+
//# debugId=D40479E7458CD77564756E2164756E21
|
|
310
251
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/el-dm-accordion.ts", "../../src/index.ts"],
|
|
4
4
|
"sourcesContent": [
|
|
5
|
-
"/**\n * DuskMoon Accordion Element\n *\n * An expandable/collapsible panels component for organizing content.\n *\n * @element el-dm-accordion\n *\n * @attr {boolean} multiple - Allow multiple panels to be open simultaneously\n * @attr {string} value - Comma-separated list of open item IDs\n *\n * @slot - Default slot for accordion items (el-dm-accordion-item)\n *\n * @csspart container - The accordion container\n *\n * @fires change - Fired when expansion state changes\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-core';\n\nconst styles = css`\n :host {\n display: block;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n
|
|
5
|
+
"/**\n * DuskMoon Accordion Element\n *\n * An expandable/collapsible panels component for organizing content.\n * Uses styles from @duskmoon-dev/core for consistent theming.\n *\n * @element el-dm-accordion\n *\n * @attr {boolean} multiple - Allow multiple panels to be open simultaneously\n * @attr {string} value - Comma-separated list of open item IDs\n *\n * @slot - Default slot for accordion items (el-dm-accordion-item)\n *\n * @csspart container - The accordion container\n *\n * @fires change - Fired when expansion state changes\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-base';\nimport { css as accordionCSS } from '@duskmoon-dev/core/components/accordion';\n\n// Strip @layer wrapper for Shadow DOM compatibility\nconst coreStyles = accordionCSS.replace(/@layer\\s+components\\s*\\{/, '').replace(/\\}\\s*$/, '');\n\nconst styles = css`\n :host {\n display: block;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n /* Import core accordion styles */\n ${coreStyles}\n\n /* Web component specific: slotted item borders */\n ::slotted(el-dm-accordion-item:not(:last-child)) {\n border-bottom: 1px solid var(--color-outline, #e0e0e0);\n }\n`;\n\nexport class ElDmAccordion extends BaseElement {\n static properties = {\n multiple: { type: Boolean, reflect: true },\n value: { type: String, reflect: true },\n };\n\n /** Allow multiple panels to be open */\n declare multiple: boolean;\n\n /** Comma-separated list of open item IDs */\n declare value: string;\n\n constructor() {\n super();\n this.attachStyles(styles);\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('accordion-item-toggle', this._handleItemToggle as EventListener);\n this._syncItemsWithValue();\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback?.();\n this.removeEventListener('accordion-item-toggle', this._handleItemToggle as EventListener);\n }\n\n getOpenItems(): string[] {\n return this.value ? this.value.split(',').filter(Boolean) : [];\n }\n\n setOpenItems(ids: string[]): void {\n this.value = ids.join(',');\n this._syncItemsWithValue();\n this.emit('change', { value: this.value, openItems: ids });\n }\n\n open(itemId: string): void {\n const openItems = this.getOpenItems();\n if (!openItems.includes(itemId)) {\n if (this.multiple) {\n this.setOpenItems([...openItems, itemId]);\n } else {\n this.setOpenItems([itemId]);\n }\n }\n }\n\n close(itemId: string): void {\n const openItems = this.getOpenItems();\n this.setOpenItems(openItems.filter((id) => id !== itemId));\n }\n\n toggle(itemId: string): void {\n const openItems = this.getOpenItems();\n if (openItems.includes(itemId)) {\n this.close(itemId);\n } else {\n this.open(itemId);\n }\n }\n\n private _handleItemToggle = (event: CustomEvent): void => {\n const { itemId, open } = event.detail;\n if (open) {\n this.open(itemId);\n } else {\n this.close(itemId);\n }\n };\n\n private _syncItemsWithValue(): void {\n const openItems = this.getOpenItems();\n const items = this.querySelectorAll('el-dm-accordion-item');\n items.forEach((item) => {\n const accordionItem = item as ElDmAccordionItem;\n const itemValue = accordionItem.value;\n if (itemValue) {\n accordionItem.open = openItems.includes(itemValue);\n }\n });\n }\n\n render(): string {\n return `\n <div class=\"accordion\" part=\"container\" role=\"presentation\">\n <slot></slot>\n </div>\n `;\n }\n}\n\n/**\n * DuskMoon Accordion Item Element\n *\n * An individual expandable panel within an accordion.\n * Uses styles from @duskmoon-dev/core for consistent theming.\n *\n * @element el-dm-accordion-item\n *\n * @attr {string} value - Unique identifier for this item\n * @attr {boolean} disabled - Whether the item is disabled\n * @attr {boolean} open - Whether the item is expanded\n *\n * @slot header - Content for the header/trigger area\n * @slot - Default slot for the expandable content\n *\n * @csspart header - The header button\n * @csspart icon - The expand/collapse icon\n * @csspart content - The content container\n */\n\nconst itemStyles = css`\n :host {\n display: block;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n /* Import core accordion styles */\n ${coreStyles}\n\n /* Web component specific adjustments */\n .accordion-header {\n font-family: inherit;\n font-size: 1rem;\n justify-content: space-between;\n padding: 1rem 1.25rem;\n }\n\n .accordion-body-inner {\n padding: 0 1.25rem 1rem;\n }\n`;\n\nexport class ElDmAccordionItem extends BaseElement {\n static properties = {\n value: { type: String, reflect: true },\n disabled: { type: Boolean, reflect: true },\n open: { type: Boolean, reflect: true },\n };\n\n declare value: string;\n declare disabled: boolean;\n declare open: boolean;\n\n constructor() {\n super();\n this.attachStyles(itemStyles);\n }\n\n private _handleClick(): void {\n if (this.disabled) return;\n\n this.dispatchEvent(\n new CustomEvent('accordion-item-toggle', {\n bubbles: true,\n composed: true,\n detail: {\n itemId: this.value,\n open: !this.open,\n },\n }),\n );\n }\n\n private _handleKeyDown(event: KeyboardEvent): void {\n if (this.disabled) return;\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this._handleClick();\n }\n }\n\n toggle(): void {\n if (!this.disabled) {\n this._handleClick();\n }\n }\n\n render(): string {\n const expandSvg = `\n <svg class=\"accordion-expand\" part=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"20\" height=\"20\">\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n `;\n\n return `\n <div class=\"accordion-item ${this.open ? 'open' : ''}\">\n <button\n class=\"accordion-header\"\n part=\"header\"\n type=\"button\"\n aria-expanded=\"${this.open ? 'true' : 'false'}\"\n aria-controls=\"content-${this.value || 'item'}\"\n ${this.disabled ? 'disabled' : ''}\n >\n <span class=\"accordion-title\">\n <slot name=\"header\"></slot>\n </span>\n ${expandSvg}\n </button>\n <div class=\"accordion-content\">\n <div class=\"accordion-body\">\n <div\n class=\"accordion-body-inner\"\n part=\"content\"\n id=\"content-${this.value || 'item'}\"\n role=\"region\"\n aria-hidden=\"${this.open ? 'false' : 'true'}\"\n >\n <slot></slot>\n </div>\n </div>\n </div>\n </div>\n `;\n }\n\n update(): void {\n super.update();\n const header = this.shadowRoot?.querySelector('.accordion-header');\n header?.addEventListener('click', this._handleClick.bind(this));\n header?.addEventListener('keydown', this._handleKeyDown.bind(this) as EventListener);\n }\n}\n",
|
|
6
6
|
"/**\n * @duskmoon-dev/el-accordion\n *\n * DuskMoon Accordion custom element for expandable/collapsible panels\n */\n\nimport { ElDmAccordion, ElDmAccordionItem } from './el-dm-accordion.js';\n\nexport { ElDmAccordion, ElDmAccordionItem };\n\n/**\n * Register the el-dm-accordion and el-dm-accordion-item custom elements\n *\n * @example\n * ```ts\n * import { register } from '@duskmoon-dev/el-accordion';\n * register();\n * ```\n */\nexport function register(): void {\n if (!customElements.get('el-dm-accordion')) {\n customElements.define('el-dm-accordion', ElDmAccordion);\n }\n if (!customElements.get('el-dm-accordion-item')) {\n customElements.define('el-dm-accordion-item', ElDmAccordionItem);\n }\n}\n"
|
|
7
7
|
],
|
|
8
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
9
|
-
"debugId": "
|
|
8
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBiC,IAAjC;AACoC,IAApC;AAGA,IAAM,aAAa,qBAAa,QAAQ,4BAA4B,EAAE,EAAE,QAAQ,UAAU,EAAE;AAE5F,IAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQG,MAAM,sBAAsB,2BAAY;AAAA,SACtC,aAAa;AAAA,IAClB,UAAU,EAAE,MAAM,SAAS,SAAS,KAAK;AAAA,IACzC,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA,EACvC;AAAA,EAQA,WAAW,GAAG;AAAA,IACZ,MAAM;AAAA,IACN,KAAK,aAAa,MAAM;AAAA;AAAA,EAG1B,iBAAiB,GAAS;AAAA,IACxB,MAAM,kBAAkB;AAAA,IACxB,KAAK,iBAAiB,yBAAyB,KAAK,iBAAkC;AAAA,IACtF,KAAK,oBAAoB;AAAA;AAAA,EAG3B,oBAAoB,GAAS;AAAA,IAC3B,MAAM,uBAAuB;AAAA,IAC7B,KAAK,oBAAoB,yBAAyB,KAAK,iBAAkC;AAAA;AAAA,EAG3F,YAAY,GAAa;AAAA,IACvB,OAAO,KAAK,QAAQ,KAAK,MAAM,MAAM,GAAG,EAAE,OAAO,OAAO,IAAI,CAAC;AAAA;AAAA,EAG/D,YAAY,CAAC,KAAqB;AAAA,IAChC,KAAK,QAAQ,IAAI,KAAK,GAAG;AAAA,IACzB,KAAK,oBAAoB;AAAA,IACzB,KAAK,KAAK,UAAU,EAAE,OAAO,KAAK,OAAO,WAAW,IAAI,CAAC;AAAA;AAAA,EAG3D,IAAI,CAAC,QAAsB;AAAA,IACzB,MAAM,YAAY,KAAK,aAAa;AAAA,IACpC,IAAI,CAAC,UAAU,SAAS,MAAM,GAAG;AAAA,MAC/B,IAAI,KAAK,UAAU;AAAA,QACjB,KAAK,aAAa,CAAC,GAAG,WAAW,MAAM,CAAC;AAAA,MAC1C,EAAO;AAAA,QACL,KAAK,aAAa,CAAC,MAAM,CAAC;AAAA;AAAA,IAE9B;AAAA;AAAA,EAGF,KAAK,CAAC,QAAsB;AAAA,IAC1B,MAAM,YAAY,KAAK,aAAa;AAAA,IACpC,KAAK,aAAa,UAAU,OAAO,CAAC,OAAO,OAAO,MAAM,CAAC;AAAA;AAAA,EAG3D,MAAM,CAAC,QAAsB;AAAA,IAC3B,MAAM,YAAY,KAAK,aAAa;AAAA,IACpC,IAAI,UAAU,SAAS,MAAM,GAAG;AAAA,MAC9B,KAAK,MAAM,MAAM;AAAA,IACnB,EAAO;AAAA,MACL,KAAK,KAAK,MAAM;AAAA;AAAA;AAAA,EAIZ,oBAAoB,CAAC,UAA6B;AAAA,IACxD,QAAQ,QAAQ,SAAS,MAAM;AAAA,IAC/B,IAAI,MAAM;AAAA,MACR,KAAK,KAAK,MAAM;AAAA,IAClB,EAAO;AAAA,MACL,KAAK,MAAM,MAAM;AAAA;AAAA;AAAA,EAIb,mBAAmB,GAAS;AAAA,IAClC,MAAM,YAAY,KAAK,aAAa;AAAA,IACpC,MAAM,QAAQ,KAAK,iBAAiB,sBAAsB;AAAA,IAC1D,MAAM,QAAQ,CAAC,SAAS;AAAA,MACtB,MAAM,gBAAgB;AAAA,MACtB,MAAM,YAAY,cAAc;AAAA,MAChC,IAAI,WAAW;AAAA,QACb,cAAc,OAAO,UAAU,SAAS,SAAS;AAAA,MACnD;AAAA,KACD;AAAA;AAAA,EAGH,MAAM,GAAW;AAAA,IACf,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAMX;AAsBA,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeG,MAAM,0BAA0B,2BAAY;AAAA,SAC1C,aAAa;AAAA,IAClB,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA,IACrC,UAAU,EAAE,MAAM,SAAS,SAAS,KAAK;AAAA,IACzC,MAAM,EAAE,MAAM,SAAS,SAAS,KAAK;AAAA,EACvC;AAAA,EAMA,WAAW,GAAG;AAAA,IACZ,MAAM;AAAA,IACN,KAAK,aAAa,UAAU;AAAA;AAAA,EAGtB,YAAY,GAAS;AAAA,IAC3B,IAAI,KAAK;AAAA,MAAU;AAAA,IAEnB,KAAK,cACH,IAAI,YAAY,yBAAyB;AAAA,MACvC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,QAAQ,KAAK;AAAA,QACb,MAAM,CAAC,KAAK;AAAA,MACd;AAAA,IACF,CAAC,CACH;AAAA;AAAA,EAGM,cAAc,CAAC,OAA4B;AAAA,IACjD,IAAI,KAAK;AAAA,MAAU;AAAA,IAEnB,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAAA,MAC9C,MAAM,eAAe;AAAA,MACrB,KAAK,aAAa;AAAA,IACpB;AAAA;AAAA,EAGF,MAAM,GAAS;AAAA,IACb,IAAI,CAAC,KAAK,UAAU;AAAA,MAClB,KAAK,aAAa;AAAA,IACpB;AAAA;AAAA,EAGF,MAAM,GAAW;AAAA,IACf,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,IAMlB,OAAO;AAAA,mCACwB,KAAK,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,2BAK7B,KAAK,OAAO,SAAS;AAAA,mCACb,KAAK,SAAS;AAAA,YACrC,KAAK,WAAW,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,YAK7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOgB,KAAK,SAAS;AAAA;AAAA,6BAEb,KAAK,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUjD,MAAM,GAAS;AAAA,IACb,MAAM,OAAO;AAAA,IACb,MAAM,SAAS,KAAK,YAAY,cAAc,mBAAmB;AAAA,IACjE,QAAQ,iBAAiB,SAAS,KAAK,aAAa,KAAK,IAAI,CAAC;AAAA,IAC9D,QAAQ,iBAAiB,WAAW,KAAK,eAAe,KAAK,IAAI,CAAkB;AAAA;AAEvF;;;AC5PO,SAAS,QAAQ,GAAS;AAAA,EAC/B,IAAI,CAAC,eAAe,IAAI,iBAAiB,GAAG;AAAA,IAC1C,eAAe,OAAO,mBAAmB,aAAa;AAAA,EACxD;AAAA,EACA,IAAI,CAAC,eAAe,IAAI,sBAAsB,GAAG;AAAA,IAC/C,eAAe,OAAO,wBAAwB,iBAAiB;AAAA,EACjE;AAAA;",
|
|
9
|
+
"debugId": "D40479E7458CD77564756E2164756E21",
|
|
10
10
|
"names": []
|
|
11
11
|
}
|
package/dist/cjs/register.js
CHANGED
|
@@ -36,8 +36,10 @@ __export(exports_src, {
|
|
|
36
36
|
module.exports = __toCommonJS(exports_src);
|
|
37
37
|
|
|
38
38
|
// src/el-dm-accordion.ts
|
|
39
|
-
var
|
|
40
|
-
var
|
|
39
|
+
var import_el_base = require("@duskmoon-dev/el-base");
|
|
40
|
+
var import_accordion = require("@duskmoon-dev/core/components/accordion");
|
|
41
|
+
var coreStyles = import_accordion.css.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
|
|
42
|
+
var styles = import_el_base.css`
|
|
41
43
|
:host {
|
|
42
44
|
display: block;
|
|
43
45
|
}
|
|
@@ -46,20 +48,16 @@ var styles = import_el_core.css`
|
|
|
46
48
|
display: none !important;
|
|
47
49
|
}
|
|
48
50
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
flex-direction: column;
|
|
52
|
-
border: 1px solid var(--color-outline, #e0e0e0);
|
|
53
|
-
border-radius: 0.5rem;
|
|
54
|
-
overflow: hidden;
|
|
55
|
-
}
|
|
51
|
+
/* Import core accordion styles */
|
|
52
|
+
${coreStyles}
|
|
56
53
|
|
|
54
|
+
/* Web component specific: slotted item borders */
|
|
57
55
|
::slotted(el-dm-accordion-item:not(:last-child)) {
|
|
58
56
|
border-bottom: 1px solid var(--color-outline, #e0e0e0);
|
|
59
57
|
}
|
|
60
58
|
`;
|
|
61
59
|
|
|
62
|
-
class ElDmAccordion extends
|
|
60
|
+
class ElDmAccordion extends import_el_base.BaseElement {
|
|
63
61
|
static properties = {
|
|
64
62
|
multiple: { type: Boolean, reflect: true },
|
|
65
63
|
value: { type: String, reflect: true }
|
|
@@ -134,7 +132,7 @@ class ElDmAccordion extends import_el_core.BaseElement {
|
|
|
134
132
|
`;
|
|
135
133
|
}
|
|
136
134
|
}
|
|
137
|
-
var itemStyles =
|
|
135
|
+
var itemStyles = import_el_base.css`
|
|
138
136
|
:host {
|
|
139
137
|
display: block;
|
|
140
138
|
}
|
|
@@ -143,80 +141,23 @@ var itemStyles = import_el_core.css`
|
|
|
143
141
|
display: none !important;
|
|
144
142
|
}
|
|
145
143
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
}
|
|
144
|
+
/* Import core accordion styles */
|
|
145
|
+
${coreStyles}
|
|
149
146
|
|
|
147
|
+
/* Web component specific adjustments */
|
|
150
148
|
.accordion-header {
|
|
151
|
-
display: flex;
|
|
152
|
-
align-items: center;
|
|
153
|
-
justify-content: space-between;
|
|
154
|
-
width: 100%;
|
|
155
|
-
padding: 1rem 1.25rem;
|
|
156
|
-
border: none;
|
|
157
|
-
background: transparent;
|
|
158
|
-
cursor: pointer;
|
|
159
149
|
font-family: inherit;
|
|
160
150
|
font-size: 1rem;
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
text-align: left;
|
|
164
|
-
transition: background-color 150ms ease;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
.accordion-header:hover:not(:disabled) {
|
|
168
|
-
background-color: var(--color-surface-variant, #f5f5f5);
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
.accordion-header:focus-visible {
|
|
172
|
-
outline: 2px solid var(--color-primary, #6366f1);
|
|
173
|
-
outline-offset: -2px;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.accordion-header:disabled {
|
|
177
|
-
cursor: not-allowed;
|
|
178
|
-
opacity: 0.5;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
.header-content {
|
|
182
|
-
flex: 1;
|
|
183
|
-
display: flex;
|
|
184
|
-
align-items: center;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
.chevron {
|
|
188
|
-
width: 1.25rem;
|
|
189
|
-
height: 1.25rem;
|
|
190
|
-
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
191
|
-
flex-shrink: 0;
|
|
192
|
-
margin-left: 0.75rem;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
:host([open]) .chevron {
|
|
196
|
-
transform: rotate(180deg);
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
.content-wrapper {
|
|
200
|
-
display: grid;
|
|
201
|
-
grid-template-rows: 0fr;
|
|
202
|
-
transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
:host([open]) .content-wrapper {
|
|
206
|
-
grid-template-rows: 1fr;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
.content-inner {
|
|
210
|
-
overflow: hidden;
|
|
151
|
+
justify-content: space-between;
|
|
152
|
+
padding: 1rem 1.25rem;
|
|
211
153
|
}
|
|
212
154
|
|
|
213
|
-
.accordion-
|
|
155
|
+
.accordion-body-inner {
|
|
214
156
|
padding: 0 1.25rem 1rem;
|
|
215
|
-
color: var(--color-on-surface-variant, #4a4a4a);
|
|
216
157
|
}
|
|
217
158
|
`;
|
|
218
159
|
|
|
219
|
-
class ElDmAccordionItem extends
|
|
160
|
+
class ElDmAccordionItem extends import_el_base.BaseElement {
|
|
220
161
|
static properties = {
|
|
221
162
|
value: { type: String, reflect: true },
|
|
222
163
|
disabled: { type: Boolean, reflect: true },
|
|
@@ -252,13 +193,13 @@ class ElDmAccordionItem extends import_el_core.BaseElement {
|
|
|
252
193
|
}
|
|
253
194
|
}
|
|
254
195
|
render() {
|
|
255
|
-
const
|
|
256
|
-
<svg class="
|
|
196
|
+
const expandSvg = `
|
|
197
|
+
<svg class="accordion-expand" part="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="20" height="20">
|
|
257
198
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
258
199
|
</svg>
|
|
259
200
|
`;
|
|
260
201
|
return `
|
|
261
|
-
<div class="accordion-item">
|
|
202
|
+
<div class="accordion-item ${this.open ? "open" : ""}">
|
|
262
203
|
<button
|
|
263
204
|
class="accordion-header"
|
|
264
205
|
part="header"
|
|
@@ -267,15 +208,15 @@ class ElDmAccordionItem extends import_el_core.BaseElement {
|
|
|
267
208
|
aria-controls="content-${this.value || "item"}"
|
|
268
209
|
${this.disabled ? "disabled" : ""}
|
|
269
210
|
>
|
|
270
|
-
<span class="
|
|
211
|
+
<span class="accordion-title">
|
|
271
212
|
<slot name="header"></slot>
|
|
272
213
|
</span>
|
|
273
|
-
${
|
|
214
|
+
${expandSvg}
|
|
274
215
|
</button>
|
|
275
|
-
<div class="content
|
|
276
|
-
<div class="
|
|
216
|
+
<div class="accordion-content">
|
|
217
|
+
<div class="accordion-body">
|
|
277
218
|
<div
|
|
278
|
-
class="accordion-
|
|
219
|
+
class="accordion-body-inner"
|
|
279
220
|
part="content"
|
|
280
221
|
id="content-${this.value || "item"}"
|
|
281
222
|
role="region"
|
|
@@ -309,5 +250,5 @@ function register() {
|
|
|
309
250
|
// src/register.ts
|
|
310
251
|
register();
|
|
311
252
|
|
|
312
|
-
//# debugId=
|
|
253
|
+
//# debugId=6A2751D228C88FBB64756E2164756E21
|
|
313
254
|
//# sourceMappingURL=register.js.map
|
package/dist/cjs/register.js.map
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/el-dm-accordion.ts", "../../src/index.ts", "../../src/register.ts"],
|
|
4
4
|
"sourcesContent": [
|
|
5
|
-
"/**\n * DuskMoon Accordion Element\n *\n * An expandable/collapsible panels component for organizing content.\n *\n * @element el-dm-accordion\n *\n * @attr {boolean} multiple - Allow multiple panels to be open simultaneously\n * @attr {string} value - Comma-separated list of open item IDs\n *\n * @slot - Default slot for accordion items (el-dm-accordion-item)\n *\n * @csspart container - The accordion container\n *\n * @fires change - Fired when expansion state changes\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-core';\n\nconst styles = css`\n :host {\n display: block;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n
|
|
5
|
+
"/**\n * DuskMoon Accordion Element\n *\n * An expandable/collapsible panels component for organizing content.\n * Uses styles from @duskmoon-dev/core for consistent theming.\n *\n * @element el-dm-accordion\n *\n * @attr {boolean} multiple - Allow multiple panels to be open simultaneously\n * @attr {string} value - Comma-separated list of open item IDs\n *\n * @slot - Default slot for accordion items (el-dm-accordion-item)\n *\n * @csspart container - The accordion container\n *\n * @fires change - Fired when expansion state changes\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-base';\nimport { css as accordionCSS } from '@duskmoon-dev/core/components/accordion';\n\n// Strip @layer wrapper for Shadow DOM compatibility\nconst coreStyles = accordionCSS.replace(/@layer\\s+components\\s*\\{/, '').replace(/\\}\\s*$/, '');\n\nconst styles = css`\n :host {\n display: block;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n /* Import core accordion styles */\n ${coreStyles}\n\n /* Web component specific: slotted item borders */\n ::slotted(el-dm-accordion-item:not(:last-child)) {\n border-bottom: 1px solid var(--color-outline, #e0e0e0);\n }\n`;\n\nexport class ElDmAccordion extends BaseElement {\n static properties = {\n multiple: { type: Boolean, reflect: true },\n value: { type: String, reflect: true },\n };\n\n /** Allow multiple panels to be open */\n declare multiple: boolean;\n\n /** Comma-separated list of open item IDs */\n declare value: string;\n\n constructor() {\n super();\n this.attachStyles(styles);\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('accordion-item-toggle', this._handleItemToggle as EventListener);\n this._syncItemsWithValue();\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback?.();\n this.removeEventListener('accordion-item-toggle', this._handleItemToggle as EventListener);\n }\n\n getOpenItems(): string[] {\n return this.value ? this.value.split(',').filter(Boolean) : [];\n }\n\n setOpenItems(ids: string[]): void {\n this.value = ids.join(',');\n this._syncItemsWithValue();\n this.emit('change', { value: this.value, openItems: ids });\n }\n\n open(itemId: string): void {\n const openItems = this.getOpenItems();\n if (!openItems.includes(itemId)) {\n if (this.multiple) {\n this.setOpenItems([...openItems, itemId]);\n } else {\n this.setOpenItems([itemId]);\n }\n }\n }\n\n close(itemId: string): void {\n const openItems = this.getOpenItems();\n this.setOpenItems(openItems.filter((id) => id !== itemId));\n }\n\n toggle(itemId: string): void {\n const openItems = this.getOpenItems();\n if (openItems.includes(itemId)) {\n this.close(itemId);\n } else {\n this.open(itemId);\n }\n }\n\n private _handleItemToggle = (event: CustomEvent): void => {\n const { itemId, open } = event.detail;\n if (open) {\n this.open(itemId);\n } else {\n this.close(itemId);\n }\n };\n\n private _syncItemsWithValue(): void {\n const openItems = this.getOpenItems();\n const items = this.querySelectorAll('el-dm-accordion-item');\n items.forEach((item) => {\n const accordionItem = item as ElDmAccordionItem;\n const itemValue = accordionItem.value;\n if (itemValue) {\n accordionItem.open = openItems.includes(itemValue);\n }\n });\n }\n\n render(): string {\n return `\n <div class=\"accordion\" part=\"container\" role=\"presentation\">\n <slot></slot>\n </div>\n `;\n }\n}\n\n/**\n * DuskMoon Accordion Item Element\n *\n * An individual expandable panel within an accordion.\n * Uses styles from @duskmoon-dev/core for consistent theming.\n *\n * @element el-dm-accordion-item\n *\n * @attr {string} value - Unique identifier for this item\n * @attr {boolean} disabled - Whether the item is disabled\n * @attr {boolean} open - Whether the item is expanded\n *\n * @slot header - Content for the header/trigger area\n * @slot - Default slot for the expandable content\n *\n * @csspart header - The header button\n * @csspart icon - The expand/collapse icon\n * @csspart content - The content container\n */\n\nconst itemStyles = css`\n :host {\n display: block;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n /* Import core accordion styles */\n ${coreStyles}\n\n /* Web component specific adjustments */\n .accordion-header {\n font-family: inherit;\n font-size: 1rem;\n justify-content: space-between;\n padding: 1rem 1.25rem;\n }\n\n .accordion-body-inner {\n padding: 0 1.25rem 1rem;\n }\n`;\n\nexport class ElDmAccordionItem extends BaseElement {\n static properties = {\n value: { type: String, reflect: true },\n disabled: { type: Boolean, reflect: true },\n open: { type: Boolean, reflect: true },\n };\n\n declare value: string;\n declare disabled: boolean;\n declare open: boolean;\n\n constructor() {\n super();\n this.attachStyles(itemStyles);\n }\n\n private _handleClick(): void {\n if (this.disabled) return;\n\n this.dispatchEvent(\n new CustomEvent('accordion-item-toggle', {\n bubbles: true,\n composed: true,\n detail: {\n itemId: this.value,\n open: !this.open,\n },\n }),\n );\n }\n\n private _handleKeyDown(event: KeyboardEvent): void {\n if (this.disabled) return;\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this._handleClick();\n }\n }\n\n toggle(): void {\n if (!this.disabled) {\n this._handleClick();\n }\n }\n\n render(): string {\n const expandSvg = `\n <svg class=\"accordion-expand\" part=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"20\" height=\"20\">\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n `;\n\n return `\n <div class=\"accordion-item ${this.open ? 'open' : ''}\">\n <button\n class=\"accordion-header\"\n part=\"header\"\n type=\"button\"\n aria-expanded=\"${this.open ? 'true' : 'false'}\"\n aria-controls=\"content-${this.value || 'item'}\"\n ${this.disabled ? 'disabled' : ''}\n >\n <span class=\"accordion-title\">\n <slot name=\"header\"></slot>\n </span>\n ${expandSvg}\n </button>\n <div class=\"accordion-content\">\n <div class=\"accordion-body\">\n <div\n class=\"accordion-body-inner\"\n part=\"content\"\n id=\"content-${this.value || 'item'}\"\n role=\"region\"\n aria-hidden=\"${this.open ? 'false' : 'true'}\"\n >\n <slot></slot>\n </div>\n </div>\n </div>\n </div>\n `;\n }\n\n update(): void {\n super.update();\n const header = this.shadowRoot?.querySelector('.accordion-header');\n header?.addEventListener('click', this._handleClick.bind(this));\n header?.addEventListener('keydown', this._handleKeyDown.bind(this) as EventListener);\n }\n}\n",
|
|
6
6
|
"/**\n * @duskmoon-dev/el-accordion\n *\n * DuskMoon Accordion custom element for expandable/collapsible panels\n */\n\nimport { ElDmAccordion, ElDmAccordionItem } from './el-dm-accordion.js';\n\nexport { ElDmAccordion, ElDmAccordionItem };\n\n/**\n * Register the el-dm-accordion and el-dm-accordion-item custom elements\n *\n * @example\n * ```ts\n * import { register } from '@duskmoon-dev/el-accordion';\n * register();\n * ```\n */\nexport function register(): void {\n if (!customElements.get('el-dm-accordion')) {\n customElements.define('el-dm-accordion', ElDmAccordion);\n }\n if (!customElements.get('el-dm-accordion-item')) {\n customElements.define('el-dm-accordion-item', ElDmAccordionItem);\n }\n}\n",
|
|
7
7
|
"/**\n * Auto-register el-dm-accordion and el-dm-accordion-item custom elements\n *\n * @example\n * ```ts\n * import '@duskmoon-dev/el-accordion/register';\n *\n * // Now you can use <el-dm-accordion> and <el-dm-accordion-item> in HTML\n * ```\n */\nimport { register } from './index.js';\n\nregister();\n"
|
|
8
8
|
],
|
|
9
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
10
|
-
"debugId": "
|
|
9
|
+
"mappings": "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",
|
|
10
|
+
"debugId": "6A2751D228C88FBB64756E2164756E21",
|
|
11
11
|
"names": []
|
|
12
12
|
}
|