@skdx/web-components 0.26.0 → 0.28.0

package/dist/clipboard/ClipboardInput.d.cts

@@ -1,17 +1,9 @@
 import { LitElement, nothing } from 'lit';
 /**
- * `<skdx-clipboard-input>` — the optional read-only `<input>` showing the
- * `<skdx-clipboard>` root's `value`: the "here is exactly what you are about to
- * copy" field next to the button. Renders `readonly` (not `disabled`, which
- * would take it out of the tab order and grey the text out) with
- * `data-state="copied" | "idle"` and `data-disabled`, and selects its whole
- * contents on focus so the manual Ctrl+C path is one keystroke rather than a
- * drag. Must be used inside `<skdx-clipboard>`, which it finds with `closest()`.
- *
- * There is deliberately no `value` property: the root owns the text, and a
- * field showing something other than what the button copies is a bug with a
- * UI. Give the host an `aria-label` — it is moved onto the inner `<input>`,
- * and a bare read-only field announces only its contents.
+ * Read-only input showing root's `value`, selects on focus. Light DOM
+ * (no shadow root) so labels and `findFieldControl()` can reach the inner `<input>`.
+ * Provide `aria-label` on host; `::part(input)` is inert. Style as descendant:
+ * `skdx-clipboard-input > input { … }`.
  *
  * @example
  * ```html
@@ -21,28 +13,13 @@ import { LitElement, nothing } from 'lit';
  * </skdx-clipboard>
  * ```
  *
- * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
- * root), for the same reason `<skdx-text-field-input>` does. A wrapping
- * `<label>` names its first labelable *descendant*, and `<skdx-field>`'s
- * `findFieldControl()` matches with `querySelectorAll()`, which does not pierce
- * a shadow root — so behind the boundary neither could reach the `<input>` and
- * the field was anonymous unless the host carried an explicit `aria-label`.
- * `display: contents` on the inner control is not an alternative here: CSS
- * Display 3 computes it to `none` on form controls.
- *
- * @csspart input - The native `<input>` element. **`::part(input)` does not reach it.**
- * This element renders into the light DOM (see `createRenderRoot` below) and `::part()`
- * only matches inside a shadow root, so the `part` attribute is inert here. It is kept so
- * the name matches the shadow-DOM components and the styling-hooks contract. Style it as an
- * ordinary descendant instead: `skdx-clipboard-input > input { … }`.
+ * @csspart input - The native `<input>` (style via descendant selector).
  */
 export declare class SkdxClipboardInput extends LitElement {
     /** Light DOM, for the labelling reasons in the class docblock. */
     createRenderRoot(): this;
     /**
-     * Reaches through to the native `<input>`. The shadow root used to carry
-     * `delegatesFocus`, which did this for free; a light-DOM element has to
-     * forward focus itself.
+     * Forward focus to inner input (no delegatesFocus in light DOM).
      */
     focus(options?: FocusOptions): void;
     private root;

package/dist/clipboard/ClipboardInput.d.ts

@@ -1,17 +1,9 @@
 import { LitElement, nothing } from 'lit';
 /**
- * `<skdx-clipboard-input>` — the optional read-only `<input>` showing the
- * `<skdx-clipboard>` root's `value`: the "here is exactly what you are about to
- * copy" field next to the button. Renders `readonly` (not `disabled`, which
- * would take it out of the tab order and grey the text out) with
- * `data-state="copied" | "idle"` and `data-disabled`, and selects its whole
- * contents on focus so the manual Ctrl+C path is one keystroke rather than a
- * drag. Must be used inside `<skdx-clipboard>`, which it finds with `closest()`.
- *
- * There is deliberately no `value` property: the root owns the text, and a
- * field showing something other than what the button copies is a bug with a
- * UI. Give the host an `aria-label` — it is moved onto the inner `<input>`,
- * and a bare read-only field announces only its contents.
+ * Read-only input showing root's `value`, selects on focus. Light DOM
+ * (no shadow root) so labels and `findFieldControl()` can reach the inner `<input>`.
+ * Provide `aria-label` on host; `::part(input)` is inert. Style as descendant:
+ * `skdx-clipboard-input > input { … }`.
  *
  * @example
  * ```html
@@ -21,28 +13,13 @@ import { LitElement, nothing } from 'lit';
  * </skdx-clipboard>
  * ```
  *
- * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
- * root), for the same reason `<skdx-text-field-input>` does. A wrapping
- * `<label>` names its first labelable *descendant*, and `<skdx-field>`'s
- * `findFieldControl()` matches with `querySelectorAll()`, which does not pierce
- * a shadow root — so behind the boundary neither could reach the `<input>` and
- * the field was anonymous unless the host carried an explicit `aria-label`.
- * `display: contents` on the inner control is not an alternative here: CSS
- * Display 3 computes it to `none` on form controls.
- *
- * @csspart input - The native `<input>` element. **`::part(input)` does not reach it.**
- * This element renders into the light DOM (see `createRenderRoot` below) and `::part()`
- * only matches inside a shadow root, so the `part` attribute is inert here. It is kept so
- * the name matches the shadow-DOM components and the styling-hooks contract. Style it as an
- * ordinary descendant instead: `skdx-clipboard-input > input { … }`.
+ * @csspart input - The native `<input>` (style via descendant selector).
  */
 export declare class SkdxClipboardInput extends LitElement {
     /** Light DOM, for the labelling reasons in the class docblock. */
     createRenderRoot(): this;
     /**
-     * Reaches through to the native `<input>`. The shadow root used to carry
-     * `delegatesFocus`, which did this for free; a light-DOM element has to
-     * forward focus itself.
+     * Forward focus to inner input (no delegatesFocus in light DOM).
      */
     focus(options?: FocusOptions): void;
     private root;

package/dist/clipboard/ClipboardTrigger.d.cts

@@ -1,18 +1,9 @@
 import { LitElement, nothing } from 'lit';
 /**
- * `<skdx-clipboard-trigger>` — the button that copies the `<skdx-clipboard>`
- * root's `value`. Renders a real `<button type="button">` in its shadow root —
- * so Enter and Space work for free — carrying `data-state="copied" | "idle"`
- * and `data-disabled`, and `disabled` when either it or the root is. Must be
- * used inside `<skdx-clipboard>`, which it finds with `closest()` and
- * re-renders from on every `skdx-clipboard-internal-update`.
- *
- * It carries no built-in label: give it text, or an icon plus `aria-label`.
- * The `aria-label` written on this host is moved onto the inner `<button>`,
- * where the role it names actually lives. Keep that label stable across the
- * copy ("Copy install command"), and let `<skdx-clipboard-indicator>` swap the
- * *visual* — renaming the button under the user's pointer moves the target
- * they were about to click again, and re-announces the whole control on focus.
+ * `<skdx-clipboard-trigger>` — button that copies the root's `value`.
+ * Carries `data-state="copied" | "idle"`. Moves the host's `aria-label` onto
+ * the inner button so it names the actual role. Use `<skdx-clipboard-indicator>`
+ * to swap the visual text without renaming the button.
  *
  * @example
  * ```html
@@ -34,7 +25,6 @@ export declare class SkdxClipboardTrigger extends LitElement {
      */
     disabled: boolean;
     private root;
-    /** A consumer-supplied `aria-label`, moved off the host so it names the element that carries the role. */
     private label;
     private readonly onRootChange;
     connectedCallback(): void;

package/dist/clipboard/ClipboardTrigger.d.ts

@@ -1,18 +1,9 @@
 import { LitElement, nothing } from 'lit';
 /**
- * `<skdx-clipboard-trigger>` — the button that copies the `<skdx-clipboard>`
- * root's `value`. Renders a real `<button type="button">` in its shadow root —
- * so Enter and Space work for free — carrying `data-state="copied" | "idle"`
- * and `data-disabled`, and `disabled` when either it or the root is. Must be
- * used inside `<skdx-clipboard>`, which it finds with `closest()` and
- * re-renders from on every `skdx-clipboard-internal-update`.
- *
- * It carries no built-in label: give it text, or an icon plus `aria-label`.
- * The `aria-label` written on this host is moved onto the inner `<button>`,
- * where the role it names actually lives. Keep that label stable across the
- * copy ("Copy install command"), and let `<skdx-clipboard-indicator>` swap the
- * *visual* — renaming the button under the user's pointer moves the target
- * they were about to click again, and re-announces the whole control on focus.
+ * `<skdx-clipboard-trigger>` — button that copies the root's `value`.
+ * Carries `data-state="copied" | "idle"`. Moves the host's `aria-label` onto
+ * the inner button so it names the actual role. Use `<skdx-clipboard-indicator>`
+ * to swap the visual text without renaming the button.
  *
  * @example
  * ```html
@@ -34,7 +25,6 @@ export declare class SkdxClipboardTrigger extends LitElement {
      */
     disabled: boolean;
     private root;
-    /** A consumer-supplied `aria-label`, moved off the host so it names the element that carries the role. */
     private label;
     private readonly onRootChange;
     connectedCallback(): void;

package/dist/clipboard/index.cjs

@@ -1 +1 @@
-"use strict";var x=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var m=(o,r)=>{for(var p in r)x(o,p,{get:r[p],enumerable:!0})},C=(o,r,p,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of k(r))!l.call(o,d)&&d!==p&&x(o,d,{get:()=>r[d],enumerable:!(i=f(r,d))||i.enumerable});return o};var S=o=>C(x({},"__esModule",{value:!0}),o);var g={};m(g,{SkdxClipboard:()=>t.SkdxClipboard,SkdxClipboardIndicator:()=>e.SkdxClipboardIndicator,SkdxClipboardInput:()=>b.SkdxClipboardInput,SkdxClipboardTrigger:()=>a.SkdxClipboardTrigger});module.exports=S(g);var t=require("./Clipboard.cjs"),a=require("./ClipboardTrigger.cjs"),e=require("./ClipboardIndicator.cjs"),b=require("./ClipboardInput.cjs");0&&(module.exports={SkdxClipboard,SkdxClipboardIndicator,SkdxClipboardInput,SkdxClipboardTrigger});
+"use strict";var x=Object.defineProperty;var e=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var k=(r,o)=>{for(var p in o)x(r,p,{get:o[p],enumerable:!0})},l=(r,o,p,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let d of f(o))!i.call(r,d)&&d!==p&&x(r,d,{get:()=>o[d],enumerable:!(a=e(o,d))||a.enumerable});return r};var m=r=>l(x({},"__esModule",{value:!0}),r);var t={};k(t,{SkdxClipboard:()=>b.SkdxClipboard});module.exports=m(t);var b=require("./Clipboard.cjs");0&&(module.exports={SkdxClipboard});

package/dist/clipboard/index.d.cts

@@ -1,4 +1 @@
 export { SkdxClipboard } from './Clipboard.cjs';
-export { SkdxClipboardTrigger } from './ClipboardTrigger.cjs';
-export { SkdxClipboardIndicator } from './ClipboardIndicator.cjs';
-export { SkdxClipboardInput } from './ClipboardInput.cjs';

package/dist/clipboard/index.d.ts

@@ -1,4 +1 @@
 export { SkdxClipboard } from './Clipboard.js';
-export { SkdxClipboardTrigger } from './ClipboardTrigger.js';
-export { SkdxClipboardIndicator } from './ClipboardIndicator.js';
-export { SkdxClipboardInput } from './ClipboardInput.js';

package/dist/clipboard/index.js

@@ -1 +1 @@
-import{SkdxClipboard as d}from"./Clipboard.js";import{SkdxClipboardTrigger as x}from"./ClipboardTrigger.js";import{SkdxClipboardIndicator as t}from"./ClipboardIndicator.js";import{SkdxClipboardInput as e}from"./ClipboardInput.js";export{d as SkdxClipboard,t as SkdxClipboardIndicator,e as SkdxClipboardInput,x as SkdxClipboardTrigger};
+import{SkdxClipboard as d}from"./Clipboard.js";export{d as SkdxClipboard};

package/dist/clipboard/primitives.cjs

@@ -0,0 +1 @@
+"use strict";var x=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var l=(o,r)=>{for(var p in r)x(o,p,{get:r[p],enumerable:!0})},m=(o,r,p,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of f(r))!k.call(o,d)&&d!==p&&x(o,d,{get:()=>r[d],enumerable:!(i=b(r,d))||i.enumerable});return o};var C=o=>m(x({},"__esModule",{value:!0}),o);var S={};l(S,{SkdxClipboardIndicator:()=>a.SkdxClipboardIndicator,SkdxClipboardInput:()=>e.SkdxClipboardInput,SkdxClipboardTrigger:()=>t.SkdxClipboardTrigger});module.exports=C(S);var t=require("./ClipboardTrigger.cjs"),a=require("./ClipboardIndicator.cjs"),e=require("./ClipboardInput.cjs");0&&(module.exports={SkdxClipboardIndicator,SkdxClipboardInput,SkdxClipboardTrigger});

package/dist/clipboard/primitives.d.cts

@@ -0,0 +1,21 @@
+/**
+ * Advanced primitives for `<skdx-clipboard>` — the parts the recipe composes.
+ * Reach for these when the derived anatomy is not the structure you need.
+ *
+ * @example
+ * ```ts
+ * import * as Clipboard from '@skdx/web-components/primitives/clipboard';
+ * ```
+ * ```html
+ * <skdx-clipboard value="npm i @skdx/web-components">
+ *   <skdx-clipboard-input aria-label="Install command"></skdx-clipboard-input>
+ *   <skdx-clipboard-trigger aria-label="Copy install command">
+ *     <skdx-clipboard-indicator match="idle">⧉</skdx-clipboard-indicator>
+ *     <skdx-clipboard-indicator>✓</skdx-clipboard-indicator>
+ *   </skdx-clipboard-trigger>
+ * </skdx-clipboard>
+ * ```
+ */
+export { SkdxClipboardTrigger } from './ClipboardTrigger.cjs';
+export { SkdxClipboardIndicator } from './ClipboardIndicator.cjs';
+export { SkdxClipboardInput } from './ClipboardInput.cjs';

package/dist/clipboard/primitives.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Advanced primitives for `<skdx-clipboard>` — the parts the recipe composes.
+ * Reach for these when the derived anatomy is not the structure you need.
+ *
+ * @example
+ * ```ts
+ * import * as Clipboard from '@skdx/web-components/primitives/clipboard';
+ * ```
+ * ```html
+ * <skdx-clipboard value="npm i @skdx/web-components">
+ *   <skdx-clipboard-input aria-label="Install command"></skdx-clipboard-input>
+ *   <skdx-clipboard-trigger aria-label="Copy install command">
+ *     <skdx-clipboard-indicator match="idle">⧉</skdx-clipboard-indicator>
+ *     <skdx-clipboard-indicator>✓</skdx-clipboard-indicator>
+ *   </skdx-clipboard-trigger>
+ * </skdx-clipboard>
+ * ```
+ */
+export { SkdxClipboardTrigger } from './ClipboardTrigger.js';
+export { SkdxClipboardIndicator } from './ClipboardIndicator.js';
+export { SkdxClipboardInput } from './ClipboardInput.js';

package/dist/clipboard/primitives.js

@@ -0,0 +1 @@
+import{SkdxClipboardTrigger as d}from"./ClipboardTrigger.js";import{SkdxClipboardIndicator as x}from"./ClipboardIndicator.js";import{SkdxClipboardInput as t}from"./ClipboardInput.js";export{x as SkdxClipboardIndicator,t as SkdxClipboardInput,d as SkdxClipboardTrigger};

package/dist/collapsible/Collapsible.cjs

@@ -1,5 +1,5 @@
-"use strict";var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var y=(r,e)=>{for(var o in e)a(r,o,{get:e[o],enumerable:!0})},v=(r,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of b(e))!h.call(r,t)&&t!==o&&a(r,t,{get:()=>e[t],enumerable:!(n=d(e,t))||n.enumerable});return r};var E=r=>v(a({},"__esModule",{value:!0}),r),c=(r,e,o,n)=>{for(var t=n>1?void 0:n?d(e,o):e,i=r.length-1,p;i>=0;i--)(p=r[i])&&(t=(n?p(e,o,t):p(t))||t);return n&&t&&a(e,o,t),t};var g={};y(g,{SkdxCollapsible:()=>s});module.exports=E(g);var l=require("lit"),m=require("lit/decorators.js"),f=require("../internal/define.cjs"),u=require("../internal/ids.cjs");var s=class extends l.LitElement{constructor(){super(...arguments);this.open=!1;this.disabled=!1;this.contentId=(0,u.nextId)("skdx-collapsible-content")}setOpen(o){this.open!==o&&(this.open=o,this.dispatchEvent(new CustomEvent("open-change",{detail:o,bubbles:!0,composed:!0})))}render(){return l.html`<slot></slot>`}};s.styles=l.css`
+"use strict";var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var y=(l,t)=>{for(var e in t)a(l,e,{get:t[e],enumerable:!0})},g=(l,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of b(t))!v.call(l,o)&&o!==e&&a(l,o,{get:()=>t[o],enumerable:!(r=m(t,o))||r.enumerable});return l};var E=l=>g(a({},"__esModule",{value:!0}),l),s=(l,t,e,r)=>{for(var o=r>1?void 0:r?m(t,e):t,c=l.length-1,d;c>=0;c--)(d=l[c])&&(o=(r?d(t,e,o):d(o))||o);return r&&o&&a(t,e,o),o};var O={};y(O,{SkdxCollapsible:()=>n});module.exports=E(O);var i=require("lit"),p=require("lit/decorators.js"),h=require("../internal/define.cjs"),u=require("../internal/ids.cjs"),f=require("./CollapsibleAnatomy.cjs");var n=class extends i.LitElement{constructor(){super(...arguments);this.open=!1;this.disabled=!1;this.title="";this.fillAnatomy=()=>(0,f.fillCollapsibleAnatomy)(this);this.contentId=(0,u.nextId)("skdx-collapsible-content");this.settledOpen=null}connectedCallback(){super.connectedCallback(),queueMicrotask(this.fillAnatomy)}updated(e){e.has("title")&&this.fillAnatomy()}setOpen(e){this.open!==e&&(this.open=e,this.dispatchEvent(new CustomEvent("open-change",{detail:e,bubbles:!0,composed:!0})),this.querySelector("skdx-collapsible-content")||this.reportOpenChangeComplete(e))}reportOpenChangeComplete(e){this.settledOpen!==e&&(this.settledOpen=e,this.dispatchEvent(new CustomEvent("open-change-complete",{detail:e,bubbles:!0,composed:!0})))}render(){return i.html`<slot @slotchange=${this.fillAnatomy}></slot>`}};n.styles=i.css`
     :host {
       display: block;
     }
-  `,c([(0,m.property)({type:Boolean,reflect:!0})],s.prototype,"open",2),c([(0,m.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),s=c([(0,f.customElement)("skdx-collapsible","collapsible","root")],s);0&&(module.exports={SkdxCollapsible});
+  `,s([(0,p.property)({type:Boolean,reflect:!0})],n.prototype,"open",2),s([(0,p.property)({type:Boolean,reflect:!0})],n.prototype,"disabled",2),s([(0,p.property)({type:String})],n.prototype,"title",2),n=s([(0,h.customElement)("skdx-collapsible","collapsible","root")],n);0&&(module.exports={SkdxCollapsible});

package/dist/collapsible/Collapsible.d.cts

@@ -1,29 +1,17 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-collapsible>` — the Web Components implementation of the shared
- * Collapsible contract (see `@skdx/shared`'s `collapsibleContract`). Renders
- * no visible box of its own — it only owns `open`/`disabled` state and
- * exposes it to a descendant `<skdx-collapsible-trigger>` /
- * `<skdx-collapsible-content>`, which look it up via `closest('skdx-collapsible')`
- * (custom elements have no DI, so the DOM tree itself is the shared context)
- * and listen for its `open-change` event, mirroring `<skdx-dialog>`'s
- * root/`setOpen`/`open-change` pattern but simpler: no native `<dialog>`, no
- * modal/scroll-lock.
- *
- * `open` is a plain reflected property — like a native `<input>`'s
- * `checked`, there is no separate controlled/uncontrolled mode: the property
- * is the single source of truth, and a consumer that wants "controlled"
- * behavior just listens for `open-change` and writes the property back.
+ * Disclosure component with a titled trigger and collapsible panel. `open` is
+ * a reflected property that is the single source of truth; listen for
+ * `open-change` to observe or override changes. `default-open` is absent
+ * (unlike other frameworks) — use reflected `open` property instead.
  *
  * @example
  * ```html
- * <skdx-collapsible>
- *   <skdx-collapsible-trigger>Toggle</skdx-collapsible-trigger>
- *   <skdx-collapsible-content>Hidden content revealed on toggle.</skdx-collapsible-content>
- * </skdx-collapsible>
+ * <skdx-collapsible title="Toggle">Hidden content revealed on toggle.</skdx-collapsible>
  * ```
  *
  * @fires open-change - Fired with the new open state whenever it changes, controlled or not.
+ * @fires open-change-complete - Fired with the settled open state after the panel finishes transitioning, on `transitionend` or synchronously if no transition is running.
  */
 export declare class SkdxCollapsible extends LitElement {
     static styles: import("lit").CSSResult;
@@ -31,6 +19,16 @@ export declare class SkdxCollapsible extends LitElement {
     open: boolean;
     /** Prevents the trigger from toggling the content when set. @default false */
     disabled: boolean;
+    /**
+     * Text of the derived trigger — the button that toggles the panel. Shadows
+     * `HTMLElement.title`, the native global attribute, so a set title also shows
+     * the browser's own tooltip on hover. Empty string counts as no title.
+     * @default '' — no trigger is rendered.
+     */
+    title: string;
+    connectedCallback(): void;
+    private readonly fillAnatomy;
+    protected updated(changed: Map<string, unknown>): void;
     readonly contentId: string;
     /**
      * Sets `open` and dispatches a bubbling, composed `open-change` event with
@@ -40,6 +38,19 @@ export declare class SkdxCollapsible extends LitElement {
      * stated at `carousel/Carousel.ts:247-251`.
      */
     setOpen(next: boolean): void;
+    /** The last state this element reported as settled, so neither reporter repeats it. */
+    private settledOpen;
+    /**
+     * Dispatches `open-change-complete` with the settled state, once per flip.
+     *
+     * Two parties can observe the panel settling — the panel itself, which owns
+     * the `transitionend`, and this root, which is the only one that exists when
+     * no panel does — so the dedupe lives here rather than in either of them.
+     *
+     * @internal Called by `<skdx-collapsible-content>`, which cannot reach a
+     * context callback and so must call something on its root.
+     */
+    reportOpenChangeComplete(open: boolean): void;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/collapsible/Collapsible.d.ts

@@ -1,29 +1,17 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-collapsible>` — the Web Components implementation of the shared
- * Collapsible contract (see `@skdx/shared`'s `collapsibleContract`). Renders
- * no visible box of its own — it only owns `open`/`disabled` state and
- * exposes it to a descendant `<skdx-collapsible-trigger>` /
- * `<skdx-collapsible-content>`, which look it up via `closest('skdx-collapsible')`
- * (custom elements have no DI, so the DOM tree itself is the shared context)
- * and listen for its `open-change` event, mirroring `<skdx-dialog>`'s
- * root/`setOpen`/`open-change` pattern but simpler: no native `<dialog>`, no
- * modal/scroll-lock.
- *
- * `open` is a plain reflected property — like a native `<input>`'s
- * `checked`, there is no separate controlled/uncontrolled mode: the property
- * is the single source of truth, and a consumer that wants "controlled"
- * behavior just listens for `open-change` and writes the property back.
+ * Disclosure component with a titled trigger and collapsible panel. `open` is
+ * a reflected property that is the single source of truth; listen for
+ * `open-change` to observe or override changes. `default-open` is absent
+ * (unlike other frameworks) — use reflected `open` property instead.
  *
  * @example
  * ```html
- * <skdx-collapsible>
- *   <skdx-collapsible-trigger>Toggle</skdx-collapsible-trigger>
- *   <skdx-collapsible-content>Hidden content revealed on toggle.</skdx-collapsible-content>
- * </skdx-collapsible>
+ * <skdx-collapsible title="Toggle">Hidden content revealed on toggle.</skdx-collapsible>
  * ```
  *
  * @fires open-change - Fired with the new open state whenever it changes, controlled or not.
+ * @fires open-change-complete - Fired with the settled open state after the panel finishes transitioning, on `transitionend` or synchronously if no transition is running.
  */
 export declare class SkdxCollapsible extends LitElement {
     static styles: import("lit").CSSResult;
@@ -31,6 +19,16 @@ export declare class SkdxCollapsible extends LitElement {
     open: boolean;
     /** Prevents the trigger from toggling the content when set. @default false */
     disabled: boolean;
+    /**
+     * Text of the derived trigger — the button that toggles the panel. Shadows
+     * `HTMLElement.title`, the native global attribute, so a set title also shows
+     * the browser's own tooltip on hover. Empty string counts as no title.
+     * @default '' — no trigger is rendered.
+     */
+    title: string;
+    connectedCallback(): void;
+    private readonly fillAnatomy;
+    protected updated(changed: Map<string, unknown>): void;
     readonly contentId: string;
     /**
      * Sets `open` and dispatches a bubbling, composed `open-change` event with
@@ -40,6 +38,19 @@ export declare class SkdxCollapsible extends LitElement {
      * stated at `carousel/Carousel.ts:247-251`.
      */
     setOpen(next: boolean): void;
+    /** The last state this element reported as settled, so neither reporter repeats it. */
+    private settledOpen;
+    /**
+     * Dispatches `open-change-complete` with the settled state, once per flip.
+     *
+     * Two parties can observe the panel settling — the panel itself, which owns
+     * the `transitionend`, and this root, which is the only one that exists when
+     * no panel does — so the dedupe lives here rather than in either of them.
+     *
+     * @internal Called by `<skdx-collapsible-content>`, which cannot reach a
+     * context callback and so must call something on its root.
+     */
+    reportOpenChangeComplete(open: boolean): void;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/collapsible/Collapsible.js

@@ -1,5 +1,5 @@
-var p=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var n=(l,r,e,s)=>{for(var t=s>1?void 0:s?m(r,e):r,a=l.length-1,c;a>=0;a--)(c=l[a])&&(t=(s?c(r,e,t):c(t))||t);return s&&t&&p(r,e,t),t};import{css as d,html as f,LitElement as u}from"lit";import{property as i}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{nextId as h}from"../internal/ids.js";var o=class extends u{constructor(){super(...arguments);this.open=!1;this.disabled=!1;this.contentId=h("skdx-collapsible-content")}setOpen(e){this.open!==e&&(this.open=e,this.dispatchEvent(new CustomEvent("open-change",{detail:e,bubbles:!0,composed:!0})))}render(){return f`<slot></slot>`}};o.styles=d`
+var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var n=(i,l,e,r)=>{for(var o=r>1?void 0:r?d(l,e):l,s=i.length-1,a;s>=0;s--)(a=i[s])&&(o=(r?a(l,e,o):a(o))||o);return r&&o&&c(l,e,o),o};import{css as m,html as h,LitElement as u}from"lit";import{property as p}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";import{nextId as b}from"../internal/ids.js";import{fillCollapsibleAnatomy as v}from"./CollapsibleAnatomy.js";var t=class extends u{constructor(){super(...arguments);this.open=!1;this.disabled=!1;this.title="";this.fillAnatomy=()=>v(this);this.contentId=b("skdx-collapsible-content");this.settledOpen=null}connectedCallback(){super.connectedCallback(),queueMicrotask(this.fillAnatomy)}updated(e){e.has("title")&&this.fillAnatomy()}setOpen(e){this.open!==e&&(this.open=e,this.dispatchEvent(new CustomEvent("open-change",{detail:e,bubbles:!0,composed:!0})),this.querySelector("skdx-collapsible-content")||this.reportOpenChangeComplete(e))}reportOpenChangeComplete(e){this.settledOpen!==e&&(this.settledOpen=e,this.dispatchEvent(new CustomEvent("open-change-complete",{detail:e,bubbles:!0,composed:!0})))}render(){return h`<slot @slotchange=${this.fillAnatomy}></slot>`}};t.styles=m`
     :host {
       display: block;
     }
-  `,n([i({type:Boolean,reflect:!0})],o.prototype,"open",2),n([i({type:Boolean,reflect:!0})],o.prototype,"disabled",2),o=n([b("skdx-collapsible","collapsible","root")],o);export{o as SkdxCollapsible};
+  `,n([p({type:Boolean,reflect:!0})],t.prototype,"open",2),n([p({type:Boolean,reflect:!0})],t.prototype,"disabled",2),n([p({type:String})],t.prototype,"title",2),t=n([f("skdx-collapsible","collapsible","root")],t);export{t as SkdxCollapsible};

package/dist/collapsible/CollapsibleAnatomy.cjs

@@ -0,0 +1 @@
+"use strict";var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var u=(e,t)=>{for(var l in t)a(e,l,{get:t[l],enumerable:!0})},x=(e,t,l,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of p(t))!m.call(e,n)&&n!==l&&a(e,n,{get:()=>t[n],enumerable:!(r=d(t,n))||r.enumerable});return e};var b=e=>x(a({},"__esModule",{value:!0}),e);var k={};u(k,{COLLAPSIBLE_ANATOMY_GENERATED:()=>s,fillCollapsibleAnatomy:()=>f});module.exports=b(k);var i=require("../internal/derive.cjs"),N=require("./CollapsibleContent.cjs"),C=require("./CollapsibleIndicator.cjs"),T=require("./CollapsibleTrigger.cjs"),s="data-skdx-collapsible-generated",c=new Set(["skdx-collapsible-trigger","skdx-collapsible-content"]);function g(e){let t=s;if(!e.title||(0,i.hasAuthoredPart)(e,"skdx-collapsible-trigger",t))return null;let l=(0,i.generatedPart)(e,"skdx-collapsible-trigger",t)??document.createElement("skdx-collapsible-trigger");l.setAttribute(t,"");let r=l.firstChild,n=r?.nodeType===Node.TEXT_NODE?r:document.createTextNode("");n.textContent!==e.title&&(n.textContent=e.title);let o=l.querySelector(":scope > skdx-collapsible-indicator")??document.createElement("skdx-collapsible-indicator");return(0,i.applyChildren)(l,[n,o]),l}function E(e){let t=s;if((0,i.hasAuthoredPart)(e,"skdx-collapsible-content",t))return null;let l=Array.from(e.childNodes).filter(o=>o.nodeType===Node.ELEMENT_NODE&&!o.hasAttribute(t)&&!c.has(o.localName)||o.nodeType===Node.TEXT_NODE&&o.textContent.trim()!==""),r=(0,i.generatedPart)(e,"skdx-collapsible-content",t);if(!r&&l.length===0)return null;let n=r??document.createElement("skdx-collapsible-content");return n.setAttribute(t,""),l.length>0&&n.append(...l),n}function f(e){let t=g(e),l=E(e),r=Array.from(e.children).filter(n=>n!==t&&n!==l&&!n.hasAttribute(s)&&c.has(n.localName));(0,i.applyChildren)(e,[...t?[t]:[],...r,...l?[l]:[]])}0&&(module.exports={COLLAPSIBLE_ANATOMY_GENERATED,fillCollapsibleAnatomy});

package/dist/collapsible/CollapsibleAnatomy.d.cts

@@ -0,0 +1,11 @@
+import type { SkdxCollapsible } from './Collapsible.cjs';
+import './CollapsibleContent.cjs';
+import './CollapsibleIndicator.cjs';
+import './CollapsibleTrigger.cjs';
+/** @internal Marks a direct child of `<skdx-collapsible>` this module generated. */
+export declare const COLLAPSIBLE_ANATOMY_GENERATED = "data-skdx-collapsible-generated";
+/**
+ * @internal Draws a Trigger from `title` above the panel, and wraps everything else in Content.
+ * Derived parts stand down where the consumer authored one of its kind.
+ */
+export declare function fillCollapsibleAnatomy(root: SkdxCollapsible): void;

package/dist/collapsible/CollapsibleAnatomy.d.ts

@@ -0,0 +1,11 @@
+import type { SkdxCollapsible } from './Collapsible.js';
+import './CollapsibleContent.js';
+import './CollapsibleIndicator.js';
+import './CollapsibleTrigger.js';
+/** @internal Marks a direct child of `<skdx-collapsible>` this module generated. */
+export declare const COLLAPSIBLE_ANATOMY_GENERATED = "data-skdx-collapsible-generated";
+/**
+ * @internal Draws a Trigger from `title` above the panel, and wraps everything else in Content.
+ * Derived parts stand down where the consumer authored one of its kind.
+ */
+export declare function fillCollapsibleAnatomy(root: SkdxCollapsible): void;

package/dist/collapsible/CollapsibleAnatomy.js

@@ -0,0 +1 @@
+import{applyChildren as s,generatedPart as a,hasAuthoredPart as c}from"../internal/derive.js";import"./CollapsibleContent.js";import"./CollapsibleIndicator.js";import"./CollapsibleTrigger.js";var o="data-skdx-collapsible-generated",d=new Set(["skdx-collapsible-trigger","skdx-collapsible-content"]);function p(e){let l=o;if(!e.title||c(e,"skdx-collapsible-trigger",l))return null;let t=a(e,"skdx-collapsible-trigger",l)??document.createElement("skdx-collapsible-trigger");t.setAttribute(l,"");let r=t.firstChild,n=r?.nodeType===Node.TEXT_NODE?r:document.createTextNode("");n.textContent!==e.title&&(n.textContent=e.title);let i=t.querySelector(":scope > skdx-collapsible-indicator")??document.createElement("skdx-collapsible-indicator");return s(t,[n,i]),t}function m(e){let l=o;if(c(e,"skdx-collapsible-content",l))return null;let t=Array.from(e.childNodes).filter(i=>i.nodeType===Node.ELEMENT_NODE&&!i.hasAttribute(l)&&!d.has(i.localName)||i.nodeType===Node.TEXT_NODE&&i.textContent.trim()!==""),r=a(e,"skdx-collapsible-content",l);if(!r&&t.length===0)return null;let n=r??document.createElement("skdx-collapsible-content");return n.setAttribute(l,""),t.length>0&&n.append(...t),n}function E(e){let l=p(e),t=m(e),r=Array.from(e.children).filter(n=>n!==l&&n!==t&&!n.hasAttribute(o)&&d.has(n.localName));s(e,[...l?[l]:[],...r,...t?[t]:[]])}export{o as COLLAPSIBLE_ANATOMY_GENERATED,E as fillCollapsibleAnatomy};

package/dist/collapsible/CollapsibleContent.cjs

@@ -1,8 +1,14 @@
-"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var u=(i,e)=>{for(var t in e)d(i,t,{get:e[t],enumerable:!0})},m=(i,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of p(e))!v.call(i,s)&&s!==t&&d(i,s,{get:()=>e[s],enumerable:!(o=c(e,s))||o.enumerable});return i};var f=i=>m(d({},"__esModule",{value:!0}),i),b=(i,e,t,o)=>{for(var s=o>1?void 0:o?c(e,t):e,n=i.length-1,a;n>=0;n--)(a=i[n])&&(s=(o?a(e,t,s):a(s))||s);return o&&s&&d(e,t,s),s};var k={};u(k,{SkdxCollapsibleContent:()=>l});module.exports=f(k);var r=require("lit"),h=require("../internal/define.cjs");var l=class extends r.LitElement{constructor(){super(...arguments);this.rootEl=null;this.observer=new MutationObserver(()=>this._sync())}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-collapsible"),!this.rootEl)throw new Error("<skdx-collapsible-content> must be used inside <skdx-collapsible>.");this.observer.observe(this.rootEl,{attributeFilter:["open","disabled"]}),this._sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}_sync(){let t=this.rootEl;t&&(this.id||(this.id=t.contentId),this.setAttribute("data-state",t.open?"open":"closed"),t.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),t.open?this.removeAttribute("hidden"):this.setAttribute("hidden",""))}render(){return r.html`<slot></slot>`}};l.styles=r.css`
+"use strict";var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var f=(n,i)=>{for(var e in i)a(n,e,{get:i[e],enumerable:!0})},m=(n,i,e,s)=>{if(i&&typeof i=="object"||typeof i=="function")for(let t of b(i))!v.call(n,t)&&t!==e&&a(n,t,{get:()=>i[t],enumerable:!(s=c(i,t))||s.enumerable});return n};var y=n=>m(a({},"__esModule",{value:!0}),n),h=(n,i,e,s)=>{for(var t=s>1?void 0:s?c(i,e):i,d=n.length-1,l;d>=0;d--)(l=n[d])&&(t=(s?l(i,e,t):l(t))||t);return s&&t&&a(i,e,t),t};var E={};f(E,{SkdxCollapsibleContent:()=>o});module.exports=y(E);var r=require("lit"),p=require("lit/decorators.js"),u=require("../internal/define.cjs");var o=class extends r.LitElement{constructor(){super(...arguments);this.hiddenUntilFound=!1;this.rootEl=null;this.observer=new MutationObserver(()=>this._sync());this.syncedOpen=null;this.handleBeforeMatch=()=>{this.rootEl?.setOpen(!0)};this.handleTransitionSettled=e=>{e.target===this&&this.rootEl?.reportOpenChangeComplete(this.rootEl.open)}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-collapsible"),!this.rootEl)throw new Error("<skdx-collapsible-content> must be used inside <skdx-collapsible>.");this.observer.observe(this.rootEl,{attributeFilter:["open","disabled"]}),this.addEventListener("beforematch",this.handleBeforeMatch),this.addEventListener("transitionend",this.handleTransitionSettled),this.addEventListener("transitioncancel",this.handleTransitionSettled),this._sync()}disconnectedCallback(){this.observer.disconnect(),this.removeEventListener("beforematch",this.handleBeforeMatch),this.removeEventListener("transitionend",this.handleTransitionSettled),this.removeEventListener("transitioncancel",this.handleTransitionSettled),super.disconnectedCallback()}_sync(){let e=this.rootEl;if(!e||(this.id||(this.id=e.contentId),this.setAttribute("data-state",e.open?"open":"closed"),e.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),e.open?this.removeAttribute("hidden"):this.setAttribute("hidden",this.hiddenUntilFound?"until-found":""),this.syncedOpen===e.open))return;let s=this.syncedOpen!==null;if(this.syncedOpen=e.open,this._measure(),!s)return;(getComputedStyle(this).transitionDuration??"").split(",").some(l=>Number.parseFloat(l)>0)||e.reportOpenChangeComplete(e.open)}_measure(){let e=this.getAttribute("hidden");e!==null&&this.removeAttribute("hidden");let{scrollHeight:s,scrollWidth:t}=this;e!==null&&this.setAttribute("hidden",e),this.style.setProperty("--skdx-collapsible-content-height",`${s}px`),this.style.setProperty("--skdx-collapsible-content-width",`${t}px`)}render(){return r.html`<slot></slot>`}};o.styles=r.css`
     :host {
       display: block;
     }
-    :host([hidden]) {
+    :host([hidden]:not([hidden-until-found])) {
       display: none;
     }
-  `,l=b([(0,h.customElement)("skdx-collapsible-content","collapsible","content")],l);0&&(module.exports={SkdxCollapsibleContent});
+    /* hidden="until-found" hides through content-visibility, never
+       display: none — display: none takes the text back out of find-in-page,
+       which is the entire point of the mode. */
+    :host([hidden-until-found][hidden]) {
+      content-visibility: hidden;
+    }
+  `,h([(0,p.property)({type:Boolean,attribute:"hidden-until-found",reflect:!0})],o.prototype,"hiddenUntilFound",2),o=h([(0,u.customElement)("skdx-collapsible-content","collapsible","content")],o);0&&(module.exports={SkdxCollapsibleContent});

package/dist/collapsible/CollapsibleContent.d.cts

@@ -1,20 +1,33 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-collapsible-content>` — panel controlled by a `<skdx-collapsible>`.
- * Sets the `id` referenced by the trigger's `aria-controls`, `data-state`,
- * `data-disabled`, and the `hidden` attribute while closed. Unlike a JS
- * framework's conditional rendering, a `<skdx-collapsible-content>` written in
- * markup is never unmounted by this element — it is always present in the
- * DOM and only ever toggled via the `hidden` attribute (see `<skdx-tabs-content>`
- * for the same convention). Must be used inside `<skdx-collapsible>`.
+ * Panel controlled by a collapsible, rendered as always-present `<div>` toggled via
+ * the `hidden` attribute. Publishes measured size as `--skdx-collapsible-content-height`
+ * and `--skdx-collapsible-content-width`, allowing transitions against them.
  */
 export declare class SkdxCollapsibleContent extends LitElement {
     static styles: import("lit").CSSResult;
+    /**
+     * Stays in the DOM as `hidden="until-found"` for find-in-page and fragment
+     * navigation instead of plain `hidden=""`, degrading to plain `hidden=""`
+     * on unsupported browsers. Do not apply `display: none` on closed panels
+     * or text becomes unsearchable.
+     * @default false
+     */
+    hiddenUntilFound: boolean;
     private rootEl;
     private readonly observer;
+    /** The state the panel was last measured and settled in, so neither repeats. */
+    private syncedOpen;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private readonly handleBeforeMatch;
+    private readonly handleTransitionSettled;
     private _sync;
+    /**
+     * The box a closed panel would have is not the box it has: while `hidden` it
+     * measures zero, so the attribute comes off for the duration of the read.
+     */
+    private _measure;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/collapsible/CollapsibleContent.d.ts

@@ -1,20 +1,33 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-collapsible-content>` — panel controlled by a `<skdx-collapsible>`.
- * Sets the `id` referenced by the trigger's `aria-controls`, `data-state`,
- * `data-disabled`, and the `hidden` attribute while closed. Unlike a JS
- * framework's conditional rendering, a `<skdx-collapsible-content>` written in
- * markup is never unmounted by this element — it is always present in the
- * DOM and only ever toggled via the `hidden` attribute (see `<skdx-tabs-content>`
- * for the same convention). Must be used inside `<skdx-collapsible>`.
+ * Panel controlled by a collapsible, rendered as always-present `<div>` toggled via
+ * the `hidden` attribute. Publishes measured size as `--skdx-collapsible-content-height`
+ * and `--skdx-collapsible-content-width`, allowing transitions against them.
  */
 export declare class SkdxCollapsibleContent extends LitElement {
     static styles: import("lit").CSSResult;
+    /**
+     * Stays in the DOM as `hidden="until-found"` for find-in-page and fragment
+     * navigation instead of plain `hidden=""`, degrading to plain `hidden=""`
+     * on unsupported browsers. Do not apply `display: none` on closed panels
+     * or text becomes unsearchable.
+     * @default false
+     */
+    hiddenUntilFound: boolean;
     private rootEl;
     private readonly observer;
+    /** The state the panel was last measured and settled in, so neither repeats. */
+    private syncedOpen;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private readonly handleBeforeMatch;
+    private readonly handleTransitionSettled;
     private _sync;
+    /**
+     * The box a closed panel would have is not the box it has: while `hidden` it
+     * measures zero, so the attribute comes off for the duration of the read.
+     */
+    private _measure;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/collapsible/CollapsibleContent.js

@@ -1,8 +1,14 @@
-var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var n=(l,s,e,o)=>{for(var t=o>1?void 0:o?c(s,e):s,r=l.length-1,d;r>=0;r--)(d=l[r])&&(t=(o?d(s,e,t):d(t))||t);return o&&t&&a(s,e,t),t};import{css as b,html as h,LitElement as p}from"lit";import{customElement as v}from"../internal/define.js";var i=class extends p{constructor(){super(...arguments);this.rootEl=null;this.observer=new MutationObserver(()=>this._sync())}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-collapsible"),!this.rootEl)throw new Error("<skdx-collapsible-content> must be used inside <skdx-collapsible>.");this.observer.observe(this.rootEl,{attributeFilter:["open","disabled"]}),this._sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}_sync(){let e=this.rootEl;e&&(this.id||(this.id=e.contentId),this.setAttribute("data-state",e.open?"open":"closed"),e.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),e.open?this.removeAttribute("hidden"):this.setAttribute("hidden",""))}render(){return h`<slot></slot>`}};i.styles=b`
+var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(l,s,e,i)=>{for(var t=i>1?void 0:i?h(s,e):s,r=l.length-1,o;r>=0;r--)(o=l[r])&&(t=(i?o(s,e,t):o(t))||t);return i&&t&&a(s,e,t),t};import{css as c,html as p,LitElement as u}from"lit";import{property as b}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";var n=class extends u{constructor(){super(...arguments);this.hiddenUntilFound=!1;this.rootEl=null;this.observer=new MutationObserver(()=>this._sync());this.syncedOpen=null;this.handleBeforeMatch=()=>{this.rootEl?.setOpen(!0)};this.handleTransitionSettled=e=>{e.target===this&&this.rootEl?.reportOpenChangeComplete(this.rootEl.open)}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-collapsible"),!this.rootEl)throw new Error("<skdx-collapsible-content> must be used inside <skdx-collapsible>.");this.observer.observe(this.rootEl,{attributeFilter:["open","disabled"]}),this.addEventListener("beforematch",this.handleBeforeMatch),this.addEventListener("transitionend",this.handleTransitionSettled),this.addEventListener("transitioncancel",this.handleTransitionSettled),this._sync()}disconnectedCallback(){this.observer.disconnect(),this.removeEventListener("beforematch",this.handleBeforeMatch),this.removeEventListener("transitionend",this.handleTransitionSettled),this.removeEventListener("transitioncancel",this.handleTransitionSettled),super.disconnectedCallback()}_sync(){let e=this.rootEl;if(!e||(this.id||(this.id=e.contentId),this.setAttribute("data-state",e.open?"open":"closed"),e.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),e.open?this.removeAttribute("hidden"):this.setAttribute("hidden",this.hiddenUntilFound?"until-found":""),this.syncedOpen===e.open))return;let i=this.syncedOpen!==null;if(this.syncedOpen=e.open,this._measure(),!i)return;(getComputedStyle(this).transitionDuration??"").split(",").some(o=>Number.parseFloat(o)>0)||e.reportOpenChangeComplete(e.open)}_measure(){let e=this.getAttribute("hidden");e!==null&&this.removeAttribute("hidden");let{scrollHeight:i,scrollWidth:t}=this;e!==null&&this.setAttribute("hidden",e),this.style.setProperty("--skdx-collapsible-content-height",`${i}px`),this.style.setProperty("--skdx-collapsible-content-width",`${t}px`)}render(){return p`<slot></slot>`}};n.styles=c`
     :host {
       display: block;
     }
-    :host([hidden]) {
+    :host([hidden]:not([hidden-until-found])) {
       display: none;
     }
-  `,i=n([v("skdx-collapsible-content","collapsible","content")],i);export{i as SkdxCollapsibleContent};
+    /* hidden="until-found" hides through content-visibility, never
+       display: none — display: none takes the text back out of find-in-page,
+       which is the entire point of the mode. */
+    :host([hidden-until-found][hidden]) {
+      content-visibility: hidden;
+    }
+  `,d([b({type:Boolean,attribute:"hidden-until-found",reflect:!0})],n.prototype,"hiddenUntilFound",2),n=d([v("skdx-collapsible-content","collapsible","content")],n);export{n as SkdxCollapsibleContent};