@livx.cc/bare-v3 0.1.0-alpha.146 → 0.1.0-alpha.147

package/dist/components/audio-player.js

@@ -1,5 +1,5 @@
 var E=typeof HTMLElement==="function"?HTMLElement:class{};function g(e,n){if(typeof customElements>"u"||customElements.get?.(e))return;try{customElements.define(e,n)}catch(r){console.warn(`bare-v3: ${e} was not registered`,r)}}class m extends E{#e=null;#n=null;#t=null;target(){return this}connectedCallback(){let e=this.ownerDocument;if(e.readyState==="loading"){e.addEventListener("DOMContentLoaded",()=>{if(this.isConnected)this.#r()},{once:!0});return}this.#r()}disconnectedCallback(){this.#a(),this.#t?.disconnect(),this.#t=null}#r(){if(this.#e)return;let e=this.target();if(e!==this&&!this.#t)this.#t=new MutationObserver(()=>{if(this.target()!==this.#n)this.#a(),this.#r()}),this.#t.observe(this,{childList:!0});if(!e)return;this.#e=new AbortController,this.#n=e,this.mount(e,this.#e.signal)}#a(){this.#e?.abort(),this.#e=null,this.#n=null}}var T=Symbol.for("bare-v3.styles");function v(e,n,r){if(!e?.head||e.getElementById(n))return;let s=e[T]??=new Set;if(s.has(n))return;let a=e.defaultView;if(a&&"adoptedStyleSheets"in e&&"replaceSync"in a.CSSStyleSheet.prototype){let i=new a.CSSStyleSheet;i.replaceSync(r),e.adoptedStyleSheets=[...e.adoptedStyleSheets,i],s.add(n);return}let o=e.createElement("style");o.id=n,o.textContent=r,e.head.append(o)}function p(e){if(!Number.isFinite(e)||e<0)return"--:--";let n=Math.floor(e),r=Math.floor(n/3600),s=Math.floor(n/60)%60,a=(o)=>String(o).padStart(2,"0");return r?`${r}:${a(s)}:${a(n%60)}`:`${s}:${a(n%60)}`}var w="b3-audio-player-style",M=`
-b3-audio-player{container-type:inline-size;display:flex;align-items:center;gap:.25rem;min-inline-size:0;font-variant-numeric:tabular-nums;}
+b3-audio-player{container-type:inline-size;inline-size:100%;display:flex;align-items:center;gap:.25rem;min-inline-size:0;font-variant-numeric:tabular-nums;}
 b3-audio-player > audio{display:none;}
 b3-audio-player:not(:defined) > audio{display:block;inline-size:100%;}
 b3-audio-player button{flex:none;display:inline-flex;align-items:center;justify-content:center;
@@ -10,5 +10,6 @@ b3-audio-player button:focus-visible,b3-audio-player input:focus-visible{outline
 b3-audio-player svg{inline-size:1.25rem;block-size:1.25rem;fill:currentColor;}
 b3-audio-player [data-b3-part="time"]{flex:none;font-size:.8125em;color:var(--b3-color-muted,#5d6b60);white-space:nowrap;}
 b3-audio-player input[type=range]{flex:1;min-inline-size:3rem;margin:0;accent-color:var(--b3-color-accent,#276bdd);cursor:pointer;}
-@container (max-width:22rem){[data-b3-part="rate"],[data-b3-part="back"],[data-b3-part="fwd"]{display:none;}}
-`,f={play:'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>',pause:'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 5h4v14H7zm6 0h4v14h-4z"/></svg>'},h=[1,1.25,1.5,2,0.75];class S extends m{get skip(){return Number(this.getAttribute("skip"))||15}target(){return this.querySelector(":scope > audio")}mount(e,n){v(this.ownerDocument,w,M);for(let t of this.querySelectorAll(":scope > [data-b3-part]"))t.remove();let r=this.skip,s=`<button type="button" data-b3-part="back" aria-label="Back ${r} seconds">−${r}</button><button type="button" data-b3-part="play" aria-label="Play">${f.play}</button><button type="button" data-b3-part="fwd" aria-label="Forward ${r} seconds">+${r}</button><input type="range" data-b3-part="seek" min="0" max="0" step="0.1" value="0" aria-label="Seek"><span data-b3-part="time"></span>`+'<button type="button" data-b3-part="rate" aria-label="Playback speed">1×</button>';e.insertAdjacentHTML("afterend",s);let a=(t)=>this.querySelector(`:scope > [data-b3-part="${t}"]`),o=a("play"),i=a("seek"),k=a("time"),y=a("rate"),u=!1,d=()=>{let{duration:t,currentTime:c}=e;if(Number.isFinite(t))i.max=String(t);if(!u)i.value=String(c);i.setAttribute("aria-valuetext",`${p(c)} of ${p(t)}`),k.textContent=`${p(u?Number(i.value):c)} / ${p(t)}`,o.innerHTML=e.paused?f.play:f.pause,o.setAttribute("aria-label",e.paused?"Play":"Pause"),y.textContent=`${e.playbackRate}×`},l=(t,c,x)=>t.addEventListener(c,x,{signal:n});for(let t of["timeupdate","durationchange","loadedmetadata","play","pause","ended","ratechange","emptied","seeked"])l(e,t,d);let b=(t)=>{e.currentTime=Math.max(0,Math.min(t,Number.isFinite(e.duration)?e.duration:t))};l(o,"click",()=>{if(e.paused)e.play().catch((t)=>this.dispatchEvent(new CustomEvent("b3-error",{detail:t,bubbles:!0})));else e.pause()}),l(a("back"),"click",()=>b(e.currentTime-r)),l(a("fwd"),"click",()=>b(e.currentTime+r)),l(y,"click",()=>{e.playbackRate=h[(h.indexOf(e.playbackRate)+1)%h.length]}),l(i,"input",()=>{u=!0,d()}),l(i,"change",()=>{u=!1,b(Number(i.value))}),n.addEventListener("abort",()=>{for(let t of this.querySelectorAll(":scope > [data-b3-part]"))t.remove()},{once:!0}),d()}}g("b3-audio-player",S);export{S as B3AudioPlayer,p as clock};
+@container (max-width:22rem){[data-b3-part="rate"]{display:none;} b3-audio-player button{min-inline-size:2.25rem;}}
+@container (max-width:14rem){[data-b3-part="back"],[data-b3-part="fwd"]{display:none;}}
+`,f={play:'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>',pause:'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 5h4v14H7zm6 0h4v14h-4z"/></svg>'},y=[1,1.25,1.5,2,0.75];class S extends m{get skip(){return Number(this.getAttribute("skip"))||15}target(){return this.querySelector(":scope > audio")}mount(e,n){v(this.ownerDocument,w,M);for(let t of this.querySelectorAll(":scope > [data-b3-part]"))t.remove();let r=this.skip,s=`<button type="button" data-b3-part="back" aria-label="Back ${r} seconds">−${r}</button><button type="button" data-b3-part="play" aria-label="Play">${f.play}</button><button type="button" data-b3-part="fwd" aria-label="Forward ${r} seconds">+${r}</button><input type="range" data-b3-part="seek" min="0" max="0" step="0.1" value="0" aria-label="Seek"><span data-b3-part="time"></span>`+'<button type="button" data-b3-part="rate" aria-label="Playback speed">1×</button>';e.insertAdjacentHTML("afterend",s);let a=(t)=>this.querySelector(`:scope > [data-b3-part="${t}"]`),o=a("play"),i=a("seek"),k=a("time"),h=a("rate"),u=!1,d=()=>{let{duration:t,currentTime:c}=e;if(Number.isFinite(t))i.max=String(t);if(!u)i.value=String(c);i.setAttribute("aria-valuetext",`${p(c)} of ${p(t)}`),k.textContent=`${p(u?Number(i.value):c)} / ${p(t)}`,o.innerHTML=e.paused?f.play:f.pause,o.setAttribute("aria-label",e.paused?"Play":"Pause"),h.textContent=`${e.playbackRate}×`},l=(t,c,x)=>t.addEventListener(c,x,{signal:n});for(let t of["timeupdate","durationchange","loadedmetadata","play","pause","ended","ratechange","emptied","seeked"])l(e,t,d);let b=(t)=>{e.currentTime=Math.max(0,Math.min(t,Number.isFinite(e.duration)?e.duration:t))};l(o,"click",()=>{if(e.paused)e.play().catch((t)=>this.dispatchEvent(new CustomEvent("b3-error",{detail:t,bubbles:!0})));else e.pause()}),l(a("back"),"click",()=>b(e.currentTime-r)),l(a("fwd"),"click",()=>b(e.currentTime+r)),l(h,"click",()=>{e.playbackRate=y[(y.indexOf(e.playbackRate)+1)%y.length]}),l(i,"input",()=>{u=!0,d()}),l(i,"change",()=>{u=!1,b(Number(i.value))}),n.addEventListener("abort",()=>{for(let t of this.querySelectorAll(":scope > [data-b3-part]"))t.remove()},{once:!0}),d()}}g("b3-audio-player",S);export{S as B3AudioPlayer,p as clock};

package/dist/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0-alpha.146",
+  "version": "0.1.0-alpha.147",
   "cssSha256": "a1e97a6aa21ed495e8de168d029455630332805d056b112c8e40fe7127611142",
   "classes": [
     "b3-accordion",

package/dist/references/audio-player.md

@@ -17,10 +17,14 @@ Always author the `<audio>` yourself: it is the degraded experience and stays th
 Set `audio.src`, `audio.currentTime`, call `audio.play()` from your code — the controls follow.
 A replaced `<audio>` child is re-mounted.
 
+The element is a size container (it fills its line; the controls fold by its own width). As a
+grid item, give the track a size (`grid-template-columns: minmax(0, 1fr)`): an `auto` track
+sizes a container to zero.
+
 | Attribute | Meaning |
 | --- | --- |
 | `skip` | Seconds the back/forward buttons move (default 15). |
 
-Events: `b3-error` (bubbles) when `play()` is refused. Under ~22rem wide the skip and speed buttons
-hide; play, seek and time stay. `clock(seconds)` (m:ss / h:mm:ss) is exported for matching
+Events: `b3-error` (bubbles) when `play()` is refused. Narrow (a phone bar) drops speed under ~22rem
+and skip under ~14rem; play, seek and time always stay. `clock(seconds)` (m:ss / h:mm:ss) is exported for matching
 timestamps elsewhere on the page.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livx.cc/bare-v3",
-  "version": "0.1.0-alpha.146",
+  "version": "0.1.0-alpha.147",
   "type": "module",
   "thirdPartyNotices": "./dist/third-party.json",
   "files": [