npm - @rcarls/rc-disclosure - Versions diffs - 0.5.0 → 0.6.0 - Mend

@rcarls/rc-disclosure 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.

Files changed (8) hide show

package/CHANGELOG.md +8 -0
package/README.md +18 -1
package/dist/custom-elements.json +86 -19
package/dist/rc-disclosure.js +41 -29
package/dist/rc-disclosure.js.map +1 -1
package/dist/types/packages/rc-disclosure/src/rc-disclosure.d.ts +18 -7
package/package.json +1 -1
package/dist/types/packages/rc-disclosure/src/rc-disclosure.test.d.ts +0 -0

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,13 @@
 # @rcarls/rc-disclosure
+## 0.6.0
+### Minor Changes
+- 57370e4: Add `defaultOpen` and `default-open` for uncontrolled disclosure state. Host writes to `open`
+  now establish controlled mode, user toggles report the requested state without overriding the
+  host value, and assigning `undefined` releases control.
 ## 0.5.0
 ### Minor Changes

package/README.md CHANGED Viewed

@@ -1,3 +1,20 @@
 # @rcarls/rc-disclosure
-Native details/summary disclosure web component with light-DOM styling hooks.
+Native `<details>`/`<summary>` disclosure web component with light-DOM styling hooks and
+controlled or uncontrolled open state.
+Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-disclosure](https://richardcarls.github.io/rc-webcomponents/components/rc-disclosure).
+```html
+<rc-disclosure default-open>
+  <details>
+    <summary>Shipping details</summary>
+    <p>Orders usually ship within two business days.</p>
+  </details>
+</rc-disclosure>
+```
+Use `default-open` for uncontrolled initial state. Writing `open` enables controlled mode;
+user interaction emits `rc-disclosure-toggle` with `{ open: boolean }`, while the rendered
+state continues to follow the host value. Assign `undefined` to the JavaScript `open` property
+to release control.

package/dist/custom-elements.json CHANGED Viewed

@@ -46,7 +46,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Disclosure wrapper for a native <details>/<summary> pair with controlled open state,\nfollowing the WAI-ARIA Disclosure pattern.\n\nThe browser keeps ownership of open/close behavior, keyboard support, and\naccessibility. This element mirrors state, emits a consistent custom event,\nand automatically opens when the URL hash matches any id within its subtree.",
+          "description": "Disclosure wrapper for a native <details>/<summary> pair with controlled and uncontrolled\nopen state,\nfollowing the WAI-ARIA Disclosure pattern.\n\nThe browser keeps ownership of open/close behavior, keyboard support, and\naccessibility. This element mirrors state, emits a consistent custom event,\nand automatically opens when the URL hash matches any id within its subtree.",
           "name": "RCDisclosure",
           "members": [
             {
@@ -75,25 +75,84 @@
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "_controlledOpen",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_defaultOpen",
               "type": {
                 "text": "boolean"
               },
-              "description": "Current open state mirrored to the child `<details>`."
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "_setupDetails",
+              "kind": "field",
+              "name": "_defaultOpenInitialized",
+              "type": {
+                "text": "boolean"
+              },
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_uncontrolledOpen",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_openInitialized",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_reflectingOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_suppressNextToggle",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Current open state. Host writes are silent; assign `undefined` to release control."
+            },
+            {
+              "kind": "field",
+              "name": "defaultOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Initial open state for uncontrolled usage."
             },
             {
               "kind": "method",
-              "name": "_teardownDetails",
+              "name": "_setupDetails",
               "privacy": "private",
               "return": {
                 "type": {
@@ -103,7 +162,7 @@
             },
             {
               "kind": "method",
-              "name": "_syncDetailsOpen",
+              "name": "_teardownDetails",
               "privacy": "private",
               "return": {
                 "type": {
@@ -113,7 +172,7 @@
             },
             {
               "kind": "method",
-              "name": "_setOpen",
+              "name": "_applyOpen",
               "privacy": "private",
               "return": {
                 "type": {
@@ -122,16 +181,14 @@
               },
               "parameters": [
                 {
-                  "name": "value",
+                  "name": "open",
                   "type": {
                     "text": "boolean"
                   }
                 },
                 {
-                  "name": "reflect",
-                  "type": {
-                    "text": "boolean"
-                  }
+                  "name": "suppressToggle",
+                  "default": "true"
                 }
               ]
             },
@@ -175,6 +232,12 @@
             }
           ],
           "events": [
+            {
+              "name": "TOGGLE_EVENT",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
             {
               "description": "Fires when the child `<details>` toggles.",
               "name": "rc-disclosure-toggle"
@@ -183,7 +246,11 @@
           "attributes": [
             {
               "name": "open",
-              "description": "Current open state mirrored to the child `<details>`."
+              "description": "Controlled open state mirrored to the child `<details>`."
+            },
+            {
+              "name": "default-open",
+              "description": "Initial open state for uncontrolled usage."
             }
           ],
           "superclass": {

package/dist/rc-disclosure.js CHANGED Viewed

@@ -1,9 +1,13 @@
 const n = "rc-disclosure-toggle", r = ":scope > details", i = ":scope > summary";
-class a extends HTMLElement {
+class l extends HTMLElement {
   constructor() {
-    super(...arguments), this._observer = new MutationObserver(() => this._setupDetails()), this._$details = null, this._scrollFrame = 0, this._onToggle = () => {
+    super(...arguments), this._observer = new MutationObserver(() => this._setupDetails()), this._$details = null, this._scrollFrame = 0, this._defaultOpen = !1, this._defaultOpenInitialized = !1, this._openInitialized = !1, this._reflectingOpen = !1, this._suppressNextToggle = !1, this._onToggle = () => {
+      if (this._suppressNextToggle) {
+        this._suppressNextToggle = !1;
+        return;
+      }
       const e = this._$details?.open ?? !1;
-      this._reflectOpen(e), this.dispatchEvent(
+      this._controlledOpen === void 0 ? (this._uncontrolledOpen = e, this._reflectOpen(e)) : (this._applyOpen(this._controlledOpen, !0), this._reflectOpen(this._controlledOpen)), this.dispatchEvent(
         new CustomEvent(n, {
           bubbles: !0,
           composed: !0,
@@ -15,14 +19,21 @@ class a extends HTMLElement {
     };
   }
   static get observedAttributes() {
-    return ["open"];
+    return ["open", "default-open"];
   }
-  /** Current open state mirrored to the child `<details>`. */
+  /** Current open state. Host writes are silent; assign `undefined` to release control. */
   get open() {
-    return this._$details?.open ?? this.hasAttribute("open");
+    return this._controlledOpen ?? this._uncontrolledOpen ?? this._defaultOpen;
   }
   set open(e) {
-    this._setOpen(e, !0);
+    this._controlledOpen = e, this._openInitialized = !0, this._applyOpen(this.open), this._reflectOpen(this.open);
+  }
+  /** Initial open state for uncontrolled usage. */
+  get defaultOpen() {
+    return this._defaultOpen;
+  }
+  set defaultOpen(e) {
+    this._defaultOpen = e, this._defaultOpenInitialized = !0, !this._openInitialized && this._controlledOpen === void 0 && this._uncontrolledOpen === void 0 && (this._applyOpen(e), this._reflectOpen(e));
   }
   connectedCallback() {
     this._observer.observe(this, { childList: !0 }), window.addEventListener("hashchange", this._onHashChange), this._setupDetails();
@@ -30,35 +41,30 @@ class a extends HTMLElement {
   disconnectedCallback() {
     this._observer.disconnect(), window.removeEventListener("hashchange", this._onHashChange), cancelAnimationFrame(this._scrollFrame), this._teardownDetails();
   }
-  attributeChangedCallback(e, t, s) {
-    t !== s && this._syncDetailsOpen();
+  attributeChangedCallback(e, s, t) {
+    if (s !== t) {
+      if (e === "default-open") {
+        this.defaultOpen = t !== null;
+        return;
+      }
+      this._reflectingOpen || (this.open = t !== null);
+    }
   }
   _setupDetails() {
     const e = this.querySelector(r);
     if (e === this._$details || (this._teardownDetails(), this._$details = e, !e))
       return;
-    e.id || (e.id = crypto.randomUUID()), e.querySelector(i)?.setAttribute("aria-controls", e.id), e.addEventListener("toggle", this._onToggle), !this.hasAttribute("open") && e.open && this._reflectOpen(!0), this._syncDetailsOpen(), this._reflectOpen(e.open), this._openForCurrentHash();
+    e.id || (e.id = crypto.randomUUID()), e.querySelector(i)?.setAttribute("aria-controls", e.id), e.addEventListener("toggle", this._onToggle), this._controlledOpen === void 0 && this._uncontrolledOpen === void 0 && (this._uncontrolledOpen = this._defaultOpenInitialized ? this._defaultOpen : e.open), this._applyOpen(this.open, !0), this._reflectOpen(this.open), this._openForCurrentHash();
   }
   _teardownDetails() {
     this._$details?.querySelector(i)?.removeAttribute("aria-controls"), this._$details?.removeEventListener("toggle", this._onToggle), this._$details = null;
   }
-  _syncDetailsOpen() {
-    const e = this._$details;
-    if (!e)
-      return;
-    const t = this.hasAttribute("open");
-    e.open !== t && (e.open = t);
-  }
-  _setOpen(e, t) {
-    const s = this._$details;
-    s && s.open !== e && (s.open = e), t && this._reflectOpen(e);
+  _applyOpen(e, s = !0) {
+    const t = this._$details;
+    t && t.open !== e && (this._suppressNextToggle = s, t.open = e);
   }
   _reflectOpen(e) {
-    if (e) {
-      this.hasAttribute("open") || this.setAttribute("open", "");
-      return;
-    }
-    this.hasAttribute("open") && this.removeAttribute("open");
+    this.hasAttribute("open") !== e && (this._reflectingOpen = !0, this.toggleAttribute("open", e), this._reflectingOpen = !1);
   }
   _openForCurrentHash() {
     if (!location.hash)
@@ -66,13 +72,19 @@ class a extends HTMLElement {
     const e = decodeURIComponent(location.hash.slice(1));
     if (!e || !this.querySelector(`#${CSS.escape(e)}`))
       return;
-    const s = this.open;
-    this.open = !0, !s && (cancelAnimationFrame(this._scrollFrame), this._scrollFrame = requestAnimationFrame(() => {
+    const t = this.open;
+    this._controlledOpen === void 0 ? (this._uncontrolledOpen = !0, this._applyOpen(!0), this._reflectOpen(!0)) : this.dispatchEvent(
+      new CustomEvent(n, {
+        bubbles: !0,
+        composed: !0,
+        detail: { open: !0 }
+      })
+    ), this.open && (t || (cancelAnimationFrame(this._scrollFrame), this._scrollFrame = requestAnimationFrame(() => {
       document.getElementById(e)?.scrollIntoView();
-    }));
+    })));
   }
 }
 export {
-  a as RCDisclosure
+  l as RCDisclosure
 };
 //# sourceMappingURL=rc-disclosure.js.map

package/dist/rc-disclosure.js.map CHANGED Viewed

	@@ -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 /\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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"}
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 and uncontrolled\n * 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 - Controlled open state mirrored to the child `<details>`.\n * @attr default-open - Initial open state for uncontrolled usage.\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 private _controlledOpen: boolean \| undefined;\n private _defaultOpen = false;\n private _defaultOpenInitialized = false;\n private _uncontrolledOpen: boolean \| undefined;\n private _openInitialized = false;\n private _reflectingOpen = false;\n private _suppressNextToggle = false;\n\n static get observedAttributes(): string[] {\n return ['open', 'default-open'];\n }\n\n /* Current open state. Host writes are silent; assign `undefined` to release control. /\n get open(): boolean {\n return this._controlledOpen ?? this._uncontrolledOpen ?? this._defaultOpen;\n }\n\n set open(value: boolean \| undefined) {\n this._controlledOpen = value;\n this._openInitialized = true;\n this._applyOpen(this.open);\n this._reflectOpen(this.open);\n }\n\n /* Initial open state for uncontrolled usage. */\n get defaultOpen(): boolean {\n return this._defaultOpen;\n }\n\n set defaultOpen(value: boolean) {\n this._defaultOpen = value;\n this._defaultOpenInitialized = true;\n\n if (\n !this._openInitialized &&\n this._controlledOpen === undefined &&\n this._uncontrolledOpen === undefined\n ) {\n this._applyOpen(value);\n this._reflectOpen(value);\n }\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 if (name === 'default-open') {\n this.defaultOpen = newValue !== null;\n\n return;\n }\n\n if (this._reflectingOpen) {\n return;\n }\n\n this.open = newValue === null ? false : true;\n }\n\n private _setupDetails(): void {\n const $details = this.querySelector<HTMLDetailsElement>(DETAILS_SELECTOR);\n\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\n $summary?.setAttribute('aria-controls', $details.id);\n\n $details.addEventListener('toggle', this._onToggle);\n\n if (this._controlledOpen === undefined && this._uncontrolledOpen === undefined) {\n this._uncontrolledOpen = this._defaultOpenInitialized ? this._defaultOpen : $details.open;\n }\n\n this._applyOpen(this.open, true);\n this._reflectOpen(this.open);\n this._openForCurrentHash();\n }\n\n private _teardownDetails(): void {\n const $summary = this._$details?.querySelector<HTMLElement>(SUMMARY_SELECTOR);\n\n $summary?.removeAttribute('aria-controls');\n\n this._$details?.removeEventListener('toggle', this._onToggle);\n this._$details = null;\n }\n\n private _applyOpen(open: boolean, suppressToggle = true): void {\n const $details = this._$details;\n\n if (!$details) {\n return;\n }\n\n if ($details.open !== open) {\n this._suppressNextToggle = suppressToggle;\n $details.open = open;\n }\n }\n\n private _reflectOpen(value: boolean): void {\n if (this.hasAttribute('open') === value) {\n return;\n }\n\n this._reflectingOpen = true;\n this.toggleAttribute('open', value);\n this._reflectingOpen = false;\n }\n\n private _onToggle = (): void => {\n if (this._suppressNextToggle) {\n this._suppressNextToggle = false;\n\n return;\n }\n\n const requestedOpen = this._$details?.open ?? false;\n\n if (this._controlledOpen === undefined) {\n this._uncontrolledOpen = requestedOpen;\n this._reflectOpen(requestedOpen);\n } else {\n this._applyOpen(this._controlledOpen, true);\n this._reflectOpen(this._controlledOpen);\n }\n\n this.dispatchEvent(\n new CustomEvent<RCDisclosureToggleEvent>(TOGGLE_EVENT, {\n bubbles: true,\n composed: true,\n detail: { open: requestedOpen },\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\n if (!targetId) {\n return;\n }\n\n const $target = this.querySelector(`#${CSS.escape(targetId)}`);\n\n if (!$target) {\n return;\n }\n\n const wasOpen = this.open;\n\n if (this._controlledOpen === undefined) {\n this._uncontrolledOpen = true;\n this._applyOpen(true);\n this._reflectOpen(true);\n } else {\n this.dispatchEvent(\n new CustomEvent<RCDisclosureToggleEvent>(TOGGLE_EVENT, {\n bubbles: true,\n composed: true,\n detail: { open: true },\n }),\n );\n }\n\n if (!this.open) {\n return;\n }\n\n if (wasOpen) {\n return;\n }\n\n cancelAnimationFrame(this._scrollFrame);\n\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","requestedOpen","value","name","oldValue","newValue","$details","open","suppressToggle","targetId","wasOpen"],"mappings":"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"}

package/dist/types/packages/rc-disclosure/src/rc-disclosure.d.ts CHANGED Viewed

@@ -8,7 +8,8 @@ declare global {
     }
 }
 /**
- * Disclosure wrapper for a native <details>/<summary> pair with controlled open state,
+ * Disclosure wrapper for a native <details>/<summary> pair with controlled and uncontrolled
+ * open state,
  * following the WAI-ARIA Disclosure pattern.
  *
  * The browser keeps ownership of open/close behavior, keyboard support, and
@@ -20,23 +21,33 @@ declare global {
  *
  * @fires rc-disclosure-toggle - Fires when the child `<details>` toggles.
  *
- * @attr open - Current open state mirrored to the child `<details>`.
+ * @attr open - Controlled open state mirrored to the child `<details>`.
+ * @attr default-open - Initial open state for uncontrolled usage.
  */
 export declare class RCDisclosure extends HTMLElement {
     private _observer;
     private _$details;
     private _scrollFrame;
+    private _controlledOpen;
+    private _defaultOpen;
+    private _defaultOpenInitialized;
+    private _uncontrolledOpen;
+    private _openInitialized;
+    private _reflectingOpen;
+    private _suppressNextToggle;
     static get observedAttributes(): string[];
-    /** Current open state mirrored to the child `<details>`. */
+    /** Current open state. Host writes are silent; assign `undefined` to release control. */
     get open(): boolean;
-    set open(value: boolean);
+    set open(value: boolean | undefined);
+    /** Initial open state for uncontrolled usage. */
+    get defaultOpen(): boolean;
+    set defaultOpen(value: boolean);
     connectedCallback(): void;
     disconnectedCallback(): void;
-    attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     private _setupDetails;
     private _teardownDetails;
-    private _syncDetailsOpen;
-    private _setOpen;
+    private _applyOpen;
     private _reflectOpen;
     private _onToggle;
     private _onHashChange;

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Disclosure wrapper for a native <details>/<summary> pair with controlled open state.",
   "repository": {
     "type": "git",

package/dist/types/packages/rc-disclosure/src/rc-disclosure.test.d.ts DELETED Viewed

File without changes