@simai-studio/ui 5.20261019.2041 → 5.20261020.1647

package/distr/rule/rule.json

@@ -601,6 +601,12 @@
     "css": true,
     "js": true,
     "regex": "/class\\s*=\\s*[\"'][^\"']*\\bsf-button\\b/i",
+    "relation": [
+      {
+        "lazy": true,
+        "name": "spinner"
+      }
+    ],
     "type": "component"
   },
   {
@@ -731,6 +737,10 @@
       },
       {
         "name": "cl-icons"
+      },
+      {
+        "lazy": true,
+        "name": "spinner"
       }
     ],
     "tags": [
@@ -754,6 +764,10 @@
       },
       {
         "name": "cl-icons"
+      },
+      {
+        "lazy": true,
+        "name": "spinner"
       }
     ],
     "tags": [
@@ -1097,6 +1111,10 @@
       },
       {
         "name": "pointer-events/default"
+      },
+      {
+        "lazy": true,
+        "name": "spinner"
       }
     ],
     "tags": [
@@ -1183,6 +1201,10 @@
       },
       {
         "name": "icon-buttons"
+      },
+      {
+        "lazy": true,
+        "name": "spinner"
       }
     ],
     "tags": [
@@ -2787,6 +2809,12 @@
     "css": true,
     "js": true,
     "regex": "/class\\s*=\\s*[\"'][^\"']*\\bsf-icon-button\\b/i",
+    "relation": [
+      {
+        "lazy": true,
+        "name": "spinner"
+      }
+    ],
     "type": "component"
   },
   {
@@ -3214,6 +3242,10 @@
       },
       {
         "name": "close"
+      },
+      {
+        "lazy": true,
+        "name": "spinner"
       }
     ],
     "type": "component"

package/distr/smart/button-group/js/button-group.min.js

@@ -1,4 +1,4 @@
-(()=>{"use strict";var e={"67eed2647f47"(e,t,n){n.d(t,{z:()=>i});const a=new WeakMap,s=new WeakSet;function i(e,t){const n=e.ownerDocument;s.has(n)||(n.addEventListener("reset",e=>{const t=e.target;if("FORM"!==t?.tagName)return;const n=Array.from(t.elements);setTimeout(()=>{if(!e.defaultPrevented)for(const e of n)if(e.isConnected&&e.form===t)for(const t of a.get(e)||[])t()},0)},!0),s.add(n));let i=a.get(e);return i||a.set(e,i=new Set),i.add(t),()=>i.delete(t)}},"18333410c461"(e,t,n){n.a(e,async(e,t)=>{try{var a=n("fbe0570fcc69"),s=n("2c8db2795ace"),i=n("2feae72af89f"),r=n("67eed2647f47"),o=n("0d662e4d7d63"),l=e([a,s,i,o]);[a,s,i,o]=l.then?(await l)():l;var u=n.n(a);const c={en:{group:"Theme",system:"System",light:"Light",dark:"Dark"},ru:{group:"Тема",system:"Как в системе",light:"Светлая",dark:"Тёмная"}},d=["system","light","dark"],h={system:"brightness_auto",light:"light_mode",dark:"dark_mode"};function b(){const e=globalThis.SF?.Loader?.themePreference;return d.includes(e)?e:"system"}function f(e=[]){if(Array.isArray(e))return e;const t=String(e||"").trim();if(!t)return[];if(t.startsWith("["))try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}return t.split("|").map(e=>{const[t,n,a=""]=e.split("::"),s=a.split(",").map(e=>e.trim()).filter(Boolean),i=s.find(e=>e.startsWith("icon="));return{value:t.trim(),label:(n||t).trim(),disabled:s.includes("disabled"),icon:i?i.slice(5):""}})}function m(e=[]){const t=new Set;return f(e).map((e,n)=>{const a="string"==typeof e?{value:e,label:e}:e;if(!a||"object"!=typeof a)return null;const s=String(a.value??a.id??n).trim();return!s||t.has(s)?null:(t.add(s),{id:String(a.id||s),value:s,label:String(a.label??a.text??s),icon:String(a.icon||""),ariaLabel:String(a.ariaLabel||a["aria-label"]||""),count:null===a.count||void 0===a.count?"":String(a.count).trim(),iconOnly:Boolean((a.iconOnly??a["icon-only"])&&a.icon),disabled:Boolean(a.disabled)})}).filter(Boolean)}class g extends(u()){static get props(){return{templateName:{attribute:"template",default:"default"},items:{type:Array,default:[],parser:f},value:{default:""},name:{default:""},themeSwitch:{attribute:"theme-switch",type:Boolean,default:!1},size:{default:"1",values:["1/3","1/2","1","2","3"]},spacing:{type:String,default:null},tightness:{default:"",values:["","low","high","highest"]},scheme:{default:"primary",values:["primary","secondary","on-surface"]},appearance:{default:"default",values:["default","segmented"]},plate:{default:"scheme",values:["scheme","raised"]},fullWidth:{attribute:"full-width",type:Boolean,default:!1},radius:{default:"",values:["","default","square","rounded"]},orientation:{default:"horizontal",values:["horizontal","vertical"]},disabled:{type:Boolean,default:!1},ariaLabel:{attribute:"aria-label",default:""},rootClass:{attribute:"root-class",default:""}}}constructor(){super(),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("sf-after-render",e=>{e.target!==this&&e.target.parentElement===this.querySelector(".sf-button-group")&&this.syncButtonSemantics()})}get themeSwitch(){return this.getBooleanAttr("theme-switch",!1)}get themeItems(){return d.map(e=>({value:e,label:(0,o.pageText)(c,e,this),icon:h[e],iconOnly:!0}))}get normalizedItems(){const e=m(this.themeSwitch?this.themeItems:this.getProp("items")),t=e.findIndex(e=>!e.disabled);return e.map((e,n)=>({...e,firstEnabled:n===t}))}get value(){return this.getAttribute("value")||""}set value(e){null!=e&&""!==e?this.setAttribute("value",String(e)):this.removeAttribute("value")}get disabled(){return this.getBooleanAttr("disabled",!1)}get name(){return this.getAttribute("name")||""}connectedCallback(){Object.prototype.hasOwnProperty.call(this,"_resetValue")||(this._resetValue=this.value),super.connectedCallback()}onConnected(){window.addEventListener("sf-theme-change",this.handleThemeChange),this.syncThemePreference()}onDisconnected(){window.removeEventListener("sf-theme-change",this.handleThemeChange),this._releaseReset?.(),this._releaseReset=null,this._resetInput=null,super.onDisconnected()}attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),"theme-switch"===e&&t!==n&&this._isMounted&&this.syncThemePreference()}syncThemePreference(){if(!this.themeSwitch)return;const e=b();this.value!==e&&(this.value=e)}handleThemeChange=()=>this.syncThemePreference();templateContext(){return this.createTemplateContext({...this.getPropsContext(),ariaLabel:this.getAttribute("aria-label")||(this.themeSwitch?(0,o.pageText)(c,"group",this):""),...(0,i.resolveControlSpacing)({spacing:this.getAttribute("spacing"),tightness:this.getAttribute("tightness")}),component:this,items:this.normalizedItems,value:this.value,disabled:this.disabled})}template(){return(0,s.a)(this.templateContext())}emitValueChange(e){this.emitComponentEvent("button-group-change",e),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{component:this,...e}}))}select(e){const t=String(e??""),n=this.normalizedItems.find(e=>e.value===t);if(!n||n.disabled||this.disabled||t===this.value)return this;const a=this.value;return this.themeSwitch&&!0!==globalThis.SF?.Loader?.setTheme?.(t)||(this.value=t,this.emitValueChange({previous:a,value:t,item:n})),this}afterRender(){this.syncButtonSemantics(),this.bindReset()}bindReset(){const e=this.querySelector(":scope > .sf-button-group-input");this._resetInput!==e&&(this._releaseReset?.(),this._resetInput=e,this._releaseReset=e?(0,r.z)(e,()=>{this.themeSwitch||(this.value=this._resetValue)}):null)}syncButtonSemantics(){const e=this.querySelector(".sf-button-group");if(!e)return;const t=this.normalizedItems,n=this.disabled?[]:t.filter(e=>!e.disabled),a=n.find(e=>e.value===this.value)||n[0];e.querySelectorAll(":scope > sf-button, :scope > button").forEach((e,n)=>{const s=e.matches("button")?e:e.querySelector("button"),i=t[n];if(!s||!i)return;const r=i.value===this.value;s.setAttribute("role","radio"),s.setAttribute("aria-checked",r?"true":"false"),s.tabIndex=i===a?0:-1})}clear(){if(!this.value||this.disabled||this.themeSwitch)return this;const e=this.value;return this.value="",this.emitValueChange({previous:e,value:"",item:null}),this}focus(e){const t=this.querySelector('button[role="radio"][tabindex="0"]:not(:disabled)');return t?.focus?.(e),this}handleClick=e=>{const t=e.target?.closest?.("[data-sf-button-group-value]");t&&this.contains(t)&&this.select(t.getAttribute("data-sf-button-group-value"))};handleKeyDown=e=>{if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key))return;const t=this.normalizedItems.filter(e=>!e.disabled);if(!t.length||this.disabled)return;const n=Math.max(0,t.findIndex(e=>e.value===this.value)),a="Home"===e.key?0:"End"===e.key?t.length-1:["ArrowLeft","ArrowUp"].includes(e.key)?(n-1+t.length)%t.length:(n+1)%t.length;e.preventDefault();const s=this.value;this.select(t[a].value),this.value!==s&&this.addEventListener("sf-after-render",()=>this.focus(),{once:!0})}}g.define("sf-button-group"),t()}catch(p){t(p)}})},"2c8db2795ace"(e,t,n){n.a(e,async(e,a)=>{try{n.d(t,{a:()=>c});var s=n("ddf1cdb42ecc"),i=e([s]),r=i.then?(await i)():i;s=r[0];function o(e,t){return t<=1?"":0===e?"start":e===t-1?"end":"middle"}function l(e,t,n){const a=e.value===n.value,i=n.disabled||e.disabled;return s.html`
+(()=>{"use strict";var e={"67eed2647f47"(e,t,n){n.d(t,{z:()=>i});const a=new WeakMap,s=new WeakSet;function i(e,t){const n=e.ownerDocument;s.has(n)||(n.addEventListener("reset",e=>{const t=e.target;if("FORM"!==t?.tagName)return;const n=Array.from(t.elements);setTimeout(()=>{if(!e.defaultPrevented)for(const e of n)if(e.isConnected&&e.form===t)for(const t of a.get(e)||[])t()},0)},!0),s.add(n));let i=a.get(e);return i||a.set(e,i=new Set),i.add(t),()=>i.delete(t)}},"50d2a204ba4c"(e,t,n){n.d(t,{le:()=>r});function a(e,t={}){const n=document.createElementNS("http://www.w3.org/2000/svg",e);return Object.entries(t).forEach(([e,t])=>{null!=t&&""!==t&&n.setAttribute(e,String(t))}),n}const s=e=>Math.round(1e3*e)/1e3;function i(e={}){return function({width:e=24,height:t=24,stroke:n=2,dots:i=8,filled:r=3,dotRadius:o=null,direction:l="clockwise",pixel:u=!1}={}){const c=e/2,d=t/2,h=Math.min(e,t)/2,f=Math.max(1,h-n/2),m=a("svg",{class:"sf-loader-svg",viewBox:`0 0 ${e} ${t}`,width:u?e:null,height:u?t:null,"aria-hidden":"true",focusable:"false"}),g={cx:c,cy:d,r:s(f),fill:"none",stroke:"currentColor","stroke-width":n},b=a("circle",{class:"sf-loader-ring-filled",...g,opacity:"0.3"}),p=a("circle",{class:"sf-loader-ring-accent",...g,"stroke-linecap":"round",pathLength:100,"stroke-dasharray":"0 100",transform:`rotate(90 ${c} ${d})`}),v=a("g",{class:"sf-loader-comet",display:"none",transform:`rotate(-90 ${c} ${d})`});for(let e=0;e<10;e+=1){const t=9===e;v.append(a("circle",{class:"sf-loader-comet-segment"+(t?" sf-loader-comet-head":""),...g,"stroke-linecap":t?"round":"butt",pathLength:100,"stroke-dasharray":`${s(4)} ${s(96)}`,"stroke-dashoffset":s(-4*e),opacity:s(((e+1)/10)**1.6)}))}const y=Math.max(3,Math.min(32,Math.floor(Number(i)||8))),w=Math.max(1,Math.min(y,Math.floor(Number(r)||3))),S=Math.min(n,.7*Math.PI*(h-n)/y),$=null==o||""===o?S:Math.max(1,Math.min(Number(o)||S,h/4)),x=Math.max($,h-$),k=a("g",{class:"sf-loader-dots",display:"none",style:`--sf-loader-dot-count:${y}; --sf-loader-dot-filled:${w};`});for(let e=0;e<y;e+=1){const t=2*Math.PI/y*e-Math.PI/2,n="counterclockwise"===l?e:(y-e)%y;k.append(a("circle",{class:"sf-loader-dot"+(e<w?" sf-loader-dot--active":""),cx:s(c+x*Math.cos(t)),cy:s(d+x*Math.sin(t)),r:s($),fill:"currentColor",style:`--sf-loader-dot-index:${e}; --sf-loader-dot-step:${n};`}))}return m.append(b,p,v,k),m}({...e,width:24,height:24,stroke:2,dotRadius:null,pixel:!1})}function r({className:e="",overlay:t=!1}={}){const n=document.createElement("span");n.className=["sf-loader-container","sf-loader--infinite",e,e&&t?`${e}--overlay`:""].filter(Boolean).join(" "),n.dataset.sfSpinnerBound="1",n.dataset.infinite="true",n.setAttribute("aria-hidden","true");const a=document.createElement("span");return a.className="sf-loader--loading-indicator",a.append(i()),n.append(a),n}},"18333410c461"(e,t,n){n.a(e,async(e,t)=>{try{var a=n("fbe0570fcc69"),s=n("2c8db2795ace"),i=n("2feae72af89f"),r=n("67eed2647f47"),o=n("0d662e4d7d63"),l=e([a,s,i,o]);[a,s,i,o]=l.then?(await l)():l;var u=n.n(a);const c={en:{group:"Theme",system:"System",light:"Light",dark:"Dark"},ru:{group:"Тема",system:"Как в системе",light:"Светлая",dark:"Тёмная"}},d=["system","light","dark"],h={system:"brightness_auto",light:"light_mode",dark:"dark_mode"};function f(){const e=globalThis.SF?.Loader?.themePreference;return d.includes(e)?e:"system"}function m(e=[]){if(Array.isArray(e))return e;const t=String(e||"").trim();if(!t)return[];if(t.startsWith("["))try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}return t.split("|").map(e=>{const[t,n,a=""]=e.split("::"),s=a.split(",").map(e=>e.trim()).filter(Boolean),i=s.find(e=>e.startsWith("icon="));return{value:t.trim(),label:(n||t).trim(),disabled:s.includes("disabled"),loading:s.includes("loading"),icon:i?i.slice(5):""}})}function g(e=[]){const t=new Set;return m(e).map((e,n)=>{const a="string"==typeof e?{value:e,label:e}:e;if(!a||"object"!=typeof a)return null;const s=String(a.value??a.id??n).trim();return!s||t.has(s)?null:(t.add(s),{id:String(a.id||s),value:s,label:String(a.label??a.text??s),icon:String(a.icon||""),ariaLabel:String(a.ariaLabel||a["aria-label"]||""),count:null===a.count||void 0===a.count?"":String(a.count).trim(),iconOnly:Boolean((a.iconOnly??a["icon-only"])&&a.icon),loading:Boolean(a.loading),disabled:Boolean(a.disabled||a.loading)})}).filter(Boolean)}class b extends(u()){static get props(){return{templateName:{attribute:"template",default:"default"},items:{type:Array,default:[],parser:m},value:{default:""},name:{default:""},themeSwitch:{attribute:"theme-switch",type:Boolean,default:!1},size:{default:"1",values:["1/3","1/2","1","2","3"]},spacing:{type:String,default:null},tightness:{default:"",values:["","low","high","highest"]},scheme:{default:"primary",values:["primary","secondary","on-surface"]},appearance:{default:"default",values:["default","segmented"]},plate:{default:"scheme",values:["scheme","raised"]},fullWidth:{attribute:"full-width",type:Boolean,default:!1},radius:{default:"",values:["","default","square","rounded"]},orientation:{default:"horizontal",values:["horizontal","vertical"]},disabled:{type:Boolean,default:!1},ariaLabel:{attribute:"aria-label",default:""},rootClass:{attribute:"root-class",default:""}}}constructor(){super(),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("sf-after-render",e=>{e.target!==this&&e.target.parentElement===this.querySelector(".sf-button-group")&&this.syncButtonSemantics()})}get themeSwitch(){return this.getBooleanAttr("theme-switch",!1)}get themeItems(){return d.map(e=>({value:e,label:(0,o.pageText)(c,e,this),icon:h[e],iconOnly:!0}))}get normalizedItems(){const e=g(this.themeSwitch?this.themeItems:this.getProp("items")),t=e.findIndex(e=>!e.disabled);return e.map((e,n)=>({...e,firstEnabled:n===t}))}get value(){return this.getAttribute("value")||""}set value(e){null!=e&&""!==e?this.setAttribute("value",String(e)):this.removeAttribute("value")}get disabled(){return this.getBooleanAttr("disabled",!1)}get name(){return this.getAttribute("name")||""}connectedCallback(){Object.prototype.hasOwnProperty.call(this,"_resetValue")||(this._resetValue=this.value),super.connectedCallback()}onConnected(){window.addEventListener("sf-theme-change",this.handleThemeChange),this.syncThemePreference()}onDisconnected(){window.removeEventListener("sf-theme-change",this.handleThemeChange),this._releaseReset?.(),this._releaseReset=null,this._resetInput=null,super.onDisconnected()}attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),"theme-switch"===e&&t!==n&&this._isMounted&&this.syncThemePreference()}syncThemePreference(){if(!this.themeSwitch)return;const e=f();this.value!==e&&(this.value=e)}handleThemeChange=()=>this.syncThemePreference();templateContext(){return this.createTemplateContext({...this.getPropsContext(),ariaLabel:this.getAttribute("aria-label")||(this.themeSwitch?(0,o.pageText)(c,"group",this):""),...(0,i.resolveControlSpacing)({spacing:this.getAttribute("spacing"),tightness:this.getAttribute("tightness")}),component:this,items:this.normalizedItems,value:this.value,disabled:this.disabled})}template(){return(0,s.a)(this.templateContext())}emitValueChange(e){this.emitComponentEvent("button-group-change",e),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{component:this,...e}}))}select(e){const t=String(e??""),n=this.normalizedItems.find(e=>e.value===t);if(!n||n.disabled||this.disabled||t===this.value)return this;const a=this.value;return this.themeSwitch&&!0!==globalThis.SF?.Loader?.setTheme?.(t)||(this.value=t,this.emitValueChange({previous:a,value:t,item:n})),this}afterRender(){this.syncButtonSemantics(),this.bindReset()}bindReset(){const e=this.querySelector(":scope > .sf-button-group-input");this._resetInput!==e&&(this._releaseReset?.(),this._resetInput=e,this._releaseReset=e?(0,r.z)(e,()=>{this.themeSwitch||(this.value=this._resetValue)}):null)}syncButtonSemantics(){const e=this.querySelector(".sf-button-group");if(!e)return;const t=this.normalizedItems,n=this.disabled?[]:t.filter(e=>!e.disabled),a=n.find(e=>e.value===this.value)||n[0];e.querySelectorAll(":scope > sf-button, :scope > button").forEach((e,n)=>{const s=e.matches("button")?e:e.querySelector("button"),i=t[n];if(!s||!i)return;const r=i.value===this.value;s.setAttribute("role","radio"),s.setAttribute("aria-checked",r?"true":"false"),s.tabIndex=i===a?0:-1})}clear(){if(!this.value||this.disabled||this.themeSwitch)return this;const e=this.value;return this.value="",this.emitValueChange({previous:e,value:"",item:null}),this}focus(e){const t=this.querySelector('button[role="radio"][tabindex="0"]:not(:disabled)');return t?.focus?.(e),this}handleClick=e=>{const t=e.target?.closest?.("[data-sf-button-group-value]");t&&this.contains(t)&&this.select(t.getAttribute("data-sf-button-group-value"))};handleKeyDown=e=>{if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key))return;const t=this.normalizedItems.filter(e=>!e.disabled);if(!t.length||this.disabled)return;const n=Math.max(0,t.findIndex(e=>e.value===this.value)),a="Home"===e.key?0:"End"===e.key?t.length-1:["ArrowLeft","ArrowUp"].includes(e.key)?(n-1+t.length)%t.length:(n+1)%t.length;e.preventDefault();const s=this.value;this.select(t[a].value),this.value!==s&&this.addEventListener("sf-after-render",()=>this.focus(),{once:!0})}}b.define("sf-button-group"),t()}catch(p){t(p)}})},"2c8db2795ace"(e,t,n){n.a(e,async(e,a)=>{try{n.d(t,{a:()=>d});var s=n("ddf1cdb42ecc"),i=n("50d2a204ba4c"),r=e([s]),o=r.then?(await r)():r;s=o[0];function l(e,t){return t<=1?"":0===e?"start":e===t-1?"end":"middle"}function u(e,t,n){const a=e.value===n.value,i=n.disabled||e.disabled;return s.html`
     <sf-button
       text=${e.label}
       icon=${e.icon||s.nothing}
@@ -6,24 +6,27 @@
       spacing=${n.spacing&&"normal"!==n.spacing?n.spacing:s.nothing}
       appearance=${a?"default":"outline"}
       scheme=${a?n.scheme:"on-surface"}
-      segment=${o(t,n.items.length)}
+      segment=${l(t,n.items.length)}
       data-sf-button-group-value=${e.value}
       aria-label=${e.ariaLabel||s.nothing}
       class=${a?"active":s.nothing}
       ?disabled=${i}
+      ?loading=${e.loading}
     ></sf-button>
-  `}function u(e,t){const n=e.value===t.value,a=t.disabled||e.disabled,i=["sf-button",`sf-button--size-${t.size}`,"sf-button--link","sf-button--on-surface","flex","items-cross-center","sf-button-group-segment",e.iconOnly?"sf-button-group-icon-only":"",t.spacing&&"normal"!==t.spacing?`spacing-${t.spacing}`:"",n?"active":""].filter(Boolean).join(" "),r=""!==e.count||e.ariaLabel?[e.ariaLabel||e.label,e.count].filter(e=>""!==e).join(" "):"",o=e.icon?s.html`<sf-icon icon=${e.icon} root-class="pointer-event-none" weight="400" aria-hidden="true"></sf-icon>`:s.nothing,l=""!==e.count?s.html`<span class="sf-button-group-count">${e.count}</span>`:s.nothing;return s.html`
+  `}function c(e,t){const n=e.value===t.value,a=t.disabled||e.disabled,r=["sf-button",`sf-button--size-${t.size}`,"sf-button--link","sf-button--on-surface","flex","items-cross-center","sf-button-group-segment",e.iconOnly?"sf-button-group-icon-only":"",t.spacing&&"normal"!==t.spacing?`spacing-${t.spacing}`:"",n?"active":"",e.loading?"loading sf-button-state-loading":""].filter(Boolean).join(" "),o=""!==e.count||e.ariaLabel?[e.ariaLabel||e.label,e.count].filter(e=>""!==e).join(" "):"",l=e.loading?(0,i.le)({className:"sf-button-spinner",overlay:!e.icon}):s.nothing,u=e.loading&&e.icon?l:e.icon?s.html`<sf-icon icon=${e.icon} root-class="pointer-event-none" weight="400" aria-hidden="true"></sf-icon>`:s.nothing,c=""!==e.count?s.html`<span class="sf-button-group-count">${e.count}</span>`:s.nothing;return s.html`
     <button
       type="button"
-      class=${i}
+      class=${r}
       data-sf-button-group-value=${e.value}
-      aria-label=${r||s.nothing}
+      aria-label=${o||s.nothing}
+      aria-busy=${e.loading?"true":s.nothing}
       ?disabled=${a}
     >
-      ${o}
-      ${e.iconOnly?s.html`<span class="sf-button-group-label--hidden">${e.label}</span>${l}`:s.html`<span class="sf-button-text-container text-center pointer-event-none">${e.label}${l}</span>`}
+      ${e.loading&&!e.icon?l:s.nothing}
+      ${u}
+      ${e.iconOnly?s.html`<span class="sf-button-group-label--hidden">${e.label}</span>${c}`:s.html`<span class="sf-button-text-container text-center pointer-event-none">${e.label}${c}</span>`}
     </button>
-  `}function c(e){const t="segmented"===e.appearance,n=["sf-button-group",t?"sf-button-group--segmented":"",t?`sf-button-group--size-${e.size}`:"",t&&"raised"===e.plate?"sf-button-group--plate-raised":"",t?`sf-button-group--${e.scheme}`:"",t&&e.fullWidth?"sf-button-group--full-width":"",e.radius?`sf-button-group--radius-${e.radius}`:"",e.rootClass].filter(Boolean).join(" ");return s.html`
+  `}function d(e){const t="segmented"===e.appearance,n=["sf-button-group",t?"sf-button-group--segmented":"",t?`sf-button-group--size-${e.size}`:"",t&&"raised"===e.plate?"sf-button-group--plate-raised":"",t?`sf-button-group--${e.scheme}`:"",t&&e.fullWidth?"sf-button-group--full-width":"",e.radius?`sf-button-group--radius-${e.radius}`:"",e.rootClass].filter(Boolean).join(" ");return s.html`
     <div
       class=${n}
       style=${e.rootStyle||s.nothing}
@@ -32,7 +35,7 @@
       aria-orientation=${e.orientation}
       data-value=${e.value||""}
     >
-      ${e.items.map((n,a)=>t?u(n,e):l(n,a,e))}
+      ${e.items.map((n,a)=>t?c(n,e):u(n,a,e))}
     </div>
     ${e.name?s.html`<input class="sf-button-group-input" type="hidden" name=${e.name} value=${e.value||""} ?disabled=${e.disabled}>`:s.nothing}
-  `}a()}catch(d){a(d)}})},"2feae72af89f"(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("control-spacing"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("control-spacing")),{once:!0}))},ddf1cdb42ecc(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("lit"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("lit")),{once:!0}))},"0d662e4d7d63"(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("page-language"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("page-language")),{once:!0}))},fbe0570fcc69(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("smart-base"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("smart-base")),{once:!0}))}};const t={};function n(a){const s=t[a];if(void 0!==s)return s.exports;const i=t[a]={exports:{}};return e[a](i,i.exports,n),i.exports}(()=>{const e="function"==typeof Symbol,t=e?Symbol("webpack queues"):"__webpack_queues__",a=e?Symbol("webpack exports"):"__webpack_exports__",s=e?Symbol("webpack error"):"__webpack_error__",i=e=>{e?.d<1&&(e.d=1,e.forEach(e=>e.r--),e.forEach(e=>e.r--?e.r++:e()))};n.a=(e,n,r)=>{let o;r&&((o=[]).d=-1);const l=new Set,u=e.exports;let c,d,h;const b=new Promise((e,t)=>{h=t,d=e});b[a]=u,b[t]=e=>(o&&e(o),l.forEach(e),b.catch(e=>{})),e.exports=b;n(e=>{let n;c=(e=>e.map(e=>{if(null!==e&&"object"==typeof e){if(e[t])return e;if(e.then){const n=[];n.d=0,e.then(e=>{r[a]=e,i(n)},e=>{r[s]=e,i(n)});const r={};return r[t]=e=>e(n),r}}const n={};return n[t]=e=>{},n[a]=e,n}))(e);const r=()=>c.map(e=>{if(e[s])throw e[s];return e[a]}),u=new Promise(e=>{n=()=>e(r),n.r=0;const a=e=>e!==o&&!l.has(e)&&(l.add(e),e&&!e.d&&(n.r++,e.push(n)));c.map(e=>e[t](a))});return n.r?u:r()},e=>(e?h(b[s]=e):d(u),i(o))),o?.d<0&&(o.d=0)}})(),n.n=e=>{const t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{if(Array.isArray(t))for(var a=0;a<t.length;){var s=t[a++],i=t[a++];n.o(e,s)?0===i&&a++:0===i?Object.defineProperty(e,s,{enumerable:!0,value:t[a++]}):Object.defineProperty(e,s,{enumerable:!0,get:i})}else for(var s in t)n.o(t,s)&&!n.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:t[s]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);n("18333410c461")})();
+  `}a()}catch(h){a(h)}})},"2feae72af89f"(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("control-spacing"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("control-spacing")),{once:!0}))},ddf1cdb42ecc(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("lit"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("lit")),{once:!0}))},"0d662e4d7d63"(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("page-language"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("page-language")),{once:!0}))},fbe0570fcc69(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("smart-base"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("smart-base")),{once:!0}))}};const t={};function n(a){const s=t[a];if(void 0!==s)return s.exports;const i=t[a]={exports:{}};return e[a](i,i.exports,n),i.exports}(()=>{const e="function"==typeof Symbol,t=e?Symbol("webpack queues"):"__webpack_queues__",a=e?Symbol("webpack exports"):"__webpack_exports__",s=e?Symbol("webpack error"):"__webpack_error__",i=e=>{e?.d<1&&(e.d=1,e.forEach(e=>e.r--),e.forEach(e=>e.r--?e.r++:e()))};n.a=(e,n,r)=>{let o;r&&((o=[]).d=-1);const l=new Set,u=e.exports;let c,d,h;const f=new Promise((e,t)=>{h=t,d=e});f[a]=u,f[t]=e=>(o&&e(o),l.forEach(e),f.catch(e=>{})),e.exports=f;n(e=>{let n;c=(e=>e.map(e=>{if(null!==e&&"object"==typeof e){if(e[t])return e;if(e.then){const n=[];n.d=0,e.then(e=>{r[a]=e,i(n)},e=>{r[s]=e,i(n)});const r={};return r[t]=e=>e(n),r}}const n={};return n[t]=e=>{},n[a]=e,n}))(e);const r=()=>c.map(e=>{if(e[s])throw e[s];return e[a]}),u=new Promise(e=>{n=()=>e(r),n.r=0;const a=e=>e!==o&&!l.has(e)&&(l.add(e),e&&!e.d&&(n.r++,e.push(n)));c.map(e=>e[t](a))});return n.r?u:r()},e=>(e?h(f[s]=e):d(u),i(o))),o?.d<0&&(o.d=0)}})(),n.n=e=>{const t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{if(Array.isArray(t))for(var a=0;a<t.length;){var s=t[a++],i=t[a++];n.o(e,s)?0===i&&a++:0===i?Object.defineProperty(e,s,{enumerable:!0,value:t[a++]}):Object.defineProperty(e,s,{enumerable:!0,get:i})}else for(var s in t)n.o(t,s)&&!n.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:t[s]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);n("18333410c461")})();

package/distr/smart/button-group/smart.manifest.json

@@ -27,7 +27,8 @@
   "composition": {
     "uses": [
       "component.button-group",
-      "smart.buttons"
+      "smart.buttons",
+      "component.spinner"
     ],
     "public_parts": []
   },
@@ -42,7 +43,7 @@
       "items": {
         "type": "array",
         "default": "[]",
-        "description": "Selectable items with stable value, label, icon, count, icon-only and disabled fields.",
+        "description": "Selectable items with stable value, label, icon, count, icon-only, disabled and loading fields.",
         "items": {
           "type": "object",
           "properties": {
@@ -68,6 +69,10 @@
             "disabled": {
               "type": "boolean"
             },
+            "loading": {
+              "type": "boolean",
+              "description": "The item works: it shows the spinner at its icon's size, in place of its icon or over its label (which keeps its place and its name), says aria-busy and is disabled until the flag is cleared."
+            },
             "count": {
               "type": [
                 "string",
@@ -445,7 +450,7 @@
     "source_artifacts": [
       {
         "path": "src/smart/button-group/index.js",
-        "sha256": "2719a65441300ff8c0c5f515cf951906856b19b4e73844e2fbc61b61b8d9719d"
+        "sha256": "2d9fcd8743768b019510b440f716345b46ca65ea069718845e6497b7de9e73bd"
       }
     ],
     "generated_runtime": []

package/distr/smart/button-group/template/default.js

@@ -1,4 +1,5 @@
 import { html, nothing } from 'lit';
+import { createInlineSpinner } from '../../../../component/spinner/js/_spinner-draw';
 
 function segmentFor(index, total) {
   if (total <= 1) return '';
@@ -24,6 +25,7 @@ function renderItem(item, index, context) {
       aria-label=${item.ariaLabel || nothing}
       class=${selected ? 'active' : nothing}
       ?disabled=${disabled}
+      ?loading=${item.loading}
     ></sf-button>
   `;
 }
@@ -47,6 +49,7 @@ function renderSegment(item, context) {
     item.iconOnly ? 'sf-button-group-icon-only' : '',
     context.spacing && context.spacing !== 'normal' ? `spacing-${context.spacing}` : '',
     selected ? 'active' : '',
+    item.loading ? 'loading sf-button-state-loading' : '',
   ].filter(Boolean).join(' ');
   // The count stands next to the label with no space between the two nodes, so
   // the name is composed here: the label (or the item's aria-label), then the
@@ -54,9 +57,17 @@ function renderSegment(item, context) {
   const ariaLabel = item.count !== '' || item.ariaLabel
     ? [item.ariaLabel || item.label, item.count].filter((part) => part !== '').join(' ')
     : '';
-  const icon = item.icon
-    ? html`<sf-icon icon=${item.icon} root-class="pointer-event-none" weight="400" aria-hidden="true"></sf-icon>`
+  // A loading segment shows the spinner as a loading button does
+  // (simai/ui-source#10): in place of its icon, or over its label, which keeps
+  // its place and its name.
+  const spinner = item.loading
+    ? createInlineSpinner({className: 'sf-button-spinner', overlay: !item.icon})
     : nothing;
+  const icon = item.loading && item.icon
+    ? spinner
+    : item.icon
+      ? html`<sf-icon icon=${item.icon} root-class="pointer-event-none" weight="400" aria-hidden="true"></sf-icon>`
+      : nothing;
   const count = item.count !== ''
     ? html`<span class="sf-button-group-count">${item.count}</span>`
     : nothing;
@@ -67,8 +78,10 @@ function renderSegment(item, context) {
       class=${classes}
       data-sf-button-group-value=${item.value}
       aria-label=${ariaLabel || nothing}
+      aria-busy=${item.loading ? 'true' : nothing}
       ?disabled=${disabled}
     >
+      ${item.loading && !item.icon ? spinner : nothing}
       ${icon}
       ${item.iconOnly
         ? html`<span class="sf-button-group-label--hidden">${item.label}</span>${count}`

package/distr/smart/buttons/js/buttons.min.js

@@ -1,17 +1,18 @@
-(()=>{"use strict";var t={"06e8cd089f28"(t,e,n){function i(){const t=globalThis.SF=globalThis.SF||{};return t.__deprecationNotes instanceof Map||Object.defineProperty(t,"__deprecationNotes",{value:new Map,configurable:!0}),t.__deprecationNotes}function s({component:t="",kind:e="attribute",attribute:n="",from:s,to:o=null}={}){if(!s)return;const r=[t,e,n,s].join("|"),a=i(),c=a.get(r);if(c)c.count+=1;else if(a.set(r,{component:t,kind:e,attribute:n,from:s,to:o,count:1}),function(){const t=globalThis.document?.documentElement;return"warn"===t?.dataset?.sfDeprecations||!0===globalThis.SF?.deprecations?.warn}()){const i=t?`${t}: `:"",r="value"===e?`${n}="${s}"`:`${e} ${s}`;globalThis.console?.warn?.(`[SIMAI Framework] ${i}${r} is a legacy name${o?`; write ${o}`:""}. See contracts/changes/journal.json.`)}}if(n.d(e,{YB:()=>s}),"undefined"!=typeof globalThis){globalThis.SF=globalThis.SF||{};const t=globalThis.SF.deprecations||{};t.list=function(){return[...i().values()].map(t=>({...t}))},t.clear=function(){i().clear()},t.note=s,globalThis.SF.deprecations=t}},c76f8895b630(t,e,n){n.a(t,async(t,e)=>{try{var i=n("fbe0570fcc69"),s=n("5168bdf4a1f9"),o=n("ddf1cdb42ecc"),r=n("2feae72af89f"),a=n("06e8cd089f28"),c=t([i,s,o,r]);[i,s,o,r]=c.then?(await c)():c;var l=n.n(i);const u=new Set(["template","size","appearance","type","scheme","status","text","icon","icon-start","icon-end","icon-left","icon-right","icon-position","text-position","spacing","tightness","radius","root-class","loading","segment","disabled","native-type","aria-label","class","style","id","slot"]);function d(t,e){t?.forwardHostAttributes(e,{exclude:u,transferDataAttributes:!0,storageKey:"__sfButtonForwardedDataAttributes",targetStorageKey:"__sfButtonAttributeKeys"})}const h=["default","tonal","outline","link","surface"],g={ghost:"link"},f={danger:"error",critical:"error"};class p extends(l()){constructor(){super(),this._attributeObserver=null}static get props(){return{templateName:{attribute:"template",default:"default"},size:{default:"1"},appearance:{default:"default",aliases:["type"]},scheme:{default:"primary"},status:{default:"",values:["","error"]},textPosition:{type:String,default:"center"},text:{default:""},segment:{default:""},icon:{default:""},iconStart:{type:String,default:null},iconEnd:{type:String,default:null},iconLeft:{default:""},iconRight:{default:""},iconPosition:{default:"start"},spacing:{type:String,default:null},tightness:{default:"",values:["","low","high","highest"]},radius:{default:"",values:["","default","square","rounded"]},rootClass:{default:""},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},nativeType:{default:"button"},ariaLabel:{default:""}}}get templateName(){return this.getAttribute("template")||"default"}get size(){return this.getAttribute("size")||"1"}get appearance(){const t=this.getAttribute("appearance")||this.getAttribute("type")||"default";return Object.hasOwn(g,t)?((0,a.YB)({component:this.localName,kind:"value",attribute:"appearance",from:t,to:g[t]}),g[t]):h.includes(t)?t:"default"}get type(){return this.appearance}get scheme(){return this.getAttribute("scheme")||"primary"}get status(){const t=this.getAttribute("status")||"";return f[t]?((0,a.YB)({component:this.localName,kind:"value",attribute:"status",from:t,to:f[t]}),f[t]):t}get text(){return this.getAttribute("text")||""}get icon(){return this.getAttribute("icon")||""}get iconLeft(){return this.hasAttribute("icon-left")&&(0,a.YB)({component:this.localName,kind:"attribute",from:"icon-left",to:"icon-start"}),this.getAttribute("icon-start")??this.getAttribute("icon-left")}get iconRight(){return this.hasAttribute("icon-right")&&(0,a.YB)({component:this.localName,kind:"attribute",from:"icon-right",to:"icon-end"}),this.getAttribute("icon-end")??this.getAttribute("icon-right")}get iconStart(){return this.iconLeft}get iconEnd(){return this.iconRight}get iconPosition(){return this.getAttribute("icon-position")||"start"}noteLegacyNames(){return this.hasAttribute("tightness")&&(0,a.YB)({component:this.localName,kind:"attribute",from:"tightness",to:"spacing"}),{}}get tightness(){return(0,r.resolveControlSpacing)({spacing:this.getAttribute("spacing"),tightness:this.getAttribute("tightness")}).tightness}get spacing(){return(0,r.resolveControlSpacing)({spacing:this.getAttribute("spacing"),tightness:this.getAttribute("tightness")}).spacing}get radius(){return this.getEnumAttr("radius",["default","square","rounded"],"")}get rootClass(){return this.getAttribute("root-class")||""}get loading(){return this.getBooleanAttr("loading",!1)}get disabled(){return this.getBooleanAttr("disabled",!1)}get nativeType(){return this.getAttribute("native-type")||"button"}get ariaLabel(){return this.getAttribute("aria-label")||""}templateContext(){const t=this.getPropsContext();return this.createTemplateContext({...t,iconLeft:t.iconStart??t.iconLeft,iconRight:t.iconEnd??t.iconRight,iconStart:this.iconStart,iconEnd:this.iconEnd,type:this.type,appearance:"ghost"===t.appearance?"link":t.appearance,status:this.status,...(0,r.resolveControlSpacing)({spacing:this.getAttribute("spacing"),tightness:this.getAttribute("tightness")}),...this.noteLegacyNames?.(),component:this})}template(){return(0,s.B)(this.templateContext())}resolveUpdateMode(){return"lit"}afterRender(){d(this,this.querySelector(".sf-button")),this._attributeObserver||(this._attributeObserver=this.observeForwardedHostAttributes(()=>this.querySelector(".sf-button"),{exclude:u,transferDataAttributes:!0,storageKey:"__sfButtonForwardedDataAttributes",targetStorageKey:"__sfButtonAttributeKeys"})._forwardHostAttributeObserver)}get value(){return{template:this.templateName,size:this.size,appearance:this.appearance,type:this.type,scheme:this.scheme,status:this.status,text:this.text,icon:this.icon,iconLeft:this.iconLeft,iconRight:this.iconRight,iconStart:this.iconStart,iconEnd:this.iconEnd,iconPosition:this.iconPosition,tightness:this.tightness,spacing:this.spacing,radius:this.radius,rootClass:this.rootClass,loading:this.loading,disabled:this.disabled,nativeType:this.nativeType,ariaLabel:this.ariaLabel}}onClick(t,e){return"function"==typeof t&&this.addEventListener("click",t,e),this}onFocus(t,e){return"function"==typeof t&&this.addEventListener("focusin",t,e),this}onBlur(t,e){return"function"==typeof t&&this.addEventListener("focusout",t,e),this}onMouseEnter(t,e){return"function"==typeof t&&this.addEventListener("mouseenter",t,e),this}onMouseLeave(t,e){return"function"==typeof t&&this.addEventListener("mouseleave",t,e),this}setDisabled(t=!0){return t?this.setAttribute("disabled",""):this.removeAttribute("disabled"),this}createIcon(t){return t?o.html`<sf-icon icon="${t}" root-class="pointer-event-none" weight="400" aria-hidden="true"></sf-icon>`:""}set value(t){this.setValueAttributes(t)}onDisconnected(){this.disconnectForwardedHostAttributes(),this._attributeObserver=null,super.onDisconnected?.()}}p.define("sf-button"),e()}catch(b){e(b)}})},"5168bdf4a1f9"(t,e,n){n.a(t,async(t,i)=>{try{n.d(e,{B:()=>a});var s=n("ddf1cdb42ecc"),o=t([s]),r=o.then?(await o)():o;s=r[0];function a(t){const{size:e,appearance:n,type:i,scheme:o,status:r,text:a,icon:c,iconLeft:l,iconRight:u,iconPosition:d,spacing:h,radius:g,rootClass:f,textPosition:p,loading:b,disabled:m,nativeType:y,ariaLabel:S,segment:v}=t,A=String(d||"start").toLowerCase(),_=["right","end"].includes(A),x=t.iconStart??(l||(c&&!_?c:"")),w=t.iconEnd??(u||(c&&_?c:"")),T=t.component,$=T?.hasSlotContent?.("icon-start")?T.getSlotContent("icon-start"):T?.hasSlotContent?.("icon-left")?T.getSlotContent("icon-left"):T.createIcon(x),F=T?.hasSlotContent?.("icon-end")?T.getSlotContent("icon-end"):T?.hasSlotContent?.("icon-right")?T.getSlotContent("icon-right"):T.createIcon(w),L=T?.hasSlotContent?.("text")?T.getSlotContent("text"):a,C=!$&&!F,E=["sf-button",`sf-button--size-${e}`,`sf-button--${n||i}`,`sf-button--${r||o}`,"flex","items-cross-center",v?`segment-${v}`:"",h&&"normal"!==h?`spacing-${h}`:"",g?`radius-${g}`:"",f,b?"loading sf-button-state-loading":""].filter(Boolean);return s.html`
+(()=>{"use strict";var t={"50d2a204ba4c"(t,e,n){n.d(e,{le:()=>a});function i(t,e={}){const n=document.createElementNS("http://www.w3.org/2000/svg",t);return Object.entries(e).forEach(([t,e])=>{null!=e&&""!==e&&n.setAttribute(t,String(e))}),n}const o=t=>Math.round(1e3*t)/1e3;function s(t={}){return function({width:t=24,height:e=24,stroke:n=2,dots:s=8,filled:a=3,dotRadius:r=null,direction:l="clockwise",pixel:c=!1}={}){const u=t/2,d=e/2,h=Math.min(t,e)/2,f=Math.max(1,h-n/2),g=i("svg",{class:"sf-loader-svg",viewBox:`0 0 ${t} ${e}`,width:c?t:null,height:c?e:null,"aria-hidden":"true",focusable:"false"}),p={cx:u,cy:d,r:o(f),fill:"none",stroke:"currentColor","stroke-width":n},b=i("circle",{class:"sf-loader-ring-filled",...p,opacity:"0.3"}),m=i("circle",{class:"sf-loader-ring-accent",...p,"stroke-linecap":"round",pathLength:100,"stroke-dasharray":"0 100",transform:`rotate(90 ${u} ${d})`}),y=i("g",{class:"sf-loader-comet",display:"none",transform:`rotate(-90 ${u} ${d})`});for(let t=0;t<10;t+=1){const e=9===t;y.append(i("circle",{class:"sf-loader-comet-segment"+(e?" sf-loader-comet-head":""),...p,"stroke-linecap":e?"round":"butt",pathLength:100,"stroke-dasharray":`${o(4)} ${o(96)}`,"stroke-dashoffset":o(-4*t),opacity:o(((t+1)/10)**1.6)}))}const S=Math.max(3,Math.min(32,Math.floor(Number(s)||8))),v=Math.max(1,Math.min(S,Math.floor(Number(a)||3))),A=Math.min(n,.7*Math.PI*(h-n)/S),x=null==r||""===r?A:Math.max(1,Math.min(Number(r)||A,h/4)),w=Math.max(x,h-x),$=i("g",{class:"sf-loader-dots",display:"none",style:`--sf-loader-dot-count:${S}; --sf-loader-dot-filled:${v};`});for(let t=0;t<S;t+=1){const e=2*Math.PI/S*t-Math.PI/2,n="counterclockwise"===l?t:(S-t)%S;$.append(i("circle",{class:"sf-loader-dot"+(t<v?" sf-loader-dot--active":""),cx:o(u+w*Math.cos(e)),cy:o(d+w*Math.sin(e)),r:o(x),fill:"currentColor",style:`--sf-loader-dot-index:${t}; --sf-loader-dot-step:${n};`}))}return g.append(b,m,y,$),g}({...t,width:24,height:24,stroke:2,dotRadius:null,pixel:!1})}function a({className:t="",overlay:e=!1}={}){const n=document.createElement("span");n.className=["sf-loader-container","sf-loader--infinite",t,t&&e?`${t}--overlay`:""].filter(Boolean).join(" "),n.dataset.sfSpinnerBound="1",n.dataset.infinite="true",n.setAttribute("aria-hidden","true");const i=document.createElement("span");return i.className="sf-loader--loading-indicator",i.append(s()),n.append(i),n}},"06e8cd089f28"(t,e,n){function i(){const t=globalThis.SF=globalThis.SF||{};return t.__deprecationNotes instanceof Map||Object.defineProperty(t,"__deprecationNotes",{value:new Map,configurable:!0}),t.__deprecationNotes}function o({component:t="",kind:e="attribute",attribute:n="",from:o,to:s=null}={}){if(!o)return;const a=[t,e,n,o].join("|"),r=i(),l=r.get(a);if(l)l.count+=1;else if(r.set(a,{component:t,kind:e,attribute:n,from:o,to:s,count:1}),function(){const t=globalThis.document?.documentElement;return"warn"===t?.dataset?.sfDeprecations||!0===globalThis.SF?.deprecations?.warn}()){const i=t?`${t}: `:"",a="value"===e?`${n}="${o}"`:`${e} ${o}`;globalThis.console?.warn?.(`[SIMAI Framework] ${i}${a} is a legacy name${s?`; write ${s}`:""}. See contracts/changes/journal.json.`)}}if(n.d(e,{YB:()=>o}),"undefined"!=typeof globalThis){globalThis.SF=globalThis.SF||{};const t=globalThis.SF.deprecations||{};t.list=function(){return[...i().values()].map(t=>({...t}))},t.clear=function(){i().clear()},t.note=o,globalThis.SF.deprecations=t}},c76f8895b630(t,e,n){n.a(t,async(t,e)=>{try{var i=n("fbe0570fcc69"),o=n("5168bdf4a1f9"),s=n("ddf1cdb42ecc"),a=n("2feae72af89f"),r=n("06e8cd089f28"),l=t([i,o,s,a]);[i,o,s,a]=l.then?(await l)():l;var c=n.n(i);const u=new Set(["template","size","appearance","type","scheme","status","text","icon","icon-start","icon-end","icon-left","icon-right","icon-position","text-position","spacing","tightness","radius","root-class","loading","segment","disabled","native-type","aria-label","class","style","id","slot"]);function d(t,e){t?.forwardHostAttributes(e,{exclude:u,transferDataAttributes:!0,storageKey:"__sfButtonForwardedDataAttributes",targetStorageKey:"__sfButtonAttributeKeys"})}const h=["default","tonal","outline","link","surface"],f={ghost:"link"},g={danger:"error",critical:"error"};class p extends(c()){constructor(){super(),this._attributeObserver=null}static get props(){return{templateName:{attribute:"template",default:"default"},size:{default:"1"},appearance:{default:"default",aliases:["type"]},scheme:{default:"primary"},status:{default:"",values:["","error"]},textPosition:{type:String,default:"center"},text:{default:""},segment:{default:""},icon:{default:""},iconStart:{type:String,default:null},iconEnd:{type:String,default:null},iconLeft:{default:""},iconRight:{default:""},iconPosition:{default:"start"},spacing:{type:String,default:null},tightness:{default:"",values:["","low","high","highest"]},radius:{default:"",values:["","default","square","rounded"]},rootClass:{default:""},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},nativeType:{default:"button"},ariaLabel:{default:""}}}get templateName(){return this.getAttribute("template")||"default"}get size(){return this.getAttribute("size")||"1"}get appearance(){const t=this.getAttribute("appearance")||this.getAttribute("type")||"default";return Object.hasOwn(f,t)?((0,r.YB)({component:this.localName,kind:"value",attribute:"appearance",from:t,to:f[t]}),f[t]):h.includes(t)?t:"default"}get type(){return this.appearance}get scheme(){return this.getAttribute("scheme")||"primary"}get status(){const t=this.getAttribute("status")||"";return g[t]?((0,r.YB)({component:this.localName,kind:"value",attribute:"status",from:t,to:g[t]}),g[t]):t}get text(){return this.getAttribute("text")||""}get icon(){return this.getAttribute("icon")||""}get iconLeft(){return this.hasAttribute("icon-left")&&(0,r.YB)({component:this.localName,kind:"attribute",from:"icon-left",to:"icon-start"}),this.getAttribute("icon-start")??this.getAttribute("icon-left")}get iconRight(){return this.hasAttribute("icon-right")&&(0,r.YB)({component:this.localName,kind:"attribute",from:"icon-right",to:"icon-end"}),this.getAttribute("icon-end")??this.getAttribute("icon-right")}get iconStart(){return this.iconLeft}get iconEnd(){return this.iconRight}get iconPosition(){return this.getAttribute("icon-position")||"start"}noteLegacyNames(){return this.hasAttribute("tightness")&&(0,r.YB)({component:this.localName,kind:"attribute",from:"tightness",to:"spacing"}),{}}get tightness(){return(0,a.resolveControlSpacing)({spacing:this.getAttribute("spacing"),tightness:this.getAttribute("tightness")}).tightness}get spacing(){return(0,a.resolveControlSpacing)({spacing:this.getAttribute("spacing"),tightness:this.getAttribute("tightness")}).spacing}get radius(){return this.getEnumAttr("radius",["default","square","rounded"],"")}get rootClass(){return this.getAttribute("root-class")||""}get loading(){return this.getBooleanAttr("loading",!1)}get disabled(){return this.getBooleanAttr("disabled",!1)}get nativeType(){return this.getAttribute("native-type")||"button"}get ariaLabel(){return this.getAttribute("aria-label")||""}templateContext(){const t=this.getPropsContext();return this.createTemplateContext({...t,iconLeft:t.iconStart??t.iconLeft,iconRight:t.iconEnd??t.iconRight,iconStart:this.iconStart,iconEnd:this.iconEnd,type:this.type,appearance:"ghost"===t.appearance?"link":t.appearance,status:this.status,...(0,a.resolveControlSpacing)({spacing:this.getAttribute("spacing"),tightness:this.getAttribute("tightness")}),...this.noteLegacyNames?.(),component:this})}template(){return(0,o.B)(this.templateContext())}resolveUpdateMode(){return"lit"}afterRender(){d(this,this.querySelector(".sf-button")),this._attributeObserver||(this._attributeObserver=this.observeForwardedHostAttributes(()=>this.querySelector(".sf-button"),{exclude:u,transferDataAttributes:!0,storageKey:"__sfButtonForwardedDataAttributes",targetStorageKey:"__sfButtonAttributeKeys"})._forwardHostAttributeObserver)}get value(){return{template:this.templateName,size:this.size,appearance:this.appearance,type:this.type,scheme:this.scheme,status:this.status,text:this.text,icon:this.icon,iconLeft:this.iconLeft,iconRight:this.iconRight,iconStart:this.iconStart,iconEnd:this.iconEnd,iconPosition:this.iconPosition,tightness:this.tightness,spacing:this.spacing,radius:this.radius,rootClass:this.rootClass,loading:this.loading,disabled:this.disabled,nativeType:this.nativeType,ariaLabel:this.ariaLabel}}onClick(t,e){return"function"==typeof t&&this.addEventListener("click",t,e),this}onFocus(t,e){return"function"==typeof t&&this.addEventListener("focusin",t,e),this}onBlur(t,e){return"function"==typeof t&&this.addEventListener("focusout",t,e),this}onMouseEnter(t,e){return"function"==typeof t&&this.addEventListener("mouseenter",t,e),this}onMouseLeave(t,e){return"function"==typeof t&&this.addEventListener("mouseleave",t,e),this}setDisabled(t=!0){return t?this.setAttribute("disabled",""):this.removeAttribute("disabled"),this}createIcon(t){return t?s.html`<sf-icon icon="${t}" root-class="pointer-event-none" weight="400" aria-hidden="true"></sf-icon>`:""}set value(t){this.setValueAttributes(t)}onDisconnected(){this.disconnectForwardedHostAttributes(),this._attributeObserver=null,super.onDisconnected?.()}}p.define("sf-button"),e()}catch(b){e(b)}})},"5168bdf4a1f9"(t,e,n){n.a(t,async(t,i)=>{try{n.d(e,{B:()=>l});var o=n("ddf1cdb42ecc"),s=n("50d2a204ba4c"),a=t([o]),r=a.then?(await a)():a;o=r[0];function l(t){const{size:e,appearance:n,type:i,scheme:a,status:r,text:l,icon:c,iconLeft:u,iconRight:d,iconPosition:h,spacing:f,radius:g,rootClass:p,textPosition:b,loading:m,disabled:y,nativeType:S,ariaLabel:v,segment:A}=t,x=String(h||"start").toLowerCase(),w=["right","end"].includes(x),$=t.iconStart??(u||(c&&!w?c:"")),_=t.iconEnd??(d||(c&&w?c:"")),M=t.component,T=M?.hasSlotContent?.("icon-start")?M.getSlotContent("icon-start"):M?.hasSlotContent?.("icon-left")?M.getSlotContent("icon-left"):M.createIcon($),k=M?.hasSlotContent?.("icon-end")?M.getSlotContent("icon-end"):M?.hasSlotContent?.("icon-right")?M.getSlotContent("icon-right"):M.createIcon(_),L=M?.hasSlotContent?.("text")?M.getSlotContent("text"):l,C=!T&&!k;let E=T,F=k,B="";if(m){const t=t=>(0,s.le)({className:"sf-button-spinner",overlay:t});T?E=t(!1):k?F=t(!1):B=t(!0)}const N=["sf-button",`sf-button--size-${e}`,`sf-button--${n||i}`,`sf-button--${r||a}`,"flex","items-cross-center",A?`segment-${A}`:"",f&&"normal"!==f?`spacing-${f}`:"",g?`radius-${g}`:"",p,m?"loading sf-button-state-loading":""].filter(Boolean);return o.html`
         <button
-                type=${y}
-                class=${E.join(" ")}
-                style=${t.rootStyle||s.nothing}
-                ?disabled=${m||b}
-                aria-label=${S||s.nothing}
-                aria-busy=${b?"true":s.nothing}
+                type=${S}
+                class=${N.join(" ")}
+                style=${t.rootStyle||o.nothing}
+                ?disabled=${y||m}
+                aria-label=${v||o.nothing}
+                aria-busy=${m?"true":o.nothing}
         >
-            ${$}
-            ${L?s.html`<span
-                    class="sf-button-text-container text-${p} pointer-event-none${C?" flex-1":""}">
+            ${B}
+            ${E}
+            ${L?o.html`<span
+                    class="sf-button-text-container text-${b} pointer-event-none${C?" flex-1":""}">
         ${L}
       </span>`:""}
             ${F}
         </button>
-    `}i()}catch(c){i(c)}})},"2feae72af89f"(t){t.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("control-spacing"):new Promise(t=>globalThis.addEventListener("sf-runtime-ready",()=>t(globalThis.SF.runtimeModule("control-spacing")),{once:!0}))},ddf1cdb42ecc(t){t.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("lit"):new Promise(t=>globalThis.addEventListener("sf-runtime-ready",()=>t(globalThis.SF.runtimeModule("lit")),{once:!0}))},fbe0570fcc69(t){t.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("smart-base"):new Promise(t=>globalThis.addEventListener("sf-runtime-ready",()=>t(globalThis.SF.runtimeModule("smart-base")),{once:!0}))}};const e={};function n(i){const s=e[i];if(void 0!==s)return s.exports;const o=e[i]={exports:{}};return t[i](o,o.exports,n),o.exports}(()=>{const t="function"==typeof Symbol,e=t?Symbol("webpack queues"):"__webpack_queues__",i=t?Symbol("webpack exports"):"__webpack_exports__",s=t?Symbol("webpack error"):"__webpack_error__",o=t=>{t?.d<1&&(t.d=1,t.forEach(t=>t.r--),t.forEach(t=>t.r--?t.r++:t()))};n.a=(t,n,r)=>{let a;r&&((a=[]).d=-1);const c=new Set,l=t.exports;let u,d,h;const g=new Promise((t,e)=>{h=e,d=t});g[i]=l,g[e]=t=>(a&&t(a),c.forEach(t),g.catch(t=>{})),t.exports=g;n(t=>{let n;u=(t=>t.map(t=>{if(null!==t&&"object"==typeof t){if(t[e])return t;if(t.then){const n=[];n.d=0,t.then(t=>{r[i]=t,o(n)},t=>{r[s]=t,o(n)});const r={};return r[e]=t=>t(n),r}}const n={};return n[e]=t=>{},n[i]=t,n}))(t);const r=()=>u.map(t=>{if(t[s])throw t[s];return t[i]}),l=new Promise(t=>{n=()=>t(r),n.r=0;const i=t=>t!==a&&!c.has(t)&&(c.add(t),t&&!t.d&&(n.r++,t.push(n)));u.map(t=>t[e](i))});return n.r?l:r()},t=>(t?h(g[s]=t):d(l),o(a))),a?.d<0&&(a.d=0)}})(),n.n=t=>{const e=t&&t.__esModule?()=>t.default:()=>t;return n.d(e,{a:e}),e},n.d=(t,e)=>{if(Array.isArray(e))for(var i=0;i<e.length;){var s=e[i++],o=e[i++];n.o(t,s)?0===o&&i++:0===o?Object.defineProperty(t,s,{enumerable:!0,value:e[i++]}):Object.defineProperty(t,s,{enumerable:!0,get:o})}else for(var s in e)n.o(e,s)&&!n.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);n("c76f8895b630")})();
+    `}i()}catch(c){i(c)}})},"2feae72af89f"(t){t.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("control-spacing"):new Promise(t=>globalThis.addEventListener("sf-runtime-ready",()=>t(globalThis.SF.runtimeModule("control-spacing")),{once:!0}))},ddf1cdb42ecc(t){t.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("lit"):new Promise(t=>globalThis.addEventListener("sf-runtime-ready",()=>t(globalThis.SF.runtimeModule("lit")),{once:!0}))},fbe0570fcc69(t){t.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("smart-base"):new Promise(t=>globalThis.addEventListener("sf-runtime-ready",()=>t(globalThis.SF.runtimeModule("smart-base")),{once:!0}))}};const e={};function n(i){const o=e[i];if(void 0!==o)return o.exports;const s=e[i]={exports:{}};return t[i](s,s.exports,n),s.exports}(()=>{const t="function"==typeof Symbol,e=t?Symbol("webpack queues"):"__webpack_queues__",i=t?Symbol("webpack exports"):"__webpack_exports__",o=t?Symbol("webpack error"):"__webpack_error__",s=t=>{t?.d<1&&(t.d=1,t.forEach(t=>t.r--),t.forEach(t=>t.r--?t.r++:t()))};n.a=(t,n,a)=>{let r;a&&((r=[]).d=-1);const l=new Set,c=t.exports;let u,d,h;const f=new Promise((t,e)=>{h=e,d=t});f[i]=c,f[e]=t=>(r&&t(r),l.forEach(t),f.catch(t=>{})),t.exports=f;n(t=>{let n;u=(t=>t.map(t=>{if(null!==t&&"object"==typeof t){if(t[e])return t;if(t.then){const n=[];n.d=0,t.then(t=>{a[i]=t,s(n)},t=>{a[o]=t,s(n)});const a={};return a[e]=t=>t(n),a}}const n={};return n[e]=t=>{},n[i]=t,n}))(t);const a=()=>u.map(t=>{if(t[o])throw t[o];return t[i]}),c=new Promise(t=>{n=()=>t(a),n.r=0;const i=t=>t!==r&&!l.has(t)&&(l.add(t),t&&!t.d&&(n.r++,t.push(n)));u.map(t=>t[e](i))});return n.r?c:a()},t=>(t?h(f[o]=t):d(c),s(r))),r?.d<0&&(r.d=0)}})(),n.n=t=>{const e=t&&t.__esModule?()=>t.default:()=>t;return n.d(e,{a:e}),e},n.d=(t,e)=>{if(Array.isArray(e))for(var i=0;i<e.length;){var o=e[i++],s=e[i++];n.o(t,o)?0===s&&i++:0===s?Object.defineProperty(t,o,{enumerable:!0,value:e[i++]}):Object.defineProperty(t,o,{enumerable:!0,get:s})}else for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);n("c76f8895b630")})();

package/distr/smart/buttons/smart.manifest.json

@@ -22,7 +22,8 @@
   "exported_parts": [],
   "composition": {
     "uses": [
-      "smart.icons"
+      "smart.icons",
+      "component.spinner"
     ],
     "public_parts": [],
     "declarative": {
@@ -244,7 +245,7 @@
       "loading": {
         "type": "boolean",
         "default": false,
-        "description": "Loading state flag."
+        "description": "Loading state: the spinner at the icon's size in place of the start icon (else the end icon); without an icon it lies over the label, which keeps its place, so the width does not change. The spinner takes the page's look (data-sf-spinner). Sets aria-busy and disables the native button."
       },
       "disabled": {
         "type": "boolean",

package/distr/smart/buttons/template/default.js

@@ -1,4 +1,5 @@
 import {html, nothing} from 'lit';
+import {createInlineSpinner} from '../../../../component/spinner/js/_spinner-draw';
 
 
 export function renderButtonTemplate(context) {
@@ -46,6 +47,19 @@ export function renderButtonTemplate(context) {
             ? component.getSlotContent('text')
             : text;
     const fullText = !leftIconContent && !rightIconContent;
+    // Loading shows the spinner at the icon's size (simai/ui-source#10): in
+    // place of the start icon, else of the end icon; a button without an icon
+    // lays it over its label, which keeps its place (and the button its width)
+    // and stays the accessible name. Icon-only is the first case.
+    let startContent = leftIconContent;
+    let endContent = rightIconContent;
+    let overlayContent = '';
+    if (loading) {
+        const spinner = (overlay) => createInlineSpinner({className: 'sf-button-spinner', overlay});
+        if (leftIconContent) startContent = spinner(false);
+        else if (rightIconContent) endContent = spinner(false);
+        else overlayContent = spinner(true);
+    }
     const rootClasses = [
         'sf-button',
         `sf-button--size-${size}`,
@@ -75,12 +89,13 @@ export function renderButtonTemplate(context) {
                 aria-label=${ariaLabel || nothing}
                 aria-busy=${loading ? 'true' : nothing}
         >
-            ${leftIconContent}
+            ${overlayContent}
+            ${startContent}
             ${textContent ? html`<span
                     class="sf-button-text-container text-${textPosition} pointer-event-none${fullText ? ' flex-1' : ''}">
         ${textContent}
       </span>` : ''}
-            ${rightIconContent}
+            ${endContent}
         </button>
     `;
 }

package/distr/smart/icon-buttons/js/icon-buttons.min.js

@@ -1,14 +1,14 @@
-(()=>{"use strict";var t={"2557e7cf84cc"(t,e,s){s.a(t,async(t,e)=>{try{var i=s("fbe0570fcc69"),n=s("7a7da66f4cf1"),a=s("2feae72af89f"),r=t([i,n,a]);[i,n,a]=r.then?(await r)():r;var o=s.n(i);const l=new Set(["template","kind","variant","size","appearance","type","scheme","status","icon","filled","spacing","tightness","radius","segment","root-class","loading","disabled","native-type","aria-label","class","style","id","slot"]);function u(t,e){t?.forwardHostAttributes(e,{exclude:l,transferDataAttributes:!0,storageKey:"__sfIconButtonForwardedDataAttributes",targetStorageKey:"__sfIconButtonAttributeKeys"})}const d=["default","tonal","outline","link","surface","ghost"];class c extends(o()){constructor(){super(),this._attributeObserver=null}static get props(){return{templateName:{attribute:"template",default:"default"},kind:{default:"icon",values:["icon","close"],aliases:["variant"]},size:{default:"1"},appearance:{default:"default",aliases:["type"]},scheme:{default:"primary"},status:{default:"",values:["","error"]},segment:{default:""},icon:{default:"add"},filled:{type:Boolean,default:!1},spacing:{type:String,default:null},tightness:{default:"",values:["","low","high","highest"]},radius:{default:"",values:["","default","square","rounded"]},rootClass:{default:""},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},nativeType:{default:"button"},ariaLabel:{default:""}}}get templateName(){return this.getAttribute("template")||"default"}get size(){return this.getAttribute("size")||"1"}get kind(){return this.getProp("kind")}get variant(){return this.kind}get appearance(){const t=this.getAttribute("appearance")||this.getAttribute("type")||"default";return d.includes(t)?t:"default"}get type(){return this.appearance}get scheme(){return this.getAttribute("scheme")||"primary"}get status(){return this.getAttribute("status")||""}get icon(){return this.getAttribute("icon")||"add"}get segment(){return this.getEnumAttr("segment",["start","middle","end"],"")}get filled(){return this.getBooleanAttr("filled",!1)}get tightness(){return(0,a.resolveControlSpacing)({spacing:this.getAttribute("spacing"),tightness:this.getAttribute("tightness")}).tightness}get spacing(){return(0,a.resolveControlSpacing)({spacing:this.getAttribute("spacing"),tightness:this.getAttribute("tightness")}).spacing}get radius(){return this.getEnumAttr("radius",["default","square","rounded"],"")}get rootClass(){return this.getAttribute("root-class")||""}get loading(){return this.getBooleanAttr("loading",!1)}get disabled(){return this.getBooleanAttr("disabled",!1)}get nativeType(){return this.getAttribute("native-type")||"button"}get ariaLabel(){return this.getAttribute("aria-label")||""}templateContext(){const t=this.getPropsContext();return this.createTemplateContext({...t,type:this.type,variant:this.variant,...(0,a.resolveControlSpacing)({spacing:this.getAttribute("spacing"),tightness:this.getAttribute("tightness")}),component:this})}template(){return(0,n.y)(this.templateContext())}resolveUpdateMode(t=[]){const e=["disabled","aria-label","icon","loading"];return t.length>0&&t.every(t=>e.includes(t))?"dom":"lit"}updateDom(t=[]){const e=this.querySelector(".sf-icon-button");if(!e)return!1;if((t.includes("disabled")||t.includes("loading"))&&(e.disabled=this.disabled||this.loading),t.includes("aria-label")&&(this.ariaLabel?e.setAttribute("aria-label",this.ariaLabel):e.removeAttribute("aria-label")),t.includes("icon")){const t=e.querySelector(".sf-icon");t&&(t.textContent=this.icon)}return t.includes("loading")&&(e.classList.toggle("loading",this.loading),e.classList.toggle("sf-icon-button-state-loading",this.loading),this.loading?e.setAttribute("aria-busy","true"):e.removeAttribute("aria-busy")),u(this,e),!0}afterRender(){u(this,this.querySelector(".sf-icon-button")),this._attributeObserver||(this._attributeObserver=this.observeForwardedHostAttributes(()=>this.querySelector(".sf-icon-button"),{exclude:l,transferDataAttributes:!0,storageKey:"__sfIconButtonForwardedDataAttributes",targetStorageKey:"__sfIconButtonAttributeKeys"})._forwardHostAttributeObserver)}get value(){return{template:this.templateName,size:this.size,variant:this.variant,appearance:this.appearance,type:this.type,scheme:this.scheme,status:this.status,icon:this.icon,segment:this.segment,filled:this.filled,tightness:this.tightness,spacing:this.spacing,radius:this.radius,rootClass:this.rootClass,loading:this.loading,disabled:this.disabled,nativeType:this.nativeType,ariaLabel:this.ariaLabel}}setButtonAttributes(t={}){return this.setState({buttonAttributes:t}),this}onClick(t,e){return"function"==typeof t&&this.addEventListener("click",t,e),this}onFocus(t,e){return"function"==typeof t&&this.addEventListener("focusin",t,e),this}onBlur(t,e){return"function"==typeof t&&this.addEventListener("focusout",t,e),this}onMouseEnter(t,e){return"function"==typeof t&&this.addEventListener("mouseenter",t,e),this}onMouseLeave(t,e){return"function"==typeof t&&this.addEventListener("mouseleave",t,e),this}setDisabled(t=!0){return t?this.setAttribute("disabled",""):this.removeAttribute("disabled"),this}set value(t){this.setValueAttributes(t)}onDisconnected(){this.disconnectForwardedHostAttributes(),this._attributeObserver=null,super.onDisconnected?.()}}c.define("sf-icon-button"),e()}catch(h){e(h)}})},"7a7da66f4cf1"(t,e,s){s.a(t,async(t,i)=>{try{s.d(e,{y:()=>l});var n=s("ddf1cdb42ecc"),a=t([n]),r=a.then?(await a)():a;n=r[0];const o=new Set(["1/3","1/2","1","2","3"]);function l(t){const{size:e,appearance:s,type:i,scheme:a,status:r,icon:l,segment:u,tightness:d,kind:c,variant:h,radius:g,filled:b,rootClass:f,loading:p,disabled:m,nativeType:y,ariaLabel:v}=t,A=["sf-icon-button",o.has(e||"1")?`sf-icon-button--size-${e||"1"}`:"",`sf-icon-button--${c??h??"icon"}`,`sf-icon-button--${s||i||"default"}`,"flex","items-cross-center",u?`segment-${u}`:"",`sf-icon-button--${r||a||"primary"}`,d?`tightness-${d}`:"",g?`radius-${g}`:"",f,p?"loading sf-icon-button-state-loading":""].filter(Boolean),S=t.component?.hasSlotContent?.("icon")?t.component.getSlotContent("icon"):"close"===(c??h)?n.html`
+(()=>{"use strict";var t={"50d2a204ba4c"(t,e,s){s.d(e,{le:()=>i});function a(t,e={}){const s=document.createElementNS("http://www.w3.org/2000/svg",t);return Object.entries(e).forEach(([t,e])=>{null!=e&&""!==e&&s.setAttribute(t,String(e))}),s}const n=t=>Math.round(1e3*t)/1e3;function r(t={}){return function({width:t=24,height:e=24,stroke:s=2,dots:r=8,filled:i=3,dotRadius:o=null,direction:l="clockwise",pixel:u=!1}={}){const c=t/2,d=e/2,h=Math.min(t,e)/2,f=Math.max(1,h-s/2),g=a("svg",{class:"sf-loader-svg",viewBox:`0 0 ${t} ${e}`,width:u?t:null,height:u?e:null,"aria-hidden":"true",focusable:"false"}),p={cx:c,cy:d,r:n(f),fill:"none",stroke:"currentColor","stroke-width":s},b=a("circle",{class:"sf-loader-ring-filled",...p,opacity:"0.3"}),m=a("circle",{class:"sf-loader-ring-accent",...p,"stroke-linecap":"round",pathLength:100,"stroke-dasharray":"0 100",transform:`rotate(90 ${c} ${d})`}),y=a("g",{class:"sf-loader-comet",display:"none",transform:`rotate(-90 ${c} ${d})`});for(let t=0;t<10;t+=1){const e=9===t;y.append(a("circle",{class:"sf-loader-comet-segment"+(e?" sf-loader-comet-head":""),...p,"stroke-linecap":e?"round":"butt",pathLength:100,"stroke-dasharray":`${n(4)} ${n(96)}`,"stroke-dashoffset":n(-4*t),opacity:n(((t+1)/10)**1.6)}))}const v=Math.max(3,Math.min(32,Math.floor(Number(r)||8))),A=Math.max(1,Math.min(v,Math.floor(Number(i)||3))),w=Math.min(s,.7*Math.PI*(h-s)/v),S=null==o||""===o?w:Math.max(1,Math.min(Number(o)||w,h/4)),x=Math.max(S,h-S),M=a("g",{class:"sf-loader-dots",display:"none",style:`--sf-loader-dot-count:${v}; --sf-loader-dot-filled:${A};`});for(let t=0;t<v;t+=1){const e=2*Math.PI/v*t-Math.PI/2,s="counterclockwise"===l?t:(v-t)%v;M.append(a("circle",{class:"sf-loader-dot"+(t<A?" sf-loader-dot--active":""),cx:n(c+x*Math.cos(e)),cy:n(d+x*Math.sin(e)),r:n(S),fill:"currentColor",style:`--sf-loader-dot-index:${t}; --sf-loader-dot-step:${s};`}))}return g.append(b,m,y,M),g}({...t,width:24,height:24,stroke:2,dotRadius:null,pixel:!1})}function i({className:t="",overlay:e=!1}={}){const s=document.createElement("span");s.className=["sf-loader-container","sf-loader--infinite",t,t&&e?`${t}--overlay`:""].filter(Boolean).join(" "),s.dataset.sfSpinnerBound="1",s.dataset.infinite="true",s.setAttribute("aria-hidden","true");const a=document.createElement("span");return a.className="sf-loader--loading-indicator",a.append(r()),s.append(a),s}},"2557e7cf84cc"(t,e,s){s.a(t,async(t,e)=>{try{var a=s("fbe0570fcc69"),n=s("7a7da66f4cf1"),r=s("2feae72af89f"),i=t([a,n,r]);[a,n,r]=i.then?(await i)():i;var o=s.n(a);const l=new Set(["template","kind","variant","size","appearance","type","scheme","status","icon","filled","spacing","tightness","radius","segment","root-class","loading","disabled","native-type","aria-label","class","style","id","slot"]);function u(t,e){t?.forwardHostAttributes(e,{exclude:l,transferDataAttributes:!0,storageKey:"__sfIconButtonForwardedDataAttributes",targetStorageKey:"__sfIconButtonAttributeKeys"})}const c=["default","tonal","outline","link","surface","ghost"];class d extends(o()){constructor(){super(),this._attributeObserver=null}static get props(){return{templateName:{attribute:"template",default:"default"},kind:{default:"icon",values:["icon","close"],aliases:["variant"]},size:{default:"1"},appearance:{default:"default",aliases:["type"]},scheme:{default:"primary"},status:{default:"",values:["","error"]},segment:{default:""},icon:{default:"add"},filled:{type:Boolean,default:!1},spacing:{type:String,default:null},tightness:{default:"",values:["","low","high","highest"]},radius:{default:"",values:["","default","square","rounded"]},rootClass:{default:""},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},nativeType:{default:"button"},ariaLabel:{default:""}}}get templateName(){return this.getAttribute("template")||"default"}get size(){return this.getAttribute("size")||"1"}get kind(){return this.getProp("kind")}get variant(){return this.kind}get appearance(){const t=this.getAttribute("appearance")||this.getAttribute("type")||"default";return c.includes(t)?t:"default"}get type(){return this.appearance}get scheme(){return this.getAttribute("scheme")||"primary"}get status(){return this.getAttribute("status")||""}get icon(){return this.getAttribute("icon")||"add"}get segment(){return this.getEnumAttr("segment",["start","middle","end"],"")}get filled(){return this.getBooleanAttr("filled",!1)}get tightness(){return(0,r.resolveControlSpacing)({spacing:this.getAttribute("spacing"),tightness:this.getAttribute("tightness")}).tightness}get spacing(){return(0,r.resolveControlSpacing)({spacing:this.getAttribute("spacing"),tightness:this.getAttribute("tightness")}).spacing}get radius(){return this.getEnumAttr("radius",["default","square","rounded"],"")}get rootClass(){return this.getAttribute("root-class")||""}get loading(){return this.getBooleanAttr("loading",!1)}get disabled(){return this.getBooleanAttr("disabled",!1)}get nativeType(){return this.getAttribute("native-type")||"button"}get ariaLabel(){return this.getAttribute("aria-label")||""}templateContext(){const t=this.getPropsContext();return this.createTemplateContext({...t,type:this.type,variant:this.variant,...(0,r.resolveControlSpacing)({spacing:this.getAttribute("spacing"),tightness:this.getAttribute("tightness")}),component:this})}template(){return(0,n.y)(this.templateContext())}resolveUpdateMode(t=[]){const e=["disabled","aria-label","icon"];return t.length>0&&t.every(t=>e.includes(t))?"dom":"lit"}updateDom(t=[]){const e=this.querySelector(".sf-icon-button");if(!e)return!1;if(t.includes("disabled")&&(e.disabled=this.disabled||this.loading),t.includes("aria-label")&&(this.ariaLabel?e.setAttribute("aria-label",this.ariaLabel):e.removeAttribute("aria-label")),t.includes("icon")){const t=e.querySelector(".sf-icon");t&&(t.textContent=this.icon)}return u(this,e),!0}afterRender(){u(this,this.querySelector(".sf-icon-button")),this._attributeObserver||(this._attributeObserver=this.observeForwardedHostAttributes(()=>this.querySelector(".sf-icon-button"),{exclude:l,transferDataAttributes:!0,storageKey:"__sfIconButtonForwardedDataAttributes",targetStorageKey:"__sfIconButtonAttributeKeys"})._forwardHostAttributeObserver)}get value(){return{template:this.templateName,size:this.size,variant:this.variant,appearance:this.appearance,type:this.type,scheme:this.scheme,status:this.status,icon:this.icon,segment:this.segment,filled:this.filled,tightness:this.tightness,spacing:this.spacing,radius:this.radius,rootClass:this.rootClass,loading:this.loading,disabled:this.disabled,nativeType:this.nativeType,ariaLabel:this.ariaLabel}}setButtonAttributes(t={}){return this.setState({buttonAttributes:t}),this}onClick(t,e){return"function"==typeof t&&this.addEventListener("click",t,e),this}onFocus(t,e){return"function"==typeof t&&this.addEventListener("focusin",t,e),this}onBlur(t,e){return"function"==typeof t&&this.addEventListener("focusout",t,e),this}onMouseEnter(t,e){return"function"==typeof t&&this.addEventListener("mouseenter",t,e),this}onMouseLeave(t,e){return"function"==typeof t&&this.addEventListener("mouseleave",t,e),this}setDisabled(t=!0){return t?this.setAttribute("disabled",""):this.removeAttribute("disabled"),this}set value(t){this.setValueAttributes(t)}onDisconnected(){this.disconnectForwardedHostAttributes(),this._attributeObserver=null,super.onDisconnected?.()}}d.define("sf-icon-button"),e()}catch(h){e(h)}})},"7a7da66f4cf1"(t,e,s){s.a(t,async(t,a)=>{try{s.d(e,{y:()=>u});var n=s("ddf1cdb42ecc"),r=s("50d2a204ba4c"),i=t([n]),o=i.then?(await i)():i;n=o[0];const l=new Set(["1/3","1/2","1","2","3"]);function u(t){const{size:e,appearance:s,type:a,scheme:i,status:o,icon:u,segment:c,tightness:d,kind:h,variant:f,radius:g,filled:p,rootClass:b,loading:m,disabled:y,nativeType:v,ariaLabel:A}=t,w=["sf-icon-button",l.has(e||"1")?`sf-icon-button--size-${e||"1"}`:"",`sf-icon-button--${h??f??"icon"}`,`sf-icon-button--${s||a||"default"}`,"flex","items-cross-center",c?`segment-${c}`:"",`sf-icon-button--${o||i||"primary"}`,d?`tightness-${d}`:"",g?`radius-${g}`:"",b,m?"loading sf-icon-button-state-loading":""].filter(Boolean),S=m?(0,r.le)({className:"sf-icon-button-spinner"}):t.component?.hasSlotContent?.("icon")?t.component.getSlotContent("icon"):"close"===(h??f)?n.html`
                             <sf-close root-class="pointer-event-none" size="${e||"1"}"></sf-close>`:n.html`
-                            <sf-icon filled="${b}" root-class="pointer-event-none" icon="${l}" weight="400" aria-hidden="true"></sf-icon>`;return n.html`
+                            <sf-icon filled="${p}" root-class="pointer-event-none" icon="${u}" weight="400" aria-hidden="true"></sf-icon>`;return n.html`
         <button
-                type=${y}
-                class=${A.join(" ")}
+                type=${v}
+                class=${w.join(" ")}
                 style=${t.rootStyle||n.nothing}
-                ?disabled=${m||p}
-                aria-label=${v||n.nothing}
-                aria-busy=${p?"true":n.nothing}
+                ?disabled=${y||m}
+                aria-label=${A||n.nothing}
+                aria-busy=${m?"true":n.nothing}
         >
             ${S}
         </button>
-    `}i()}catch(u){i(u)}})},"2feae72af89f"(t){t.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("control-spacing"):new Promise(t=>globalThis.addEventListener("sf-runtime-ready",()=>t(globalThis.SF.runtimeModule("control-spacing")),{once:!0}))},ddf1cdb42ecc(t){t.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("lit"):new Promise(t=>globalThis.addEventListener("sf-runtime-ready",()=>t(globalThis.SF.runtimeModule("lit")),{once:!0}))},fbe0570fcc69(t){t.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("smart-base"):new Promise(t=>globalThis.addEventListener("sf-runtime-ready",()=>t(globalThis.SF.runtimeModule("smart-base")),{once:!0}))}};const e={};function s(i){const n=e[i];if(void 0!==n)return n.exports;const a=e[i]={exports:{}};return t[i](a,a.exports,s),a.exports}(()=>{const t="function"==typeof Symbol,e=t?Symbol("webpack queues"):"__webpack_queues__",i=t?Symbol("webpack exports"):"__webpack_exports__",n=t?Symbol("webpack error"):"__webpack_error__",a=t=>{t?.d<1&&(t.d=1,t.forEach(t=>t.r--),t.forEach(t=>t.r--?t.r++:t()))};s.a=(t,s,r)=>{let o;r&&((o=[]).d=-1);const l=new Set,u=t.exports;let d,c,h;const g=new Promise((t,e)=>{h=e,c=t});g[i]=u,g[e]=t=>(o&&t(o),l.forEach(t),g.catch(t=>{})),t.exports=g;s(t=>{let s;d=(t=>t.map(t=>{if(null!==t&&"object"==typeof t){if(t[e])return t;if(t.then){const s=[];s.d=0,t.then(t=>{r[i]=t,a(s)},t=>{r[n]=t,a(s)});const r={};return r[e]=t=>t(s),r}}const s={};return s[e]=t=>{},s[i]=t,s}))(t);const r=()=>d.map(t=>{if(t[n])throw t[n];return t[i]}),u=new Promise(t=>{s=()=>t(r),s.r=0;const i=t=>t!==o&&!l.has(t)&&(l.add(t),t&&!t.d&&(s.r++,t.push(s)));d.map(t=>t[e](i))});return s.r?u:r()},t=>(t?h(g[n]=t):c(u),a(o))),o?.d<0&&(o.d=0)}})(),s.n=t=>{const e=t&&t.__esModule?()=>t.default:()=>t;return s.d(e,{a:e}),e},s.d=(t,e)=>{if(Array.isArray(e))for(var i=0;i<e.length;){var n=e[i++],a=e[i++];s.o(t,n)?0===a&&i++:0===a?Object.defineProperty(t,n,{enumerable:!0,value:e[i++]}):Object.defineProperty(t,n,{enumerable:!0,get:a})}else for(var n in e)s.o(e,n)&&!s.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},s.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);s("2557e7cf84cc")})();
+    `}a()}catch(c){a(c)}})},"2feae72af89f"(t){t.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("control-spacing"):new Promise(t=>globalThis.addEventListener("sf-runtime-ready",()=>t(globalThis.SF.runtimeModule("control-spacing")),{once:!0}))},ddf1cdb42ecc(t){t.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("lit"):new Promise(t=>globalThis.addEventListener("sf-runtime-ready",()=>t(globalThis.SF.runtimeModule("lit")),{once:!0}))},fbe0570fcc69(t){t.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("smart-base"):new Promise(t=>globalThis.addEventListener("sf-runtime-ready",()=>t(globalThis.SF.runtimeModule("smart-base")),{once:!0}))}};const e={};function s(a){const n=e[a];if(void 0!==n)return n.exports;const r=e[a]={exports:{}};return t[a](r,r.exports,s),r.exports}(()=>{const t="function"==typeof Symbol,e=t?Symbol("webpack queues"):"__webpack_queues__",a=t?Symbol("webpack exports"):"__webpack_exports__",n=t?Symbol("webpack error"):"__webpack_error__",r=t=>{t?.d<1&&(t.d=1,t.forEach(t=>t.r--),t.forEach(t=>t.r--?t.r++:t()))};s.a=(t,s,i)=>{let o;i&&((o=[]).d=-1);const l=new Set,u=t.exports;let c,d,h;const f=new Promise((t,e)=>{h=e,d=t});f[a]=u,f[e]=t=>(o&&t(o),l.forEach(t),f.catch(t=>{})),t.exports=f;s(t=>{let s;c=(t=>t.map(t=>{if(null!==t&&"object"==typeof t){if(t[e])return t;if(t.then){const s=[];s.d=0,t.then(t=>{i[a]=t,r(s)},t=>{i[n]=t,r(s)});const i={};return i[e]=t=>t(s),i}}const s={};return s[e]=t=>{},s[a]=t,s}))(t);const i=()=>c.map(t=>{if(t[n])throw t[n];return t[a]}),u=new Promise(t=>{s=()=>t(i),s.r=0;const a=t=>t!==o&&!l.has(t)&&(l.add(t),t&&!t.d&&(s.r++,t.push(s)));c.map(t=>t[e](a))});return s.r?u:i()},t=>(t?h(f[n]=t):d(u),r(o))),o?.d<0&&(o.d=0)}})(),s.n=t=>{const e=t&&t.__esModule?()=>t.default:()=>t;return s.d(e,{a:e}),e},s.d=(t,e)=>{if(Array.isArray(e))for(var a=0;a<e.length;){var n=e[a++],r=e[a++];s.o(t,n)?0===r&&a++:0===r?Object.defineProperty(t,n,{enumerable:!0,value:e[a++]}):Object.defineProperty(t,n,{enumerable:!0,get:r})}else for(var n in e)s.o(e,n)&&!s.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},s.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);s("2557e7cf84cc")})();

package/distr/smart/icon-buttons/smart.manifest.json

@@ -24,7 +24,8 @@
     "uses": [
       "component.icon-buttons",
       "smart.icons",
-      "smart.close"
+      "smart.close",
+      "component.spinner"
     ],
     "public_parts": []
   },
@@ -151,7 +152,7 @@
       "loading": {
         "type": "boolean",
         "default": false,
-        "description": "Loading state flag."
+        "description": "Loading state: the spinner in place of the icon, at the icon's size, in the page's look (data-sf-spinner). Sets aria-busy and disables the native button."
       },
       "disabled": {
         "type": "boolean",
@@ -489,7 +490,7 @@
     "source_artifacts": [
       {
         "path": "src/smart/icon-buttons/index.js",
-        "sha256": "449ab27541c1105b2ab4380d71491851b3b698c10f4fd20df0308497e321bc66"
+        "sha256": "5c1408fd5125c2584f169c6803565bb053da420e5cc2d64daa1673cad72a36ce"
       }
     ],
     "generated_runtime": [

package/distr/smart/icon-buttons/template/default.js

@@ -1,5 +1,6 @@
 import {html, nothing} from 'lit';
 import './default.css';
+import {createInlineSpinner} from '../../../../component/spinner/js/_spinner-draw';
 
 const ICON_BUTTON_SIZES = new Set(['1/3', '1/2', '1', '2', '3']);
 
@@ -46,8 +47,11 @@ export function renderIconButtonTemplate(context) {
         loading ? 'loading sf-icon-button-state-loading' : '',
     ].filter(Boolean);
 
-    const iconContent =
-        context.component?.hasSlotContent?.('icon')
+    // Loading shows the spinner in place of the icon, at the icon's size
+    // (simai/ui-source#10); the button keeps its name and says aria-busy.
+    const iconContent = loading
+        ? createInlineSpinner({className: 'sf-icon-button-spinner'})
+        : context.component?.hasSlotContent?.('icon')
             ? context.component.getSlotContent('icon')
             : (kind ?? variant) === 'close'
                 ? html`