| @@ -176,14 +176,14 @@ | ||
| 176 | 176 | > |
| 177 | 177 | <span class="os-switch__knob"></span> |
| 178 | 178 | </button> |
| 179 | 179 | </div> |
| 180 | - `}_onPointerDown(e){if(this._attr("disabled")!==null)return;const t=e.currentTarget;this._pointerId=e.pointerId,this._startX=e.clientX,this._moved=!1,this._dir=getComputedStyle(this).direction==="rtl"?-1:1,this.style.setProperty("--_dir",String(this._dir)),this._travel=Math.max(0,t.clientWidth-t.clientHeight),t.setPointerCapture(e.pointerId)}_onPointerMove(e){if(this._pointerId!==e.pointerId||this._travel===0)return;const t=(e.clientX-this._startX)*this._dir;if(!this._moved&&Math.abs(t)>=Ft&&(this._moved=!0,this.setAttribute("data-dragging","")),!this._moved)return;const o=this._attr("checked")!==null,i=o?-this._travel:0,n=o?0:this._travel;this.style.setProperty("--_drag",`${Math.min(n,Math.max(i,t))}px`)}_onPointerUp(e){if(this._pointerId!==e.pointerId)return;const t=this._moved,o=(e.clientX-this._startX)*this._dir;if(this._swallowClick=t,this._endGesture(),!t)return;const i=this._attr("checked")!==null,r=(i?this._travel:0)+o>this._travel/2;r!==i&&this._commit(r)}_endGesture(){this._pointerId=null,this._moved=!1,this.removeAttribute("data-dragging"),this.style.removeProperty("--_drag")}_onClick(){if(this._swallowClick){this._swallowClick=!1;return}this._attr("disabled")===null&&this._commit(this._attr("checked")===null)}_onKeyDown(e){this._attr("disabled")===null&&(e.key==="ArrowRight"||e.key==="End"?(e.preventDefault(),this._attr("checked")===null&&this._commit(!0)):(e.key==="ArrowLeft"||e.key==="Home")&&(e.preventDefault(),this._attr("checked")!==null&&this._commit(!1)))}_commit(e){e?this.setAttribute("checked",""):this.removeAttribute("checked");const t={checked:e,value:this._attr("value")};this.emit("os-switch-change",t),this.emit("os-checkbox-change",t)}_attr(e){return this[e]??null}};ne.props=["name","checked","value","label","description","disabled","size","tone","block","labelPosition"],ne.styles=[Ot],ne.help=void 0;let Ie=ne;D("os-switch",Ie);const Xt=z`:host{display:block;counter-reset:os-step}:host( [ hidden ] ){display:none}.os-steps__list{display:flex;flex-direction:column;gap:var( --os-ui-steps-gap,16px );margin:0;padding:0;list-style:none}:host( [ horizontal ] ){--os-ui-step-connector-width:20px;--os-ui-step-title-color:var( --os-ui-fg-muted,#646970 );--os-ui-step-title-weight:400}:host( [ horizontal ] ) .os-steps__list{flex-direction:row;align-items:center;flex-wrap:wrap;gap:var( --os-ui-steps-gap,10px )}`,Yt=z`:host{display:grid;grid-template-columns:var( --os-ui-step-chip-size,28px ) 1fr var( --os-ui-step-connector-width,0 );column-gap:var( --os-ui-step-gap,12px );align-items:start;counter-increment:os-step}:host( [ hidden ] ){display:none}:host::before{content:counter( os-step );display:inline-flex;align-items:center;justify-content:center;width:var( --os-ui-step-chip-size,28px );height:var( --os-ui-step-chip-size,28px );box-sizing:border-box;border-radius:50%;background:var( --os-ui-step-chip-bg,var( --wp-admin-theme-color,#2271b1 ) );background-size:200% 200%;background-position:30% 40%;color:var( --os-ui-step-chip-fg,var( --os-ui-fg-on-accent,#fff ) );border:var( --os-ui-step-chip-border,0 );font-family:var( --os-ui-step-chip-family,inherit );font-size:var( --os-ui-step-chip-font-size,13px );font-weight:600;line-height:1;flex-shrink:0}:host( [ done ] )::before{content:'✓';background:var( --os-ui-step-chip-done-bg,var( --os-ui-fg-muted,#646970 ) )}:host( [ current ] ) .os-step__title{color:var( --os-ui-fg,#1d2327 );font-weight:600}:host( [ interactive ] ){cursor:pointer}:host( [ interactive ]:focus-visible ){outline:var( --os-ui-focus-ring,2px solid #2271b1 );outline-offset:2px;border-radius:var( --os-ui-radius,4px )}:host::after{content:'';inline-size:var( --os-ui-step-connector-width,0 );block-size:1px;background:var( --os-ui-border,rgba( 0,0,0,0.08 ) );align-self:center}:host(:last-of-type )::after{content:none}.os-step__body{min-width:0}:host( [ trail ] ){align-items:center}:host( [ trail ] ) .os-step__title{margin:0}.os-step__title{margin:0 0 4px;font-family:var( --os-ui-step-title-family,inherit );font-size:var( --os-ui-step-title-size,14px );font-weight:var( --os-ui-step-title-weight,600 );color:var( --os-ui-step-title-color,var( --os-ui-fg,#1d2327 ) );text-transform:var( --os-ui-step-title-transform,none );letter-spacing:var( --os-ui-step-title-spacing,normal );line-height:1.3}.os-step__title:empty{display:none}.os-step__body::slotted( * ){margin-block:0}`,re=class re extends R{constructor(){super(...arguments),this.syncTrail=()=>{const e=this.hasAttribute("horizontal");for(const t of Array.from(this.children))t.tagName==="OS-STEP"&&t.toggleAttribute("trail",e)}}connectedCallback(){super.connectedCallback(),this.syncTrail()}render(){return this.syncTrail(),g`<ol class="os-steps__list"><slot @slotchange=${this.syncTrail}></slot></ol>`}};re.props=["horizontal"],re.styles=[Xt],re.help=void 0;let Me=re;D("os-steps",Me);const ae=class ae extends R{constructor(){super(...arguments),this.onClick=e=>{if(!this.isInteractive())return;const t=e.composedPath();for(const o of t){if(o===this)break;if(o instanceof HTMLElement&&o.hasAttribute("data-noclick"))return}this.dispatchEvent(new CustomEvent("os-step-click",{bubbles:!0,composed:!0}))},this.onKeyDown=e=>{if(!this.isInteractive()||e.key!=="Enter"&&e.key!==" ")return;const t=e.target;t instanceof HTMLElement&&t!==this&&t.closest("button, a, input, select, textarea")||(e.preventDefault(),this.onClick(e))}}isInteractive(){return this.hasAttribute("interactive")}syncRoles(){this.hasAttribute("current")?this.setAttribute("aria-current","step"):this.removeAttribute("aria-current"),this.isInteractive()?(this.setAttribute("role","button"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0")):(this.removeAttribute("role"),this.removeAttribute("tabindex"))}connectedCallback(){super.connectedCallback(),this.syncRoles(),this.addEventListener("click",this.onClick),this.addEventListener("keydown",this.onKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.onClick),this.removeEventListener("keydown",this.onKeyDown)}render(){const e=this.title||"";return this.syncRoles(),g` | |
| 180 | + `}_onPointerDown(e){if(this._attr("disabled")!==null)return;const t=e.currentTarget;this._pointerId=e.pointerId,this._startX=e.clientX,this._moved=!1,this._dir=getComputedStyle(this).direction==="rtl"?-1:1,this.style.setProperty("--_dir",String(this._dir)),this._travel=Math.max(0,t.clientWidth-t.clientHeight),t.setPointerCapture(e.pointerId)}_onPointerMove(e){if(this._pointerId!==e.pointerId||this._travel===0)return;const t=(e.clientX-this._startX)*this._dir;if(!this._moved&&Math.abs(t)>=Ft&&(this._moved=!0,this.setAttribute("data-dragging","")),!this._moved)return;const o=this._attr("checked")!==null,i=o?-this._travel:0,n=o?0:this._travel;this.style.setProperty("--_drag",`${Math.min(n,Math.max(i,t))}px`)}_onPointerUp(e){if(this._pointerId!==e.pointerId)return;const t=this._moved,o=(e.clientX-this._startX)*this._dir;if(this._swallowClick=t,this._endGesture(),!t)return;const i=this._attr("checked")!==null,r=(i?this._travel:0)+o>this._travel/2;r!==i&&this._commit(r)}_endGesture(){this._pointerId=null,this._moved=!1,this.removeAttribute("data-dragging"),this.style.removeProperty("--_drag")}_onClick(){if(this._swallowClick){this._swallowClick=!1;return}this._attr("disabled")===null&&this._commit(this._attr("checked")===null)}_onKeyDown(e){this._attr("disabled")===null&&(e.key==="ArrowRight"||e.key==="End"?(e.preventDefault(),this._attr("checked")===null&&this._commit(!0)):(e.key==="ArrowLeft"||e.key==="Home")&&(e.preventDefault(),this._attr("checked")!==null&&this._commit(!1)))}_commit(e){e?this.setAttribute("checked",""):this.removeAttribute("checked");const t={checked:e,value:this._attr("value")};this.emit("os-switch-change",t),this.emit("os-checkbox-change",t)}_attr(e){return this[e]??null}};ne.props=["name","checked","value","label","description","disabled","size","tone","block","labelPosition"],ne.styles=[Ot],ne.help=void 0;let Ie=ne;D("os-switch",Ie);const Xt=z`:host{display:block;counter-reset:os-step}:host( [ hidden ] ){display:none}.os-steps__list{display:flex;flex-direction:column;gap:var( --os-ui-steps-gap,16px );margin:0;padding:0;list-style:none}:host( [ horizontal ] ){--os-ui-step-connector-width:20px;--os-ui-step-title-color:var( --os-ui-fg-muted,#646970 );--os-ui-step-title-weight:400}:host( [ horizontal ] ) .os-steps__list{flex-direction:row;align-items:center;flex-wrap:wrap;gap:var( --os-ui-steps-gap,10px )}`,Yt=z`:host{display:grid;grid-template-columns:var( --os-ui-step-chip-size,28px ) 1fr var( --os-ui-step-connector-width,0 );column-gap:var( --os-ui-step-gap,12px );align-items:start;counter-increment:os-step}:host( [ hidden ] ){display:none}:host::before{content:counter( os-step );display:inline-flex;align-items:center;justify-content:center;width:var( --os-ui-step-chip-size,28px );height:var( --os-ui-step-chip-size,28px );box-sizing:border-box;border-radius:50%;background:var( --os-ui-step-chip-bg,var( --wp-admin-theme-color,#2271b1 ) );background-size:200% 200%;background-position:30% 40%;color:var( --os-ui-step-chip-fg,var( --os-ui-fg-on-accent,#fff ) );border:var( --os-ui-step-chip-border,0 );font-family:var( --os-ui-step-chip-family,inherit );font-size:var( --os-ui-step-chip-font-size,13px );font-weight:600;line-height:1;flex-shrink:0}:host( [ done ] )::before{content:'✓';background:var( --os-ui-step-chip-done-bg,var( --os-ui-fg-muted,#646970 ) )}:host( [ current ] ) .os-step__title{color:var( --os-ui-fg,#1d2327 );font-weight:600}:host( [ interactive ] ){cursor:pointer}:host( [ interactive ] ) .os-step__title{transition:color 120ms ease}:host( [ interactive ] )::before{transition:border-color 120ms ease}:host( [ interactive ]:hover ) .os-step__title{color:var( --os-ui-step-title-hover-color,var( --os-ui-fg,#1d2327 ) )}:host( [ interactive ]:hover )::before{border-color:var( --os-ui-step-title-hover-color,var( --os-ui-fg,#1d2327 ) )}:host( [ interactive ]:focus-visible ){outline:var( --os-ui-focus-ring,2px solid #2271b1 );outline-offset:2px;border-radius:var( --os-ui-radius,4px )}:host::after{content:'';inline-size:var( --os-ui-step-connector-width,0 );block-size:1px;background:var( --os-ui-border,rgba( 0,0,0,0.08 ) );align-self:center}:host(:last-of-type )::after{content:none}.os-step__body{min-width:0}:host( [ trail ] ){align-items:center}:host( [ trail ] ) .os-step__title{margin:0}.os-step__title{margin:0 0 4px;font-family:var( --os-ui-step-title-family,inherit );font-size:var( --os-ui-step-title-size,14px );font-weight:var( --os-ui-step-title-weight,600 );color:var( --os-ui-step-title-color,var( --os-ui-fg,#1d2327 ) );text-transform:var( --os-ui-step-title-transform,none );letter-spacing:var( --os-ui-step-title-spacing,normal );line-height:1.3}.os-step__title:empty{display:none}.os-step__body::slotted( * ){margin-block:0}`,re=class re extends R{constructor(){super(...arguments),this.syncTrail=()=>{const e=this.hasAttribute("horizontal");for(const t of Array.from(this.children))t.tagName==="OS-STEP"&&t.toggleAttribute("trail",e)}}connectedCallback(){super.connectedCallback(),this.syncTrail()}render(){return this.syncTrail(),g`<ol class="os-steps__list"><slot @slotchange=${this.syncTrail}></slot></ol>`}};re.props=["horizontal"],re.styles=[Xt],re.help=void 0;let Me=re;D("os-steps",Me);const ae=class ae extends R{constructor(){super(...arguments),this.onClick=e=>{if(!this.isInteractive())return;const t=e.composedPath();for(const o of t){if(o===this)break;if(o instanceof HTMLElement&&o.hasAttribute("data-noclick"))return}this.dispatchEvent(new CustomEvent("os-step-click",{bubbles:!0,composed:!0}))},this.onKeyDown=e=>{if(!this.isInteractive()||e.key!=="Enter"&&e.key!==" ")return;const t=e.target;t instanceof HTMLElement&&t!==this&&t.closest("button, a, input, select, textarea")||(e.preventDefault(),this.onClick(e))}}isInteractive(){return this.hasAttribute("interactive")}syncRoles(){this.hasAttribute("current")?this.setAttribute("aria-current","step"):this.removeAttribute("aria-current"),this.isInteractive()?(this.setAttribute("role","button"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0")):(this.removeAttribute("role"),this.removeAttribute("tabindex"))}connectedCallback(){super.connectedCallback(),this.syncRoles(),this.addEventListener("click",this.onClick),this.addEventListener("keydown",this.onKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.onClick),this.removeEventListener("keydown",this.onKeyDown)}render(){const e=this.title||"";return this.syncRoles(),g` | |
| 181 | 181 | <div class="os-step__body"> |
| 182 | 182 | <div class="os-step__title">${e}</div> |
| 183 | 183 | <slot></slot> |
| 184 | 184 | </div> |
| 185 | - `}};ae.props=["title","done","current","interactive"],ae.styles=[Yt],ae.help={title:"Step",summary:"A single numbered step inside <os-steps>. Renders an auto-numbered chip and an optional bold title above the slotted body.",status:"stable",props:[{name:"title",type:"string",description:"Optional bold title rendered above the body."},{name:"done",type:"boolean",description:"When present, the chip shows a ✓ in a muted colour instead of the number."},{name:"current",type:"boolean",description:'Marks the step the reader is on. Mirrors aria-current="step" onto the host.'},{name:"interactive",type:"boolean",description:"Makes the step a jump target: focusable, activated by click or Enter/Space, and emits os-step-click."}],events:[{name:"os-step-click",detail:"none",description:"Fired when an interactive step is activated by pointer or keyboard."}],slots:[{name:"(default)",description:"Step body content."}],cssProps:[{name:"--os-ui-step-gap",default:"12px"},{name:"--os-ui-step-chip-size",default:"28px"},{name:"--os-ui-step-chip-bg",default:"var(--wp-admin-theme-color)"},{name:"--os-ui-step-chip-fg",default:"#fff"},{name:"--os-ui-step-chip-done-bg",default:"var(--os-ui-fg-muted)"},{name:"--os-ui-step-chip-font-size",default:"13px"}],example:g` | |
| 185 | + `}};ae.props=["title","done","current","interactive"],ae.styles=[Yt],ae.help={title:"Step",summary:"A single numbered step inside <os-steps>. Renders an auto-numbered chip and an optional bold title above the slotted body.",status:"stable",props:[{name:"title",type:"string",description:"Optional bold title rendered above the body."},{name:"done",type:"boolean",description:"When present, the chip shows a ✓ in a muted colour instead of the number."},{name:"current",type:"boolean",description:'Marks the step the reader is on. Mirrors aria-current="step" onto the host.'},{name:"interactive",type:"boolean",description:"Makes the step a jump target: focusable, activated by click or Enter/Space, and emits os-step-click. Lifts the title to full contrast on hover."}],events:[{name:"os-step-click",detail:"none",description:"Fired when an interactive step is activated by pointer or keyboard."}],slots:[{name:"(default)",description:"Step body content."}],cssProps:[{name:"--os-ui-step-gap",default:"12px"},{name:"--os-ui-step-chip-size",default:"28px"},{name:"--os-ui-step-chip-bg",default:"var(--wp-admin-theme-color)"},{name:"--os-ui-step-chip-fg",default:"#fff"},{name:"--os-ui-step-chip-done-bg",default:"var(--os-ui-fg-muted)"},{name:"--os-ui-step-chip-font-size",default:"13px"},{name:"--os-ui-step-title-hover-color",default:"var(--os-ui-fg)",description:"Ink an interactive step takes on hover, on its title and on an outlined chip."}],example:g` | |
| 186 | 186 | <os-steps> |
| 187 | 187 | <os-step title="Configure">Open OpenStation Preferences → AI.</os-step> |
| 188 | 188 | <os-step title="Connect" done>Key confirmed.</os-step> |
| 189 | 189 | </os-steps> |
