| @@ -1,32 +1,49 @@ | ||
| 1 | -(function(){"use strict";function i(o,...e){return{__wpdHtml:!0,strings:o,values:e}}function _e(o){return!!o&&o.__wpdHtml===!0}const $e="$$wpd$$",g=/\$\$wpd\$\$(\d+)\$\$/g;function Ce(o){let e=o[0];for(let t=1;t<o.length;t++)e+=`${$e}${t-1}$$`+o[t];return e}const he=new WeakMap;function be(o){const e=he.get(o);if(e)return e;const t=document.createElement("template");t.innerHTML=Ce(o);const s=[],n=(c,d)=>{if(c.nodeType===Node.ELEMENT_NODE){const m=c;for(const _ of Array.from(m.attributes)){const f=_.name,u=_.value,A=f[0];if(g.test(u))if(g.lastIndex=0,A==="@"){const p=g.exec(u);g.lastIndex=0,s.push({path:d,kind:"event",name:f.slice(1),valueIndex:p?Number(p[1]):0}),m.removeAttribute(f)}else if(A==="."){const p=g.exec(u);g.lastIndex=0,s.push({path:d,kind:"prop",name:f.slice(1),valueIndex:p?Number(p[1]):0}),m.removeAttribute(f)}else if(A==="?"){const p=g.exec(u);g.lastIndex=0,s.push({path:d,kind:"bool",name:f.slice(1),valueIndex:p?Number(p[1]):0}),m.removeAttribute(f)}else{const p=[],k=[];let v=0,y;for(g.lastIndex=0;(y=g.exec(u))!==null;)p.push(u.slice(v,y.index)),k.push(Number(y[1])),v=y.index+y[0].length;p.push(u.slice(v)),s.push({path:d,kind:"attr",name:f,template:p,valueIndices:k}),m.setAttribute(f,"")}}}const l=Array.from(c.childNodes);let h=0;for(let m=0;m<l.length;m++){const _=l[m],f=m+h;if(_.nodeType===Node.TEXT_NODE){const u=_.textContent||"";if(!g.test(u)){g.lastIndex=0;continue}g.lastIndex=0;const A=_.parentNode;let p=0,k;const v=[],y=[];for(g.lastIndex=0;(k=g.exec(u))!==null;){k.index>p&&v.push(document.createTextNode(u.slice(p,k.index)));const S=document.createTextNode("");v.push(S),y.push({path:[...d,f+v.length-1],kind:"node",valueIndex:Number(k[1])}),p=k.index+k[0].length}p<u.length&&v.push(document.createTextNode(u.slice(p)));for(const S of v)A.insertBefore(S,_);A.removeChild(_),h+=v.length-1,s.push(...y)}else n(_,[...d,f])}};n(t.content,[]);const a={template:t,buildParts:c=>{const d=[];for(const l of s){let h=c;for(const m of l.path)h=h.childNodes[m];l.kind==="node"?d.push({kind:"node",valueIndex:l.valueIndex,child:{anchor:h,state:null}}):l.kind==="attr"?d.push({kind:"attr",element:h,name:l.name,template:l.template,valueIndices:l.valueIndices}):l.kind==="event"?d.push({kind:"event",valueIndex:l.valueIndex,element:h,name:l.name}):l.kind==="prop"?d.push({kind:"prop",valueIndex:l.valueIndex,element:h,name:l.name}):l.kind==="bool"&&d.push({kind:"bool",valueIndex:l.valueIndex,element:h,name:l.name})}return d}};return he.set(o,a),a}const fe=new WeakMap;function Ae(o,e){const t=fe.get(e);if(t&&t.strings===o.strings){O(t.parts,o.values);return}const s=be(o.strings),n=s.template.content.cloneNode(!0),r=s.buildParts(n);for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(n),O(r,o.values),fe.set(e,{strings:o.strings,parts:r})}function O(o,e){for(const t of o)if(t.kind==="node")G(t.child,e[t.valueIndex]);else if(t.kind==="attr"){let s=t.template[0];for(let n=0;n<t.valueIndices.length;n++)s+=me(e[t.valueIndices[n]]),s+=t.template[n+1];s!==t.last&&(t.last=s,s===""?t.element.removeAttribute(t.name):t.element.setAttribute(t.name,s))}else if(t.kind==="event"){const s=e[t.valueIndex];s!==t.current&&(t.current&&t.element.removeEventListener(t.name,t.current),s&&t.element.addEventListener(t.name,s),t.current=s)}else if(t.kind==="prop"){const s=e[t.valueIndex];s!==t.last&&(t.last=s,t.element[t.name]=s)}else if(t.kind==="bool"){const s=!!e[t.valueIndex];s!==t.last&&(t.last=s,s?t.element.setAttribute(t.name,""):t.element.removeAttribute(t.name))}}function G(o,e){if(e==null||e===!1){o.state&&(L(o.state),o.state=null);return}if(Array.isArray(e)){Ie(o,e);return}if(_e(e)){Le(o,e);return}if(e instanceof Node){Se(o,e);return}Ee(o,me(e))}function Se(o,e){const t=o.state;t?.shape==="node"&&t.node===e||(t&&L(t),K(o,[e]),o.state={shape:"node",node:e})}function Ee(o,e){const t=o.state;if(t?.shape==="text"){t.text!==e&&(t.node.textContent=e,t.text=e);return}t&&L(t);const s=document.createTextNode(e);K(o,[s]),o.state={shape:"text",node:s,text:e}}function Le(o,e){const t=o.state;if(t?.shape==="template"&&t.strings===e.strings){O(t.parts,e.values);return}t&&L(t);const s=be(e.strings),n=s.template.content.cloneNode(!0),r=s.buildParts(n),a=Array.from(n.childNodes);K(o,[n]),O(r,e.values),o.state={shape:"template",strings:e.strings,parts:r,nodes:a}}function Ie(o,e){const t=o.state;if(t?.shape==="array"&&t.entries.length===e.length){for(let n=0;n<e.length;n++)G(t.entries[n],e[n]);return}t&&L(t);const s=[];for(const n of e){const r=document.createTextNode("");K(o,[r]);const a={anchor:r,state:null};G(a,n),s.push(a)}o.state={shape:"array",entries:s}}function K(o,e){const t=o.anchor.parentNode;if(t)for(const s of e)t.insertBefore(s,o.anchor)}function L(o){if(o.shape==="text"){o.node.remove();return}if(o.shape==="template"){for(const e of o.nodes)e.parentNode&&e.parentNode.removeChild(e);return}if(o.shape==="node"){o.node.parentNode&&o.node.parentNode.removeChild(o.node);return}for(const e of o.entries)e.state&&L(e.state),e.anchor.remove()}function me(o){return o==null||o===!1?"":String(o)}const E=class E extends HTMLElement{constructor(){super(),this._renderScheduled=!1,this._propValues={},this.constructor.shadow?(this.attachShadow({mode:"open"}),this._renderRoot=this.shadowRoot):this._renderRoot=this,this._installPropAccessors()}static get observedAttributes(){return this.props.map(ve)}connectedCallback(){this._adoptStyles(),this.requestUpdate()}attributeChangedCallback(e,t,s){if(t===s)return;const n=ze(e);this._propValues[n]=s,this.requestUpdate()}get classNames(){return Array.from(this.classList)}set classNames(e){if(e==null){this.removeAttribute("class");return}const s=(Array.isArray(e)?e:String(e).split(/\s+/)).map(n=>String(n).trim()).filter(n=>n!=="");this.className=s.join(" ")}requestUpdate(){this._scheduleRender()}emit(e,t){return this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}_installPropAccessors(){const e=this.constructor;for(const t of e.props){if(Object.getOwnPropertyDescriptor(this,t))continue;const s=ve(t);Object.defineProperty(this,t,{get:()=>t in this._propValues?this._propValues[t]:this.getAttribute(s),set:n=>{let r;n==null||n===!1?r=null:n===!0?r="":r=String(n),this._propValues[t]=r,r===null?this.removeAttribute(s):this.setAttribute(s,r),this.requestUpdate()},enumerable:!0,configurable:!0})}}_scheduleRender(){this._renderScheduled||!this.isConnected||(this._renderScheduled=!0,queueMicrotask(()=>{this._renderScheduled=!1,this.isConnected&&Ae(this.render(),this._renderRoot)}))}_adoptStyles(){const e=this.constructor;if(e.styles.length!==0)if(e.shadow&&this.shadowRoot){const t=e.styles.map(s=>s.sheet).filter(s=>s!==null);if(this.shadowRoot.adoptedStyleSheets=t,t.length!==e.styles.length){for(const s of e.styles)if(!s.sheet){const n=document.createElement("style");n.textContent=s.cssText,this.shadowRoot.appendChild(n)}}}else this._adoptLightStyles(e)}_adoptLightStyles(e){if(!E._lightStylesAdopted.has(e)){E._lightStylesAdopted.add(e);for(const t of e.styles){const s=document.createElement("style");s.dataset.wpdUi=this.tagName.toLowerCase(),s.textContent=t.cssText,document.head.appendChild(s)}}}};E.props=[],E.styles=[],E.shadow=!0,E._lightStylesAdopted=new WeakSet;let b=E;function w(o,e){customElements.get(o)||customElements.define(o,e)}function ve(o){return o.replace(/[A-Z]/g,e=>"-"+e.toLowerCase())}function ze(o){return o.replace(/-([a-z])/g,(e,t)=>t.toUpperCase())}const Me=(()=>{try{return typeof new CSSStyleSheet().replaceSync=="function"}catch{return!1}})();function x(o,...e){let t=o[0];for(let s=1;s<o.length;s++){const n=e[s-1];if(typeof n=="string"||typeof n=="number")t+=String(n);else if(n&&n.__wpdCss)t+=n.cssText;else throw new TypeError("[wpd-ui] css`` interpolations must be strings, numbers, or other css`` results. Got: "+typeof n);t+=o[s]}if(Me){const s=new CSSStyleSheet;return s.replaceSync(t),{__wpdCss:!0,sheet:s,cssText:t}}return{__wpdCss:!0,sheet:null,cssText:t}}function Ne(o){const e=[],t=[];let s=null,n=o.parentElement;for(;n&&!(n===document.body||n===document.documentElement);){const a=n.id||"";if(a.startsWith("wp-window-")){s=a.slice(10);break}if(n.tagName.toLowerCase()==="wpd-tabpanel"){const c=n.getAttribute("for");c&&t.unshift(c)}n=n.parentElement}s&&e.push(X(s));for(const a of t)e.push("tab-"+X(a));const r=o.getAttribute("label");return r&&e.push(X(r)),e.length===0?"wpd-unnamed":"wpd-"+e.filter(a=>a!=="").join("-")}function X(o){return o.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")}function ge(o){if(o.id)return o.id;const e=Ne(o);return o.id=e,e}const Te=x`:host{position:fixed;top:calc( var( --wp-admin--admin-bar--height,32px ) + 16px );inset-inline-end:16px;display:flex;flex-direction:column;gap:8px;z-index:calc( var( --desktop-mode-z-fullscreen,99999 ) + 10 );pointer-events:none}`,Pe=x`:host{display:flex;align-items:center;gap:12px;min-width:280px;max-width:420px;padding:10px 14px;background:#1d2327;color:#fff;border-radius:8px;box-shadow:0 8px 24px rgba( 0,0,0,0.2 ),0 2px 6px rgba( 0,0,0,0.1 );font-size:13px;line-height:1.4;opacity:0;transform:translateY( -8px );transition:opacity 0.18s ease,transform 0.18s ease;pointer-events:auto}:host( [ state='in' ] ){opacity:1;transform:translateY( 0 )}:host( [ state='out' ] ){opacity:0;transform:translateY( -8px )}.wpd-toast__label{flex:1}button{flex-shrink:0;padding:4px 10px;border:none;border-radius:4px;background:rgba( 255,255,255,0.12 );color:#fff;font:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:background-color 0.12s ease}button:hover{background:rgba( 255,255,255,0.22 )}button:focus-visible{outline:2px solid rgba( 255,255,255,0.6 );outline-offset:2px}@media ( prefers-reduced-motion:reduce ){:host{transition-duration:0.01ms}}`,B=class B extends b{connectedCallback(){super.connectedCallback(),this.setAttribute("aria-live","polite")}render(){return i`<slot></slot>`}};B.styles=[Te],B.help=void 0;let J=B;w("wpd-toast-container",J);const I=class I extends b{connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","status")}render(){const e=this.action||"";return i` | |
| 2 | - <span class="wpd-toast__label"><slot></slot></span> | |
| 1 | +(function(){"use strict";function a(i,...e){return{__wpdHtml:!0,strings:i,values:e}}function De(i){return!!i&&i.__wpdHtml===!0}const Fe="$$wpd$$",y=/\$\$wpd\$\$(\d+)\$\$/g,qe="$$wpd-node$$",Pe=/^\$\$wpd-node\$\$(\d+)\$\$$/,je=new Set(["style","script","textarea","title"]);function Ue(i){let e="",t=!1,o=null,s=!1,r=null,n="",l=!1;for(let c=0;c<i.length;c++){const d=i[c];e+=d;for(let h=0;h<d.length;h++){const p=d[h];if(s){d.startsWith("-->",h)&&(s=!1,h+=2);continue}if(r!==null){p==="<"&&d[h+1]==="/"&&d.slice(h+2,h+2+r.length).toLowerCase()===r&&(h+=1+r.length,r=null,t=!0,l=!1,n="");continue}if(o!==null){p===o&&(o=null);continue}if(t){p==='"'||p==="'"?(o=p,l=!1):p===">"?(t=!1,l=!1,je.has(n)&&(r=n),n=""):l&&(/[a-zA-Z0-9-]/.test(p)?n+=p.toLowerCase():l=!1);continue}if(d.startsWith("<!--",h)){s=!0,h+=3;continue}const f=d[h+1]??"";p==="<"&&/[a-zA-Z/!]/.test(f)&&(t=!0,n="",l=/[a-zA-Z]/.test(f))}c<i.length-1&&(e+=t||s||r!==null?`${Fe}${c}$$`:`<!--${qe}${c}$$-->`)}return e}const ge=new WeakMap;function ve(i){const e=ge.get(i);if(e)return e;const t=document.createElement("template");t.innerHTML=Ue(i);const o=[],s=(l,c)=>{if(l.nodeType===Node.ELEMENT_NODE){const p=l;for(const f of Array.from(p.attributes)){const v=f.name,u=f.value,m=v[0];if(y.test(u))if(y.lastIndex=0,m==="@"){const g=y.exec(u);y.lastIndex=0,o.push({path:c,kind:"event",name:v.slice(1),valueIndex:g?Number(g[1]):0}),p.removeAttribute(v)}else if(m==="."){const g=y.exec(u);y.lastIndex=0,o.push({path:c,kind:"prop",name:v.slice(1),valueIndex:g?Number(g[1]):0}),p.removeAttribute(v)}else if(m==="?"){const g=y.exec(u);y.lastIndex=0,o.push({path:c,kind:"bool",name:v.slice(1),valueIndex:g?Number(g[1]):0}),p.removeAttribute(v)}else{const g=[],_=[];let k=0,A;for(y.lastIndex=0;(A=y.exec(u))!==null;)g.push(u.slice(k,A.index)),_.push(Number(A[1])),k=A.index+A[0].length;g.push(u.slice(k)),o.push({path:c,kind:"attr",name:v,template:g,valueIndices:_}),p.setAttribute(v,"")}}}const d=Array.from(l.childNodes);let h=0;for(let p=0;p<d.length;p++){const f=d[p],v=p+h;if(f.nodeType===Node.COMMENT_NODE){const u=Pe.exec(f.data);if(u){const m=document.createTextNode("");f.parentNode.replaceChild(m,f),o.push({path:[...c,v],kind:"node",valueIndex:Number(u[1])})}continue}if(f.nodeType===Node.TEXT_NODE){const u=f.textContent||"";if(!y.test(u)){y.lastIndex=0;continue}y.lastIndex=0;const m=f.parentNode;let g=0,_;const k=[],A=[];for(y.lastIndex=0;(_=y.exec(u))!==null;){_.index>g&&k.push(document.createTextNode(u.slice(g,_.index)));const S=document.createTextNode("");k.push(S),A.push({path:[...c,v+k.length-1],kind:"node",valueIndex:Number(_[1])}),g=_.index+_[0].length}g<u.length&&k.push(document.createTextNode(u.slice(g)));for(const S of k)m.insertBefore(S,f);m.removeChild(f),h+=k.length-1,o.push(...A)}else s(f,[...c,v])}};s(t.content,[]);const n={template:t,buildParts:l=>{const c=[];for(const d of o){let h=l;for(const p of d.path)h=h.childNodes[p];d.kind==="node"?c.push({kind:"node",valueIndex:d.valueIndex,child:{anchor:h,state:null}}):d.kind==="attr"?c.push({kind:"attr",element:h,name:d.name,template:d.template,valueIndices:d.valueIndices}):d.kind==="event"?c.push({kind:"event",valueIndex:d.valueIndex,element:h,name:d.name}):d.kind==="prop"?c.push({kind:"prop",valueIndex:d.valueIndex,element:h,name:d.name}):d.kind==="bool"&&c.push({kind:"bool",valueIndex:d.valueIndex,element:h,name:d.name})}return c}};return ge.set(i,n),n}const me=new WeakMap;function Ze(i,e){for(const t of i.nodes)if(t.parentNode!==e)return!1;return!0}function Be(i,e){const t=me.get(e);if(t&&t.strings===i.strings&&Ze(t,e)){W(t.parts,i.values);return}const o=ve(i.strings),s=o.template.content.cloneNode(!0),r=o.buildParts(s),n=Array.from(s.childNodes);for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(s),W(r,i.values),me.set(e,{strings:i.strings,parts:r,nodes:n})}function W(i,e){for(const t of i)if(t.kind==="node")X(t.child,e[t.valueIndex]);else if(t.kind==="attr"){let o=t.template[0];for(let s=0;s<t.valueIndices.length;s++)o+=xe(e[t.valueIndices[s]]),o+=t.template[s+1];o!==t.last&&(t.last=o,o===""?t.element.removeAttribute(t.name):t.element.setAttribute(t.name,o))}else if(t.kind==="event"){const o=e[t.valueIndex];o!==t.current&&(t.current&&t.element.removeEventListener(t.name,t.current),o&&t.element.addEventListener(t.name,o),t.current=o)}else if(t.kind==="prop"){const o=e[t.valueIndex];o!==t.last&&(t.last=o,t.element[t.name]=o)}else if(t.kind==="bool"){const o=!!e[t.valueIndex];o!==t.last&&(t.last=o,o?t.element.setAttribute(t.name,""):t.element.removeAttribute(t.name))}}function X(i,e){if(e==null||e===!1){i.state&&(E(i.state),i.state=null);return}if(Array.isArray(e)){Qe(i,e);return}if(De(e)){Xe(i,e);return}if(e instanceof Node){Ke(i,e);return}We(i,xe(e))}function Ke(i,e){const t=i.state;t?.shape==="node"&&t.node===e||(t&&E(t),I(i,[e]),i.state={shape:"node",node:e})}function We(i,e){const t=i.state;if(t?.shape==="text"){t.text!==e&&(t.node.textContent=e,t.text=e);return}t&&E(t);const o=document.createTextNode(e);I(i,[o]),i.state={shape:"text",node:o,text:e}}function Xe(i,e){const t=i.state;if(t?.shape==="template"&&t.strings===e.strings){W(t.parts,e.values);return}t&&E(t);const o=ve(e.strings),s=o.template.content.cloneNode(!0),r=o.buildParts(s),n=Array.from(s.childNodes);I(i,[s]),W(r,e.values),i.state={shape:"template",strings:e.strings,parts:r,nodes:n}}function Qe(i,e){const t=i.state;if(t?.shape==="array"){const s=Math.min(t.entries.length,e.length);for(let r=0;r<s;r++)X(t.entries[r],e[r]);if(e.length<t.entries.length){for(let r=e.length;r<t.entries.length;r++){const n=t.entries[r];n.state&&E(n.state),n.anchor.remove()}t.entries.length=e.length}else for(let r=t.entries.length;r<e.length;r++){const n=document.createTextNode("");I(i,[n]);const l={anchor:n,state:null};X(l,e[r]),t.entries.push(l)}return}t&&E(t);const o=[];for(const s of e){const r=document.createTextNode("");I(i,[r]);const n={anchor:r,state:null};X(n,s),o.push(n)}i.state={shape:"array",entries:o}}function I(i,e){const t=i.anchor.parentNode;if(t)for(const o of e)t.insertBefore(o,i.anchor)}function E(i){if(i.shape==="text"){i.node.remove();return}if(i.shape==="template"){for(const e of i.parts)e.kind==="node"&&e.child.state&&(E(e.child.state),e.child.state=null);for(const e of i.nodes)e.parentNode&&e.parentNode.removeChild(e);return}if(i.shape==="node"){i.node.parentNode&&i.node.parentNode.removeChild(i.node);return}for(const e of i.entries)e.state&&E(e.state),e.anchor.remove()}function xe(i){return i==null||i===!1?"":String(i)}const L=class L extends HTMLElement{constructor(){super(),this._renderScheduled=!1,this._propValues={},this.constructor.shadow?(this.attachShadow({mode:"open"}),this._renderRoot=this.shadowRoot):this._renderRoot=this,this._installPropAccessors()}static get observedAttributes(){return this.props.map(_e)}connectedCallback(){this._adoptStyles(),this.requestUpdate()}attributeChangedCallback(e,t,o){if(t===o)return;const s=Ye(e);this._propValues[s]=o,this.requestUpdate()}get classNames(){return Array.from(this.classList)}set classNames(e){if(e==null){this.removeAttribute("class");return}const o=(Array.isArray(e)?e:String(e).split(/\s+/)).map(s=>String(s).trim()).filter(s=>s!=="");this.className=o.join(" ")}requestUpdate(){this._scheduleRender()}emit(e,t){return this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}_installPropAccessors(){const e=this.constructor;for(const t of e.props){if(Object.getOwnPropertyDescriptor(this,t))continue;const o=_e(t);Object.defineProperty(this,t,{get:()=>t in this._propValues?this._propValues[t]:this.getAttribute(o),set:s=>{let r;s==null||s===!1?r=null:s===!0?r="":r=String(s),this._propValues[t]=r,r===null?this.removeAttribute(o):this.setAttribute(o,r),this.requestUpdate()},enumerable:!0,configurable:!0})}}_scheduleRender(){this._renderScheduled||!this.isConnected||(this._renderScheduled=!0,queueMicrotask(()=>{this._renderScheduled=!1,this.isConnected&&Be(this.render(),this._renderRoot)}))}_adoptStyles(){const e=this.constructor;if(e.styles.length!==0)if(e.shadow&&this.shadowRoot){const t=e.styles.map(o=>o.sheet).filter(o=>o!==null);if(this.shadowRoot.adoptedStyleSheets=t,t.length!==e.styles.length){for(const o of e.styles)if(!o.sheet){const s=document.createElement("style");s.textContent=o.cssText,this.shadowRoot.appendChild(s)}}}else this._adoptLightStyles(e)}_adoptLightStyles(e){if(!L._lightStylesAdopted.has(e)){L._lightStylesAdopted.add(e);for(const t of e.styles){const o=document.createElement("style");o.dataset.osUi=this.tagName.toLowerCase(),o.textContent=t.cssText,document.head.appendChild(o)}}}};L.props=[],L.styles=[],L.shadow=!0,L._lightStylesAdopted=new WeakSet;let x=L;function w(i,e){customElements.get(i)||customElements.define(i,e)}function _e(i){return i.replace(/[A-Z]/g,e=>"-"+e.toLowerCase())}function Ye(i){return i.replace(/-([a-z])/g,(e,t)=>t.toUpperCase())}const Ge=(()=>{try{return typeof new CSSStyleSheet().replaceSync=="function"}catch{return!1}})();function b(i,...e){let t=i[0];for(let o=1;o<i.length;o++){const s=e[o-1];if(typeof s=="string"||typeof s=="number")t+=String(s);else if(s&&s.__wpdCss)t+=s.cssText;else throw new TypeError("[os-ui] css`` interpolations must be strings, numbers, or other css`` results. Got: "+typeof s);t+=i[o]}if(Ge){const o=new CSSStyleSheet;return o.replaceSync(t),{__wpdCss:!0,sheet:o,cssText:t}}return{__wpdCss:!0,sheet:null,cssText:t}}function Je(i){const e=[],t=[];let o=null,s=i.parentElement;for(;s&&!(s===document.body||s===document.documentElement);){const n=s.id||"";if(n.startsWith("wp-window-")){o=n.slice(10);break}if(s.tagName.toLowerCase()==="os-tabpanel"){const l=s.getAttribute("for");l&&t.unshift(l)}s=s.parentElement}o&&e.push(O(o));for(const n of t)e.push("tab-"+O(n));const r=i.getAttribute("label");return r&&e.push(O(r)),e.length===0?"os-unnamed":"os-"+e.filter(n=>n!=="").join("-")}function O(i){return i.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")}function ke(i){if(i.id)return i.id;const e=Je(i);return i.id=e,e}const ye={close:{a:'fill="currentColor"',b:'<path d="m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z" />'},check:{a:'fill="currentColor"',b:'<path d="M16.5 7.5 10 13.9l-2.5-2.4-1 1 3.5 3.6 7.5-7.6z" />'},"chevron-right":{a:'fill="currentColor"',b:'<path d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" />'},"arrow-up-right":{a:'fill="currentColor"',b:'<path d="M10 6H18V14H16.5V8.5L7 18L6 17L15.5 7.5H10V6Z" />'},plus:{a:'fill="currentColor"',b:'<path d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z" />'},search:{a:'fill="currentColor"',b:'<path d="M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z" />'},pin:{a:'fill="currentColor"',b:'<path d="m21.5 9.1-6.6-6.6-4.2 5.6c-1.2-.1-2.4.1-3.6.7-.1 0-.1.1-.2.1-.5.3-.9.6-1.2.9l3.7 3.7-5.7 5.7v1.1h1.1l5.7-5.7 3.7 3.7c.4-.4.7-.8.9-1.2.1-.1.1-.2.2-.3.6-1.1.8-2.4.6-3.6l5.6-4.1zm-7.3 3.5.1.9c.1.9 0 1.8-.4 2.6l-6-6c.8-.4 1.7-.5 2.6-.4l.9.1L15 4.9 19.1 9l-4.9 3.6z" />'},trash:{a:'fill="currentColor"',b:'<path fill-rule="evenodd" clip-rule="evenodd" d="M12 5.5A2.25 2.25 0 0 0 9.878 7h4.244A2.251 2.251 0 0 0 12 5.5ZM12 4a3.751 3.751 0 0 0-3.675 3H5v1.5h1.27l.818 8.997a2.75 2.75 0 0 0 2.739 2.501h4.347a2.75 2.75 0 0 0 2.738-2.5L17.73 8.5H19V7h-3.325A3.751 3.751 0 0 0 12 4Zm4.224 4.5H7.776l.806 8.861a1.25 1.25 0 0 0 1.245 1.137h4.347a1.25 1.25 0 0 0 1.245-1.137l.805-8.861Z" />'},download:{a:'fill="currentColor"',b:'<path d="M18 11.3l-1-1.1-4 4V3h-1.5v11.3L7 10.2l-1 1.1 6.2 5.8 5.8-5.8zm.5 3.7v3.5h-13V15H4v5h16v-5h-1.5z" />'},settings:{a:'fill="currentColor"',b:'<path d="m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z" /><path d="m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z" />'},info:{a:'fill="currentColor"',b:'<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 12a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0ZM12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm.75 4v1.5h-1.5V8h1.5Zm0 8v-5h-1.5v5h1.5Z" />'},bell:{a:'fill="currentColor"',b:'<path fill-rule="evenodd" clip-rule="evenodd" d="M17 11.5c0 1.353.17 2.368.976 3 .266.209.602.376 1.024.5v1H5v-1c.422-.124.757-.291 1.024-.5.806-.632.976-1.647.976-3V9c0-2.8 2.2-5 5-5s5 2.2 5 5v2.5ZM15.5 9v2.5c0 .93.066 1.98.515 2.897l.053.103H7.932a4.018 4.018 0 0 0 .053-.103c.449-.917.515-1.967.515-2.897V9c0-1.972 1.528-3.5 3.5-3.5s3.5 1.528 3.5 3.5Zm-5.492 9.008c0-.176.023-.346.065-.508h3.854A1.996 1.996 0 0 1 12 20c-1.1 0-1.992-.892-1.992-1.992Z" />'},more:{a:'fill="currentColor"',b:'<path d="M11 13h2v-2h-2v2zm-6 0h2v-2H5v2zm12-2v2h2v-2h-2z" />'},maximize:{a:'fill="currentColor"',b:'<path d="M6 4a2 2 0 0 0-2 2v3h1.5V6a.5.5 0 0 1 .5-.5h3V4H6Zm3 14.5H6a.5.5 0 0 1-.5-.5v-3H4v3a2 2 0 0 0 2 2h3v-1.5Zm6 1.5v-1.5h3a.5.5 0 0 0 .5-.5v-3H20v3a2 2 0 0 1-2 2h-3Zm3-16a2 2 0 0 1 2 2v3h-1.5V6a.5.5 0 0 0-.5-.5h-3V4h3Z" />'},edit:{a:'fill="currentColor"',b:'<path d="m19 7-3-3-8.5 8.5-1 4 4-1L19 7Zm-7 11.5H5V20h7v-1.5Z" />'},color:{a:'fill="currentColor"',b:'<path d="M17.2 10.9c-.5-1-1.2-2.1-2.1-3.2-.6-.9-1.3-1.7-2.1-2.6L12 4l-1 1.1c-.6.9-1.3 1.7-2 2.6-.8 1.2-1.5 2.3-2 3.2-.6 1.2-1 2.2-1 3 0 3.4 2.7 6.1 6.1 6.1s6.1-2.7 6.1-6.1c0-.8-.3-1.8-1-3zm-5.1 7.6c-2.5 0-4.6-2.1-4.6-4.6 0-.3.1-1 .8-2.3.5-.9 1.1-1.9 2-3.1.7-.9 1.3-1.7 1.8-2.3.7.8 1.3 1.6 1.8 2.3.8 1.1 1.5 2.2 2 3.1.7 1.3.8 2 .8 2.3 0 2.5-2.1 4.6-4.6 4.6z" />'},wallpaper:{a:'fill="currentColor"',b:'<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 4.5h14c.3 0 .5.2.5.5v8.4l-3-2.9c-.3-.3-.8-.3-1 0L11.9 14 9 12c-.3-.2-.6-.2-.8 0l-3.6 2.6V5c-.1-.3.1-.5.4-.5zm14 15H5c-.3 0-.5-.2-.5-.5v-2.4l4.1-3 3 1.9c.3.2.7.2.9-.1L16 12l3.5 3.4V19c0 .3-.2.5-.5.5z" />'},warning:{a:'fill="currentColor"',b:'<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 12a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0ZM12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 12v-1.5h1.5V16h-1.5Zm0-8v5h1.5V8h-1.5Z" />'},minimize:{a:'fill="currentColor"',b:'<path d="M5 11.25h14v1.5H5z" />'},window:{a:'fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"',b:'<rect x="4.125" y="5.4375" width="15.75" height="13.125" rx="1.75"/><path d="M4.125 9.8125h15.75"/><circle cx="7.275" cy="7.625" r="0.7438" fill="currentColor" stroke="none"/>'},windows:{a:'fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"',b:'<rect x="3.6875" y="8.5" width="11.375" height="10.0625" rx="1.75"/><path d="M3.6875 12h11.375"/><path d="M8.5 8.5V7.1875a1.75 1.75 0 0 1 1.75-1.75h7.875A1.75 1.75 0 0 1 19.875 7.1875v7a1.75 1.75 0 0 1-1.75 1.75h-3.0625"/>'},dock:{a:'fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"',b:'<rect x="3.25" y="8.5" width="17.5" height="7" rx="3.5"/><circle cx="7.625" cy="12" r="1.0062" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.0062" fill="currentColor" stroke="none"/><circle cx="16.375" cy="12" r="1.0062" fill="currentColor" stroke="none"/>'},spaces:{a:'fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"',b:'<rect x="3.6875" y="5.4375" width="7.4375" height="7.875" rx="1.75"/><rect x="12.875" y="5.4375" width="7.4375" height="7.875" rx="1.75"/><circle cx="9.375" cy="17.6875" r="0.7875" fill="currentColor" stroke="none"/><circle cx="12" cy="17.6875" r="0.7875" fill="currentColor" stroke="none"/><circle cx="14.625" cy="17.6875" r="0.7875" fill="currentColor" stroke="none"/>'},copilot:{a:'fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"',b:'<path d="M10 2.5Q10.9 8.5 17.5 10Q10.9 11.5 10 17.5Q9.1 11.5 2.5 10Q9.1 8.5 10 2.5Z" fill="currentColor" stroke="none"/><path d="M17.9 14Q18.35 17.1 21.5 17.6Q18.35 18.1 17.9 21.2Q17.45 18.1 14.3 17.6Q17.45 17.1 17.9 14Z" fill="currentColor" stroke="none"/>'},snap:{a:'fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"',b:'<rect x="3.6875" y="5.4375" width="16.625" height="13.125" rx="1.75"/><path d="M12 5.4375v13.125"/><path d="M12 12h8.3125"/>'},command:{a:'fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"',b:'<path d="M14.625 6.75v10.5a2.625 2.625 0 1 0 2.625-2.625H6.75a2.625 2.625 0 1 0 2.625 2.625V6.75a2.625 2.625 0 1 0-2.625 2.625h10.5a2.625 2.625 0 1 0-2.625-2.625"/>'},apps:{a:'fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"',b:'<rect x="4.125" y="4.125" width="6.5625" height="6.5625" rx="1.75"/><rect x="13.3125" y="4.125" width="6.5625" height="6.5625" rx="1.75"/><rect x="4.125" y="13.3125" width="6.5625" height="6.5625" rx="1.75"/><rect x="13.3125" y="13.3125" width="6.5625" height="6.5625" rx="1.75"/>'},widgets:{a:'fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"',b:'<rect x="3.6875" y="3.6875" width="9.625" height="9.625" rx="1.75"/><rect x="15.0625" y="3.6875" width="5.25" height="5.25" rx="1.75"/><rect x="15.0625" y="10.6875" width="5.25" height="9.625" rx="1.75"/><rect x="3.6875" y="15.0625" width="9.625" height="5.25" rx="1.75"/>'},user:{a:'fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"',b:'<circle cx="12" cy="8.9375" r="3.5"/><path d="M5.4375 19.4375a6.5625 6.5625 0 0 1 13.125 0"/>'},lock:{a:'fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"',b:'<rect x="5.4375" y="10.6875" width="13.125" height="8.75" rx="1.75"/><path d="M8.5 10.6875V8.0625a3.5 3.5 0 0 1 7 0v2.625"/>'}};function we(i){return i.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function Oe(i){return Object.prototype.hasOwnProperty.call(ye,i)?ye[i]:null}function et(i,e={}){const t=Oe(i);if(!t)return"";const{size:o=24,className:s,title:r,rotate:n}=e,l=['xmlns="http://www.w3.org/2000/svg"','viewBox="0 0 24 24"'];o!=null&&l.push(`width="${o}"`,`height="${o}"`),l.push(t.a),s&&l.push(`class="${we(s)}"`),r?l.push('role="img"',`aria-label="${we(r)}"`):l.push('aria-hidden="true"','focusable="false"');const c=n?`<g transform="rotate(${n} 12 12)">${t.b}</g>`:t.b;return`<svg ${l.join(" ")}>${c}</svg>`}function Q(i,e={}){const t=et(i,e),o=document.createElement("div");o.innerHTML=t;const s=o.firstElementChild;return s instanceof SVGSVGElement?s:document.createElementNS("http://www.w3.org/2000/svg","svg")}const tt="desktop-mode";function ot(){return window.wp?.i18n}function st(i,e=tt){return ot()?.__(i,e)??i}const z=b`:host{--_holo-fill:var( --os-ui-holo-fill,${"linear-gradient( 124deg, #afa2e8 0%, #f5a8ea 46%, #8ee9f7 100% )"} );--_holo-ink:var( --os-ui-holo-ink,#0c0b0f );--_holo-sheen:var( --os-ui-holo-sheen,linear-gradient( 124deg,rgba( 159,214,255,0.1 ) 0%,rgba( 236,155,255,0.12 ) 34%,rgba( 242,82,252,0.1 ) 58%,rgba( 147,240,198,0.09 ) 100% ) );--_holo-edge:var( --os-ui-holo-edge,linear-gradient( 124deg,rgba( 154,242,255,0.7 ) 0%,rgba( 236,155,255,0.85 ) 38%,rgba( 242,82,252,0.7 ) 62%,rgba( 159,152,255,0.6 ) 100% ) );--_holo-edge-quiet:var( --os-ui-holo-edge-quiet,linear-gradient( 124deg,rgba( 154,242,255,0.22 ) 0%,rgba( 236,155,255,0.28 ) 38%,rgba( 242,82,252,0.22 ) 62%,rgba( 159,152,255,0.2 ) 100% ) );--_holo-glow:var( --os-ui-holo-glow,0 0 0 1px rgba( 242,82,252,0.28 ),0 2px 10px rgba( 242,82,252,0.22 ) );--_holo-glow-strong:var( --os-ui-holo-glow-strong,0 0 0 1px rgba( 242,82,252,0.42 ),0 4px 18px rgba( 242,82,252,0.38 ),0 1px 3px rgba( 12,11,15,0.6 ) );--_holo-track:var( --os-ui-holo-track,rgba( 255,251,255,0.16 ) );--_holo-track-edge:var( --os-ui-holo-track-edge,#8c8f94 );--_holo-ring-color:var( --os-ui-accent-dim,#2271b1 );--_holo-focus:var( --os-ui-focus-ring,0 0 0 2px rgba( 12,11,15,0.9 ),0 0 0 4px #f252fc,0 0 12px 2px rgba( 242,82,252,0.45 ) );--_holo-focus-field:var( --os-ui-focus-ring-field,0 0 0 1px #f252fc,0 0 0 4px rgba( 242,82,252,0.18 ) );--_holo-t:var( --os-ui-holo-transition,220ms );--_holo-t-fast:var( --os-ui-motion-fast,140ms );--_holo-t-slow:var( --os-ui-motion-slow,340ms );--_holo-t-ambient:var( --os-ui-motion-ambient,12s );--_holo-spring:var( --os-ui-ease-spring,cubic-bezier( 0.32,1.5,0.55,1 ) );--_holo-ease:var( --os-ui-ease-out,cubic-bezier( 0.22,0.9,0.28,1 ) );--_holo-loop:var( --os-ui-ease-loop,cubic-bezier( 0.45,0,0.55,1 ) )}`,it=b` .os-holo-fill{background-color:transparent;background-image:var( --_holo-fill );background-size:220% 220%;background-position:22% 28%;background-repeat:no-repeat;color:var( --_holo-ink );transition:background-position var( --_holo-t ) ease,box-shadow var( --_holo-t ) ease,filter var( --_holo-t ) ease}.os-holo-fill:hover{background-position:74% 66%}.os-holo-fill:active{background-position:88% 82%;filter:brightness( 0.94 )}@media ( prefers-reduced-motion:reduce ){.os-holo-fill{transition-duration:1ms}.os-holo-fill:hover,.os-holo-fill:active{background-position:22% 28%}}`,$e=b` .os-holo-sheen{position:relative;isolation:isolate}.os-holo-sheen::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background-image:var( --_holo-sheen );background-size:200% 200%;background-position:20% 30%;opacity:0;pointer-events:none;transition:opacity var( --_holo-t ) ease,background-position var( --_holo-t ) ease}.os-holo-sheen:hover::before,.os-holo-sheen:focus-visible::before{opacity:1;background-position:76% 68%}@media ( prefers-reduced-motion:reduce ){.os-holo-sheen::before{transition-duration:1ms}.os-holo-sheen:hover::before,.os-holo-sheen:focus-visible::before{background-position:20% 30%}}`,Ce=b` .os-holo-edge{position:relative}.os-holo-edge::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background-image:var( --_holo-edge-quiet );opacity:0;pointer-events:none;-webkit-mask:linear-gradient( #000 0 0 ) content-box,linear-gradient( #000 0 0 );-webkit-mask-composite:xor;mask:linear-gradient( #000 0 0 ) content-box,linear-gradient( #000 0 0 );mask-composite:exclude;transition:opacity var( --_holo-t ) ease}.os-holo-edge:hover::after,.os-holo-edge:focus-visible::after{background-image:var( --_holo-edge );opacity:1}.os-holo-edge.is-lit::after{background-image:var( --_holo-edge );opacity:1}@media ( prefers-reduced-motion:reduce ){.os-holo-edge::after{transition-duration:1ms}}`,Ae=b` .os-holo-glint{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}.os-holo-glint::before{content:'';position:absolute;top:-60%;bottom:-60%;width:45%;inset-inline-start:-60%;background:linear-gradient( 90deg,transparent 0%,rgba( 255,251,255,0.14 ) 45%,rgba( 255,251,255,0.22 ) 50%,rgba( 255,251,255,0.14 ) 55%,transparent 100% );transform:rotate( 18deg ) translateX( 0 );opacity:0}:hover>.os-holo-glint::before,:focus-visible>.os-holo-glint::before,:host(:hover )>.os-holo-glint::before,:host(:focus-visible )>.os-holo-glint::before{animation:os-holo-glint var( --_holo-t-slow ) var( --_holo-ease )}@keyframes os-holo-glint{0%{opacity:0;transform:rotate( 18deg ) translateX( 0 )}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:rotate( 18deg ) translateX( 240vw )}}@media ( prefers-reduced-motion:reduce ){:hover>.os-holo-glint::before,:focus-visible>.os-holo-glint::before,:host(:hover )>.os-holo-glint::before,:host(:focus-visible )>.os-holo-glint::before{animation:none}}`,ze=b` .os-holo-ring{position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 var( --_holo-ring-color );opacity:0;pointer-events:none}:active:not(:disabled )>.os-holo-ring,:host(:active:not( [ disabled ] ) )>.os-holo-ring{animation:os-holo-ring var( --_holo-t-slow ) var( --_holo-ease )}@keyframes os-holo-ring{0%{opacity:0.45;box-shadow:0 0 0 0 var( --_holo-ring-color )}100%{opacity:0;box-shadow:0 0 0 10px transparent}}@media ( prefers-reduced-motion:reduce ){:active:not(:disabled )>.os-holo-ring,:host(:active:not( [ disabled ] ) )>.os-holo-ring{animation:none}}`,rt=b` .os-holo-shimmer{background-image:var( --_holo-fill );background-size:300% 300%;background-repeat:no-repeat;animation:os-holo-shimmer 2.4s var( --_holo-loop ) infinite}@keyframes os-holo-shimmer{0%{background-position:0% 50%}100%{background-position:100% 50%}}@media ( prefers-reduced-motion:reduce ){.os-holo-shimmer{animation:none;background-position:30% 50%}}`,ee=b` .os-holo-enter{animation:os-holo-enter var( --_holo-t ) var( --_holo-spring )}@keyframes os-holo-enter{from{opacity:0;transform:scale( 0.96 )}}@media ( prefers-reduced-motion:reduce ){.os-holo-enter{animation:none}}`,Se=b` input:where(:not( [ type='checkbox' ] ):not( [ type='radio' ] ) ),select,textarea{transition:background-color var( --_holo-t ) ease,border-color var( --_holo-t ) ease,box-shadow var( --_holo-t ) ease}input:where(:not( [ type='checkbox' ] ):not( [ type='radio' ] ) ):hover:not(:disabled ),select:hover:not(:disabled ),textarea:hover:not(:disabled ){border-color:var( --os-ui-border-strong,#8c8f94 )}input:where(:not( [ type='checkbox' ] ):not( [ type='radio' ] ) ):focus,input:where(:not( [ type='checkbox' ] ):not( [ type='radio' ] ) ):focus-visible,select:focus,select:focus-visible,textarea:focus,textarea:focus-visible{outline:none;border-color:var( --os-ui-accent,#2271b1 );box-shadow:var( --_holo-focus-field )}input::placeholder,textarea::placeholder{color:var( --os-ui-fg-faint,#8c8f94 );opacity:1}input::selection,textarea::selection{background:var( --os-ui-selection-bg,rgba( 159,152,255,0.6 ) );color:var( --os-ui-selection-fg,#fffbff )}@media ( prefers-reduced-motion:reduce ){input:where(:not( [ type='checkbox' ] ):not( [ type='radio' ] ) ),select,textarea{transition-duration:1ms}}`,nt=b` input[ type='checkbox' ],input[ type='radio' ]{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 auto;box-sizing:border-box;width:16px;height:16px;margin:0;padding:0;border:1px solid var( --_holo-track-edge );border-radius:4px;background-color:var( --_holo-track );background-image:none;background-repeat:no-repeat;cursor:inherit;transition:background-color var( --_holo-t ) ease,border-color var( --_holo-t ) ease,box-shadow var( --_holo-t ) ease}input[ type='radio' ]{border-radius:50%}input[ type='checkbox' ]:hover:not(:disabled ),input[ type='radio' ]:hover:not(:disabled ){border-color:var( --os-ui-accent,#2271b1 )}input[ type='checkbox' ]:focus-visible,input[ type='radio' ]:focus-visible{outline:none;box-shadow:var( --_holo-focus )}input[ type='checkbox' ]:checked,input[ type='checkbox' ]:indeterminate,input[ type='radio' ]:checked{border-color:transparent;background-color:var( --os-ui-accent,#2271b1 )}input[ type='checkbox' ]:checked:focus-visible,input[ type='radio' ]:checked:focus-visible{box-shadow:var( --_holo-focus )}input[ type='checkbox' ]:checked::after{content:'';position:absolute;inset-inline-start:50%;top:46%;width:3.5px;height:7.5px;border:solid var( --os-ui-accent-ink,var( --os-ui-fg-on-accent,#fff ) );border-width:0 2px 2px 0;transform:translate( -50%,-50% ) rotate( 45deg );animation:os-holo-tick 180ms cubic-bezier( 0.3,1.4,0.6,1 )}input[ type='checkbox' ]:indeterminate::after{content:'';position:absolute;inset-inline-start:50%;top:50%;width:8px;height:2px;border:0;border-radius:1px;background:var( --os-ui-accent-ink,var( --os-ui-fg-on-accent,#fff ) );transform:translate( -50%,-50% )}input[ type='radio' ]:checked::after{content:'';position:absolute;inset-inline-start:50%;top:50%;width:6px;height:6px;border-radius:50%;background:var( --os-ui-accent-ink,var( --os-ui-fg-on-accent,#fff ) );transform:translate( -50%,-50% );animation:os-holo-tick 180ms cubic-bezier( 0.3,1.4,0.6,1 )}input[ type='checkbox' ]:disabled,input[ type='radio' ]:disabled{cursor:not-allowed}@keyframes os-holo-tick{from{opacity:0;transform:translate( -50%,-50% ) rotate( 45deg ) scale( 0.4 )}}@media ( prefers-reduced-motion:reduce ){input[ type='checkbox' ]:checked::after,input[ type='radio' ]:checked::after{animation:none}}`,Ee=b` @keyframes os-holo-drift{0%{background-position:16% 26%}50%{background-position:84% 74%}100%{background-position:16% 26%}}.os-holo-alive{animation:os-holo-drift var( --_holo-t-ambient ) var( --_holo-loop ) infinite}@media ( prefers-reduced-motion:reduce ){.os-holo-alive{animation:none}}`;b` ${z} ${it} ${$e} ${Ce} ${Ae} ${ze} ${rt} ${ee} ${Se} ${nt} ${Ee} `;const at=b`:host{position:fixed;top:calc( var( --os-admin-bar-height,var( --wp-admin--admin-bar--height,32px ) ) + 16px );inset-inline-end:16px;display:flex;flex-direction:column;gap:8px;z-index:calc( var( --os-z-fullscreen,99999 ) + 10 );pointer-events:none}`,lt=b` ${z}:host{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;min-width:280px;max-width:420px;padding:10px 14px;background-color:var( --os-ui-toast-bg,var( --os-ui-modal-bg,#1d2327 ) );background-image:var( --os-ui-toast-bg-image,none );background-repeat:var( --os-ui-toast-bg-image-repeat,repeat );background-size:var( --os-ui-toast-bg-image-size,auto );background-position:var( --os-ui-toast-bg-image-position,center );color:var( --os-ui-fg-on-accent,#fff );border-radius:10px;border:1px solid var( --os-ui-border,rgba( 255,255,255,0.12 ) );box-shadow:0 10px 30px rgba( 0,0,0,0.4 ),0 2px 6px rgba( 0,0,0,0.18 ),inset 0 0 0 1px rgba( 255,255,255,0.04 );font-size:13px;line-height:1.4;opacity:0;transform:translateY( -10px ) scale( 0.97 );transition:opacity var( --_holo-t-fast ) linear,transform var( --_holo-t ) var( --_holo-spring );pointer-events:auto}:host( [ state='in' ] ){opacity:1;transform:translateY( 0 ) scale( 1 )}:host( [ state='out' ] ){opacity:0;transform:translateX( 16px ) scale( 0.97 );transition:opacity var( --_holo-t-fast ) linear,transform var( --_holo-t ) var( --_holo-ease )}.os-toast__label{flex:1}.os-toast__icon{display:inline-flex;flex-shrink:0;color:var( --os-ui-toast-accent,currentColor )}.os-toast__icon[ hidden ]{display:none}:host( [ tone ] )::before{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var( --os-ui-toast-accent,transparent )}:host( [ tone='positive' ] ){--os-ui-toast-accent:var( --os-ui-notice-success,var( --os-ui-success-fg,#1a7f37 ) )}:host( [ tone='warning' ] ){--os-ui-toast-accent:var( --os-ui-notice-warning,var( --os-ui-warning-fg,#9a6700 ) )}:host( [ tone='critical' ] ){--os-ui-toast-accent:var( --os-ui-notice-error,var( --os-ui-danger,#cf222e ) )}:host( [ tone='neutral' ] ){--os-ui-toast-accent:var( --os-ui-notice-neutral,var( --os-ui-fg-muted,#57606a ) )}button[ hidden ]{display:none}button{flex-shrink:0;padding:4px 10px;border:none;border-radius:4px;background:var( --os-ui-hover,rgba( 255,255,255,0.12 ) );color:var( --os-ui-fg-on-accent,#fff );font:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:background-color 0.12s ease}button:hover{background:var( --os-ui-scrim,rgba( 255,255,255,0.22 ) )}button:focus-visible{outline:2px solid var( --os-ui-border,rgba( 255,255,255,0.6 ) );outline-offset:2px}.os-toast__close{display:inline-flex;align-items:center;justify-content:center;padding:4px;border-radius:6px;background:transparent;color:var( --os-ui-fg-muted,rgba( 255,255,255,0.7 ) )}.os-toast__close:hover{background:var( --os-ui-hover,rgba( 255,255,255,0.14 ) );color:var( --os-ui-fg-on-accent,#fff )}@media ( prefers-reduced-motion:reduce ){:host{transition-duration:0.01ms}}`,G=class G extends x{connectedCallback(){super.connectedCallback(),this.setAttribute("aria-live","polite")}render(){return a`<slot></slot>`}};G.styles=[at],G.help=void 0;let te=G;w("os-toast-container",te);const ct={positive:"check",warning:"warning",critical:"warning",neutral:"info"},T=class T extends x{constructor(){super(...arguments),this._hovered=!1,this._focused=!1,this._onEnter=()=>{this._hovered=!0,this._syncHold()},this._onLeave=()=>{this._hovered=!1,this._syncHold()},this._onFocusIn=()=>{this._focused=!0,this._syncHold()},this._onFocusOut=e=>{const t=e.relatedTarget;t instanceof Node&&this._containsDeep(t)||(this._focused=!1,this._syncHold())}}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","status"),this.addEventListener("mouseenter",this._onEnter),this.addEventListener("mouseleave",this._onLeave),this.addEventListener("focusin",this._onFocusIn),this.addEventListener("focusout",this._onFocusOut)}disconnectedCallback(){this.removeEventListener("mouseenter",this._onEnter),this.removeEventListener("mouseleave",this._onLeave),this.removeEventListener("focusin",this._onFocusIn),this.removeEventListener("focusout",this._onFocusOut)}_containsDeep(e){let t=e;for(;t;){if(t===this)return!0;const o=t.parentNode;t=o instanceof ShadowRoot?o.host:o}return!1}_syncHold(){const e=this._hovered||this._focused;e!==this.hasAttribute("held")&&(e?this.setAttribute("held",""):this.removeAttribute("held"),this.emit("os-toast-hold",{held:e}))}render(){const e=this.action||"",t=this.hasAttribute("dismissible"),o=this.tone||"";return a` | |
| 2 | + <span class="os-toast__icon" ?hidden=${!o} aria-hidden="true"> | |
| 3 | + ${Q(ct[o]??"info",{size:16})} | |
| 4 | + </span> | |
| 5 | + <span class="os-toast__label"><slot></slot></span> | |
| 3 | 6 | <button |
| 4 | 7 | type="button" |
| 5 | 8 | ?hidden=${!e} |
| 6 | - @click=${t=>this._onAction(t)} | |
| 9 | + @click=${s=>this._onAction(s)} | |
| 7 | 10 | > |
| 8 | 11 | ${e} |
| 9 | 12 | </button> |
| 10 | - `}_onAction(e){e.preventDefault(),e.stopPropagation(),this.emit("wpd-toast-action",{})}};I.props=["action","state"],I.styles=[Pe],I.help={title:"Toast",summary:'Single transient notification. Message is slotted; fade-in / fade-out is CSS-driven by flipping the state attribute between "in" and "out". Usually created via the showToast() helper rather than authored by hand.',status:"stable",since:"0.9.0",props:[{name:"action",type:"string",description:"Optional action button label. When set, a button renders on the right and emits wpd-toast-action on click."},{name:"state",type:"'in' | 'out'",description:'Drives the CSS fade transition. Set to "in" when rendered, flip to "out" before removal.'}],slots:[{name:"(default)",description:"Message text."}],events:[{name:"wpd-toast-action",description:"Fires when the action button is clicked.",detail:"{}"}],example:i` | |
| 11 | - <wpd-toast state="in" action="Undo">Post moved to trash.</wpd-toast> | |
| 12 | - `};let Z=I;w("wpd-toast",Z);const Re=x`:host{display:none;position:fixed;inset:0;align-items:center;justify-content:center;background:rgba( 0,0,0,0.45 );backdrop-filter:blur( 2px );z-index:10000}:host( [ open ] ){display:flex}.dialog{width:min( 420px,92vw );background:var( --wpd-confirm-dialog-bg,var( --desktop-mode-bg,#1d2327 ) );color:var( --wpd-confirm-dialog-fg,var( --desktop-mode-fg,#fff ) );border:1px solid rgba( 255,255,255,0.08 );border-radius:10px;box-shadow:0 20px 50px rgba( 0,0,0,0.6 );padding:20px 22px 18px;display:flex;flex-direction:column;gap:10px;position:relative}.close{position:absolute;top:8px;right:10px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:6px;color:var( --wpd-confirm-dialog-fg-muted,rgba( 255,255,255,0.7 ) );cursor:pointer;font-size:22px;line-height:1;padding:0}.close:hover{background:rgba( 255,255,255,0.08 );color:inherit}.title{margin:0 0 4px;font-size:16px;font-weight:600}.message{margin:0;color:var( --wpd-confirm-dialog-fg-muted,rgba( 255,255,255,0.7 ) );line-height:1.45;white-space:pre-line}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}.btn{border:0;border-radius:6px;padding:8px 14px;font-size:13px;cursor:pointer;font-weight:500}.btn--secondary{background:rgba( 255,255,255,0.08 );color:inherit}.btn--secondary:hover{background:rgba( 255,255,255,0.14 )}.btn--primary{background:var( --wp-admin-theme-color,#2271b1 );color:#fff}.btn--primary:hover{filter:brightness( 1.08 )}.btn--danger{background:#d63638;color:#fff}.btn--danger:hover{filter:brightness( 1.08 )}`,z=class z extends b{constructor(){super(...arguments),this._onKey=e=>{e.key==="Escape"&&(e.preventDefault(),this._cancel()),e.key==="Enter"&&!e.isComposing&&(e.preventDefault(),this._confirm())},this._onBackdrop=e=>{const t=e.composedPath();(t.length>0?t[0]:e.target)===this&&this._cancel()},this._confirm=()=>{this.emit("wpd-confirm",{confirmed:!0}),this.removeAttribute("open")},this._cancel=()=>{this.emit("wpd-cancel",{confirmed:!1}),this.removeAttribute("open")}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),this.addEventListener("keydown",this._onKey),this.addEventListener("click",this._onBackdrop)}disconnectedCallback(){this.removeEventListener("keydown",this._onKey),this.removeEventListener("click",this._onBackdrop)}render(){const e=this.title??"",t=this.message??"",s=this["confirm-label"]||"Confirm",n=this["cancel-label"]||"Cancel",r=this.hasAttribute("danger"),a=this.hasAttribute("hide-cancel"),c=this.hasAttribute("dismissable");return i` | |
| 13 | + <button | |
| 14 | + type="button" | |
| 15 | + class="os-toast__close" | |
| 16 | + aria-label=${st("Dismiss")} | |
| 17 | + ?hidden=${!t} | |
| 18 | + @click=${s=>this._onDismiss(s)} | |
| 19 | + > | |
| 20 | + ${Q("close",{size:16})} | |
| 21 | + </button> | |
| 22 | + `}_onAction(e){e.preventDefault(),e.stopPropagation(),this.emit("os-toast-action",{})}_onDismiss(e){e.preventDefault(),e.stopPropagation(),this.emit("os-toast-dismiss",{})}};T.props=["action","state","dismissible","tone"],T.styles=[lt],T.help={title:"Toast",summary:'Single transient notification. Message is slotted; fade-in / fade-out is CSS-driven by flipping the state attribute between "in" and "out". Usually created via the showToast() helper rather than authored by hand.',status:"stable",props:[{name:"action",type:"string",description:"Optional action button label. When set, a button renders on the right and emits os-toast-action on click."},{name:"state",type:"'in' | 'out'",description:'Drives the CSS fade transition. Set to "in" when rendered, flip to "out" before removal.'},{name:"dismissible",type:"boolean",description:"When set, a close (×) button renders on the right and emits os-toast-dismiss on click. Use for persistent toasts the user must be able to close."},{name:"tone",type:"'positive' | 'warning' | 'critical' | 'neutral'",description:"What kind of news this is. Paints a coloured edge and a leading icon from the palette’s notice tokens; absent, the toast is the plain dark chip. showToast() sets it from the type option through the server’s toast-type registry."},{name:"held",type:"boolean (reflected, read-only)",description:"Set by the component while the pointer is over the toast or focus is inside it. showToast() pauses the auto-dismiss timer for as long as it is present. Do not set it by hand — pass `persistent` for a toast that should never expire."}],slots:[{name:"(default)",description:"Message text."}],events:[{name:"os-toast-action",description:"Fires when the action button is clicked.",detail:"{}"},{name:"os-toast-dismiss",description:"Fires when the close (×) button is clicked.",detail:"{}"},{name:"os-toast-hold",description:"Fires when the toast starts or stops being attended to — pointer over it, or focus inside it. showToast() pauses the auto-dismiss timer while held is true.",detail:"{ held: boolean }"}],example:a` | |
| 23 | + <os-toast state="in" action="Undo">Post moved to trash.</os-toast> | |
| 24 | + <os-toast state="in" tone="critical">Could not move the post to trash.</os-toast> | |
| 25 | + `};let oe=T;w("os-toast",oe);const dt=b` ${z}:host{display:none;position:fixed;inset:0;align-items:center;justify-content:center;background:var( --os-ui-scrim,rgba( 0,0,0,0.45 ) );background-image:var( --os-ui-scrim-image,none );background-repeat:var( --os-ui-scrim-image-repeat,repeat );background-size:var( --os-ui-scrim-image-size,auto );background-position:var( --os-ui-scrim-image-position,center );backdrop-filter:blur( 2px );z-index:10000}:host( [ open ] ){display:flex;animation:os-confirm-scrim var( --_holo-t ) var( --_holo-ease )}:host( [ open ] ) .dialog{animation:os-confirm-dialog var( --_holo-t ) var( --_holo-spring )}@keyframes os-confirm-scrim{from{opacity:0}}@keyframes os-confirm-dialog{from{opacity:0;transform:scale( 0.96 ) translateY( 8px )}}@media ( prefers-reduced-motion:reduce ){:host( [ open ] ),:host( [ open ] ) .dialog{animation:none}}.dialog{width:min( 420px,92vw );background-color:var( --os-ui-confirm-dialog-bg,#1d2327 );background-image:var( --os-ui-dialog-bg-image,none );background-repeat:var( --os-ui-dialog-bg-image-repeat,repeat );background-size:var( --os-ui-dialog-bg-image-size,auto );background-position:var( --os-ui-dialog-bg-image-position,center );color:var( --os-ui-confirm-dialog-fg,var( --os-fg,#fff ) );border:1px solid var( --os-ui-border,rgba( 255,255,255,0.08 ) );border-radius:10px;box-shadow:0 20px 50px rgba( 0,0,0,0.6 );padding:20px 22px 18px;display:flex;flex-direction:column;gap:10px;position:relative}.close{position:absolute;top:8px;right:10px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:6px;color:var( --os-ui-confirm-dialog-fg-muted,var( --os-ui-fg-muted,rgba( 255,255,255,0.7 ) ) );cursor:pointer;font-size:22px;line-height:1;padding:0}.close:hover{background:var( --os-ui-hover,rgba( 255,255,255,0.08 ) );color:inherit}.btn:focus,.close:focus{outline:none;box-shadow:var( --_holo-focus )}.dialog:focus,.dialog:focus-visible{outline:none}.title{margin:0 0 4px;font-size:16px;font-weight:600}.message{margin:0;color:var( --os-ui-confirm-dialog-fg-muted,var( --os-ui-fg-muted,rgba( 255,255,255,0.7 ) ) );line-height:1.45;white-space:pre-line}.remember{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:12px;color:var( --os-ui-confirm-dialog-fg-muted,var( --os-ui-fg-muted,rgba( 255,255,255,0.7 ) ) );cursor:pointer;user-select:none}.remember__box{margin:0;accent-color:var( --os-ui-accent,#2271b1 );cursor:pointer}.remember__box:focus,.remember__box:focus-visible{outline:none;box-shadow:var( --_holo-focus )}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}.btn{border:0;border-radius:6px;padding:8px 14px;font-size:13px;cursor:pointer;font-weight:500}.btn--secondary{background:var( --os-ui-hover,rgba( 255,255,255,0.08 ) );color:inherit}.btn--secondary:hover{background:var( --os-ui-hover,rgba( 255,255,255,0.14 ) )}.btn--primary{background:var( --wp-admin-theme-color,#2271b1 );color:var( --os-ui-accent-ink,var( --os-ui-fg-on-accent,#fff ) )}.btn--primary:hover{filter:brightness( 1.08 )}.btn--danger{background:var( --os-ui-danger,#d63638 );color:var( --os-ui-fg-on-accent,#fff )}.btn--danger:hover{filter:brightness( 1.08 )}`,Le='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function ut(i){let e=i?.activeElement??null;for(;e?.shadowRoot?.activeElement;)e=e.shadowRoot.activeElement;return e&&e!==i?.body?e:null}function Me(i){const e=i.composedPath(),t=e.length>0?e[0]:i.target;return t instanceof HTMLElement?t:null}function Ie(i){return i!==null&&i.matches(Le)}const H=class H extends x{constructor(){super(...arguments),this._prevFocus=null,this._focusTries=0,this._onKey=e=>{if(e.key==="Escape"){e.preventDefault(),this._cancel();return}if(e.key==="Tab"){this._trapTab(e);return}if(e.key==="Enter"&&!e.isComposing){if(Ie(Me(e))||this.hasAttribute("danger"))return;e.preventDefault(),this._confirm()}},this._focusInitial=()=>{if(!this.hasAttribute("open"))return;const e=this.isConnected?this._initialFocusTarget():null;if(e){e.focus();return}if(this._focusTries++<5){queueMicrotask(this._focusInitial);return}this.isConnected&&this.focus()},this._onBackdrop=e=>{const t=e.composedPath();(t.length>0?t[0]:e.target)===this&&this._cancel()},this._confirm=()=>{this.emit("os-confirm",{confirmed:!0,remember:this._remembered()}),this.removeAttribute("open")},this._cancel=()=>{this.emit("os-cancel",{confirmed:!1}),this.removeAttribute("open")}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1"),this.addEventListener("keydown",this._onKey),this.addEventListener("click",this._onBackdrop)}disconnectedCallback(){this.removeEventListener("keydown",this._onKey),this.removeEventListener("click",this._onBackdrop),this._restoreFocus()}attributeChangedCallback(e,t,o){super.attributeChangedCallback(e,t,o),e==="open"&&(o!==null?(this._prevFocus=ut(this.ownerDocument),this._focusTries=0,queueMicrotask(this._focusInitial)):this._restoreFocus())}_focusables(){const e=this.shadowRoot;return e?Array.from(e.querySelectorAll(Le)):[]}_trapTab(e){const t=this._focusables();if(t.length===0)return;const o=t[0],s=t[t.length-1],r=Me(e),n=!Ie(r);e.shiftKey&&(n||r===o)?(e.preventDefault(),s.focus()):!e.shiftKey&&(n||r===s)&&(e.preventDefault(),o.focus())}_initialFocusTarget(){const e=this.shadowRoot;if(!e)return null;const t=e.querySelector(".btn--secondary"),o=e.querySelector(".dialog");return this.hasAttribute("danger")?t??e.querySelector(".close")??o:e.querySelector(".btn--primary, .btn--danger")??t??o}_restoreFocus(){const e=this._prevFocus;this._prevFocus=null,!(!e||!e.isConnected)&&e.focus()}_remembered(){return this.shadowRoot?.querySelector(".remember__box")?.checked===!0}render(){const e=this.title??"",t=this.message??"",o=this["confirm-label"]||"Confirm",s=this["cancel-label"]||"Cancel",r=this.hasAttribute("danger"),n=this.hasAttribute("hide-cancel"),l=this.hasAttribute("dismissable"),c=this["remember-label"]??"";return a` | |
| 13 | 26 | <div class="dialog" tabindex="-1"> |
| 14 | - ${c?i`<button | |
| 27 | + ${l?a`<button | |
| 15 | 28 | type="button" |
| 16 | 29 | class="close" |
| 17 | 30 | aria-label="Close" |
| 18 | 31 | @click=${()=>this._cancel()} |
| 19 | - >×</button>`:i``} | |
| 20 | - ${e?i`<h2 class="title">${e}</h2>`:i``} | |
| 21 | - ${t?i`<p class="message">${t}</p>`:i``} | |
| 32 | + >×</button>`:a``} | |
| 33 | + ${e?a`<h2 class="title">${e}</h2>`:a``} | |
| 34 | + ${t?a`<p class="message">${t}</p>`:a``} | |
| 35 | + ${c?a`<label class="remember"> | |
| 36 | + <input type="checkbox" class="remember__box" /> | |
| 37 | + <span class="remember__label">${c}</span> | |
| 38 | + </label>`:a``} | |
| 22 | 39 | <div class="actions"> |
| 23 | - ${a?i``:i`<button | |
| 40 | + ${n?a``:a`<button | |
| 24 | 41 | type="button" |
| 25 | 42 | class="btn btn--secondary" |
| 26 | 43 | @click=${()=>this._cancel()} |
| 27 | 44 | > |
| 28 | - ${n} | |
| 45 | + ${s} | |
| 29 | 46 | </button>`} |
| 30 | 47 | <button |
| 31 | 48 | type="button" |
| 32 | 49 | class="btn ${r?"btn--danger":"btn--primary"}" |
| @@ -31,36 +48,73 @@ | ||
| 31 | 48 | type="button" |
| 32 | 49 | class="btn ${r?"btn--danger":"btn--primary"}" |
| 33 | 50 | @click=${()=>this._confirm()} |
| 34 | 51 | > |
| 35 | - ${s} | |
| 52 | + ${o} | |
| 36 | 53 | </button> |
| 37 | 54 | </div> |
| 38 | 55 | </div> |
| 39 | - `}};z.props=["open","title","message","confirm-label","cancel-label","danger","hide-cancel","dismissable"],z.styles=[Re],z.help=void 0;let Q=z;w("wpd-confirm-dialog",Q);const Fe=x`:host{display:none;position:fixed;min-width:180px;background:var( --wpd-context-menu-bg,var( --desktop-mode-bg,#1d2327 ) );color:var( --wpd-context-menu-fg,var( --desktop-mode-fg,#fff ) );border:1px solid rgba( 255,255,255,0.08 );border-radius:8px;box-shadow:0 8px 24px rgba( 0,0,0,0.45 );padding:4px;font-size:13px;line-height:1.3;z-index:9999}:host( [ open ] ){display:block}`,He=x`:host{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:transparent;color:inherit;text-align:start;cursor:pointer;border-radius:4px;box-sizing:border-box;user-select:none}:host(:hover ),:host( [ active ] ){background:rgba( 255,255,255,0.1 );outline:none}:host( [ disabled ] ){opacity:0.45;cursor:not-allowed}:host( [ danger ] ){color:#ff8a8a}:host( [ danger ]:hover ){background:rgba( 255,90,90,0.18 )}:host( [ heading ] ){padding:8px 10px 4px;font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var( --wpd-context-menu-fg-muted,rgba( 255,255,255,0.5 ) );pointer-events:none}.icon{display:inline-flex;align-items:center;justify-content:center;font-size:18px;width:20px;height:20px}.label{flex:1}.chevron{margin-inline-start:auto;padding-inline-start:8px;font-size:16px;line-height:1;opacity:0.7}.check{display:inline-flex;align-items:center;justify-content:center;width:14px;font-size:13px;line-height:1;opacity:0.95}`,M=class M extends b{render(){return i` | |
| 56 | + `}};H.props=["open","title","message","confirm-label","cancel-label","danger","hide-cancel","dismissable","remember-label"],H.styles=[dt],H.help=void 0;let se=H;w("os-confirm-dialog",se);const ht=b` ${z} ${ee}:host{display:none;position:fixed;min-width:180px;background-color:var( --os-ui-context-menu-bg,#1d2327 );background-image:var( --os-ui-menu-bg-image,none );background-repeat:var( --os-ui-menu-bg-image-repeat,repeat );background-size:var( --os-ui-menu-bg-image-size,auto );background-position:var( --os-ui-menu-bg-image-position,center );color:var( --os-ui-context-menu-fg,var( --os-fg,#fff ) );border:1px solid var( --os-ui-border,rgba( 255,255,255,0.08 ) );border-radius:8px;box-shadow:0 8px 24px rgba( 0,0,0,0.45 );padding:4px;font-size:13px;line-height:1.3;z-index:9999}:host( [ open ] ){display:block;animation:os-holo-enter var( --_holo-t-fast ) var( --_holo-ease );transform-origin:top left;box-sizing:border-box;max-block-size:calc( 100vh - 16px );max-block-size:calc( 100dvh - 16px );overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}:host( [ open ]:dir( rtl ) ){transform-origin:top right}@media ( prefers-reduced-motion:reduce ){:host( [ open ] ){animation:none}}`,pt=b`:host{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:transparent;color:inherit;text-align:start;cursor:pointer;border-radius:4px;box-sizing:border-box;user-select:none}:host(:hover ),:host( [ active ] ){background:var( --os-ui-hover,rgba( 255,255,255,0.1 ) );outline:none}:host( [ disabled ] ){opacity:0.45;cursor:not-allowed}:host( [ danger ] ){color:var( --os-ui-danger-hover,#ff8a8a )}:host( [ danger ]:hover ){background:var( --os-ui-badge-danger-bg,rgba( 255,90,90,0.18 ) )}:host( [ heading ] ){padding:8px 10px 4px;font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var( --os-ui-context-menu-fg-muted,var( --os-ui-fg-muted,rgba( 255,255,255,0.5 ) ) );pointer-events:none}.icon{display:inline-flex;align-items:center;justify-content:center;font-size:18px;width:20px;height:20px}.label{flex:1}.chevron{margin-inline-start:auto;padding-inline-start:8px;font-size:16px;line-height:1;opacity:0.7}.check{display:inline-flex;align-items:center;justify-content:center;width:14px;font-size:13px;line-height:1;opacity:0.95}`,N=class N extends x{render(){return a` | |
| 40 | 57 | <slot></slot> |
| 41 | - `}connectedCallback(){super.connectedCallback(),this.setAttribute("role","menu")}};M.props=["open"],M.styles=[Fe],M.help=void 0;let W=M;w("wpd-context-menu",W);const N=class N extends b{constructor(){super(...arguments),this._onActivate=e=>{if(this.hasAttribute("disabled")||this.hasAttribute("heading"))return;const t=e.target;t&&t!==this&&t.closest("wpd-context-menu-option")!==this||this.emit("wpd-context-menu-pick",{id:this.dataset.menuItemId??this.id??"",value:this.getAttribute("value")??""})},this._onKey=e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._onActivate(e))}}connectedCallback(){super.connectedCallback();const e=this.hasAttribute("heading");this.setAttribute("role",e?"presentation":"menuitem"),e||this.setAttribute("tabindex","0"),this.addEventListener("click",this._onActivate),this.addEventListener("keydown",this._onKey)}disconnectedCallback(){this.removeEventListener("click",this._onActivate),this.removeEventListener("keydown",this._onKey)}render(){const e=this.getAttribute("icon"),t=this.hasAttribute("has-children"),s=this.hasAttribute("checked");return i` | |
| 42 | - ${s?i`<span class="check" aria-hidden="true">✓</span>`:i``} | |
| 43 | - ${e?i`<span class="icon dashicons ${e}" aria-hidden="true"></span>`:i``} | |
| 58 | + `}connectedCallback(){super.connectedCallback(),this.setAttribute("role","menu")}};N.props=["open"],N.styles=[ht],N.help=void 0;let ie=N;w("os-context-menu",ie);const V=class V extends x{constructor(){super(...arguments),this._onActivate=e=>{if(this.hasAttribute("disabled")||this.hasAttribute("heading"))return;const t=e.target;t&&t!==this&&t.closest("os-context-menu-option")!==this||this.emit("os-context-menu-pick",{id:this.dataset.menuItemId??this.id??"",value:this.getAttribute("value")??""})},this._onKey=e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._onActivate(e))}}connectedCallback(){super.connectedCallback();const e=this.hasAttribute("heading");this.setAttribute("role",e?"presentation":"menuitem"),e||this.setAttribute("tabindex","0"),this.addEventListener("click",this._onActivate),this.addEventListener("keydown",this._onKey)}disconnectedCallback(){this.removeEventListener("click",this._onActivate),this.removeEventListener("keydown",this._onKey)}render(){const e=this.getAttribute("icon"),t=this.hasAttribute("has-children"),o=this.hasAttribute("checked");return a` | |
| 59 | + ${o?a`<span class="check" aria-hidden="true">✓</span>`:a``} | |
| 60 | + ${e?a`<span class="icon dashicons ${e}" aria-hidden="true"></span>`:a``} | |
| 44 | 61 | <span class="label"><slot></slot></span> |
| 45 | - ${t?i`<span class="chevron" aria-hidden="true">›</span>`:i``} | |
| 46 | - `}};N.props=["value","icon","disabled","danger","heading","has-children","checked"],N.styles=[He],N.help={title:"Context menu option",summary:"Single row inside <wpd-context-menu>. Use `icon` for a leading dashicon, `danger` for destructive items, `heading` for a non-interactive section header, `has-children` to render a trailing chevron.",status:"experimental",since:"0.9.0",props:[{name:"value",type:"string",description:"Forwarded as `detail.value` on activation."},{name:"icon",type:"string",description:"Dashicon class (e.g. `dashicons-trash`)."},{name:"disabled",type:"boolean attribute",description:"Renders the option dimmed; clicks are ignored."},{name:"danger",type:"boolean attribute",description:"Destructive styling — red text, red hover."},{name:"heading",type:"boolean attribute",description:"Non-interactive section header. Ignores clicks."},{name:"has-children",type:"boolean attribute",description:"Renders a trailing chevron to suggest a submenu."},{name:"checked",type:"boolean attribute",description:"Renders a leading check mark — for radio-style picks inside a submenu (e.g. the active Sort By order)."}],slots:[{name:"(default)",description:"Visible label + optional nested <wpd-context-menu>."}],events:[{name:"wpd-context-menu-pick",description:"Bubbled on click / Enter for non-heading non-disabled options. Detail: `{ id, value }`."}]};let ee=N;w("wpd-context-menu-option",ee);const Ve=x`:host{display:block;min-width:220px;padding:4px;background:var( --desktop-mode-window-bg,#fff );color:var( --desktop-mode-text,#1d2327 );border:1px solid var( --desktop-mode-window-border,#c3c4c7 );border-radius:8px;box-shadow:0 8px 24px rgba( 0,0,0,0.18 ),0 2px 6px rgba( 0,0,0,0.08 )}:host( [ hidden ] ){display:none}`,De=x`:host{display:block}button{display:flex;align-items:center;gap:10px;width:100%;min-height:32px;padding:6px 10px;border:none;border-radius:6px;background:transparent;color:inherit;font:inherit;font-size:13px;line-height:1.3;text-align:start;cursor:pointer;transition:background-color 0.12s ease,color 0.12s ease}button:hover,button:focus-visible{background:rgba( 0,0,0,0.06 );color:#000;outline:none}button:focus-visible{outline:2px solid var( --wp-admin-theme-color,#2271b1 );outline-offset:-2px}.wpd-menu-item__icon{flex-shrink:0;width:18px;height:18px;font-size:18px;line-height:1;color:var( --wp-admin-theme-color,#2271b1 )}.wpd-menu-item__icon[ hidden ]{display:none}.wpd-menu-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wpd-menu-item__check{flex-shrink:0;width:16px;height:16px;border-radius:3px;border:1.5px solid rgba( 0,0,0,0.25 );position:relative;background:transparent;transition:background-color 0.12s ease,border-color 0.12s ease}.wpd-menu-item__check[ hidden ]{display:none}:host( [ checked ] ) .wpd-menu-item__check{background:var( --wp-admin-theme-color,#2271b1 );border-color:var( --wp-admin-theme-color,#2271b1 )}:host( [ checked ] ) .wpd-menu-item__check::after{content:'';position:absolute;top:1px;left:4px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate( 45deg )}`,Y=class Y extends b{connectedCallback(){super.connectedCallback(),this.setAttribute("role","menu")}render(){return i`<slot></slot>`}};Y.styles=[Ve],Y.help=void 0;let te=Y;w("wpd-menu",te);const T=class T extends b{connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","menuitem")}render(){const e=this.icon||"",t=this.getAttribute("role")==="menuitemcheckbox",s=this.checked!==null;return t&&this.setAttribute("aria-checked",s?"true":"false"),i` | |
| 47 | - <button type="button" @click=${n=>this._onPick(n)}> | |
| 62 | + ${t?a`<span class="chevron" aria-hidden="true">›</span>`:a``} | |
| 63 | + `}};V.props=["value","icon","disabled","danger","heading","has-children","checked"],V.styles=[pt],V.help={title:"Context menu option",summary:"Single row inside <os-context-menu>. Use `icon` for a leading dashicon, `danger` for destructive items, `heading` for a non-interactive section header, `has-children` to render a trailing chevron.",status:"stable",props:[{name:"value",type:"string",description:"Forwarded as `detail.value` on activation."},{name:"icon",type:"string",description:"Dashicon class (e.g. `dashicons-trash`)."},{name:"disabled",type:"boolean attribute",description:"Renders the option dimmed; clicks are ignored."},{name:"danger",type:"boolean attribute",description:"Destructive styling — red text, red hover."},{name:"heading",type:"boolean attribute",description:"Non-interactive section header. Ignores clicks."},{name:"has-children",type:"boolean attribute",description:"Renders a trailing chevron to suggest a submenu."},{name:"checked",type:"boolean attribute",description:"Renders a leading check mark — for radio-style picks inside a submenu (e.g. the active Sort By order)."}],slots:[{name:"(default)",description:"Visible label."}],events:[{name:"os-context-menu-pick",description:"Bubbled on click / Enter for non-heading non-disabled options. Detail: `{ id, value }`."}],example:a` | |
| 64 | + <os-context-menu open style="position: relative; z-index: 0"> | |
| 65 | + <os-context-menu-option heading>Every variant</os-context-menu-option> | |
| 66 | + <os-context-menu-option value="plain">Plain</os-context-menu-option> | |
| 67 | + <os-context-menu-option value="icon" icon="dashicons-admin-page"> | |
| 68 | + With an icon | |
| 69 | + </os-context-menu-option> | |
| 70 | + <os-context-menu-option value="checked" checked> | |
| 71 | + Checked | |
| 72 | + </os-context-menu-option> | |
| 73 | + <os-context-menu-option value="children" has-children> | |
| 74 | + With a submenu | |
| 75 | + </os-context-menu-option> | |
| 76 | + <os-context-menu-option value="off" disabled>Disabled</os-context-menu-option> | |
| 77 | + <os-context-menu-option value="del" danger icon="dashicons-trash"> | |
| 78 | + Danger | |
| 79 | + </os-context-menu-option> | |
| 80 | + </os-context-menu> | |
| 81 | + `};let re=V;w("os-context-menu-option",re);const bt=b` ${z} ${ee}:host{display:block;animation:os-holo-enter var( --_holo-t ) var( --_holo-spring );transform-origin:top left;min-width:220px;padding:4px;background:var( --os-window-bg,#fff );background-image:var( --os-ui-menu-bg-image,none );background-repeat:var( --os-ui-menu-bg-image-repeat,repeat );background-size:var( --os-ui-menu-bg-image-size,auto );background-position:var( --os-ui-menu-bg-image-position,center );color:var( --os-ui-fg,#1d2327 );border:1px solid var( --os-window-border,#c3c4c7 );border-radius:8px;box-shadow:0 8px 24px rgba( 0,0,0,0.18 ),0 2px 6px rgba( 0,0,0,0.08 )}:host(:dir( rtl ) ){transform-origin:top right}@media ( prefers-reduced-motion:reduce ){:host{animation:none}}:host( [ hidden ] ){display:none}`,ft=b`:host{display:block}button{display:flex;align-items:center;gap:10px;width:100%;min-height:32px;padding:6px 10px;border:none;border-radius:6px;background:transparent;color:inherit;font:inherit;font-size:13px;line-height:1.3;text-align:start;cursor:pointer;transition:background-color 0.12s ease,color 0.12s ease}button:hover,button:focus-visible{background:var( --os-ui-hover,rgba( 0,0,0,0.06 ) );color:var( --os-ui-fg,#000 );outline:none}button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var( --os-ui-accent,#2271b1 )}.os-menu-item__icon{flex-shrink:0;width:18px;height:18px;font-size:18px;line-height:1;color:var( --wp-admin-theme-color,#2271b1 )}.os-menu-item__icon[ hidden ]{display:none}.os-menu-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.os-menu-item__check{flex-shrink:0;width:16px;height:16px;border-radius:3px;border:1.5px solid var( --os-ui-border,rgba( 0,0,0,0.25 ) );position:relative;background:transparent;transition:background-color 0.12s ease,border-color 0.12s ease}.os-menu-item__check[ hidden ]{display:none}:host( [ checked ] ) .os-menu-item__check{background-color:transparent;background-image:var( --os-ui-holo-fill,linear-gradient( 124deg,#afa2e8 0%,#f5a8ea 46%,#8ee9f7 100% ) );background-size:200% 200%;background-position:25% 30%;border-color:transparent;box-shadow:var( --os-ui-holo-glow,0 0 0 1px rgba( 242,82,252,0.28 ),0 2px 10px rgba( 242,82,252,0.22 ) )}:host( [ checked ] ) .os-menu-item__check::after{content:'';position:absolute;top:1px;left:4px;width:4px;height:8px;border:solid var( --os-ui-holo-ink,#0c0b0f );border-width:0 2px 2px 0;transform:rotate( 45deg )}`,J=class J extends x{connectedCallback(){super.connectedCallback(),this.setAttribute("role","menu")}render(){return a`<slot></slot>`}};J.styles=[bt],J.help=void 0;let ne=J;w("os-menu",ne);const R=class R extends x{connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","menuitem")}render(){const e=this.icon||"",t=this.getAttribute("role")==="menuitemcheckbox",o=this.checked!==null;return t&&this.setAttribute("aria-checked",o?"true":"false"),a` | |
| 82 | + <button type="button" @click=${s=>this._onPick(s)}> | |
| 48 | 83 | <span |
| 49 | - class="wpd-menu-item__check" | |
| 84 | + class="os-menu-item__check" | |
| 50 | 85 | ?hidden=${!t} |
| 51 | 86 | ></span> |
| 52 | 87 | <span |
| 53 | - class="wpd-menu-item__icon dashicons ${e}" | |
| 88 | + class="os-menu-item__icon dashicons ${e}" | |
| 54 | 89 | aria-hidden="true" |
| 55 | 90 | ?hidden=${t||!e} |
| 56 | 91 | ></span> |
| 57 | - <span class="wpd-menu-item__label"> | |
| 92 | + <span class="os-menu-item__label"> | |
| 58 | 93 | <slot></slot> |
| 59 | 94 | </span> |
| 60 | 95 | </button> |
| 61 | - `}_onPick(e){e.preventDefault(),this.emit("wpd-menu-item-click",{value:this.value})}};T.props=["icon","value","checked"],T.styles=[De],T.help={title:"Menu item",summary:'Single row inside a <wpd-menu>. Supports three looks: plain label, left-aligned dashicon (icon="dashicons-…"), or a checkbox indicator (role="menuitemcheckbox" + checked).',status:"stable",since:"0.9.0",props:[{name:"icon",type:"string (dashicons class)",description:'Dashicons class rendered on the left. Ignored when role="menuitemcheckbox".'},{name:"value",type:"string",description:"Identifier emitted in wpd-menu-item-click.detail.value."},{name:"checked",type:"boolean attribute",description:'Visible check indicator. Only honoured when role="menuitemcheckbox".'}],slots:[{name:"(default)",description:"Menu item label."}],events:[{name:"wpd-menu-item-click",description:"Fires when the item is clicked; bubbles so the <wpd-menu> parent can delegate.",detail:"{ value: string | null }"}]};let se=T;w("wpd-menu-item",se);const je=x`:host{display:inline-flex}button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:5px;background:transparent;color:var( --wpd-btn-color,currentColor );cursor:pointer;transition:background-color 0.15s ease,color 0.15s ease}button:hover{color:var( --wpd-btn-color-hover,currentColor );background:var( --wpd-btn-bg-hover,rgba( 0,0,0,0.06 ) )}button:focus-visible{color:var( --wpd-btn-color-hover,currentColor );background:var( --wpd-btn-bg-hover,rgba( 0,0,0,0.06 ) );outline:2px solid var( --wpd-btn-outline,currentColor );outline-offset:1px}:host( [ active ] ) button{color:var( --wpd-btn-color-hover,currentColor );background:var( --wpd-btn-bg-active,rgba( 0,0,0,0.08 ) )}:host( [ danger ] ) button:hover{color:#fff;background:var( --wpd-btn-danger-hover,#d63638 )}svg{display:block;pointer-events:none;flex-shrink:0}svg:empty{display:none}::slotted( span ){line-height:1}::slotted( svg ){display:block}`,qe={minimize:'<path d="M3 6h6" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>',maximize:'<rect x="3" y="3" width="6" height="6" rx="1" stroke="currentColor" stroke-width="1.25" fill="none"/>',fullscreen:'<path d="M4.5 2H2v2.5M10 4.5V2H7.5M4.5 10H2V7.5M10 7.5V10H7.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',"fullscreen-exit":'<path d="M2 4.5H4.5V2M7.5 2V4.5H10M2 7.5H4.5V10M7.5 10V7.5H10" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',detach:'<path d="M5 2H2.5v7.5H10V7M6.5 2H10v3.5M10 2L5.5 6.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',reload:'<g transform="translate(0.6 0.6) scale(0.021)" fill="currentColor"><path d="m504.554 233.704-76.447 91.467c-6.329 7.572-15.417 11.479-24.571 11.479a31.872 31.872 0 0 1-20.504-7.447l-91.467-76.447c-13.561-11.334-15.366-31.515-4.032-45.075s31.515-15.366 45.075-4.032l37.506 31.347c-10.274-74.891-74.668-132.774-152.337-132.774C132.984 102.223 64 171.207 64 256s68.984 153.777 153.777 153.777c17.673 0 32 14.327 32 32s-14.327 32-32 32c-58.17 0-112.859-22.653-153.991-63.785C22.653 368.859 0 314.17 0 256s22.653-112.859 63.786-153.992c41.132-41.132 95.821-63.785 153.991-63.785s112.859 22.653 153.992 63.785c32.517 32.516 53.471 73.508 60.829 117.991l22.849-27.339c11.334-13.56 31.515-15.364 45.075-4.032 13.56 11.335 15.365 31.516 4.032 45.076z"/></g>',close:'<path d="M3.25 3.25l5.5 5.5M3.25 8.75l5.5-5.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>',menu:'<circle cx="3" cy="6" r="1.2" fill="currentColor"/><circle cx="6" cy="6" r="1.2" fill="currentColor"/><circle cx="9" cy="6" r="1.2" fill="currentColor"/>'},P=class P extends b{constructor(){super(...arguments),this._activateWired=!1}render(){const e=this.icon||"",t=qe[e]||"";return i` | |
| 62 | - <button type="button"> | |
| 96 | + `}_onPick(e){e.preventDefault(),this.emit("os-menu-item-click",{value:this.value})}};R.props=["icon","value","checked"],R.styles=[ft],R.help={title:"Menu item",summary:'Single row inside a <os-menu>. Supports three looks: plain label, left-aligned dashicon (icon="dashicons-…"), or a checkbox indicator (role="menuitemcheckbox" + checked).',status:"stable",props:[{name:"icon",type:"string (dashicons class)",description:'Dashicons class rendered on the left. Ignored when role="menuitemcheckbox".'},{name:"value",type:"string",description:"Identifier emitted in os-menu-item-click.detail.value."},{name:"checked",type:"boolean attribute",description:'Visible check indicator. Only honoured when role="menuitemcheckbox".'}],slots:[{name:"(default)",description:"Menu item label."}],events:[{name:"os-menu-item-click",description:"Fires when the item is clicked; bubbles so the <os-menu> parent can delegate.",detail:"{ value: string | null }"}],example:a` | |
| 97 | + <os-menu> | |
| 98 | + <os-menu-item value="plain">Plain item</os-menu-item> | |
| 99 | + <os-menu-item value="icon" icon="dashicons-external"> | |
| 100 | + With an icon | |
| 101 | + </os-menu-item> | |
| 102 | + <os-menu-item value="startup" role="menuitemcheckbox" checked> | |
| 103 | + Checked (menuitemcheckbox) | |
| 104 | + </os-menu-item> | |
| 105 | + </os-menu> | |
| 106 | + `};let ae=R;w("os-menu-item",ae);const gt=b`:host{display:inline-flex}button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:var( --os-ui-btn-radius,5px );background-color:var( --os-ui-btn-bg,transparent );background-image:var( --os-ui-btn-bg-image,none );background-repeat:var( --os-ui-btn-bg-image-repeat,no-repeat );background-size:var( --os-ui-btn-bg-image-size,auto );background-position:var( --os-ui-btn-bg-image-position,center );color:var( --os-ui-btn-color,currentColor );cursor:pointer;transition:background-color 0.15s ease,color 0.15s ease,transform 80ms ease}button:active:not(:disabled){transform:scale( 0.9 )}@media ( prefers-reduced-motion:reduce ){button:active:not(:disabled){transform:none}}button:disabled{opacity:0.5;cursor:default}button:hover:not(:disabled){color:var( --os-ui-btn-color-hover,currentColor );background-color:var( --os-ui-btn-bg-hover,var( --os-ui-hover,rgba( 0,0,0,0.06 ) ) )}button:focus-visible{color:var( --os-ui-btn-color-hover,currentColor );background-color:var( --os-ui-btn-bg-hover,var( --os-ui-hover,rgba( 0,0,0,0.06 ) ) );outline:2px solid var( --os-ui-btn-outline,currentColor );outline-offset:1px}:host( [ active ] ) button{color:var( --os-ui-btn-color-hover,currentColor );background-color:var( --os-ui-btn-bg-active,var( --os-ui-hover,rgba( 0,0,0,0.08 ) ) )}:host( [ danger ] ) button:hover{color:var( --os-ui-fg-on-accent,#fff );background-color:var( --os-ui-btn-danger-hover,var( --os-ui-danger,#d63638 ) )}svg{display:block;pointer-events:none;flex-shrink:0}svg:empty{display:none}.themed-icon{display:block;width:14px;height:14px;flex-shrink:0;pointer-events:none;background-color:var( --os-ui-btn-icon-color,currentColor )}::slotted( span ){line-height:1}::slotted( svg ){display:block}`,vt={minimize:'<path d="M3 6h6" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>',maximize:'<rect x="3" y="3" width="6" height="6" rx="1" stroke="currentColor" stroke-width="1.25" fill="none"/>',fullscreen:'<path d="M4.5 2H2v2.5M10 4.5V2H7.5M4.5 10H2V7.5M10 7.5V10H7.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',"fullscreen-exit":'<path d="M2 4.5H4.5V2M7.5 2V4.5H10M2 7.5H4.5V10M7.5 10V7.5H10" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',detach:'<path d="M5 2H2.5v7.5H10V7M6.5 2H10v3.5M10 2L5.5 6.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',reload:'<g transform="translate(0.6 0.6) scale(0.021)" fill="currentColor"><path d="m504.554 233.704-76.447 91.467c-6.329 7.572-15.417 11.479-24.571 11.479a31.872 31.872 0 0 1-20.504-7.447l-91.467-76.447c-13.561-11.334-15.366-31.515-4.032-45.075s31.515-15.366 45.075-4.032l37.506 31.347c-10.274-74.891-74.668-132.774-152.337-132.774C132.984 102.223 64 171.207 64 256s68.984 153.777 153.777 153.777c17.673 0 32 14.327 32 32s-14.327 32-32 32c-58.17 0-112.859-22.653-153.991-63.785C22.653 368.859 0 314.17 0 256s22.653-112.859 63.786-153.992c41.132-41.132 95.821-63.785 153.991-63.785s112.859 22.653 153.992 63.785c32.517 32.516 53.471 73.508 60.829 117.991l22.849-27.339c11.334-13.56 31.515-15.364 45.075-4.032 13.56 11.335 15.365 31.516 4.032 45.076z"/></g>',close:'<path d="M3.25 3.25l5.5 5.5M3.25 8.75l5.5-5.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>',menu:'<circle cx="3" cy="6" r="1.2" fill="currentColor"/><circle cx="6" cy="6" r="1.2" fill="currentColor"/><circle cx="9" cy="6" r="1.2" fill="currentColor"/>'};function mt(i){const e=(i??"").trim();return e===""||e.length>4096||!/^(https?:\/\/|data:image\/)/i.test(e)||/['"()\\<>\s]/.test(e)?"":e}const D=class D extends x{constructor(){super(...arguments),this._activateWired=!1}static get observedAttributes(){return[...super.observedAttributes,"aria-label","aria-pressed"]}render(){const e=mt(this["icon-src"]||this.getAttribute("icon-src")||""),t=e?"":this.icon||"",o=vt[t]||"",s=this.getAttribute("aria-label")||"";return e?a` | |
| 107 | + <button type="button" aria-label="${s}" aria-pressed="${this.getAttribute("aria-pressed")||""}" ?disabled="${this.hasAttribute("disabled")}"> | |
| 108 | + <span | |
| 109 | + class="themed-icon" | |
| 110 | + aria-hidden="true" | |
| 111 | + style="-webkit-mask: url('${e}') center / contain no-repeat; mask: url('${e}') center / contain no-repeat;" | |
| 112 | + ></span> | |
| 113 | + <slot></slot> | |
| 114 | + </button> | |
| 115 | + `:a` | |
| 116 | + <button type="button" aria-label="${s}" aria-pressed="${this.getAttribute("aria-pressed")||""}" ?disabled="${this.hasAttribute("disabled")}"> | |
| 63 | 117 | <svg |
| 64 | 118 | width="14" |
| 65 | 119 | height="14" |
| 66 | 120 | viewBox="0 0 12 12" |
| @@ -68,10 +122,10 @@ | ||
| 68 | 122 | focusable="false" |
| 69 | 123 | ></svg> |
| 70 | 124 | <slot></slot> |
| 71 | 125 | </button> |
| 72 | - <span data-svg-buffer style="display:none">${t}</span> | |
| 73 | - `}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this._paintSvg()),queueMicrotask(()=>this._wireActivateEvent())}attributeChangedCallback(e,t,s){super.attributeChangedCallback(e,t,s),queueMicrotask(()=>this._paintSvg())}_paintSvg(){const e=this.shadowRoot;if(!e)return;const t=e.querySelector("svg"),s=e.querySelector("[data-svg-buffer]");if(t&&s){const n=s.textContent||"";t.innerHTML!==n&&(t.innerHTML=n)}}_wireActivateEvent(){if(this._activateWired)return;const e=this.shadowRoot;if(!e)return;const t=e.querySelector("button");t&&(this._activateWired=!0,t.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("wpd-button-activate",{bubbles:!0,composed:!0,cancelable:!0}))}))}};P.props=["icon","active","danger"],P.styles=[je],P.help=void 0;let ne=P;w("wpd-window-button",ne);const Ue=x`:host{display:inline-flex}button{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:4px;background:transparent;color:rgba( 0,0,0,0.45 );cursor:pointer;transition:background-color 0.15s ease,color 0.15s ease,transform 0.12s ease}:host( [ variant='detach' ] ) button:hover{color:var( --wp-admin-theme-color,#2271b1 );background:rgba( 34,113,177,0.12 );transform:translateY( -1px )}:host( [ variant='detach' ] ) button:focus-visible{outline:2px solid var( --wp-admin-theme-color,#2271b1 );outline-offset:1px}:host( [ variant='close' ] ) button:hover{color:#fff;background:#d63638}:host( [ variant='close' ] ) button:focus-visible{color:#fff;background:#d63638;outline:2px solid rgba( 214,54,56,0.6 );outline-offset:1px}svg{display:block;pointer-events:none;width:12px;height:12px}@media ( prefers-reduced-motion:reduce ){button{transition-duration:0.01ms}:host( [ variant='detach' ] ) button:hover{transform:none}}`,Oe={detach:'<path d="M5 2H2.5v7.5H10V7M6.5 2H10v3.5M10 2L5.5 6.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',close:'<path d="M2.5 2.5l7 7M9.5 2.5l-7 7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>'},R=class R extends b{render(){const e=this.variant||"",t=Oe[e]||"";return i` | |
| 126 | + <span data-svg-buffer style="display:none">${o}</span> | |
| 127 | + `}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this._paintSvg()),queueMicrotask(()=>this._wireActivateEvent())}attributeChangedCallback(e,t,o){super.attributeChangedCallback(e,t,o),queueMicrotask(()=>this._paintSvg())}_paintSvg(){const e=this.shadowRoot;if(!e)return;const t=e.querySelector("svg"),o=e.querySelector("[data-svg-buffer]");if(t&&o){const s=o.textContent||"";t.innerHTML!==s&&(t.innerHTML=s)}}_wireActivateEvent(){if(this._activateWired)return;const e=this.shadowRoot;if(!e)return;const t=e.querySelector("button");t&&(this._activateWired=!0,t.addEventListener("click",()=>{this.hasAttribute("disabled")||this.dispatchEvent(new CustomEvent("os-button-activate",{bubbles:!0,composed:!0,cancelable:!0}))}))}};D.props=["icon","icon-src","active","danger","disabled"],D.styles=[gt],D.help=void 0;let le=D;w("os-window-button",le);const xt=b` ${z}:host{display:inline-flex}button{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:4px;background:transparent;color:var( --os-ui-fg-muted,rgba( 0,0,0,0.45 ) );cursor:pointer;transition:background-color 0.15s ease,color 0.15s ease,transform 0.12s ease}:host( [ variant='detach' ] ) button:hover{color:var( --wp-admin-theme-color,#2271b1 );background:var( --os-ui-accent-soft,rgba( 34,113,177,0.12 ) );transform:translateY( -1px )}:host( [ variant='detach' ] ) button:focus-visible{outline:none;color:var( --os-ui-accent,#2271b1 );background:var( --os-ui-accent-soft,rgba( 34,113,177,0.12 ) );box-shadow:var( --_holo-focus )}:host( [ variant='close' ] ) button:hover{color:var( --os-ui-fg-on-accent,#fff );background:var( --os-ui-danger,#d63638 )}:host( [ variant='close' ] ) button:focus-visible{color:var( --os-ui-fg-on-accent,#fff );background:var( --os-ui-danger,#d63638 );outline:none;box-shadow:0 0 0 2px rgba( 12,11,15,0.9 ),0 0 0 4px var( --os-ui-danger,#d63638 ),0 0 12px 2px rgba( 214,54,56,0.45 )}svg{display:block;pointer-events:none;width:12px;height:12px}@media ( prefers-reduced-motion:reduce ){button{transition-duration:0.01ms}:host( [ variant='detach' ] ) button:hover{transform:none}}`,_t={detach:'<path d="M5 2H2.5v7.5H10V7M6.5 2H10v3.5M10 2L5.5 6.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',close:'<path d="M2.5 2.5l7 7M9.5 2.5l-7 7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>'},F=class F extends x{render(){const e=this.variant||"",t=_t[e]||"";return a` | |
| 74 | 128 | <button type="button"> |
| 75 | 129 | <svg |
| 76 | 130 | viewBox="0 0 12 12" |
| 77 | 131 | aria-hidden="true" |
| @@ -79,18 +133,18 @@ | ||
| 79 | 133 | ></svg> |
| 80 | 134 | <slot></slot> |
| 81 | 135 | </button> |
| 82 | 136 | <span data-svg-buffer style="display:none">${t}</span> |
| 83 | - `}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this._paintSvg())}attributeChangedCallback(e,t,s){super.attributeChangedCallback(e,t,s),queueMicrotask(()=>this._paintSvg())}_paintSvg(){const e=this.shadowRoot;if(!e)return;const t=e.querySelector("svg"),s=e.querySelector("[data-svg-buffer]");if(t&&s){const n=s.textContent||"";t.innerHTML!==n&&(t.innerHTML=n)}}};R.props=["variant"],R.styles=[Ue],R.help=void 0;let oe=R;w("wpd-tab-chip",oe);const Ke=x`:host{display:inline-flex;align-items:center;gap:6px;font-size:var( --wpd-save-status-font-size,11px );line-height:1;color:var( --wpd-save-status-fg,currentColor );vertical-align:middle;min-width:0;opacity:1;pointer-events:auto}.wpd-save-status__indicator{display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:50%;flex-shrink:0;box-sizing:border-box;background:var( --wpd-save-status-bg,transparent );border:2px solid var( --wpd-save-status-idle-color,color-mix( in srgb,var( --wp-admin-theme-color,#2271b1 ) 55%,transparent ) );color:var( --wp-admin-theme-color,#2271b1 );transition:background-color 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease}:host( [ phase='pending' ] ) .wpd-save-status__indicator,:host( [ phase='saving' ] ) .wpd-save-status__indicator{background:var( --wpd-save-status-bg,var( --wp-admin-theme-color,#2271b1 ) );border-color:transparent;color:var( --wp-admin-theme-color,#2271b1 );animation:wpd-save-status-pulse 1.2s ease-in-out infinite}:host( [ animation='modem' ][ phase='pending' ] ) .wpd-save-status__indicator,:host( [ animation='modem' ][ phase='saving' ] ) .wpd-save-status__indicator{background:var( --wpd-save-status-bg,var( --wp-admin-theme-color,#2271b1 ) );border-color:transparent;color:var( --wp-admin-theme-color,#2271b1 );animation:wpd-save-status-modem-stutter 1.8s ease-in-out infinite,wpd-save-status-modem-glow 2.4s ease-in-out infinite}@keyframes wpd-save-status-modem-stutter{0%,4%{opacity:1}5%,30%{opacity:0.22}31%,36%{opacity:1}37%,39%{opacity:0.22}40%,44%{opacity:1}45%,67%{opacity:0.22}68%,76%{opacity:1}77%,100%{opacity:0.22}}@keyframes wpd-save-status-modem-glow{0%,12%{box-shadow:0 0 0 0 transparent}13%,22%{box-shadow:0 0 4px 0 currentColor}23%,50%{box-shadow:0 0 0 0 transparent}51%,58%{box-shadow:0 0 4px 0 currentColor}59%,84%{box-shadow:0 0 0 0 transparent}85%,94%{box-shadow:0 0 5px 0 currentColor}95%,100%{box-shadow:0 0 0 0 transparent}}@media ( prefers-reduced-motion:reduce ){:host( [ phase='pending' ] ) .wpd-save-status__indicator,:host( [ phase='saving' ] ) .wpd-save-status__indicator,:host( [ animation='modem' ][ phase='pending' ] ) .wpd-save-status__indicator,:host( [ animation='modem' ][ phase='saving' ] ) .wpd-save-status__indicator{animation:none;opacity:0.85}}:host( [ phase='saved' ] ) .wpd-save-status__indicator{background:var( --wpd-save-status-saved-bg,#1d6f42 );border-color:transparent;color:var( --wpd-save-status-saved-bg,#1d6f42 )}:host( [ phase='failed' ] ) .wpd-save-status__indicator{background:var( --wpd-save-status-failed-bg,#d63638 );border-color:transparent;color:var( --wpd-save-status-failed-bg,#d63638 );animation:wpd-save-status-pulse 0.8s ease-in-out 2}@keyframes wpd-save-status-pulse{0%,100%{opacity:0.55;transform:scale( 0.9 )}50%{opacity:1;transform:scale( 1 )}}:host( [ mode='pill' ] ) .wpd-save-status{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;background:var( --wpd-save-status-pill-bg,transparent );font-weight:500;white-space:nowrap}:host( [ mode='pill' ][ phase='saving' ] ) .wpd-save-status,:host( [ mode='pill' ][ phase='pending' ] ) .wpd-save-status{background:var( --wpd-save-status-pill-bg,rgba( 0,0,0,0.04 ) );color:var( --wpd-save-status-pill-fg,#50575e )}:host( [ mode='pill' ][ phase='saved' ] ) .wpd-save-status{background:var( --wpd-save-status-pill-bg,rgba( 30,132,73,0.12 ) );color:var( --wpd-save-status-pill-fg,#1d6f42 )}:host( [ mode='pill' ][ phase='failed' ] ) .wpd-save-status{background:var( --wpd-save-status-pill-bg,rgba( 214,54,56,0.12 ) );color:var( --wpd-save-status-pill-fg,#a02622 )}.wpd-save-status__label{min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host( [ phase='saved' ] ) .wpd-save-status__glyph,:host( [ phase='failed' ] ) .wpd-save-status__glyph{display:inline-block;color:#fff;width:8px;height:8px}.wpd-save-status__glyph{display:none}.wpd-save-status__glyph svg{display:block;width:100%;height:100%}`,we="desktop-mode-os-settings-save-lifecycle",Be=2200,Ye=6e3,F=class F extends b{constructor(){super(...arguments),this._autoTimer=null,this._docListener=null}connectedCallback(){super.connectedCallback(),this.auto!==null&&this._installAutoListener()}disconnectedCallback(){this._removeAutoListener(),this._autoTimer!==null&&(window.clearTimeout(this._autoTimer),this._autoTimer=null)}attributeChangedCallback(e,t,s){if(super.attributeChangedCallback(e,t,s),(e==="auto"||e==="event")&&(this._removeAutoListener(),this.auto!==null&&this._installAutoListener()),e==="phase"){this._scheduleAutoClear();const n={phase:this.phase??"idle",error:this.error??void 0};this.emit("wpd-save-status-change",n)}}render(){const e=this.phase??"idle",t=this.mode??"dot",n=(this.error??"")||this._labelForPhase(e);return n?this.setAttribute("title",n):this.removeAttribute("title"),this.setAttribute("aria-live",e==="failed"?"assertive":"polite"),this.setAttribute("role",e==="failed"?"alert":"status"),i` | |
| 84 | - <span class="wpd-save-status"> | |
| 85 | - <span class="wpd-save-status__indicator" aria-hidden="true"> | |
| 86 | - <span class="wpd-save-status__glyph">${this._renderGlyph(e)}</span> | |
| 137 | + `}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this._paintSvg())}attributeChangedCallback(e,t,o){super.attributeChangedCallback(e,t,o),queueMicrotask(()=>this._paintSvg())}_paintSvg(){const e=this.shadowRoot;if(!e)return;const t=e.querySelector("svg"),o=e.querySelector("[data-svg-buffer]");if(t&&o){const s=o.textContent||"";t.innerHTML!==s&&(t.innerHTML=s)}}};F.props=["variant"],F.styles=[xt],F.help=void 0;let ce=F;w("os-tab-chip",ce);const kt=b`:host{display:inline-flex;align-items:center;gap:6px;font-size:var( --os-ui-save-status-font-size,11px );line-height:1;color:var( --os-ui-save-status-fg,currentColor );vertical-align:middle;min-width:0;opacity:1;pointer-events:auto}.os-save-status__indicator{display:inline-flex;align-items:center;justify-content:center;width:var( --os-ui-save-status-size,12px );height:var( --os-ui-save-status-size,12px );border-radius:50%;flex-shrink:0;box-sizing:border-box;background:var( --os-ui-save-status-bg,transparent );border:2px solid var( --os-ui-save-status-idle-color,color-mix( in srgb,var( --wp-admin-theme-color,#2271b1 ) 55%,transparent ) );color:var( --wp-admin-theme-color,#2271b1 );transition:background-color 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease}:host( [ phase='pending' ] ) .os-save-status__indicator,:host( [ phase='saving' ] ) .os-save-status__indicator{background:var( --os-ui-save-status-bg,var( --wp-admin-theme-color,#2271b1 ) );border-color:transparent;color:var( --wp-admin-theme-color,#2271b1 );animation:os-save-status-pulse 1.2s ease-in-out infinite}:host( [ animation='modem' ][ phase='pending' ] ) .os-save-status__indicator,:host( [ animation='modem' ][ phase='saving' ] ) .os-save-status__indicator{background:var( --os-ui-save-status-bg,var( --wp-admin-theme-color,#2271b1 ) );border-color:transparent;color:var( --wp-admin-theme-color,#2271b1 );animation:os-save-status-modem-stutter 1.8s ease-in-out infinite,os-save-status-modem-glow 2.4s ease-in-out infinite}@keyframes os-save-status-modem-stutter{0%,4%{opacity:1}5%,30%{opacity:0.22}31%,36%{opacity:1}37%,39%{opacity:0.22}40%,44%{opacity:1}45%,67%{opacity:0.22}68%,76%{opacity:1}77%,100%{opacity:0.22}}@keyframes os-save-status-modem-glow{0%,12%{box-shadow:0 0 0 0 transparent}13%,22%{box-shadow:0 0 4px 0 currentColor}23%,50%{box-shadow:0 0 0 0 transparent}51%,58%{box-shadow:0 0 4px 0 currentColor}59%,84%{box-shadow:0 0 0 0 transparent}85%,94%{box-shadow:0 0 5px 0 currentColor}95%,100%{box-shadow:0 0 0 0 transparent}}@media ( prefers-reduced-motion:reduce ){:host( [ phase='pending' ] ) .os-save-status__indicator,:host( [ phase='saving' ] ) .os-save-status__indicator,:host( [ animation='modem' ][ phase='pending' ] ) .os-save-status__indicator,:host( [ animation='modem' ][ phase='saving' ] ) .os-save-status__indicator{animation:none;opacity:0.85}}:host( [ phase='saved' ] ) .os-save-status__indicator{background:var( --os-ui-save-status-saved-bg,var( --os-ui-success-fg,#1d6f42 ) );border-color:transparent;color:var( --os-ui-save-status-saved-bg,var( --os-ui-success-fg,#1d6f42 ) )}:host( [ phase='failed' ] ) .os-save-status__indicator{background:var( --os-ui-save-status-failed-bg,var( --os-ui-danger,#d63638 ) );border-color:transparent;color:var( --os-ui-save-status-failed-bg,var( --os-ui-danger,#d63638 ) );animation:os-save-status-pulse 0.8s ease-in-out 2}:host( [ variant='ring' ] ) .os-save-status__indicator{background:transparent}:host( [ variant='ring' ][ phase='pending' ] ) .os-save-status__indicator,:host( [ variant='ring' ][ phase='saving' ] ) .os-save-status__indicator{background:transparent;border-color:var( --os-ui-save-status-ring-color,var( --os-ui-save-status-bg,var( --wp-admin-theme-color,#2271b1 ) ) );animation:os-save-status-ring-pulse 1.6s var( --os-ui-ease-loop,ease-in-out ) infinite}:host( [ variant='ring' ][ phase='failed' ] ) .os-save-status__indicator{background:transparent;border-color:var( --os-ui-save-status-failed-bg,var( --os-ui-danger,#d63638 ) );animation:os-save-status-ring-alert 0.62s var( --os-ui-ease-out,ease-out ) 1}:host( [ variant='ring' ][ phase='failed' ] ) .os-save-status__glyph{color:var( --os-ui-save-status-failed-bg,var( --os-ui-danger,#d63638 ) )}:host( [ variant='ring' ][ phase='saved' ] ) .os-save-status__indicator{background:var( --os-ui-save-status-saved-bg,var( --wp-admin-theme-color,#2271b1 ) );border-color:transparent;animation:os-save-status-ring-land 0.42s var( --os-ui-ease-out,ease-out ) 1}:host( [ variant='ring' ][ phase='saved' ] ) .os-save-status__glyph,:host( [ variant='ring' ][ phase='failed' ] ) .os-save-status__glyph{animation:os-save-status-glyph-in 0.24s var( --os-ui-ease-out,ease-out ) 0.08s 1 backwards}@keyframes os-save-status-ring-pulse{0%,100%{opacity:0.45;scale:0.9}50%{opacity:1;scale:1}}@keyframes os-save-status-ring-land{0%{scale:0.82}55%{scale:1.06}100%{scale:1}}@keyframes os-save-status-ring-alert{0%{scale:0.9}25%{scale:1.08}50%{scale:0.98}75%{scale:1.04}100%{scale:1}}@keyframes os-save-status-glyph-in{0%{opacity:0;scale:0.4}100%{opacity:1;scale:1}}@media ( prefers-reduced-motion:reduce ){:host( [ variant='ring' ] ) .os-save-status__indicator,:host( [ variant='ring' ] ) .os-save-status__glyph{animation:none;opacity:1;scale:1}}@keyframes os-save-status-pulse{0%,100%{opacity:0.55;transform:scale( 0.9 )}50%{opacity:1;transform:scale( 1 )}}:host( [ mode='pill' ] ) .os-save-status{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;background:var( --os-ui-save-status-pill-bg,transparent );font-weight:500;white-space:nowrap}:host( [ mode='pill' ][ phase='saving' ] ) .os-save-status,:host( [ mode='pill' ][ phase='pending' ] ) .os-save-status{background:var( --os-ui-save-status-pill-bg,var( --os-ui-hover,rgba( 0,0,0,0.04 ) ) );color:var( --os-ui-save-status-pill-fg,var( --os-ui-fg-muted,#50575e ) )}:host( [ mode='pill' ][ phase='saved' ] ) .os-save-status{background:var( --os-ui-save-status-pill-bg,rgba( 30,132,73,0.12 ) );color:var( --os-ui-save-status-pill-fg,var( --os-ui-success-fg,#1d6f42 ) )}:host( [ mode='pill' ][ phase='failed' ] ) .os-save-status{background:var( --os-ui-save-status-pill-bg,rgba( 214,54,56,0.12 ) );color:var( --os-ui-save-status-pill-fg,var( --os-ui-danger-hover,#a02622 ) )}.os-save-status__label{min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host( [ phase='saved' ] ) .os-save-status__glyph,:host( [ phase='failed' ] ) .os-save-status__glyph{display:inline-block;color:var( --os-ui-fg-on-accent,#fff );width:calc( var( --os-ui-save-status-size,12px ) * 0.66 );height:calc( var( --os-ui-save-status-size,12px ) * 0.66 )}.os-save-status__glyph{display:none}.os-save-status__glyph svg{display:block;width:100%;height:100%}`,Te="os-settings-save-lifecycle",yt=2200,wt=6e3,q=class q extends x{constructor(){super(...arguments),this._autoTimer=null,this._docListener=null}connectedCallback(){super.connectedCallback(),this.auto!==null&&this._installAutoListener()}disconnectedCallback(){this._removeAutoListener(),this._autoTimer!==null&&(window.clearTimeout(this._autoTimer),this._autoTimer=null)}attributeChangedCallback(e,t,o){if(super.attributeChangedCallback(e,t,o),(e==="auto"||e==="event")&&(this._removeAutoListener(),this.auto!==null&&this._installAutoListener()),e==="phase"){this._scheduleAutoClear();const s={phase:this.phase??"idle",error:this.error??void 0};this.emit("os-save-status-change",s)}}render(){const e=this.phase??"idle",t=this.mode??"dot",s=(this.error??"")||this._labelForPhase(e);return s?this.setAttribute("title",s):this.removeAttribute("title"),this.setAttribute("aria-live",e==="failed"?"assertive":"polite"),this.setAttribute("role",e==="failed"?"alert":"status"),a` | |
| 138 | + <span class="os-save-status"> | |
| 139 | + <span class="os-save-status__indicator" aria-hidden="true"> | |
| 140 | + <span class="os-save-status__glyph">${this._renderGlyph(e)}</span> | |
| 87 | 141 | </span> |
| 88 | - ${t==="pill"?i`<span class="wpd-save-status__label" | |
| 142 | + ${t==="pill"?a`<span class="os-save-status__label" | |
| 89 | 143 | >${this._labelForPhase(e)}</span |
| 90 | - >`:i``} | |
| 144 | + >`:a``} | |
| 91 | 145 | </span> |
| 92 | - `}_renderGlyph(e){return e==="saved"?Ge():e==="failed"?Xe():""}_labelForPhase(e){switch(e){case"pending":case"saving":return this["saving-label"]??"Saving…";case"saved":return this["saved-label"]??"Saved";case"failed":return(this.error??"")||"Couldn’t save";default:return this["idle-label"]??""}}_installAutoListener(){const e=this.event||we;this._docListener=t=>{const s=t.detail;!s||typeof s.phase!="string"||(this.phase=s.phase,s.error?this.error=s.error:s.phase!=="failed"&&this.error&&this.removeAttribute("error"))},document.addEventListener(e,this._docListener)}_removeAutoListener(){if(!this._docListener)return;const e=this.event||we;document.removeEventListener(e,this._docListener),this._docListener=null}_scheduleAutoClear(){this._autoTimer!==null&&(window.clearTimeout(this._autoTimer),this._autoTimer=null);const e=this.phase??"idle",t=this._autoClearMsFor(e);t<=0||(this._autoTimer=window.setTimeout(()=>{this._autoTimer=null,this.phase="idle"},t))}_autoClearMsFor(e){if(e==="saved"){const t=this["auto-clear-saved-ms"];return parseInt(t||"",10)||Be}if(e==="failed"){const t=this["auto-clear-failed-ms"];return parseInt(t||"",10)||Ye}return 0}};F.props=["phase","mode","animation","auto","event","error","saving-label","saved-label","idle-label","auto-clear-saved-ms","auto-clear-failed-ms"],F.styles=[Ke],F.help=void 0;let ie=F;w("wpd-save-status",ie);function Ge(){return i` | |
| 146 | + `}_renderGlyph(e){return e==="saved"?$t():e==="failed"?Ct():""}_labelForPhase(e){switch(e){case"pending":case"saving":return this["saving-label"]??"Saving…";case"saved":return this["saved-label"]??"Saved";case"failed":return(this.error??"")||"Couldn’t save";default:return this["idle-label"]??""}}_installAutoListener(){const e=this.event||Te;this._docListener=t=>{const o=t.detail;!o||typeof o.phase!="string"||(this.phase=o.phase,o.error?this.error=o.error:o.phase!=="failed"&&this.error&&this.removeAttribute("error"))},document.addEventListener(e,this._docListener)}_removeAutoListener(){if(!this._docListener)return;const e=this.event||Te;document.removeEventListener(e,this._docListener),this._docListener=null}_scheduleAutoClear(){this._autoTimer!==null&&(window.clearTimeout(this._autoTimer),this._autoTimer=null);const e=this.phase??"idle",t=this._autoClearMsFor(e);t<=0||(this._autoTimer=window.setTimeout(()=>{this._autoTimer=null,this.phase="idle"},t))}_autoClearMsFor(e){if(e==="saved"){const t=this["auto-clear-saved-ms"];return parseInt(t||"",10)||yt}if(e==="failed"){const t=this["auto-clear-failed-ms"];return parseInt(t||"",10)||wt}return 0}};q.props=["phase","mode","variant","animation","auto","event","error","saving-label","saved-label","idle-label","auto-clear-saved-ms","auto-clear-failed-ms"],q.styles=[kt],q.help=void 0;let de=q;w("os-save-status",de);function $t(){return a` | |
| 93 | 147 | <svg |
| 94 | 148 | viewBox="0 0 12 12" |
| 95 | 149 | aria-hidden="true" |
| 96 | 150 | focusable="false" |
| @@ -101,9 +155,9 @@ | ||
| 101 | 155 | stroke-linejoin="round" |
| 102 | 156 | > |
| 103 | 157 | <path d="M2.5 6 L5 8.5 L9.5 4" /> |
| 104 | 158 | </svg> |
| 105 | - `}function Xe(){return i` | |
| 159 | + `}function Ct(){return a` | |
| 106 | 160 | <svg |
| 107 | 161 | viewBox="0 0 12 12" |
| 108 | 162 | aria-hidden="true" |
| 109 | 163 | focusable="false" |
| @@ -112,44 +166,73 @@ | ||
| 112 | 166 | <path |
| 113 | 167 | d="M5 2 H7 V7 H5 z M5 8.5 H7 V10.5 H5 z" |
| 114 | 168 | /> |
| 115 | 169 | </svg> |
| 116 | - `}const Je=x`:host{display:inline-block;--wpd-spinner-color:var( --wp-admin-theme-color,#21759b );--wpd-spinner-accent:#fff;--wpd-spinner-size:48px;width:var( --wpd-spinner-size );height:var( --wpd-spinner-size );color:var( --wpd-spinner-color );vertical-align:middle;line-height:0}:host( [ hidden ] ){display:none}.root,.root svg{display:block;width:100%;height:100%}.root svg .mark{fill:var( --wpd-spinner-accent,#fff )}@keyframes wpd-spinner-spin{to{transform:rotate( 360deg )}}@keyframes wpd-spinner-scale{0%,100%{transform:scale( 1 )}50%{transform:scale( 1.045 )}}@keyframes wpd-spinner-opacity{0%,100%{opacity:1}50%{opacity:0.7}}@media ( prefers-reduced-motion:reduce ){.root svg [ style*='animation' ]{animation:none !important}}`,xe=Object.freeze({classic:{sp1:12,sp2:24,sp3:40,a1:28,a2:15,a3:8,gap:4,dir2:1,dir3:-1,pulse:"none",dots:0},comet:{sp1:8,sp2:14,sp3:26,a1:50,a2:28,a3:12,gap:3,dir2:1,dir3:1,pulse:"none",dots:5},orbit:{sp1:10,sp2:10,sp3:32,a1:50,a2:50,a3:8,gap:5,dir2:-1,dir3:-1,pulse:"opacity",dots:3},pulse:{sp1:6,sp2:18,sp3:30,a1:20,a2:12,a3:6,gap:4,dir2:1,dir3:-1,pulse:"both",dots:8}}),$=61.26,C=61.26,ke=58.453,Ze='<path d="m8.708 61.26c0 20.802 12.089 38.779 29.619 47.298l-25.069-68.686c-2.916 6.536-4.55 13.769-4.55 21.388z"/><path d="m96.74 58.608c0-6.495-2.333-10.993-4.334-14.494-2.664-4.329-5.161-7.995-5.161-12.324 0-4.831 3.664-9.328 8.825-9.328.233 0 .454.029.681.042-9.35-8.566-21.807-13.796-35.489-13.796-18.36 0-34.513 9.42-43.91 23.688 1.233.037 2.395.063 3.382.063 5.497 0 14.006-.667 14.006-.667 2.833-.167 3.167 3.994.337 4.329 0 0-2.847.335-6.015.501l19.138 56.925 11.501-34.493-8.188-22.434c-2.83-.166-5.511-.501-5.511-.501-2.832-.166-2.5-4.496.332-4.329 0 0 8.679.667 13.843.667 5.496 0 14.006-.667 14.006-.667 2.835-.167 3.168 3.994.337 4.329 0 0-2.853.335-6.015.501l18.992 56.494 5.242-17.517c2.272-7.269 4.001-12.49 4.001-16.989z"/><path d="m62.184 65.857-15.768 45.819c4.708 1.384 9.687 2.141 14.846 2.141 6.12 0 11.989-1.058 17.452-2.979-.141-.225-.269-.464-.374-.724z"/><path d="m107.376 36.046c.226 1.674.354 3.471.354 5.404 0 5.333-.996 11.328-3.996 18.824l-16.053 46.413c15.624-9.111 26.133-26.038 26.133-45.426.001-9.137-2.333-17.729-6.438-25.215z"/>',H=class H extends b{constructor(){super(...arguments),this._paintScheduled=!1}connectedCallback(){super.connectedCallback(),this._schedulePaint()}render(){return i`<div class="root" part="root"></div>`}requestUpdate(){super.requestUpdate(),this._schedulePaint()}_schedulePaint(){this._paintScheduled||!this.isConnected||(this._paintScheduled=!0,queueMicrotask(()=>{this._paintScheduled=!1,this.isConnected&&this._paint()}))}_paint(){this._syncCssVars();const e=this.shadowRoot?.querySelector(".root");e&&(e.innerHTML=this._buildSvg())}_syncCssVars(){const e=(t,s,n)=>{const r=this.getAttribute(t);r===null?this.style.removeProperty(s):this.style.setProperty(s,n?n(r):r)};e("color","--wpd-spinner-color"),e("accent","--wpd-spinner-accent"),e("size","--wpd-spinner-size",t=>/^-?\d+(\.\d+)?$/.test(t.trim())?`${t}px`:t)}_effectiveConfig(){const e=this.getAttribute("preset")??"classic",t=xe[e]??xe.classic,s=(a,c)=>{const d=this.getAttribute(a);if(d===null)return c;const l=parseFloat(d);return Number.isFinite(l)?l:c},n=(a,c)=>{const d=this.getAttribute(a);if(d===null)return c;const l=d.toLowerCase();return l==="-1"||l==="ccw"||l==="reverse"?-1:1},r=()=>{const a=this.getAttribute("pulse");return a==="scale"||a==="opacity"||a==="both"||a==="none"?a:t.pulse};return{sp1:s("sp1",t.sp1),sp2:s("sp2",t.sp2),sp3:s("sp3",t.sp3),a1:s("a1",t.a1),a2:s("a2",t.a2),a3:s("a3",t.a3),gap:s("gap",t.gap),dir2:n("dir2",t.dir2),dir3:n("dir3",t.dir3),pulse:r(),dots:Math.max(0,Math.floor(s("dots",t.dots)))}}_buildSvg(){const e=this._effectiveConfig(),t=Qe(this.getAttribute("label")??"Loading"),s=e.gap*3+14,n=-s,r=122.52+s*2,a=ke+e.gap+2,c=a+e.gap+2,d=c+e.gap+1.5,l=`animation: wpd-spinner-spin ${(e.sp1/10).toFixed(2)}s linear infinite`,h=`animation: wpd-spinner-spin ${(e.sp2/10).toFixed(2)}s linear infinite${e.dir2<0?" reverse":""}`,m=`animation: wpd-spinner-spin ${(e.sp3/10).toFixed(2)}s linear infinite${e.dir3<0?" reverse":""}`,_=(e.sp1*1.8/10).toFixed(1),f=(e.sp1*2.3/10).toFixed(1);let u="";e.pulse==="scale"?u=`animation: wpd-spinner-scale ${_}s ease-in-out infinite`:e.pulse==="opacity"?u=`animation: wpd-spinner-opacity ${f}s ease-in-out infinite`:e.pulse==="both"&&(u=`animation: wpd-spinner-scale ${_}s ease-in-out infinite, wpd-spinner-opacity ${f}s ease-in-out infinite`);let A="";if(e.dots>0){const p=d+e.gap+1,k=2*Math.PI*p,v=1.6,y=(e.sp1*.65/10).toFixed(2);for(let S=0;S<e.dots;S++){const ue=-(S/e.dots)*k;A+=`<circle cx="${$}" cy="${C}" r="${p.toFixed(2)}" fill="none" stroke="currentColor" stroke-width="${v}" stroke-dasharray="${v.toFixed(2)} ${(k-v).toFixed(2)}" stroke-dashoffset="${ue.toFixed(2)}" stroke-linecap="round" stroke-opacity="0.65" style="transform-origin:${$}px ${C}px;animation: wpd-spinner-spin ${y}s linear infinite"/>`}}return`<svg xmlns="http://www.w3.org/2000/svg" viewBox="${n} ${n} ${r} ${r}" role="img" aria-label="${t}"><g style="transform-origin:${$}px ${C}px${u?";"+u:""}"><circle cx="${$}" cy="${C}" r="${ke}" fill="currentColor"/><g class="mark">${Ze}</g></g><circle cx="${$}" cy="${C}" r="${a.toFixed(2)}" fill="none" stroke="currentColor" stroke-width="0.6" stroke-opacity="0.2"/><circle cx="${$}" cy="${C}" r="${a.toFixed(2)}" fill="none" stroke="currentColor" stroke-width="2.2" stroke-dasharray="${ae(a,e.a1)}" stroke-linecap="round" style="transform-origin:${$}px ${C}px;${l}"/><circle cx="${$}" cy="${C}" r="${c.toFixed(2)}" fill="none" stroke="currentColor" stroke-width="0.5" stroke-opacity="0.15"/><circle cx="${$}" cy="${C}" r="${c.toFixed(2)}" fill="none" stroke="currentColor" stroke-width="1.6" stroke-opacity="0.8" stroke-dasharray="${ae(c,e.a2)}" stroke-linecap="round" style="transform-origin:${$}px ${C}px;${h}"/><circle cx="${$}" cy="${C}" r="${d.toFixed(2)}" fill="none" stroke="currentColor" stroke-width="0.4" stroke-opacity="0.12"/><circle cx="${$}" cy="${C}" r="${d.toFixed(2)}" fill="none" stroke="currentColor" stroke-width="1.0" stroke-opacity="0.6" stroke-dasharray="${ae(d,e.a3)}" stroke-linecap="round" style="transform-origin:${$}px ${C}px;${m}"/>`+A+"</svg>"}};H.props=["preset","size","color","accent","sp1","sp2","sp3","a1","a2","a3","gap","dir2","dir3","pulse","dots","label"],H.styles=[Je],H.help=void 0;let re=H;function ae(o,e){const t=2*Math.PI*o,s=e/100*t,n=t-s;return`${s.toFixed(2)} ${n.toFixed(2)}`}function Qe(o){return String(o).replace(/&/g,"&").replace(/"/g,""").replace(/</g,"<").replace(/>/g,">")}w("wpd-spinner",re);const We=x`:host{display:inline-flex}:host( [ fill-cell ] ){display:flex;width:100%}button{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:var( --wpd-button-padding,6px 12px );border-radius:var( --wpd-button-border-radius,6px );font:inherit;font-weight:500;cursor:pointer;transition:background-color 0.12s ease,color 0.12s ease,border-color 0.12s ease;background:var( --wpd-button-bg,transparent );color:var( --wpd-button-fg,var( --desktop-mode-text,#1d2327 ) );border:var( --wpd-button-border,1px solid var( --desktop-mode-border,#c3c4c7 ) )}:host( [ fill-cell ] ) button{width:100%;min-height:var( --wpd-button-min-height,44px )}button:disabled{opacity:0.5;cursor:not-allowed}button:hover:not(:disabled ){background:rgba( 0,0,0,0.04 )}:host( [ variant='primary' ] ) button{background:var( --wpd-button-bg,var( --wp-admin-theme-color,#2271b1 ) );color:var( --wpd-button-fg,#fff );border:var( --wpd-button-border,1px solid transparent )}:host( [ variant='primary' ] ) button:hover:not(:disabled ){filter:brightness( 1.06 );background:var( --wpd-button-bg,var( --wp-admin-theme-color,#2271b1 ) )}:host( [ variant='secondary' ] ) button{background:var( --wpd-button-bg,rgba( 0,0,0,0.06 ) );color:var( --wpd-button-fg,var( --desktop-mode-text,#1d2327 ) );border:var( --wpd-button-border,1px solid transparent )}:host( [ variant='secondary' ] ) button:hover:not(:disabled ){background:var( --wpd-button-bg-hover,rgba( 0,0,0,0.1 ) )}:host( [ variant='danger' ] ) button{background:var( --wpd-button-bg,transparent );color:var( --wpd-button-fg,#d63638 );border:var( --wpd-button-border,1px solid currentColor )}:host( [ variant='danger' ] ) button:hover:not(:disabled ){background:#d63638;color:#fff}:host( [ variant='link' ] ) button{background:transparent;color:var( --wpd-button-fg,var( --wp-admin-theme-color,#2271b1 ) );border:0;padding:0;text-decoration:underline}:host( [ busy ] ) button{pointer-events:none;opacity:0.75}`,V=class V extends b{render(){const e=this.disabled!==null,t=this.type||"button";return i` | |
| 117 | - <button part="button" type=${t} ?disabled=${e}> | |
| 170 | + `}const At=b`:host{display:inline-block;--_color:var( --os-ui-spinner-color,var( --wp-admin-theme-color,#21759b ) );--_accent:var( --os-ui-spinner-accent,var( --os-ui-fg-on-accent,#fff ) );--_size:var( --os-ui-spinner-size,48px );width:var( --_size );height:var( --_size );color:var( --_color );vertical-align:middle;line-height:0}:host( [ hidden ] ){display:none}:host( [ preset='inline' ] ){--os-ui-spinner-color:currentColor;--os-ui-spinner-size:16px}.root,.root svg{display:block;width:100%;height:100%}.root svg .mark{fill:var( --_accent )}@keyframes os-spinner-spin{to{transform:rotate( 360deg )}}@keyframes os-spinner-scale{0%,100%{transform:scale( 1 )}50%{transform:scale( 1.045 )}}@keyframes os-spinner-opacity{0%,100%{opacity:1}50%{opacity:0.7}}@media ( prefers-reduced-motion:reduce ){.root svg [ style*='animation' ]{animation:none !important}}`,He=Object.freeze({classic:{sp1:12,sp2:24,sp3:40,a1:28,a2:15,a3:8,gap:4,dir2:1,dir3:-1,pulse:"none",dots:0},comet:{sp1:8,sp2:14,sp3:26,a1:50,a2:28,a3:12,gap:3,dir2:1,dir3:1,pulse:"none",dots:5},orbit:{sp1:10,sp2:10,sp3:32,a1:50,a2:50,a3:8,gap:5,dir2:-1,dir3:-1,pulse:"opacity",dots:3},pulse:{sp1:6,sp2:18,sp3:30,a1:20,a2:12,a3:6,gap:4,dir2:1,dir3:-1,pulse:"both",dots:8},inline:{sp1:8,sp2:8,sp3:8,a1:25,a2:25,a3:25,gap:0,dir2:1,dir3:1,pulse:"none",dots:0}}),$=61.26,C=61.26,Ne=58.453,zt='<path d="m8.708 61.26c0 20.802 12.089 38.779 29.619 47.298l-25.069-68.686c-2.916 6.536-4.55 13.769-4.55 21.388z"/><path d="m96.74 58.608c0-6.495-2.333-10.993-4.334-14.494-2.664-4.329-5.161-7.995-5.161-12.324 0-4.831 3.664-9.328 8.825-9.328.233 0 .454.029.681.042-9.35-8.566-21.807-13.796-35.489-13.796-18.36 0-34.513 9.42-43.91 23.688 1.233.037 2.395.063 3.382.063 5.497 0 14.006-.667 14.006-.667 2.833-.167 3.167 3.994.337 4.329 0 0-2.847.335-6.015.501l19.138 56.925 11.501-34.493-8.188-22.434c-2.83-.166-5.511-.501-5.511-.501-2.832-.166-2.5-4.496.332-4.329 0 0 8.679.667 13.843.667 5.496 0 14.006-.667 14.006-.667 2.835-.167 3.168 3.994.337 4.329 0 0-2.853.335-6.015.501l18.992 56.494 5.242-17.517c2.272-7.269 4.001-12.49 4.001-16.989z"/><path d="m62.184 65.857-15.768 45.819c4.708 1.384 9.687 2.141 14.846 2.141 6.12 0 11.989-1.058 17.452-2.979-.141-.225-.269-.464-.374-.724z"/><path d="m107.376 36.046c.226 1.674.354 3.471.354 5.404 0 5.333-.996 11.328-3.996 18.824l-16.053 46.413c15.624-9.111 26.133-26.038 26.133-45.426.001-9.137-2.333-17.729-6.438-25.215z"/>',P=class P extends x{constructor(){super(...arguments),this._paintScheduled=!1}connectedCallback(){super.connectedCallback(),this._schedulePaint()}render(){return a`<div class="root" part="root"></div>`}requestUpdate(){super.requestUpdate(),this._schedulePaint()}_schedulePaint(){this._paintScheduled||!this.isConnected||(this._paintScheduled=!0,queueMicrotask(()=>{this._paintScheduled=!1,this.isConnected&&this._paint()}))}_paint(){this._syncCssVars();const e=this.shadowRoot?.querySelector(".root");e&&(e.innerHTML=this._buildSvg())}_syncCssVars(){const e=(t,o,s)=>{const r=this.getAttribute(t);r===null?this.style.removeProperty(o):this.style.setProperty(o,s?s(r):r)};e("color","--os-ui-spinner-color"),e("accent","--os-ui-spinner-accent"),e("size","--os-ui-spinner-size",t=>/^-?\d+(\.\d+)?$/.test(t.trim())?`${t}px`:t)}_effectiveConfig(){const e=this.getAttribute("preset")??"classic",t=He[e]??He.classic,o=(n,l)=>{const c=this.getAttribute(n);if(c===null)return l;const d=parseFloat(c);return Number.isFinite(d)?d:l},s=(n,l)=>{const c=this.getAttribute(n);if(c===null)return l;const d=c.toLowerCase();return d==="-1"||d==="ccw"||d==="reverse"?-1:1},r=()=>{const n=this.getAttribute("pulse");return n==="scale"||n==="opacity"||n==="both"||n==="none"?n:t.pulse};return{sp1:o("sp1",t.sp1),sp2:o("sp2",t.sp2),sp3:o("sp3",t.sp3),a1:o("a1",t.a1),a2:o("a2",t.a2),a3:o("a3",t.a3),gap:o("gap",t.gap),dir2:s("dir2",t.dir2),dir3:s("dir3",t.dir3),pulse:r(),dots:Math.max(0,Math.floor(o("dots",t.dots)))}}_buildInlineSvg(e){const t=Ve(this.getAttribute("label")??"Loading"),o=9,s=(e.sp1/10).toFixed(2);return`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-label="${t}"><circle cx="12" cy="12" r="${o}" fill="none" stroke="currentColor" stroke-width="2.4" stroke-opacity="0.22"/><circle cx="12" cy="12" r="${o}" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-dasharray="${Y(o,e.a1)}" style="transform-origin:12px 12px;animation: os-spinner-spin ${s}s linear infinite"/></svg>`}_buildSvg(){const e=this._effectiveConfig();if(this.getAttribute("preset")==="inline")return this._buildInlineSvg(e);const t=Ve(this.getAttribute("label")??"Loading"),o=e.gap*3+14,s=-o,r=122.52+o*2,n=Ne+e.gap+2,l=n+e.gap+2,c=l+e.gap+1.5,d=`animation: os-spinner-spin ${(e.sp1/10).toFixed(2)}s linear infinite`,h=`animation: os-spinner-spin ${(e.sp2/10).toFixed(2)}s linear infinite${e.dir2<0?" reverse":""}`,p=`animation: os-spinner-spin ${(e.sp3/10).toFixed(2)}s linear infinite${e.dir3<0?" reverse":""}`,f=(e.sp1*1.8/10).toFixed(1),v=(e.sp1*2.3/10).toFixed(1);let u="";e.pulse==="scale"?u=`animation: os-spinner-scale ${f}s ease-in-out infinite`:e.pulse==="opacity"?u=`animation: os-spinner-opacity ${v}s ease-in-out infinite`:e.pulse==="both"&&(u=`animation: os-spinner-scale ${f}s ease-in-out infinite, os-spinner-opacity ${v}s ease-in-out infinite`);let m="";if(e.dots>0){const g=c+e.gap+1,_=2*Math.PI*g,k=1.6,A=(e.sp1*.65/10).toFixed(2);for(let S=0;S<e.dots;S++){const M=-(S/e.dots)*_;m+=`<circle cx="${$}" cy="${C}" r="${g.toFixed(2)}" fill="none" stroke="currentColor" stroke-width="${k}" stroke-dasharray="${k.toFixed(2)} ${(_-k).toFixed(2)}" stroke-dashoffset="${M.toFixed(2)}" stroke-linecap="round" stroke-opacity="0.65" style="transform-origin:${$}px ${C}px;animation: os-spinner-spin ${A}s linear infinite"/>`}}return`<svg xmlns="http://www.w3.org/2000/svg" viewBox="${s} ${s} ${r} ${r}" role="img" aria-label="${t}"><g style="transform-origin:${$}px ${C}px${u?";"+u:""}"><circle cx="${$}" cy="${C}" r="${Ne}" fill="currentColor"/><g class="mark">${zt}</g></g><circle cx="${$}" cy="${C}" r="${n.toFixed(2)}" fill="none" stroke="currentColor" stroke-width="0.6" stroke-opacity="0.2"/><circle cx="${$}" cy="${C}" r="${n.toFixed(2)}" fill="none" stroke="currentColor" stroke-width="2.2" stroke-dasharray="${Y(n,e.a1)}" stroke-linecap="round" style="transform-origin:${$}px ${C}px;${d}"/><circle cx="${$}" cy="${C}" r="${l.toFixed(2)}" fill="none" stroke="currentColor" stroke-width="0.5" stroke-opacity="0.15"/><circle cx="${$}" cy="${C}" r="${l.toFixed(2)}" fill="none" stroke="currentColor" stroke-width="1.6" stroke-opacity="0.8" stroke-dasharray="${Y(l,e.a2)}" stroke-linecap="round" style="transform-origin:${$}px ${C}px;${h}"/><circle cx="${$}" cy="${C}" r="${c.toFixed(2)}" fill="none" stroke="currentColor" stroke-width="0.4" stroke-opacity="0.12"/><circle cx="${$}" cy="${C}" r="${c.toFixed(2)}" fill="none" stroke="currentColor" stroke-width="1.0" stroke-opacity="0.6" stroke-dasharray="${Y(c,e.a3)}" stroke-linecap="round" style="transform-origin:${$}px ${C}px;${p}"/>`+m+"</svg>"}};P.props=["preset","size","color","accent","sp1","sp2","sp3","a1","a2","a3","gap","dir2","dir3","pulse","dots","label"],P.styles=[At],P.help=void 0;let ue=P;function Y(i,e){const t=2*Math.PI*i,o=e/100*t,s=t-o;return`${o.toFixed(2)} ${s.toFixed(2)}`}function Ve(i){return String(i).replace(/&/g,"&").replace(/"/g,""").replace(/</g,"<").replace(/>/g,">")}w("os-spinner",ue);const St=b` ${z} ${$e} ${Ce} ${Ae} ${ze} ${Ee}:host{display:inline-flex}:host( [ fill-cell ] ){display:flex;width:100%}button{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:var( --os-ui-button-padding,6px 12px );border-radius:var( --os-ui-button-border-radius,6px );font:inherit;font-weight:500;cursor:pointer;transition:background-color var( --_holo-t ) ease,color var( --_holo-t ) ease,border-color var( --_holo-t ) ease,box-shadow var( --_holo-t ) ease,transform 80ms ease;background:var( --os-ui-button-bg,transparent );background-image:var( --os-ui-button-bg-image,none );background-repeat:var( --os-ui-button-bg-image-repeat,repeat );background-size:var( --os-ui-button-bg-image-size,auto );background-position:var( --os-ui-button-bg-image-position,center );color:var( --os-ui-button-fg,var( --os-ui-fg,#1d2327 ) );border:var( --os-ui-button-border,1px solid var( --os-ui-border,#c3c4c7 ) )}:host( [ fill-cell ] ) button{width:100%;min-height:var( --os-ui-button-min-height,44px )}button:disabled{opacity:0.5;cursor:not-allowed}button:active:not(:disabled ){transform:translateY( 1px )}button:hover:not(:disabled ){background-color:var( --os-ui-button-bg-hover,var( --os-ui-hover,rgba( 0,0,0,0.04 ) ) )}button:focus-visible{outline:none;box-shadow:var( --_holo-focus )}button:disabled::before,button:disabled::after,button:disabled .os-holo-glint{opacity:0 !important}:host( [ variant='primary' ] ) button{background-color:var( --os-ui-button-bg,var( --wp-admin-theme-color,#2271b1 ) );color:var( --os-ui-button-fg,var( --os-ui-accent-ink,var( --os-ui-fg-on-accent,#fff ) ) );border:var( --os-ui-button-border,1px solid transparent )}:host( [ variant='primary' ] ) button:hover:not(:disabled ){filter:brightness( 1.06 );background-color:var( --os-ui-button-bg,var( --wp-admin-theme-color,#2271b1 ) );box-shadow:var( --_holo-glow )}:host( [ variant='holo' ] ) button{background-color:transparent;background-image:var( --_holo-fill );background-size:220% 220%;background-position:22% 28%;background-repeat:no-repeat;color:var( --os-ui-button-fg,var( --_holo-ink ) );border:var( --os-ui-button-border,1px solid transparent );box-shadow:var( --_holo-glow );font-weight:600;transition:background-position var( --_holo-t ) ease,box-shadow var( --_holo-t ) ease,filter var( --_holo-t ) ease,transform 80ms ease}:host( [ variant='holo' ] ) button:hover:not(:disabled ){background-color:transparent;background-position:74% 66%;box-shadow:var( --_holo-glow-strong )}:host( [ variant='holo' ] ) button:active:not(:disabled ){background-position:88% 82%;filter:brightness( 0.94 )}:host( [ variant='holo' ] ) button::before{display:none}@media ( prefers-reduced-motion:reduce ){:host( [ variant='holo' ] ) button:hover:not(:disabled ),:host( [ variant='holo' ] ) button:active:not(:disabled ){background-position:22% 28%}}:host( [ variant='secondary' ] ) button{background-color:var( --os-ui-button-bg,var( --os-ui-hover,rgba( 0,0,0,0.06 ) ) );color:var( --os-ui-button-fg,var( --os-ui-fg,#1d2327 ) );border:var( --os-ui-button-border,1px solid transparent )}:host( [ variant='secondary' ] ) button:hover:not(:disabled ){background-color:var( --os-ui-button-bg-hover,var( --os-ui-hover,rgba( 0,0,0,0.1 ) ) )}:host( [ variant='danger' ] ) button{background-color:var( --os-ui-button-bg,transparent );color:var( --os-ui-button-fg,var( --os-ui-danger,#d63638 ) );border:var( --os-ui-button-border,1px solid currentColor )}:host( [ variant='danger' ] ) button:hover:not(:disabled ){background-color:var( --os-ui-danger,#d63638 );color:var( --os-ui-fg-on-accent,#fff )}:host( [ variant='danger' ] ) button::after{display:none}:host( [ variant='link' ] ) button{background-color:transparent;background-image:none;color:var( --os-ui-button-fg,var( --wp-admin-theme-color,#2271b1 ) );border:0;padding:0;text-decoration:underline}:host( [ variant='link' ] ) button::before,:host( [ variant='link' ] ) button::after,:host( [ variant='link' ] ) .os-holo-glint,:host( [ variant='link' ] ) .os-holo-ring{display:none}:host( [ variant='link' ] ) button:active:not(:disabled ){transform:none}:host( [ busy ] ) button{pointer-events:none;opacity:0.75}:host( [ variant='holo' ][ busy ] ) button{animation:os-holo-drift 12s ease-in-out infinite}@media ( prefers-reduced-motion:reduce ){:host( [ variant='holo' ][ busy ] ) button{animation:none}}.os-button__spinner{box-sizing:border-box;display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:os-button-spin 0.6s linear infinite;flex-shrink:0}@keyframes os-button-spin{to{transform:rotate( 360deg )}}`,j=class j extends x{static get observedAttributes(){return[...super.observedAttributes,"aria-label"]}render(){const e=this.disabled!==null,t=this.busy!==null,o=this.type||"button",s=this.getAttribute("aria-label")||"";return a` | |
| 171 | + <button | |
| 172 | + part="button" | |
| 173 | + class="os-holo-edge os-holo-sheen" | |
| 174 | + type=${o} | |
| 175 | + ?disabled=${e||t} | |
| 176 | + aria-busy=${t?"true":"false"} | |
| 177 | + aria-label=${s} | |
| 178 | + > | |
| 179 | + ${t?a`<span class="os-button__spinner" aria-hidden="true"></span>`:""} | |
| 118 | 180 | <slot></slot> |
| 181 | + <!-- | |
| 182 | + The two motion layers. Elements rather than | |
| 183 | + pseudo-elements because the sheen and the hairline | |
| 184 | + have already taken this button's ::before and | |
| 185 | + ::after — see the pseudo-element budget note in | |
| 186 | + src/ui/holo.ts. Both are inert and aria-hidden. | |
| 187 | + --> | |
| 188 | + <span class="os-holo-glint" aria-hidden="true"></span> | |
| 189 | + <span class="os-holo-ring" aria-hidden="true"></span> | |
| 119 | 190 | </button> |
| 120 | - `}};V.props=["variant","disabled","type","busy","fill-cell"],V.styles=[We],V.help=void 0;let le=V;w("wpd-button",le);const et=x`:host{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var( --desktop-mode-text,#1d2327 );min-width:0}:host( [ hidden ] ){display:none}.wpd-text-field__label{font-size:12px;color:var( --desktop-mode-muted,#646970 )}.wpd-text-field__row{position:relative;display:flex;align-items:center;width:100%}input{appearance:none;-webkit-appearance:none;display:block;width:100%;min-width:0;box-sizing:border-box;padding:7px 10px;background:var( --desktop-mode-window-bg,#fff );border:1px solid var( --desktop-mode-border,#dcdcde );border-radius:6px;font:inherit;font-size:13px;color:var( --desktop-mode-text,#1d2327 );transition:border-color 0.12s ease,box-shadow 0.12s ease}.wpd-text-field__suffix{position:absolute;inset-inline-end:10px;top:50%;transform:translateY( -50% );pointer-events:none;font-size:12px;color:var( --desktop-mode-muted,#646970 )}.wpd-text-field__row--has-reveal input{padding-inline-end:36px}.wpd-text-field__reveal{position:absolute;inset-inline-end:0;top:0;bottom:0;width:34px;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var( --desktop-mode-muted,#646970 );cursor:pointer;border-radius:0 6px 6px 0;transition:color 0.12s ease}.wpd-text-field__reveal:hover{color:var( --wp-admin-theme-color,#2271b1 )}.wpd-text-field__reveal:focus-visible{outline:2px solid var( --wp-admin-theme-color,#2271b1 );outline-offset:-2px;border-radius:0 6px 6px 0}.wpd-text-field__reveal:disabled{opacity:0.45;cursor:not-allowed}.wpd-text-field__input--masked{-webkit-text-security:disc;text-security:disc}@supports not ( ( -webkit-text-security:disc ) or ( text-security:disc ) ){.wpd-text-field__input--masked{font-family:text-security-disc,"password",monospace;letter-spacing:0.2em}}input:hover{border-color:var( --desktop-mode-muted,#8c8f94 )}input:focus-visible{outline:none;border-color:var( --wp-admin-theme-color,#2271b1 );box-shadow:0 0 0 1px var( --wp-admin-theme-color,#2271b1 )}input:disabled{opacity:0.55;cursor:not-allowed;background:rgba( 0,0,0,0.03 )}input[ aria-invalid='true' ]{border-color:#d63638}input[ aria-invalid='true' ]:focus-visible{box-shadow:0 0 0 1px #d63638}input[ type='number' ]::-webkit-inner-spin-button,input[ type='number' ]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[ type='number' ]{-moz-appearance:textfield}`,D=class D extends b{constructor(){super(...arguments),this._revealed=!1}connectedCallback(){super.connectedCallback(),ge(this)}render(){const e=this.label||"",t=this.value??"",s=this.placeholder||"",n=this.disabled!==null,r=this.readonly!==null,a=this.autocomplete,c=this.type||"text",d=c==="password";let l=a||"off";d&&(!a||l==="off")&&(l="new-password");const h=this.maxlength,m=this.minlength,_=this.pattern||"",f=this.name||"",u=this.suffix||"",A=this.invalid!==null,p=this.reveal!==null,k=c==="password",v=k&&!(p&&this._revealed);let y;k||p&&this._revealed?y="text":y=c;const S=p?"wpd-text-field__row wpd-text-field__row--has-reveal":"wpd-text-field__row",ue=v?"wpd-text-field__input wpd-text-field__input--masked":"wpd-text-field__input",ye=`${this.id||"wpd-unnamed"}__input`;return i` | |
| 121 | - ${e?i`<label | |
| 122 | - class="wpd-text-field__label" | |
| 123 | - for=${ye} | |
| 124 | - >${e}</label>`:i``} | |
| 125 | - <span class=${S}> | |
| 191 | + `}};j.props=["variant","disabled","type","busy","fill-cell"],j.styles=[St],j.help=void 0;let he=j;w("os-button",he);const Et=b` ${z} ${Se}:host{--_field-size:var( --os-ui-field-font-size,13px );--_field-radius:var( --os-ui-field-radius,6px );display:flex;flex-direction:column;gap:4px;font-size:var( --_field-size );color:var( --os-ui-fg,#1d2327 );min-width:0}:host( [ hidden ] ){display:none}.os-text-field__label{font-size:12px;color:var( --os-ui-fg-muted,#646970 )}.os-text-field__label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap;clip-path:inset( 50% )}.os-text-field__row{position:relative;display:flex;align-items:center;width:100%}input{appearance:none;-webkit-appearance:none;display:block;width:100%;min-width:0;box-sizing:border-box;padding:7px 10px;background:var( --os-window-bg,#fff );border:1px solid var( --os-ui-border,#dcdcde );border-radius:var( --_field-radius );font:inherit;font-size:var( --_field-size );color:var( --os-ui-fg,#1d2327 )}input:is( [ type='date' ],[ type='datetime-local' ],[ type='month' ],[ type='week' ] )::-webkit-calendar-picker-indicator{--_calendar-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M4.75 7.25L4.75 18C4.75 18.6904 5.30964 19.25 6 19.25H18C18.6904 19.25 19.25 18.6904 19.25 18V7.25V6C19.25 5.30964 18.6904 4.75 18 4.75H6C5.30964 4.75 4.75 5.30964 4.75 6V7.25ZM19.25 7.25H4.75M7.25 10.75H9.25M11 10.75H13M14.75 10.75H16.75M7.25 14.5H9.25M11 14.5H13M14.75 14.5H16.75' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M18 4.75H6C5.30964 4.75 4.75 5.30964 4.75 6V7.25H19.25V6C19.25 5.30964 18.6904 4.75 18 4.75Z' fill='currentColor' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");background:var( --os-ui-fg-muted,#646970 );-webkit-mask:var( --_calendar-icon ) center / contain no-repeat;mask:var( --_calendar-icon ) center / contain no-repeat;width:16px;height:16px;cursor:pointer}@media ( forced-colors:active ){input:is( [ type='date' ],[ type='datetime-local' ],[ type='month' ],[ type='week' ] )::-webkit-calendar-picker-indicator{background:ButtonText;forced-color-adjust:none}}.os-text-field__suffix{position:absolute;inset-inline-end:10px;top:50%;transform:translateY( -50% );pointer-events:none;font-size:12px;color:var( --os-ui-fg-muted,#646970 )}.os-text-field__row--has-reveal input{padding-inline-end:36px}:host( [ clearable ] ) input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}.os-text-field__row--has-clear input{padding-inline-end:36px}.os-text-field__row--has-reveal.os-text-field__row--has-clear input{padding-inline-end:68px}.os-text-field__clear{position:absolute;inset-inline-end:0;top:0;bottom:0;width:34px;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var( --os-ui-fg-muted,#646970 );cursor:pointer;border-radius:0 6px 6px 0}.os-text-field__row--has-reveal .os-text-field__clear{inset-inline-end:34px;border-radius:0}.os-text-field__clear:hover{color:var( --os-ui-accent,#2271b1 )}.os-text-field__clear:focus-visible{outline:none;color:var( --os-ui-accent,#2271b1 );box-shadow:inset 0 0 0 2px var( --os-ui-accent,#2271b1 )}.os-text-field__clear:disabled{opacity:0.45;cursor:default}.os-text-field__reveal{position:absolute;inset-inline-end:0;top:0;bottom:0;width:34px;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var( --os-ui-fg-muted,#646970 );cursor:pointer;border-radius:0 6px 6px 0;transition:color 0.12s ease}.os-text-field__reveal:hover{color:var( --os-ui-accent,#2271b1 )}.os-text-field__reveal:focus-visible{outline:none;color:var( --os-ui-accent,#2271b1 );box-shadow:inset 0 0 0 2px var( --os-ui-accent,#2271b1 );border-radius:0 6px 6px 0}.os-text-field__reveal:disabled{opacity:0.45;cursor:not-allowed}.os-text-field__input--masked{-webkit-text-security:disc;text-security:disc}@supports not ( ( -webkit-text-security:disc ) or ( text-security:disc ) ){.os-text-field__input--masked{font-family:text-security-disc,"password",monospace;letter-spacing:0.2em}}input:disabled{opacity:0.55;cursor:not-allowed;background:var( --os-ui-hover,rgba( 0,0,0,0.03 ) )}input[ aria-invalid='true' ],input[ aria-invalid='true' ]:hover:not(:disabled ){border-color:var( --os-ui-danger,#d63638 )}input[ aria-invalid='true' ]:focus,input[ aria-invalid='true' ]:focus-visible{border-color:var( --os-ui-danger,#d63638 );box-shadow:0 0 0 1px var( --os-ui-danger,#d63638 ),0 0 0 4px rgba( 214,54,56,0.18 )}input[ type='number' ]::-webkit-inner-spin-button,input[ type='number' ]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[ type='number' ]{-moz-appearance:textfield}`,U=class U extends x{constructor(){super(...arguments),this._revealed=!1}connectedCallback(){super.connectedCallback(),ke(this)}render(){const e=this.label||"",t=this.hideLabel!==null,o=this.value??"",s=this.placeholder||"",r=this.disabled!==null,n=this.readonly!==null,l=this.autocomplete,c=this.type||"text",d=c==="password";let h=l||"off";d&&(!l||h==="off")&&(h="new-password");const p=this.maxlength,f=this.minlength,v=this.pattern||"",u=this.name||"",m=this.suffix||"",g=this.invalid!==null,_=this.reveal!==null,k=this.clearable!==null,A=c==="password",S=A&&!(_&&this._revealed);let M;A||_&&this._revealed?M="text":M=c;const Nt=["os-text-field__row",_?"os-text-field__row--has-reveal":"",k?"os-text-field__row--has-clear":""].filter(Boolean).join(" "),Vt=S?"os-text-field__input os-text-field__input--masked":"os-text-field__input",Re=`${this.id||"os-unnamed"}__input`;return a` | |
| 192 | + ${e?a`<label | |
| 193 | + class=${t?"os-text-field__label os-text-field__label--hidden":"os-text-field__label"} | |
| 194 | + for=${Re} | |
| 195 | + >${e}</label>`:a``} | |
| 196 | + <span class=${Nt}> | |
| 126 | 197 | <input |
| 127 | - id=${ye} | |
| 128 | - class=${ue} | |
| 129 | - type=${y} | |
| 130 | - .value=${t} | |
| 198 | + id=${Re} | |
| 199 | + class=${Vt} | |
| 200 | + type=${M} | |
| 201 | + .value=${o} | |
| 131 | 202 | placeholder=${s} |
| 132 | - ?disabled=${n} | |
| 133 | - ?readonly=${r} | |
| 134 | - autocomplete=${l} | |
| 135 | - maxlength=${h??""} | |
| 136 | - minlength=${m??""} | |
| 137 | - pattern=${_} | |
| 138 | - name=${f} | |
| 139 | - aria-invalid=${A?"true":"false"} | |
| 203 | + ?disabled=${r} | |
| 204 | + ?readonly=${n} | |
| 205 | + autocomplete=${h} | |
| 206 | + maxlength=${p??""} | |
| 207 | + minlength=${f??""} | |
| 208 | + pattern=${v} | |
| 209 | + name=${u} | |
| 210 | + aria-invalid=${g?"true":"false"} | |
| 140 | 211 | aria-label=${e||""} |
| 141 | - @input=${U=>this._onInput(U)} | |
| 142 | - @change=${U=>this._onChange(U)} | |
| 143 | - @keydown=${U=>this._onKeyDown(U)} | |
| 212 | + @input=${K=>this._onInput(K)} | |
| 213 | + @change=${K=>this._onChange(K)} | |
| 214 | + @keydown=${K=>this._onKeyDown(K)} | |
| 144 | 215 | /> |
| 145 | - ${u?i`<span class="wpd-text-field__suffix">${u}</span>`:i``} | |
| 146 | - ${p?this._renderRevealButton(n):i``} | |
| 216 | + ${m?a`<span class="os-text-field__suffix">${m}</span>`:a``} | |
| 217 | + ${k&&o!==""?this._renderClearButton(r):a``} | |
| 218 | + ${_?this._renderRevealButton(r):a``} | |
| 147 | 219 | </span> |
| 148 | - `}_renderRevealButton(e){const t=this._revealed?"Hide":"Show";return i` | |
| 220 | + `}_renderClearButton(e){return a` | |
| 149 | 221 | <button |
| 150 | 222 | type="button" |
| 151 | - class="wpd-text-field__reveal" | |
| 223 | + class="os-text-field__clear" | |
| 224 | + aria-label="Clear" | |
| 225 | + ?disabled=${e} | |
| 226 | + tabindex="0" | |
| 227 | + @click=${()=>this._onClear()} | |
| 228 | + > | |
| 229 | + ${Lt()} | |
| 230 | + </button> | |
| 231 | + `}_onClear(){this.value="",this.emit("os-input-change",{value:""}),this.emit("os-input-commit",{value:""}),this.shadowRoot?.querySelector("input")?.focus()}_renderRevealButton(e){const t=this._revealed?"Hide":"Show";return a` | |
| 232 | + <button | |
| 233 | + type="button" | |
| 234 | + class="os-text-field__reveal" | |
| 152 | 235 | aria-label=${t} |
| 153 | 236 | aria-pressed=${this._revealed?"true":"false"} |
| 154 | 237 | ?disabled=${e} |
| 155 | 238 | tabindex="0" |
| @@ -154,11 +237,11 @@ | ||
| 154 | 237 | ?disabled=${e} |
| 155 | 238 | tabindex="0" |
| 156 | 239 | @click=${()=>this._onToggleReveal()} |
| 157 | 240 | > |
| 158 | - ${this._revealed?st():tt()} | |
| 241 | + ${this._revealed?It():Mt()} | |
| 159 | 242 | </button> |
| 160 | - `}_onToggleReveal(){this._revealed=!this._revealed,this.requestUpdate()}_onInput(e){const t=e.target;this.value=t.value,this.emit("wpd-input-change",{value:t.value})}_onChange(e){const t=e.target;this.emit("wpd-input-commit",{value:t.value})}_onKeyDown(e){if(e.key==="Enter"&&!e.shiftKey&&!e.altKey&&!e.metaKey){const t=e.target;this.emit("wpd-submit",{value:t.value})}}};D.props=["label","value","placeholder","disabled","readonly","autocomplete","type","maxlength","minlength","pattern","name","suffix","invalid","reveal"],D.styles=[et],D.help=void 0;let de=D;w("wpd-text-field",de);function tt(){return i` | |
| 243 | + `}_onToggleReveal(){this._revealed=!this._revealed,this.requestUpdate()}_onInput(e){const t=e.target;this.value=t.value,this.emit("os-input-change",{value:t.value})}_onChange(e){const t=e.target;this.emit("os-input-commit",{value:t.value})}_onKeyDown(e){if(e.key==="Enter"&&!e.shiftKey&&!e.altKey&&!e.metaKey){const t=e.target;this.emit("os-submit",{value:t.value})}}};U.props=["label","hideLabel","value","placeholder","disabled","readonly","autocomplete","type","maxlength","minlength","pattern","name","suffix","invalid","reveal","clearable"],U.styles=[Et],U.help=void 0;let pe=U;w("os-text-field",pe);function Lt(){return a` | |
| 161 | 244 | <svg |
| 162 | 245 | viewBox="0 0 16 16" |
| 163 | 246 | width="14" |
| 164 | 247 | height="14" |
| @@ -165,8 +248,22 @@ | ||
| 165 | 248 | fill="none" |
| 166 | 249 | stroke="currentColor" |
| 167 | 250 | stroke-width="1.5" |
| 168 | 251 | stroke-linecap="round" |
| 252 | + aria-hidden="true" | |
| 253 | + focusable="false" | |
| 254 | + > | |
| 255 | + <path d="M4 4l8 8M12 4l-8 8" /> | |
| 256 | + </svg> | |
| 257 | + `}function Mt(){return a` | |
| 258 | + <svg | |
| 259 | + viewBox="0 0 16 16" | |
| 260 | + width="14" | |
| 261 | + height="14" | |
| 262 | + fill="none" | |
| 263 | + stroke="currentColor" | |
| 264 | + stroke-width="1.5" | |
| 265 | + stroke-linecap="round" | |
| 169 | 266 | stroke-linejoin="round" |
| 170 | 267 | aria-hidden="true" |
| 171 | 268 | focusable="false" |
| 172 | 269 | > |
| @@ -172,9 +269,9 @@ | ||
| 172 | 269 | > |
| 173 | 270 | <path d="M1 8C1 8 3.5 3 8 3s7 5 7 5-2.5 5-7 5S1 8 1 8z" /> |
| 174 | 271 | <circle cx="8" cy="8" r="2" /> |
| 175 | 272 | </svg> |
| 176 | - `}function st(){return i` | |
| 273 | + `}function It(){return a` | |
| 177 | 274 | <svg |
| 178 | 275 | viewBox="0 0 16 16" |
| 179 | 276 | width="14" |
| 180 | 277 | height="14" |
| @@ -189,63 +286,63 @@ | ||
| 189 | 286 | <path d="M1 8C1 8 3.5 3 8 3s7 5 7 5-2.5 5-7 5S1 8 1 8z" /> |
| 190 | 287 | <circle cx="8" cy="8" r="2" /> |
| 191 | 288 | <line x1="2" y1="2" x2="14" y2="14" /> |
| 192 | 289 | </svg> |
| 193 | - `}const nt=x`:host{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var( --desktop-mode-text,#1d2327 );min-width:0}:host( [ hidden ] ){display:none}.wpd-select__label{font-size:12px;color:var( --desktop-mode-muted,#646970 )}.wpd-select__wrap{position:relative;display:flex;align-items:center;width:100%}select{appearance:none;-webkit-appearance:none;display:block;width:100%;min-width:0;padding:7px 28px 7px 12px;background:rgba( 0,0,0,0.05 );border:1px solid transparent;border-radius:7px;font:inherit;font-size:13px;color:var( --desktop-mode-text,#1d2327 );cursor:pointer;transition:background-color 0.12s ease,border-color 0.12s ease,box-shadow 0.12s ease}select:hover{background:rgba( 0,0,0,0.08 )}select:focus-visible{outline:none;border-color:var( --wp-admin-theme-color,#2271b1 );box-shadow:0 0 0 1px var( --wp-admin-theme-color,#2271b1 )}select:disabled{opacity:0.5;cursor:not-allowed}.wpd-select__chevron{position:absolute;inset-inline-end:10px;top:50%;transform:translateY( -50% );pointer-events:none;color:var( --desktop-mode-muted,#646970 );display:inline-block}select:hover ~ .wpd-select__chevron,select:focus-visible ~ .wpd-select__chevron{color:var( --desktop-mode-text,#1d2327 )}`,ot=x`:host{display:none}`,j=class j extends b{render(){return i``}};j.props=["value","disabled"],j.styles=[ot],j.help=void 0;let ce=j;w("wpd-option",ce);const q=class q extends b{constructor(){super(...arguments),this._optionObserver=null}set items(e){const t=this.querySelectorAll(":scope > wpd-option");for(const r of Array.from(t))r.remove();for(const r of e){const a=document.createElement("wpd-option");a.setAttribute("value",r.value),a.textContent=r.label,this.appendChild(a)}const s=this.value;!(s!==null&&e.some(r=>r.value===s))&&e.length>0&&(this.value=e[0].value),this.requestUpdate()}connectedCallback(){super.connectedCallback(),ge(this),this._optionObserver=new MutationObserver(()=>this.requestUpdate()),this._optionObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value","disabled"],characterData:!0})}disconnectedCallback(){this._optionObserver?.disconnect(),this._optionObserver=null}render(){const e=this.label||"",t=this.value,s=this.placeholder||"",n=this.disabled!==null,r=this.name||"";e?this.setAttribute("aria-label",e):this.removeAttribute("aria-label");const a=e||s,c=this._readOptions(),l=`${this.id||"wpd-unnamed"}__input`;return i` | |
| 194 | - ${e?i`<label | |
| 195 | - class="wpd-select__label" | |
| 196 | - for=${l} | |
| 197 | - >${e}</label>`:i``} | |
| 198 | - <span class="wpd-select__wrap"> | |
| 199 | - <select | |
| 200 | - id=${l} | |
| 201 | - ?disabled=${n} | |
| 202 | - aria-label=${a} | |
| 203 | - name=${r} | |
| 204 | - @change=${h=>this._onChange(h)} | |
| 290 | + `}const Tt=b` ${z}:host{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var( --os-ui-fg,#1d2327 );min-width:0}:host( [ hidden ] ){display:none}.os-select__label{font-size:13px;line-height:1.5;color:var( --os-ui-fg-muted,#646970 )}.os-select__trigger{appearance:none;display:flex;align-items:center;gap:8px;width:100%;min-width:0;padding:8px 12px;background:var( --os-ui-hover,rgba( 0,0,0,0.05 ) );border:1px solid transparent;border-radius:8px;font:inherit;font-size:13px;line-height:1.5;color:var( --os-ui-fg,#1d2327 );text-align:start;cursor:pointer;transition:background-color var( --_holo-t ) ease,border-color var( --_holo-t ) ease,box-shadow var( --_holo-t ) ease}.os-select__trigger:hover:not(:disabled ){background:var( --os-ui-hover,rgba( 0,0,0,0.08 ) );border-color:var( --os-ui-border-strong,#8c8f94 )}.os-select__trigger:focus,.os-select__trigger:focus-visible{outline:none;border-color:var( --os-ui-accent,#2271b1 );box-shadow:var( --_holo-focus-field )}.os-select__trigger:disabled{opacity:0.5;cursor:not-allowed}:host( [ plain ] ){display:inline-flex;flex-direction:row;align-items:center}:host( [ plain ] ) .os-select__label{display:none}:host( [ plain ] ) .os-select__trigger{width:auto;padding:4px 6px;background:transparent;border-color:transparent;border-radius:6px}:host( [ plain ] ) .os-select__trigger:hover:not(:disabled ){background:var( --os-ui-hover,rgba( 0,0,0,0.05 ) );border-color:transparent}:host( [ plain ] ) .os-select__trigger:focus,:host( [ plain ] ) .os-select__trigger:focus-visible{border-color:var( --os-ui-accent,#2271b1 )}:host( [ plain ] ) .os-select__value{flex:0 1 auto}.os-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.os-select__value--placeholder{color:var( --os-ui-fg-muted,#646970 )}.os-select__chevron{flex:0 0 auto;pointer-events:none;color:var( --os-ui-fg-muted,#646970 )}.os-select__trigger:hover .os-select__chevron{color:var( --os-ui-fg,#1d2327 )}.os-select__trigger:focus .os-select__chevron,.os-select__trigger:focus-visible .os-select__chevron{color:var( --os-ui-accent,#2271b1 )}.os-select__popup{position:fixed;inset:auto;margin:0;max-height:min( 320px,60vh );overflow-y:auto;padding:4px;background:var( --os-ui-surface,#fff );border:1px solid var( --os-ui-border,#dcdcde );border-radius:8px;box-shadow:0 12px 32px rgba( 0,0,0,0.45 );color:var( --os-ui-fg,#1d2327 )}.os-select__popup:not( [ data-open ] ){display:none}.os-select__popup:popover-open{display:block}.os-select__popup[ data-open ]{position:absolute;top:calc( 100% + 4px );left:0;min-width:100%;z-index:1000}:host{position:relative}.os-select__option{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;font-size:13px;line-height:1.5;cursor:pointer;white-space:nowrap}.os-select__check{flex:0 0 auto;visibility:hidden}.os-select__option[ aria-selected='true' ] .os-select__check{visibility:visible}.os-select__option[ data-active ],.os-select__option:hover{background:var( --os-ui-accent,#2271b1 );color:var( --os-ui-accent-ink,var( --os-ui-fg-on-accent,#fff ) )}.os-select__option[ aria-disabled='true' ]{opacity:0.5;cursor:not-allowed}.os-select__option[ aria-disabled='true' ]:hover{background:transparent;color:inherit}@media ( prefers-reduced-motion:reduce ){.os-select__trigger{transition-duration:1ms}}`,Ht=b`:host{display:none}`,Z=class Z extends x{render(){return a``}};Z.props=["value","disabled"],Z.styles=[Ht],Z.help=void 0;let be=Z;w("os-option",be);const B=class B extends x{constructor(){super(...arguments),this._optionObserver=null,this._open=!1,this._activeIndex=-1,this._typed="",this._dismissedAt=0,this._typedTimer=null,this._onWindowScroll=e=>{const t=e.target,o=this._popup();o&&t instanceof Node&&(t===o||o.contains(t))||this._hide()},this._onWindowResize=()=>this._hide()}set items(e){const t=this.querySelectorAll(":scope > os-option");for(const r of Array.from(t))r.remove();for(const r of e){const n=document.createElement("os-option");n.setAttribute("value",r.value),n.textContent=r.label,this.appendChild(n)}const o=this.value;!(o!==null&&e.some(r=>r.value===o))&&e.length>0&&(this.value=e[0].value),this.requestUpdate()}connectedCallback(){super.connectedCallback(),ke(this),this._optionObserver=new MutationObserver(()=>this.requestUpdate()),this._optionObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value","disabled"],characterData:!0})}disconnectedCallback(){this._optionObserver?.disconnect(),this._optionObserver=null,this._teardownDismiss(),this._open=!1,this._typedTimer&&(clearTimeout(this._typedTimer),this._typedTimer=null)}render(){const e=this.label||"",t=this.value,o=this.placeholder||"",s=this.disabled!==null;e&&this.setAttribute("aria-label",e);const r=this.getAttribute("aria-label")||"",n=e||r||o,l=this._readOptions(),c=l.find(u=>u.value===t),d=c?c.label:o,h=this.id||"os-unnamed",p=`${h}__listbox`,f=`${h}__trigger`,v=this._open&&this._activeIndex>=0?`${h}__opt-${this._activeIndex}`:"";return a` | |
| 291 | + ${e?a`<label | |
| 292 | + class="os-select__label" | |
| 293 | + for=${f} | |
| 294 | + >${e}</label>`:a``} | |
| 295 | + <button | |
| 296 | + type="button" | |
| 297 | + class="os-select__trigger" | |
| 298 | + id=${f} | |
| 299 | + role="combobox" | |
| 300 | + aria-haspopup="listbox" | |
| 301 | + aria-expanded=${this._open?"true":"false"} | |
| 302 | + aria-controls=${p} | |
| 303 | + aria-label=${n} | |
| 304 | + aria-activedescendant=${v} | |
| 305 | + ?disabled=${s} | |
| 306 | + @click=${()=>this._toggle()} | |
| 307 | + @keydown=${u=>this._onTriggerKeydown(u)} | |
| 308 | + > | |
| 309 | + <span | |
| 310 | + class="os-select__value${c?"":" os-select__value--placeholder"}" | |
| 311 | + >${d}</span | |
| 205 | 312 | > |
| 206 | - ${s&&!t?i`<option value="" disabled selected> | |
| 207 | - ${s} | |
| 208 | - </option>`:i``} | |
| 209 | - ${c.map(h=>i` | |
| 210 | - <option | |
| 211 | - value=${h.value} | |
| 212 | - ?disabled=${h.disabled} | |
| 213 | - ?selected=${h.value===t} | |
| 313 | + ${Q("chevron-right",{size:16,rotate:90,className:"os-select__chevron"})} | |
| 314 | + </button> | |
| 315 | + <div | |
| 316 | + class="os-select__popup" | |
| 317 | + id=${p} | |
| 318 | + role="listbox" | |
| 319 | + popover="auto" | |
| 320 | + aria-label=${n} | |
| 321 | + @toggle=${u=>this._onPopoverToggle(u)} | |
| 322 | + > | |
| 323 | + ${l.map((u,m)=>a` | |
| 324 | + <div | |
| 325 | + class="os-select__option" | |
| 326 | + id=${`${h}__opt-${m}`} | |
| 327 | + role="option" | |
| 328 | + data-value=${u.value} | |
| 329 | + aria-selected=${u.value===t?"true":"false"} | |
| 330 | + aria-disabled=${u.disabled?"true":"false"} | |
| 331 | + ?data-active=${this._open&&m===this._activeIndex} | |
| 332 | + @click=${()=>this._onOptionClick(u)} | |
| 333 | + @pointermove=${()=>this._setActive(m)} | |
| 334 | + > | |
| 335 | + ${Q("check",{size:16,className:"os-select__check"})} | |
| 336 | + <span class="os-select__option-label" | |
| 337 | + >${u.label}</span | |
| 214 | 338 | > |
| 215 | - ${h.label} | |
| 216 | - </option> | |
| 217 | - `)} | |
| 218 | - </select> | |
| 219 | - <!-- | |
| 220 | - Inline SVG — the previous dashicons-classed span | |
| 221 | - never painted because the global Dashicons font | |
| 222 | - stylesheet cannot cross the shadow-root boundary. | |
| 223 | - An inline SVG lives inside the shadow tree, inherits | |
| 224 | - currentColor via the stroke attribute, and needs | |
| 225 | - no external CSS. | |
| 226 | - --> | |
| 227 | - <svg | |
| 228 | - class="wpd-select__chevron" | |
| 229 | - viewBox="0 0 12 12" | |
| 230 | - width="12" | |
| 231 | - height="12" | |
| 232 | - aria-hidden="true" | |
| 233 | - focusable="false" | |
| 234 | - > | |
| 235 | - <path | |
| 236 | - d="M3 5l3 3 3-3" | |
| 237 | - stroke="currentColor" | |
| 238 | - stroke-width="1.4" | |
| 239 | - stroke-linecap="round" | |
| 240 | - stroke-linejoin="round" | |
| 241 | - fill="none" | |
| 242 | - ></path> | |
| 243 | - </svg> | |
| 244 | - </span> | |
| 245 | - `}_readOptions(){const e=[],t=this.querySelectorAll(":scope > wpd-option");for(const s of Array.from(t)){const n=s.getAttribute("value");n!==null&&e.push({value:n,label:(s.textContent||n).trim(),disabled:s.hasAttribute("disabled")})}return e}_onChange(e){const s=e.target.value;this.value=s,this.emit("wpd-pick",{value:s})}};q.props=["value","label","placeholder","disabled","name"],q.styles=[nt],q.help={title:"Select",summary:"Dropdown picker that wraps a native <select>. Mirrors the <wpd-segmented> contract (set value, listen for wpd-pick) so callers can swap tag names when a list outgrows a pill bar.",status:"stable",since:"0.11.0",props:[{name:"value",type:"string",description:"Currently selected option value."},{name:"label",type:"string",description:"Visible label rendered above the select and forwarded to the native control as aria-label."},{name:"placeholder",type:"string",description:"Disabled leading option shown when no value is set."},{name:"disabled",type:"boolean attribute",description:"Disables the native select and dims the chrome."},{name:"name",type:"string",description:"Forwarded to the native <select name=…> for form submission."}],slots:[{name:"(default)",description:'<wpd-option value="…"> children.'}],events:[{name:"wpd-pick",description:"Fires when the user picks a new option.",detail:"{ value: string }"}],cssProps:[{name:"--desktop-mode-text",description:"Label + value colour."},{name:"--desktop-mode-muted",description:"Placeholder + chevron colour."}],example:i` | |
| 246 | - <wpd-select value="eur" label="Currency"> | |
| 247 | - <wpd-option value="eur">Euro</wpd-option> | |
| 248 | - <wpd-option value="usd">US Dollar</wpd-option> | |
| 249 | - <wpd-option value="jpy">Japanese Yen</wpd-option> | |
| 250 | - </wpd-select> | |
| 251 | - `};let pe=q;w("wpd-select",pe)})(); | |
| 339 | + </div> | |
| 340 | + `)} | |
| 341 | + </div> | |
| 342 | + `}_readOptions(){const e=[],t=this.querySelectorAll(":scope > os-option");for(const o of Array.from(t)){const s=o.getAttribute("value");s!==null&&e.push({value:s,label:(o.textContent||s).trim(),disabled:o.hasAttribute("disabled")})}return e}_popup(){return this.shadowRoot?.querySelector(".os-select__popup")??null}_trigger(){return this.shadowRoot?.querySelector(".os-select__trigger")??null}_toggle(){if(this._open){this._hide();return}performance.now()-this._dismissedAt<250||this._show()}_show(){const e=this._popup(),t=this._trigger();if(!e||!t||this._open)return;this._open=!0;const o=this._readOptions(),s=this.value,r=o.findIndex(l=>l.value===s&&!l.disabled);this._activeIndex=r>=0?r:o.findIndex(l=>!l.disabled);const n=t.getBoundingClientRect();e.style.minWidth=`${n.width}px`,typeof e.showPopover=="function"?(e.style.left=`${n.left}px`,e.style.top=`${n.bottom+4}px`,e.showPopover(),n.bottom+4+e.offsetHeight>window.innerHeight-8&&(e.style.top=`${Math.max(8,n.top-4-e.offsetHeight)}px`)):e.setAttribute("data-open",""),window.addEventListener("scroll",this._onWindowScroll,{capture:!0,passive:!0}),window.addEventListener("resize",this._onWindowResize),this.requestUpdate(),this._scrollActiveIntoView()}_hide(){if(!this._open)return;this._open=!1;const e=this._popup();if(e){if(typeof e.hidePopover=="function")try{e.hidePopover()}catch{}e.removeAttribute("data-open")}this._teardownDismiss(),this.requestUpdate()}_teardownDismiss(){window.removeEventListener("scroll",this._onWindowScroll,{capture:!0}),window.removeEventListener("resize",this._onWindowResize)}_onPopoverToggle(e){e.newState==="closed"&&this._open&&(this._dismissedAt=performance.now(),this._open=!1,this._teardownDismiss(),this.requestUpdate())}_onOptionClick(e){e.disabled||this._commit(e.value)}_commit(e){this._hide(),this.value=e,this.emit("os-pick",{value:e})}_setActive(e){if(e===this._activeIndex)return;const t=this._readOptions();!t[e]||t[e].disabled||(this._activeIndex=e,this.requestUpdate())}_moveActive(e){const t=this._readOptions();let o=this._activeIndex;for(let s=0;s<t.length&&(o=Math.min(Math.max(o+e,0),t.length-1),!(!t[o]?.disabled||o===0||o===t.length-1));s++);o!==this._activeIndex&&t[o]&&!t[o].disabled&&(this._activeIndex=o,this.requestUpdate(),this._scrollActiveIntoView())}_scrollActiveIntoView(){queueMicrotask(()=>{this.shadowRoot?.querySelector(".os-select__option[data-active]")?.scrollIntoView?.({block:"nearest"})})}_typeAhead(e){this._typedTimer&&clearTimeout(this._typedTimer),this._typed+=e.toLowerCase(),this._typedTimer=setTimeout(()=>{this._typed=""},500);const o=this._readOptions().findIndex(s=>!s.disabled&&s.label.toLowerCase().startsWith(this._typed));o>=0&&(this._activeIndex=o,this.requestUpdate(),this._scrollActiveIntoView())}_onTriggerKeydown(e){const t=this._readOptions();if(t.length!==0){if(!this._open){if(["ArrowDown","ArrowUp","Enter"," ","Home","End"].includes(e.key)){if(e.preventDefault(),this._show(),e.key==="Home"&&(this._activeIndex=t.findIndex(o=>!o.disabled)),e.key==="End"){for(let o=t.length-1;o>=0;o--)if(!t[o].disabled){this._activeIndex=o;break}}this.requestUpdate()}else e.key.length===1&&e.key.trim()!==""&&(this._show(),this._typeAhead(e.key));return}switch(e.key){case"ArrowDown":e.preventDefault(),this._moveActive(1);break;case"ArrowUp":e.preventDefault(),this._moveActive(-1);break;case"Home":e.preventDefault(),this._activeIndex=t.findIndex(o=>!o.disabled),this.requestUpdate(),this._scrollActiveIntoView();break;case"End":e.preventDefault();for(let o=t.length-1;o>=0;o--)if(!t[o].disabled){this._activeIndex=o,this.requestUpdate(),this._scrollActiveIntoView();break}break;case"Enter":case" ":{e.preventDefault();const o=t[this._activeIndex];o&&!o.disabled&&this._commit(o.value);break}case"Tab":{const o=t[this._activeIndex];o&&!o.disabled?this._commit(o.value):this._hide();break}case"Escape":e.preventDefault(),this._hide();break;default:e.key.length===1&&e.key.trim()!==""&&this._typeAhead(e.key)}}}};B.props=["value","label","placeholder","disabled","name"],B.styles=[Tt],B.help={title:"Select",summary:"Dropdown picker: a combobox trigger plus a custom top-layer listbox, so the popup wears the station instead of the operating system. Mirrors the <os-segmented> contract (set value, listen for os-pick).",status:"stable",props:[{name:"value",type:"string",description:"Currently selected option value."},{name:"label",type:"string",description:"Visible label rendered above the trigger and used as the accessible name."},{name:"placeholder",type:"string",description:"Trigger text shown when no value is set."},{name:"disabled",type:"boolean attribute",description:"Disables the trigger and dims the chrome."},{name:"plain",type:"boolean attribute",description:"Drops the field chrome and shrinks to the value, for a picker that is a list row’s trailing control rather than a field of its own. The container already draws the box; use with no `label`."},{name:"name",type:"string",description:"Accepted for compatibility. Shadow-DOM controls never participated in light-DOM form submission, so nothing is lost by the native select being gone; read `value` off the host instead."}],slots:[{name:"(default)",description:'<os-option value="…"> children.'}],events:[{name:"os-pick",description:"Fires when the user picks a new option.",detail:"{ value: string }"}],cssProps:[{name:"--os-ui-fg",description:"Label + value colour."},{name:"--os-ui-fg-muted",description:"Placeholder + chevron colour."},{name:"--os-ui-accent",description:"Active option row + selected check."}],example:a` | |
| 343 | + <os-select value="eur" label="Currency"> | |
| 344 | + <os-option value="eur">Euro</os-option> | |
| 345 | + <os-option value="usd">US Dollar</os-option> | |
| 346 | + <os-option value="jpy">Japanese Yen</os-option> | |
| 347 | + </os-select> | |
| 348 | + `};let fe=B;w("os-select",fe),window.openStationShellOverlays=!0})(); | |
