@warp-ds/elements 2.10.0-next.10 → 2.10.0-next.11

package/dist/packages/modal/modal.react.stories.d.ts

@@ -4,10 +4,10 @@ import { Modal } from './react';
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./modal").WarpModal>, "open" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "render" | "renderOptions" | "show" | "close" | "contentId" | "ignoreBackdropClicks" | "onShown" | "onshown" | "onHidden" | "onhidden" | "handleSlotChange"> & {
-        onShown?: (e: Event) => void;
-        onshown?: (e: Event) => void;
-        onHidden?: (e: Event) => void;
-        onhidden?: (e: Event) => void;
+        onShown?: (e: CustomEvent<any>) => void;
+        onshown?: (e: CustomEvent<any>) => void;
+        onHidden?: (e: CustomEvent<any>) => void;
+        onhidden?: (e: CustomEvent<any>) => void;
     } & Partial<Omit<import("./modal").WarpModal, keyof HTMLElement>> & React.RefAttributes<import("./modal").WarpModal>, "ref">, "content-id" | "ignore-backdrop-clicks"> & {
         contentId?: string;
         ignoreBackdropClicks?: boolean;

package/dist/packages/modal/modal.react.stories.js

@@ -11,8 +11,16 @@ export const Default = {
         const [open, setOpen] = useState(false);
         const [back, setBack] = useState(false);
         return (React.createElement(React.Fragment, null,
+            React.createElement("p", null,
+                "If you keep the ",
+                React.createElement("code", null, "open"),
+                " state, listen to ",
+                React.createElement("code", null, "onHidden"),
+                " so you can update the state when the user clicks the backdrop, close button, or presses ",
+                React.createElement("kbd", null, "Escape"),
+                "."),
             React.createElement(Button, { variant: "primary", onClick: () => setOpen(true) }, "Open Modal"),
-            React.createElement(Modal, { show: open, id: "example-modal-one" },
+            React.createElement(Modal, { show: open, id: "example-modal-one", onHidden: () => setOpen(false), onShown: () => setOpen(true) },
                 React.createElement(ModalHeader, { slot: "header", title: "An example modal", back: back }),
                 React.createElement("div", { slot: "content" },
                     React.createElement("div", { style: { marginBottom: '12px' } },

package/dist/packages/modal/react.d.ts

@@ -2,11 +2,41 @@ import React from 'react';
 import { WarpModal } from './modal.js';
 export { ModalFooter } from '../modal-footer/react.js';
 export { ModalHeader } from '../modal-header/react.js';
+/**
+ * Modals (or dialogs) display important information that users need to acknowledge.
+ *
+ * If you keep the <code>open</code> state, listen to <code>onHidden</code> so you can update the state when the user clicks the backdrop, close button, or presses <kbd>Escape</kbd>.
+ *
+ * @example
+ * ```jsx
+ * const [open, setOpen] = useState(false);
+ * return (
+ *   <>
+ *     <Button variant="primary" onClick={() => setOpen(true)}>
+ *       Open modal
+ *     </Button>
+ *     <Modal show={open} id="example-modal-one" onHidden={() => setOpen(false)} onShown={() => setOpen(true)}>
+ *       <ModalHeader slot="header" title="An example modal" />
+ *       <div slot="content">
+ *         <p>
+ *           <!-- modal content -->
+ *         </p>
+ *       </div>
+ *       <ModalFooter slot="footer">
+ *         <Button variant="primary" id="modal-close-button-one" onClick={() => setOpen(false)}>
+ *           OK
+ *         </Button>
+ *       </ModalFooter>
+ *     </Modal>
+ *   </>
+ * );
+ * ```
+ */
 export declare const Modal: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpModal>, "open" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "render" | "renderOptions" | "show" | "close" | "contentId" | "ignoreBackdropClicks" | "onShown" | "onshown" | "onHidden" | "onhidden" | "handleSlotChange"> & {
-    onShown?: (e: Event) => void;
-    onshown?: (e: Event) => void;
-    onHidden?: (e: Event) => void;
-    onhidden?: (e: Event) => void;
+    onShown?: (e: CustomEvent<any>) => void;
+    onshown?: (e: CustomEvent<any>) => void;
+    onHidden?: (e: CustomEvent<any>) => void;
+    onhidden?: (e: CustomEvent<any>) => void;
 } & Partial<Omit<WarpModal, keyof HTMLElement>> & React.RefAttributes<WarpModal>, "ref">, "content-id" | "ignore-backdrop-clicks"> & {
     contentId?: string;
     ignoreBackdropClicks?: boolean;

package/dist/packages/modal/react.js

@@ -18,6 +18,36 @@ const BaseModal = createComponent({
         onhidden: 'hidden',
     },
 });
+/**
+ * Modals (or dialogs) display important information that users need to acknowledge.
+ *
+ * If you keep the <code>open</code> state, listen to <code>onHidden</code> so you can update the state when the user clicks the backdrop, close button, or presses <kbd>Escape</kbd>.
+ *
+ * @example
+ * ```jsx
+ * const [open, setOpen] = useState(false);
+ * return (
+ *   <>
+ *     <Button variant="primary" onClick={() => setOpen(true)}>
+ *       Open modal
+ *     </Button>
+ *     <Modal show={open} id="example-modal-one" onHidden={() => setOpen(false)} onShown={() => setOpen(true)}>
+ *       <ModalHeader slot="header" title="An example modal" />
+ *       <div slot="content">
+ *         <p>
+ *           <!-- modal content -->
+ *         </p>
+ *       </div>
+ *       <ModalFooter slot="footer">
+ *         <Button variant="primary" id="modal-close-button-one" onClick={() => setOpen(false)}>
+ *           OK
+ *         </Button>
+ *       </ModalFooter>
+ *     </Modal>
+ *   </>
+ * );
+ * ```
+ */
 export const Modal = React.forwardRef(({ contentId, ignoreBackdropClicks, ...props }, ref) => React.createElement(BaseModal, {
     ...props,
     ...(contentId !== undefined ? { 'content-id': contentId } : {}),

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.10.0-next.9",
+  "version": "2.10.0-next.10",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/eik/index.js

@@ -14,7 +14,7 @@ const e=globalThis,t=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const k=globalThis,_=e=>e,$=k.trustedTypes,S=$?$.createPolicy("lit-html",{createHTML:e=>e}):void 0,E="$lit$",C=`lit$${Math.random().toFixed(9).slice(2)}$`,O="?"+C,z=`<${O}>`,A=document,D=()=>A.createComment(""),P=e=>null===e||"object"!=typeof e&&"function"!=typeof e,M=Array.isArray,T="[ \t\n\f\r]",j=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,R=/-->/g,N=/>/g,I=RegExp(`>|${T}(?:([^\\s"'>=/]+)(${T}*=${T}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),V=/'/g,F=/"/g,L=/^(?:script|style|textarea|title)$/i,q=(e=>function(t){for(var r=arguments.length,o=new Array(r>1?r-1:0),i=1;i<r;i++)o[i-1]=arguments[i];return{_$litType$:e,strings:t,values:o}})(1),W=Symbol.for("lit-noChange"),B=Symbol.for("lit-nothing"),H=new WeakMap,Y=A.createTreeWalker(A,129);function X(e,t){if(!M(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==S?S.createHTML(t):t}class U{constructor({strings:e,_$litType$:t},r){let o;this.parts=[];let i=0,a=0;const n=e.length-1,s=this.parts,[l,d]=((e,t)=>{const r=e.length-1,o=[];let i,a=2===t?"<svg>":3===t?"<math>":"",n=j;for(let t=0;t<r;t++){const r=e[t];let s,l,d=-1,c=0;for(;c<r.length&&(n.lastIndex=c,l=n.exec(r),null!==l);)c=n.lastIndex,n===j?"!--"===l[1]?n=R:void 0!==l[1]?n=N:void 0!==l[2]?(L.test(l[2])&&(i=RegExp("</"+l[2],"g")),n=I):void 0!==l[3]&&(n=I):n===I?">"===l[0]?(n=i??j,d=-1):void 0===l[1]?d=-2:(d=n.lastIndex-l[2].length,s=l[1],n=void 0===l[3]?I:'"'===l[3]?F:V):n===F||n===V?n=I:n===R||n===N?n=j:(n=I,i=void 0);const h=n===I&&e[t+1].startsWith("/>")?" ":"";a+=n===j?r+z:d>=0?(o.push(s),r.slice(0,d)+E+r.slice(d)+C+h):r+C+(-2===d?t:h)}return[X(e,a+(e[r]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),o]})(e,t);if(this.el=U.createElement(l,r),Y.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(o=Y.nextNode())&&s.length<n;){if(1===o.nodeType){if(o.hasAttributes())for(const e of o.getAttributeNames())if(e.endsWith(E)){const t=d[a++],r=o.getAttribute(e).split(C),n=/([.?@])?(.*)/.exec(t);s.push({type:1,index:i,name:n[2],strings:r,ctor:"."===n[1]?G:"?"===n[1]?ee:"@"===n[1]?te:Q}),o.removeAttribute(e)}else e.startsWith(C)&&(s.push({type:6,index:i}),o.removeAttribute(e));if(L.test(o.tagName)){const e=o.textContent.split(C),t=e.length-1;if(t>0){o.textContent=$?$.emptyScript:"";for(let r=0;r<t;r++)o.append(e[r],D()),Y.nextNode(),s.push({type:2,index:++i});o.append(e[t],D())}}}else if(8===o.nodeType)if(o.data===O)s.push({type:2,index:i});else{let e=-1;for(;-1!==(e=o.data.indexOf(C,e+1));)s.push({type:7,index:i}),e+=C.length-1}i++}}static createElement(e,t){const r=A.createElement("template");return r.innerHTML=e,r}}function J(e,t,r,o){if(void 0===r&&(r=e),t===W)return t;let i=void 0!==o?r._$Co?.[o]:r._$Cl;const a=P(t)?void 0:t._$litDirective$;return i?.constructor!==a&&(i?._$AO?.(!1),void 0===a?i=void 0:(i=new a(e),i._$AT(e,r,o)),void 0!==o?(r._$Co??=[])[o]=i:r._$Cl=i),void 0!==i&&(t=J(e,i._$AS(e,t.values),i,o)),t}class K{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:r}=this._$AD,o=(e?.creationScope??A).importNode(t,!0);Y.currentNode=o;let i=Y.nextNode(),a=0,n=0,s=r[0];for(;void 0!==s;){if(a===s.index){let t;2===s.type?t=new Z(i,i.nextSibling,this,e):1===s.type?t=new s.ctor(i,s.name,s.strings,this,e):6===s.type&&(t=new re(i,this,e)),this._$AV.push(t),s=r[++n]}a!==s?.index&&(i=Y.nextNode(),a++)}return Y.currentNode=A,o}p(e){let t=0;for(const r of this._$AV)void 0!==r&&(void 0!==r.strings?(r._$AI(e,r,t),t+=r.strings.length-2):r._$AI(e[t])),t++}}class Z{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,r,o){this.type=2,this._$AH=B,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=r,this.options=o,this._$Cv=o?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t){void 0===t&&(t=this),e=J(this,e,t),P(e)?e===B||null==e||""===e?(this._$AH!==B&&this._$AR(),this._$AH=B):e!==this._$AH&&e!==W&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>M(e)||"function"==typeof e?.[Symbol.iterator])(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==B&&P(this._$AH)?this._$AA.nextSibling.data=e:this.T(A.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:r}=e,o="number"==typeof r?this._$AC(e):(void 0===r.el&&(r.el=U.createElement(X(r.h,r.h[0]),this.options)),r);if(this._$AH?._$AD===o)this._$AH.p(t);else{const e=new K(o,this),r=e.u(this.options);e.p(t),this.T(r),this._$AH=e}}_$AC(e){let t=H.get(e.strings);return void 0===t&&H.set(e.strings,t=new U(e)),t}k(e){M(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let r,o=0;for(const i of e)o===t.length?t.push(r=new Z(this.O(D()),this.O(D()),this,this.options)):r=t[o],r._$AI(i),o++;o<t.length&&(this._$AR(r&&r._$AB.nextSibling,o),t.length=o)}_$AR(e,t){for(void 0===e&&(e=this._$AA.nextSibling),this._$AP?.(!1,!0,t);e!==this._$AB;){const t=_(e).nextSibling;_(e).remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class Q{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,r,o,i){this.type=1,this._$AH=B,this._$AN=void 0,this.element=e,this.name=t,this._$AM=o,this.options=i,r.length>2||""!==r[0]||""!==r[1]?(this._$AH=Array(r.length-1).fill(new String),this.strings=r):this._$AH=B}_$AI(e,t,r,o){void 0===t&&(t=this);const i=this.strings;let a=!1;if(void 0===i)e=J(this,e,t,0),a=!P(e)||e!==this._$AH&&e!==W,a&&(this._$AH=e);else{const o=e;let n,s;for(e=i[0],n=0;n<i.length-1;n++)s=J(this,o[r+n],t,n),s===W&&(s=this._$AH[n]),a||=!P(s)||s!==this._$AH[n],s===B?e=B:e!==B&&(e+=(s??"")+i[n+1]),this._$AH[n]=s}a&&!o&&this.j(e)}j(e){e===B?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class G extends Q{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===B?void 0:e}}class ee extends Q{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==B)}}class te extends Q{constructor(e,t,r,o,i){super(e,t,r,o,i),this.type=5}_$AI(e,t){if(void 0===t&&(t=this),(e=J(this,e,t,0)??B)===W)return;const r=this._$AH,o=e===B&&r!==B||e.capture!==r.capture||e.once!==r.once||e.passive!==r.passive,i=e!==B&&(r===B||o);o&&this.element.removeEventListener(this.name,this,r),i&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class re{constructor(e,t,r){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=r}get _$AU(){return this._$AM._$AU}_$AI(e){J(this,e)}}const oe={I:Z},ie=k.litHtmlPolyfillSupport;ie?.(U,Z),(k.litHtmlVersions??=[]).push("3.3.2");const ae=globalThis;
+const k=globalThis,_=e=>e,$=k.trustedTypes,S=$?$.createPolicy("lit-html",{createHTML:e=>e}):void 0,E="$lit$",C=`lit$${Math.random().toFixed(9).slice(2)}$`,O="?"+C,z=`<${O}>`,A=document,D=()=>A.createComment(""),P=e=>null===e||"object"!=typeof e&&"function"!=typeof e,M=Array.isArray,T="[ \t\n\f\r]",j=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,R=/-->/g,N=/>/g,I=RegExp(`>|${T}(?:([^\\s"'>=/]+)(${T}*=${T}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),V=/'/g,F=/"/g,L=/^(?:script|style|textarea|title)$/i,q=(e=>function(t){for(var r=arguments.length,o=new Array(r>1?r-1:0),i=1;i<r;i++)o[i-1]=arguments[i];return{_$litType$:e,strings:t,values:o}})(1),W=Symbol.for("lit-noChange"),B=Symbol.for("lit-nothing"),H=new WeakMap,Y=A.createTreeWalker(A,129);function X(e,t){if(!M(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==S?S.createHTML(t):t}class U{constructor({strings:e,_$litType$:t},r){let o;this.parts=[];let i=0,a=0;const n=e.length-1,s=this.parts,[l,d]=((e,t)=>{const r=e.length-1,o=[];let i,a=2===t?"<svg>":3===t?"<math>":"",n=j;for(let t=0;t<r;t++){const r=e[t];let s,l,d=-1,c=0;for(;c<r.length&&(n.lastIndex=c,l=n.exec(r),null!==l);)c=n.lastIndex,n===j?"!--"===l[1]?n=R:void 0!==l[1]?n=N:void 0!==l[2]?(L.test(l[2])&&(i=RegExp("</"+l[2],"g")),n=I):void 0!==l[3]&&(n=I):n===I?">"===l[0]?(n=i??j,d=-1):void 0===l[1]?d=-2:(d=n.lastIndex-l[2].length,s=l[1],n=void 0===l[3]?I:'"'===l[3]?F:V):n===F||n===V?n=I:n===R||n===N?n=j:(n=I,i=void 0);const h=n===I&&e[t+1].startsWith("/>")?" ":"";a+=n===j?r+z:d>=0?(o.push(s),r.slice(0,d)+E+r.slice(d)+C+h):r+C+(-2===d?t:h)}return[X(e,a+(e[r]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),o]})(e,t);if(this.el=U.createElement(l,r),Y.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(o=Y.nextNode())&&s.length<n;){if(1===o.nodeType){if(o.hasAttributes())for(const e of o.getAttributeNames())if(e.endsWith(E)){const t=d[a++],r=o.getAttribute(e).split(C),n=/([.?@])?(.*)/.exec(t);s.push({type:1,index:i,name:n[2],strings:r,ctor:"."===n[1]?G:"?"===n[1]?ee:"@"===n[1]?te:Q}),o.removeAttribute(e)}else e.startsWith(C)&&(s.push({type:6,index:i}),o.removeAttribute(e));if(L.test(o.tagName)){const e=o.textContent.split(C),t=e.length-1;if(t>0){o.textContent=$?$.emptyScript:"";for(let r=0;r<t;r++)o.append(e[r],D()),Y.nextNode(),s.push({type:2,index:++i});o.append(e[t],D())}}}else if(8===o.nodeType)if(o.data===O)s.push({type:2,index:i});else{let e=-1;for(;-1!==(e=o.data.indexOf(C,e+1));)s.push({type:7,index:i}),e+=C.length-1}i++}}static createElement(e,t){const r=A.createElement("template");return r.innerHTML=e,r}}function J(e,t,r,o){if(void 0===r&&(r=e),t===W)return t;let i=void 0!==o?r._$Co?.[o]:r._$Cl;const a=P(t)?void 0:t._$litDirective$;return i?.constructor!==a&&(i?._$AO?.(!1),void 0===a?i=void 0:(i=new a(e),i._$AT(e,r,o)),void 0!==o?(r._$Co??=[])[o]=i:r._$Cl=i),void 0!==i&&(t=J(e,i._$AS(e,t.values),i,o)),t}class K{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:r}=this._$AD,o=(e?.creationScope??A).importNode(t,!0);Y.currentNode=o;let i=Y.nextNode(),a=0,n=0,s=r[0];for(;void 0!==s;){if(a===s.index){let t;2===s.type?t=new Z(i,i.nextSibling,this,e):1===s.type?t=new s.ctor(i,s.name,s.strings,this,e):6===s.type&&(t=new re(i,this,e)),this._$AV.push(t),s=r[++n]}a!==s?.index&&(i=Y.nextNode(),a++)}return Y.currentNode=A,o}p(e){let t=0;for(const r of this._$AV)void 0!==r&&(void 0!==r.strings?(r._$AI(e,r,t),t+=r.strings.length-2):r._$AI(e[t])),t++}}class Z{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,r,o){this.type=2,this._$AH=B,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=r,this.options=o,this._$Cv=o?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t){void 0===t&&(t=this),e=J(this,e,t),P(e)?e===B||null==e||""===e?(this._$AH!==B&&this._$AR(),this._$AH=B):e!==this._$AH&&e!==W&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>M(e)||"function"==typeof e?.[Symbol.iterator])(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==B&&P(this._$AH)?this._$AA.nextSibling.data=e:this.T(A.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:r}=e,o="number"==typeof r?this._$AC(e):(void 0===r.el&&(r.el=U.createElement(X(r.h,r.h[0]),this.options)),r);if(this._$AH?._$AD===o)this._$AH.p(t);else{const e=new K(o,this),r=e.u(this.options);e.p(t),this.T(r),this._$AH=e}}_$AC(e){let t=H.get(e.strings);return void 0===t&&H.set(e.strings,t=new U(e)),t}k(e){M(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let r,o=0;for(const i of e)o===t.length?t.push(r=new Z(this.O(D()),this.O(D()),this,this.options)):r=t[o],r._$AI(i),o++;o<t.length&&(this._$AR(r&&r._$AB.nextSibling,o),t.length=o)}_$AR(e,t){for(void 0===e&&(e=this._$AA.nextSibling),this._$AP?.(!1,!0,t);e!==this._$AB;){const t=_(e).nextSibling;_(e).remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class Q{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,r,o,i){this.type=1,this._$AH=B,this._$AN=void 0,this.element=e,this.name=t,this._$AM=o,this.options=i,r.length>2||""!==r[0]||""!==r[1]?(this._$AH=Array(r.length-1).fill(new String),this.strings=r):this._$AH=B}_$AI(e,t,r,o){void 0===t&&(t=this);const i=this.strings;let a=!1;if(void 0===i)e=J(this,e,t,0),a=!P(e)||e!==this._$AH&&e!==W,a&&(this._$AH=e);else{const o=e;let n,s;for(e=i[0],n=0;n<i.length-1;n++)s=J(this,o[r+n],t,n),s===W&&(s=this._$AH[n]),a||=!P(s)||s!==this._$AH[n],s===B?e=B:e!==B&&(e+=(s??"")+i[n+1]),this._$AH[n]=s}a&&!o&&this.j(e)}j(e){e===B?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class G extends Q{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===B?void 0:e}}class ee extends Q{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==B)}}class te extends Q{constructor(e,t,r,o,i){super(e,t,r,o,i),this.type=5}_$AI(e,t){if(void 0===t&&(t=this),(e=J(this,e,t,0)??B)===W)return;const r=this._$AH,o=e===B&&r!==B||e.capture!==r.capture||e.once!==r.once||e.passive!==r.passive,i=e!==B&&(r===B||o);o&&this.element.removeEventListener(this.name,this,r),i&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class re{constructor(e,t,r){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=r}get _$AU(){return this._$AM._$AU}_$AI(e){J(this,e)}}const oe={I:Z},ie=k.litHtmlPolyfillSupport;ie?.(U,Z),(k.litHtmlVersions??=[]).push("3.3.3");const ae=globalThis;
 /**
  * @license
  * Copyright 2017 Google LLC

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.10.0-next.10",
-  "packageManager": "pnpm@11.1.0",
+  "version": "2.10.0-next.11",
+  "packageManager": "pnpm@11.3.0",
   "browserslist": [
     "supports es6-module and > 0.25% in FI or > 0.25% in NO or > 0.25% in SE or > 0.25% in DK and not dead and not Safari < 15 and not iOS < 15",
     "not chrome < 61"