@gnireeg/accordion 0.1.7 → 0.1.8
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/dist/index.js +37 -25
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -9,8 +9,9 @@ if (typeof window !== 'undefined' && typeof HTMLElement !== 'undefined') {
|
|
|
9
9
|
* @attr {boolean} open - When present, the accordion starts in an expanded state
|
|
10
10
|
* @attr {string} animation-time - Animation duration in milliseconds (default: "300")
|
|
11
11
|
* @attr {string} animation-easing - CSS easing function (default: "ease")
|
|
12
|
+
* @attr {boolean} accordion-trigger - Applied to the element inside trigger-container that should toggle the accordion
|
|
12
13
|
*
|
|
13
|
-
* @slot trigger -
|
|
14
|
+
* @slot trigger-container - Container for the trigger element(s). Use accordion-trigger attribute to specify which element toggles the accordion
|
|
14
15
|
* @slot - Default slot for the accordion content
|
|
15
16
|
*
|
|
16
17
|
* @fires accordion-opened - Dispatched when the accordion opens (detail: { open: true })
|
|
@@ -21,16 +22,27 @@ if (typeof window !== 'undefined' && typeof HTMLElement !== 'undefined') {
|
|
|
21
22
|
*
|
|
22
23
|
* @example
|
|
23
24
|
* ```html
|
|
25
|
+
* <!-- Basic usage -->
|
|
24
26
|
* <accordion-item>
|
|
25
|
-
* <button slot="trigger">Click to expand</button>
|
|
27
|
+
* <button slot="trigger-container">Click to expand</button>
|
|
26
28
|
* <div>Your content here</div>
|
|
27
29
|
* </accordion-item>
|
|
28
30
|
*
|
|
29
31
|
* <!-- Start expanded with custom animation -->
|
|
30
32
|
* <accordion-item open animation-time="500" animation-easing="ease-in-out">
|
|
31
|
-
* <button slot="trigger">Already open</button>
|
|
33
|
+
* <button slot="trigger-container">Already open</button>
|
|
32
34
|
* <div>This content is visible by default</div>
|
|
33
35
|
* </accordion-item>
|
|
36
|
+
*
|
|
37
|
+
* <!-- Advanced: Selective trigger with multiple interactive elements -->
|
|
38
|
+
* <accordion-item>
|
|
39
|
+
* <div slot="trigger-container" class="flex gap-2">
|
|
40
|
+
* <button accordion-trigger class="flex-1">Expand details</button>
|
|
41
|
+
* <button onclick="edit()">Edit</button>
|
|
42
|
+
* <button onclick="delete()">Delete</button>
|
|
43
|
+
* </div>
|
|
44
|
+
* <div>Content - only the first button toggles the accordion</div>
|
|
45
|
+
* </accordion-item>
|
|
34
46
|
* ```
|
|
35
47
|
*
|
|
36
48
|
* @example
|
|
@@ -49,20 +61,18 @@ if (typeof window !== 'undefined' && typeof HTMLElement !== 'undefined') {
|
|
|
49
61
|
*
|
|
50
62
|
* @note Automatically adds ARIA attributes (aria-expanded) for accessibility
|
|
51
63
|
* @note Supports keyboard navigation (Enter/Space) for non-button triggers
|
|
64
|
+
* @note If no element with accordion-trigger attribute is found, the entire trigger-container will toggle the accordion
|
|
52
65
|
*/
|
|
53
66
|
class AccordionItem extends HTMLElement {
|
|
54
67
|
constructor() {
|
|
55
68
|
super();
|
|
56
|
-
this.
|
|
69
|
+
this.triggerContainerSlot = null;
|
|
57
70
|
this.triggerElement = null;
|
|
58
71
|
this.open = false;
|
|
59
72
|
this.setupTriggerAccessibility = () => {
|
|
60
|
-
if (!this.trigger)
|
|
61
|
-
return;
|
|
62
|
-
this.triggerElement = this.trigger.assignedElements()[0];
|
|
63
73
|
if (!this.triggerElement)
|
|
64
74
|
return;
|
|
65
|
-
// If the
|
|
75
|
+
// If the trigger element is not a button, add keyboard support
|
|
66
76
|
if (this.triggerElement.tagName !== 'BUTTON' && !this.triggerElement.hasAttribute('role')) {
|
|
67
77
|
this.triggerElement.setAttribute('role', 'button');
|
|
68
78
|
this.triggerElement.setAttribute('tabindex', '0');
|
|
@@ -124,12 +134,9 @@ if (typeof window !== 'undefined' && typeof HTMLElement !== 'undefined') {
|
|
|
124
134
|
}));
|
|
125
135
|
};
|
|
126
136
|
this.updateTriggerAccessibility = () => {
|
|
127
|
-
if (!this.
|
|
137
|
+
if (!this.triggerElement)
|
|
128
138
|
return;
|
|
129
|
-
|
|
130
|
-
if (triggerElement) {
|
|
131
|
-
triggerElement.setAttribute('aria-expanded', String(this.open));
|
|
132
|
-
}
|
|
139
|
+
this.triggerElement.setAttribute('aria-expanded', String(this.open));
|
|
133
140
|
};
|
|
134
141
|
// Initialize state from attribute
|
|
135
142
|
this.open = this.hasAttribute('open');
|
|
@@ -157,10 +164,10 @@ if (typeof window !== 'undefined' && typeof HTMLElement !== 'undefined') {
|
|
|
157
164
|
min-height: 0;
|
|
158
165
|
}
|
|
159
166
|
</style>
|
|
160
|
-
<slot name="trigger"></slot>
|
|
167
|
+
<slot name="trigger-container"></slot>
|
|
161
168
|
<div class="content-wrapper">
|
|
162
169
|
<div class="content-inner">
|
|
163
|
-
<slot
|
|
170
|
+
<slot></slot>
|
|
164
171
|
</div>
|
|
165
172
|
</div>
|
|
166
173
|
`;
|
|
@@ -186,22 +193,27 @@ if (typeof window !== 'undefined' && typeof HTMLElement !== 'undefined') {
|
|
|
186
193
|
}
|
|
187
194
|
}
|
|
188
195
|
connectedCallback() {
|
|
189
|
-
this.
|
|
190
|
-
if (this.
|
|
191
|
-
|
|
192
|
-
// Setup accessibility for trigger element
|
|
196
|
+
this.triggerContainerSlot = this.shadow.querySelector('slot[name="trigger-container"]');
|
|
197
|
+
if (this.triggerContainerSlot) {
|
|
198
|
+
// Find the element with accordion-trigger attribute
|
|
193
199
|
requestAnimationFrame(() => {
|
|
194
|
-
this.
|
|
195
|
-
|
|
200
|
+
this.triggerElement = this.querySelector('[accordion-trigger]');
|
|
201
|
+
// Fallback: if no [accordion-trigger] found, use the first slotted element
|
|
202
|
+
if (!this.triggerElement) {
|
|
203
|
+
this.triggerElement = this.triggerContainerSlot;
|
|
204
|
+
}
|
|
205
|
+
if (this.triggerElement) {
|
|
206
|
+
this.triggerElement.addEventListener('click', this.handleTriggerClick);
|
|
207
|
+
this.setupTriggerAccessibility();
|
|
208
|
+
this.updateTriggerAccessibility();
|
|
209
|
+
}
|
|
196
210
|
});
|
|
197
211
|
}
|
|
198
212
|
}
|
|
199
213
|
disconnectedCallback() {
|
|
200
|
-
|
|
201
|
-
this.trigger.removeEventListener('click', this.handleTriggerClick);
|
|
202
|
-
}
|
|
203
|
-
// Cleanup keyboard listener
|
|
214
|
+
// Cleanup click and keyboard listeners
|
|
204
215
|
if (this.triggerElement) {
|
|
216
|
+
this.triggerElement.removeEventListener('click', this.handleTriggerClick);
|
|
205
217
|
this.triggerElement.removeEventListener('keydown', this.handleKeydown);
|
|
206
218
|
}
|
|
207
219
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA,uEAAuE;AACvE,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,WAAW,KAAK,WAAW,EAAE,CAAC;IAE1E
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED