@rcarls/rc-disclosure 0.4.2 → 0.5.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/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @rcarls/rc-disclosure
|
|
2
2
|
|
|
3
|
+
## 0.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 689340c: Remove pre-1.0 deprecated APIs: the boolean `keyNavigation` option, `rc-disclosure.fragment`,
|
|
8
|
+
`rc-textarea.listNumbers`, `rc-textarea.label`, and `decorationsFromHtml`.
|
|
9
|
+
|
|
3
10
|
## 0.4.2
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
|
@@ -81,15 +81,6 @@
|
|
|
81
81
|
},
|
|
82
82
|
"description": "Current open state mirrored to the child `<details>`."
|
|
83
83
|
},
|
|
84
|
-
{
|
|
85
|
-
"kind": "field",
|
|
86
|
-
"name": "fragment",
|
|
87
|
-
"type": {
|
|
88
|
-
"text": "boolean"
|
|
89
|
-
},
|
|
90
|
-
"description": "Legacy manual opt-in for URL-fragment auto-open.",
|
|
91
|
-
"deprecated": "No longer required. `rc-disclosure` now automatically opens and\nscrolls when the URL hash matches any id within its subtree. Will be removed\nin v1.0 release."
|
|
92
|
-
},
|
|
93
84
|
{
|
|
94
85
|
"kind": "method",
|
|
95
86
|
"name": "_setupDetails",
|
|
@@ -193,10 +184,6 @@
|
|
|
193
184
|
{
|
|
194
185
|
"name": "open",
|
|
195
186
|
"description": "Current open state mirrored to the child `<details>`."
|
|
196
|
-
},
|
|
197
|
-
{
|
|
198
|
-
"name": "fragment",
|
|
199
|
-
"description": "Deprecated legacy opt-in for URL-fragment auto-open; removed before v1.0."
|
|
200
187
|
}
|
|
201
188
|
],
|
|
202
189
|
"superclass": {
|
package/dist/rc-disclosure.js
CHANGED
|
@@ -15,7 +15,7 @@ class a extends HTMLElement {
|
|
|
15
15
|
};
|
|
16
16
|
}
|
|
17
17
|
static get observedAttributes() {
|
|
18
|
-
return ["open"
|
|
18
|
+
return ["open"];
|
|
19
19
|
}
|
|
20
20
|
/** Current open state mirrored to the child `<details>`. */
|
|
21
21
|
get open() {
|
|
@@ -24,19 +24,6 @@ class a extends HTMLElement {
|
|
|
24
24
|
set open(e) {
|
|
25
25
|
this._setOpen(e, !0);
|
|
26
26
|
}
|
|
27
|
-
/**
|
|
28
|
-
* Legacy manual opt-in for URL-fragment auto-open.
|
|
29
|
-
*
|
|
30
|
-
* @deprecated No longer required. `rc-disclosure` now automatically opens and
|
|
31
|
-
* scrolls when the URL hash matches any id within its subtree. Will be removed
|
|
32
|
-
* in v1.0 release.
|
|
33
|
-
*/
|
|
34
|
-
get fragment() {
|
|
35
|
-
return this.hasAttribute("fragment");
|
|
36
|
-
}
|
|
37
|
-
set fragment(e) {
|
|
38
|
-
this.toggleAttribute("fragment", e);
|
|
39
|
-
}
|
|
40
27
|
connectedCallback() {
|
|
41
28
|
this._observer.observe(this, { childList: !0 }), window.addEventListener("hashchange", this._onHashChange), this._setupDetails();
|
|
42
29
|
}
|
|
@@ -44,13 +31,7 @@ class a extends HTMLElement {
|
|
|
44
31
|
this._observer.disconnect(), window.removeEventListener("hashchange", this._onHashChange), cancelAnimationFrame(this._scrollFrame), this._teardownDetails();
|
|
45
32
|
}
|
|
46
33
|
attributeChangedCallback(e, t, s) {
|
|
47
|
-
|
|
48
|
-
if (e === "open") {
|
|
49
|
-
this._syncDetailsOpen();
|
|
50
|
-
return;
|
|
51
|
-
}
|
|
52
|
-
e === "fragment" && this._openForCurrentHash();
|
|
53
|
-
}
|
|
34
|
+
t !== s && this._syncDetailsOpen();
|
|
54
35
|
}
|
|
55
36
|
_setupDetails() {
|
|
56
37
|
const e = this.querySelector(r);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rc-disclosure.js","sources":["../src/rc-disclosure.ts"],"sourcesContent":["export interface RCDisclosureToggleEvent {\n /** Whether the disclosure is now open. */\n open: boolean;\n}\n\nconst TOGGLE_EVENT = 'rc-disclosure-toggle';\nconst DETAILS_SELECTOR = ':scope > details';\nconst SUMMARY_SELECTOR = ':scope > summary';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'rc-disclosure': RCDisclosure;\n }\n}\n\n/**\n * Disclosure wrapper for a native <details>/<summary> pair with controlled open state,\n * following the WAI-ARIA Disclosure pattern.\n *\n * The browser keeps ownership of open/close behavior, keyboard support, and\n * accessibility. This element mirrors state, emits a consistent custom event,\n * and automatically opens when the URL hash matches any id within its subtree.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-disclosure rc-disclosure docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ WAI-ARIA Disclosure pattern}\n *\n * @fires rc-disclosure-toggle - Fires when the child `<details>` toggles.\n *\n * @attr open - Current open state mirrored to the child `<details>`.\n
|
|
1
|
+
{"version":3,"file":"rc-disclosure.js","sources":["../src/rc-disclosure.ts"],"sourcesContent":["export interface RCDisclosureToggleEvent {\n /** Whether the disclosure is now open. */\n open: boolean;\n}\n\nconst TOGGLE_EVENT = 'rc-disclosure-toggle';\nconst DETAILS_SELECTOR = ':scope > details';\nconst SUMMARY_SELECTOR = ':scope > summary';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'rc-disclosure': RCDisclosure;\n }\n}\n\n/**\n * Disclosure wrapper for a native <details>/<summary> pair with controlled open state,\n * following the WAI-ARIA Disclosure pattern.\n *\n * The browser keeps ownership of open/close behavior, keyboard support, and\n * accessibility. This element mirrors state, emits a consistent custom event,\n * and automatically opens when the URL hash matches any id within its subtree.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-disclosure rc-disclosure docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ WAI-ARIA Disclosure pattern}\n *\n * @fires rc-disclosure-toggle - Fires when the child `<details>` toggles.\n *\n * @attr open - Current open state mirrored to the child `<details>`.\n */\nexport class RCDisclosure extends HTMLElement {\n private _observer = new MutationObserver(() => this._setupDetails());\n\n private _$details: HTMLDetailsElement | null = null;\n\n private _scrollFrame = 0;\n\n static get observedAttributes(): string[] {\n return ['open'];\n }\n\n /** Current open state mirrored to the child `<details>`. */\n get open(): boolean {\n return this._$details?.open ?? this.hasAttribute('open');\n }\n\n set open(value: boolean) {\n this._setOpen(value, true);\n }\n\n connectedCallback(): void {\n this._observer.observe(this, { childList: true });\n window.addEventListener('hashchange', this._onHashChange);\n this._setupDetails();\n }\n\n disconnectedCallback(): void {\n this._observer.disconnect();\n window.removeEventListener('hashchange', this._onHashChange);\n cancelAnimationFrame(this._scrollFrame);\n this._teardownDetails();\n }\n\n attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void {\n if (oldValue === newValue) {\n return;\n }\n\n this._syncDetailsOpen();\n }\n\n private _setupDetails(): void {\n const $details = this.querySelector<HTMLDetailsElement>(DETAILS_SELECTOR);\n if ($details === this._$details) {\n return;\n }\n\n this._teardownDetails();\n this._$details = $details;\n\n if (!$details) {\n if (import.meta.env.DEV) {\n console.warn(\n '[rc-disclosure] No direct child <details> found. Place native ' +\n '<details><summary>...</summary>...</details> inside <rc-disclosure>.',\n this,\n );\n }\n\n return;\n }\n\n if (!$details.id) {\n $details.id = crypto.randomUUID();\n }\n\n const $summary = $details.querySelector<HTMLElement>(SUMMARY_SELECTOR);\n $summary?.setAttribute('aria-controls', $details.id);\n\n $details.addEventListener('toggle', this._onToggle);\n\n // If the host hasn't been given an explicit initial `open` of its own,\n // adopt whatever the wrapped <details> markup already says instead of\n // silently forcing it closed on connect — plain `<details open>`\n // should still behave the way it always has when nothing overrides it.\n if (!this.hasAttribute('open') && $details.open) {\n this._reflectOpen(true);\n }\n\n this._syncDetailsOpen();\n this._reflectOpen($details.open);\n this._openForCurrentHash();\n }\n\n private _teardownDetails(): void {\n const $summary = this._$details?.querySelector<HTMLElement>(SUMMARY_SELECTOR);\n $summary?.removeAttribute('aria-controls');\n\n this._$details?.removeEventListener('toggle', this._onToggle);\n this._$details = null;\n }\n\n private _syncDetailsOpen(): void {\n const $details = this._$details;\n if (!$details) {\n return;\n }\n\n const nextOpen = this.hasAttribute('open');\n if ($details.open !== nextOpen) {\n $details.open = nextOpen;\n }\n }\n\n private _setOpen(value: boolean, reflect: boolean): void {\n const $details = this._$details;\n if ($details && $details.open !== value) {\n $details.open = value;\n }\n\n // _reflectOpen is called here for programmatic opens because the <details>\n // toggle event is async (queued task per HTML spec). _onToggle also calls\n // _reflectOpen for user-initiated clicks, but that arrives after a tick.\n if (reflect) {\n this._reflectOpen(value);\n }\n }\n\n private _reflectOpen(value: boolean): void {\n if (value) {\n if (!this.hasAttribute('open')) {\n this.setAttribute('open', '');\n }\n\n return;\n }\n\n if (this.hasAttribute('open')) {\n this.removeAttribute('open');\n }\n }\n\n private _onToggle = (): void => {\n const open = this._$details?.open ?? false;\n\n this._reflectOpen(open);\n this.dispatchEvent(\n new CustomEvent<RCDisclosureToggleEvent>(TOGGLE_EVENT, {\n bubbles: true,\n composed: true,\n detail: { open },\n }),\n );\n };\n\n private _onHashChange = (): void => {\n this._openForCurrentHash();\n };\n\n private _openForCurrentHash(): void {\n if (!location.hash) {\n return;\n }\n\n const targetId = decodeURIComponent(location.hash.slice(1));\n if (!targetId) {\n return;\n }\n\n const $target = this.querySelector(`#${CSS.escape(targetId)}`);\n if (!$target) {\n return;\n }\n\n const wasOpen = this.open;\n\n this.open = true;\n\n if (wasOpen) {\n return;\n }\n\n cancelAnimationFrame(this._scrollFrame);\n this._scrollFrame = requestAnimationFrame(() => {\n document.getElementById(targetId)?.scrollIntoView();\n });\n }\n}\n\nexport default RCDisclosure;\n"],"names":["TOGGLE_EVENT","DETAILS_SELECTOR","SUMMARY_SELECTOR","RCDisclosure","open","value","_name","oldValue","newValue","$details","nextOpen","reflect","targetId","wasOpen"],"mappings":"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"}
|
|
@@ -21,7 +21,6 @@ declare global {
|
|
|
21
21
|
* @fires rc-disclosure-toggle - Fires when the child `<details>` toggles.
|
|
22
22
|
*
|
|
23
23
|
* @attr open - Current open state mirrored to the child `<details>`.
|
|
24
|
-
* @attr fragment - Deprecated legacy opt-in for URL-fragment auto-open; removed before v1.0.
|
|
25
24
|
*/
|
|
26
25
|
export declare class RCDisclosure extends HTMLElement {
|
|
27
26
|
private _observer;
|
|
@@ -31,18 +30,9 @@ export declare class RCDisclosure extends HTMLElement {
|
|
|
31
30
|
/** Current open state mirrored to the child `<details>`. */
|
|
32
31
|
get open(): boolean;
|
|
33
32
|
set open(value: boolean);
|
|
34
|
-
/**
|
|
35
|
-
* Legacy manual opt-in for URL-fragment auto-open.
|
|
36
|
-
*
|
|
37
|
-
* @deprecated No longer required. `rc-disclosure` now automatically opens and
|
|
38
|
-
* scrolls when the URL hash matches any id within its subtree. Will be removed
|
|
39
|
-
* in v1.0 release.
|
|
40
|
-
*/
|
|
41
|
-
get fragment(): boolean;
|
|
42
|
-
set fragment(value: boolean);
|
|
43
33
|
connectedCallback(): void;
|
|
44
34
|
disconnectedCallback(): void;
|
|
45
|
-
attributeChangedCallback(
|
|
35
|
+
attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
|
|
46
36
|
private _setupDetails;
|
|
47
37
|
private _teardownDetails;
|
|
48
38
|
private _syncDetailsOpen;
|