@cas-smartdesign/radio-button-group 6.0.2 → 6.0.3

package/dist/docs/5_segmented_button.js

@@ -1 +1 @@
-import"./radio-button-group.mjs";import{t as e}from"./doc.mjs";var t=[{value:`new`,label:`New`,color:`silver`},{value:`in-progress`,label:`In progress`,color:`#1467ba`},{value:`accepted`,label:`Accepted`,color:`#009621`},{value:`declined`,label:`Declined`,color:`#cc0017`},{value:`disabled`,label:`Disabled`,color:`var(--color-fg-interaction-disabled, #999)`}],n=document.querySelector(`#segmented-button-example-root`),r=n.querySelector(`#selected-value`),i=n.querySelector(`#selected-index`),a=n.querySelector(`sd-radio-button-group`);t.forEach(t=>{let n=document.createElement(`div`);n.className=`indicator`,n.style.background=t.color;let r=document.createElement(`span`);r.innerText=t.label;let i=new e;i.variant=`selection`,i.append(n),i.append(r),i.setAttribute(`value`,t.value),i.disabled=t.value==`disabled`,a.append(i)}),a.layout=`horizontal`,a.addEventListener(`sd-radio-button-group-value-change`,e=>o(e.detail.value,e.detail.selectedIndex)),o(a.value,-1);function o(e,t){let n;t==-1&&(n=`An option must be selected`),a.validationMessage=n,r.innerText=e||`<unselected>`,i.innerText=t?.toString()}
+import"./radio-button-group.mjs";import{t as e}from"./doc.mjs";var t=[{value:`new`,label:`New`,color:`silver`},{value:`in-progress`,label:`In progress`,color:`#1467ba`},{value:`accepted`,label:`Accepted`,color:`#009621`},{value:`declined`,label:`Declined`,color:`#cc0017`},{value:`disabled`,label:`Disabled`,color:`var(--color-fg-interaction-disabled, #999)`}],n=document.querySelector(`#segmented-button-example-root`),r=n.querySelector(`#selected-value`),i=n.querySelector(`#selected-index`),a=n.querySelector(`sd-radio-button-group`),o=n.querySelector(`#uncheck-allowed`);t.forEach(t=>{let n=document.createElement(`div`);n.className=`indicator`,n.style.background=t.color;let r=document.createElement(`span`);r.innerText=t.label;let i=new e;i.variant=`selection`,i.append(n),i.append(r),i.setAttribute(`value`,t.value),i.disabled=t.value==`disabled`,a.append(i)}),a.layout=`horizontal`,a.addEventListener(`sd-radio-button-group-value-change`,e=>s(e.detail.value,e.detail.selectedIndex)),s(a.value,-1);function s(e,t){let n;t==-1&&(n=`An option must be selected`),a.validationMessage=n,r.innerText=e||`<unselected>`,i.innerText=t?.toString()}o.addEventListener(`change`,()=>a.uncheckAllowed=o.value==`true`);

package/dist/docs/doc.mjs

@@ -185,8 +185,10 @@ sd-button {
 }
 `,I=`<div id="segmented-button-example-root">
 	<sd-radio-button-group tabindex="0" uncheck-allowed validationlevel="error"> </sd-radio-button-group>
-	<div><span>Selected value: </span><span id="selected-value"></span></div>
-	<div><span>Selected index: </span><span id="selected-index"></span></div>
+	<div>Selected value: <span id="selected-value"></span></div>
+	<div>Selected index: <span id="selected-index"></span></div>
+	<label for="uncheck-allowed">Uncheck allowed</label>
+	<input type="checkbox" id="uncheck-allowed" checked="true" />
 </div>
 `,L=`<h3 id="segmented-button">Segmented button</h3>
 `,R=`import "@cas-smartdesign/button";
@@ -232,6 +234,7 @@ const container = document.querySelector("#segmented-button-example-root")!;
 const valueElement = container.querySelector("#selected-value") as HTMLSpanElement;
 const indexElement = container.querySelector("#selected-index") as HTMLSpanElement;
 const radioButtonGroup = container.querySelector("sd-radio-button-group") as RadioButtonGroup;
+const uncheckAllowedInput = container.querySelector("#uncheck-allowed") as HTMLInputElement;
 
 options.forEach((option) => {
     const indicator = document.createElement("div");
@@ -266,13 +269,18 @@ function onValueChange(value: string | undefined, selectedIndex: number) {
     valueElement.innerText = value || "<unselected>";
     indexElement.innerText = selectedIndex?.toString();
 }
+
+uncheckAllowedInput.addEventListener(
+    "change",
+    () => (radioButtonGroup.uncheckAllowed = "true" == uncheckAllowedInput.value),
+);
 `,z=c({default:()=>B}),B={mainContent:I,description:L,css:F,initializer:{content:R,type:`typescript`,initialize:()=>M(()=>import(`./5_segmented_button.js`),__vite__mapDeps([2,1]),import.meta.url)}},ee=class e extends HTMLElement{static{this.TEMPLATE_CACHE={}}memoizedTemplate(){let t=this.is();if(e.TEMPLATE_CACHE[t])return e.TEMPLATE_CACHE[t];let n=this.template();return window.ShadyCSS&&window.ShadyCSS.prepareTemplate(n,this.is()),e.TEMPLATE_CACHE[t]=n,n}connectedCallback(){let e=this.memoizedTemplate();window.ShadyCSS&&window.ShadyCSS.styleElement(this),this.shadowRoot||(this.attachShadow({mode:`open`}).appendChild(document.importNode(e.content,!0)),requestAnimationFrame(()=>this.dispatchEvent(new CustomEvent(`sd-element-ready`))))}disconnectedCallback(){}attributeChangedCallback(e,t,n){}adoptedCallback(){}connectedMoveCallback(){}whenReady(e){this.shadowRoot?e():this.addEventListener(`sd-element-ready`,()=>e())}},te=`<slot name="icon">
 	<sd-image-embed class="icon" part="icon" exportparts="img, svg"></sd-image-embed>
 </slot>
 <div class="content">
 	<slot></slot>
 </div>
-`,ne=`:host{contain:content;box-sizing:border-box;vertical-align:middle;height:min-content;min-height:36px;padding:var(--spacing-x3,6px) var(--spacing-x4,8px);border-radius:var(--radius-s,4px);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:inline-flex}:host:focus-visible{outline:1px solid var(--color-border-interaction-focus,#111);outline-offset:var(--spacing-x1,2px)}:host:is(:disabled,[disabled],[aria-disabled=true]){cursor:default}:host{background-color:var(--sd-button-background-color,var(--color-bg-action-neutral-default,#d4d4d4));color:var(--sd-button-color,var(--color-fg-action-neutral-default,#111))}:host:after{content:"";border:var(--sd-button-border,none);border-radius:inherit;position:absolute;inset:0}:host(:is(:focus,:hover)){background-color:var(--sd-button-background-color-hover,var(--color-bg-action-neutral-default-hover,#c6c6c6));color:var(--sd-button-color-hover,var(--color-fg-action-neutral-default-hover,#1b1b1b))}:host(:is(:focus,:hover)):after{border-color:var(--sd-button-border-color-hover,transparent)}:host(:active){background-color:var(--sd-button-background-color-pressed,var(--color-bg-action-neutral-default-pressed,#b3b3b3));color:var(--sd-button-color-pressed,var(--color-fg-action-neutral-default-pressed,#242424))}:host(:active):after{border-color:var(--sd-button-border-color-pressed,transparent)}:host(:is([aria-disabled=true],[disabled])){background-color:var(--sd-button-background-color-disabled,var(--color-bg-interaction-disabled,#e7e7e7));color:var(--sd-button-color-disabled,var(--color-fg-interaction-disabled,#999))}:host(:is([aria-disabled=true],[disabled])):after{border-color:var(--sd-button-border-color-disabled,transparent)}:host(:is([aria-disabled=true],[disabled])){cursor:default}:host(:focus-visible){outline:1px solid var(--color-border-interaction-focus,#111);outline-offset:var(--spacing-x1,2px)}:host([variant=primary i]){--sd-button-background-color:var(--color-bg-action-accent-default,#1467ba);--sd-button-color:var(--color-fg-interaction-on-color,#fff);--sd-button-background-color-hover:var(--color-bg-action-accent-default-hover,#0f4d8b);--sd-button-color-hover:var(--color-fg-interaction-on-color,#fff);--sd-button-background-color-pressed:var(--color-bg-action-accent-default-pressed,#0b3a69);--sd-button-color-pressed:var(--color-fg-interaction-on-color,#fff)}:host([variant=outline i]){--sd-button-background-color:var(--color-bg-action-accent-weak,#e0ebf6);--sd-button-color:var(--color-fg-action-accent-default,#1467ba);--sd-button-border:1px solid var(--color-border-action-accent-default,#1467ba);--sd-button-background-color-hover:var(--color-bg-action-accent-weak-hover,#d5e4f3);--sd-button-color-hover:var(--color-fg-action-accent-default-hover,#0f4d8b);--sd-button-border-color-hover:var(--color-border-action-accent-default-hover,#0f4d8b);--sd-button-background-color-pressed:var(--color-bg-action-accent-weak-pressed,#c7dbef);--sd-button-color-pressed:var(--color-fg-action-accent-default-pressed,#0b3a69);--sd-button-border-color-pressed:var(--color-border-action-accent-default-pressed,#0b3a69);--sd-button-background-color-disabled:transparent;--sd-button-border-color-disabled:var(--color-border-interaction-disabled,#c6c6c6)}:host([variant=ghost i]){--sd-button-background-color:transparent;--sd-button-color:var(--color-fg-action-accent-default,#1467ba);--sd-button-background-color-hover:var(--color-bg-action-accent-weakest-hover,#e0ebf6);--sd-button-color-hover:var(--color-fg-action-accent-default-hover,#0f4d8b);--sd-button-background-color-pressed:var(--color-bg-action-accent-weakest-pressed,#c7dbef);--sd-button-color-pressed:var(--color-fg-action-accent-default-pressed,#0b3a69);--sd-button-background-color-disabled:transparent}:host([variant=outline-danger i]){--sd-button-background-color:var(--color-bg-action-danger-default,#fbdde0);--sd-button-color:var(--color-fg-action-danger-default,#a90014);--sd-button-border:1px solid var(--color-border-action-danger-default,#a90014);--sd-button-background-color-hover:var(--color-bg-action-danger-default-hover,#fad2d6);--sd-button-color-hover:var(--color-fg-action-danger-default-hover,#7f000f);--sd-button-border-color-hover:var(--color-border-action-danger-default-hover,#7f000f);--sd-button-background-color-pressed:var(--color-bg-action-danger-default-pressed,#f8c3c9);--sd-button-color-pressed:var(--color-fg-action-danger-default-pressed,#5f000b);--sd-button-border-color-pressed:var(--color-border-action-danger-default-pressed,#5f000b);--sd-button-background-color-disabled:transparent;--sd-button-border-color-disabled:var(--color-border-interaction-disabled,#c6c6c6)}:host([variant=ghost-danger i]){--sd-button-background-color:transparent;--sd-button-color:var(--color-fg-action-danger-default,#a90014);--sd-button-background-color-hover:var(--color-bg-action-danger-default-hover,#fad2d6);--sd-button-color-hover:var(--color-fg-action-danger-default-hover,#7f000f);--sd-button-background-color-pressed:var(--color-bg-action-danger-default-pressed,#f8c3c9);--sd-button-color-pressed:var(--color-fg-action-danger-default-pressed,#5f000b);--sd-button-background-color-disabled:transparent}:host([variant=selection i]){--sd-button-background-color:var(--color-bg-selection-neutral-weakest,#fff);--sd-button-color:var(--color-fg-selection-neutral-default,#111);--sd-button-border:1px solid var(--color-border-selection-neutral-default,#999);--sd-button-background-color-hover:var(--color-bg-selection-accent-weak-hover,#e0ebf6);--sd-button-color-hover:var(--color-fg-selection-neutral-default,#111);--sd-button-border-color-hover:var(--color-border-selection-neutral-default,#999);--sd-button-background-color-pressed:var(--color-bg-selection-accent-weak,#c7dbef);--sd-button-color-pressed:var(--color-fg-selection-neutral-default,#111);--sd-button-border-color-pressed:var(--color-border-selection-accent-default,#1467ba);--sd-button-border-color-disabled:var(--color-border-interaction-disabled,#c6c6c6)}:host([variant=custom i]){--sd-button-background-color-hover:color-mix(in oklab, var(--sd-button-background-color,var(--color-bg-action-neutral-default,#d4d4d4)), var(--color-fg-default,#111) 10%);--sd-button-color-hover:var(--sd-button-color,var(--color-fg-action-neutral-default,#111));--sd-button-background-color-pressed:color-mix(in oklab, var(--sd-button-background-color,var(--color-bg-action-neutral-default,#d4d4d4)), var(--color-fg-default,#111) 20%);--sd-button-color-pressed:var(--sd-button-color,var(--color-fg-action-neutral-default,#111))}:host([variant=contrast i]){--sd-button-contrast-color:color-mix(in oklab, color(from var(--sd-button-contrast-source,var(--color-bg-default,#fff)) xyz round(up, min(1, max(0, .18 - y)), 1) round(up, min(1, max(0, .18 - y)), 1) round(up, min(1, max(0, .18 - y)), 1)), #fff 17.6%);--sd-button-background-color:transparent;--sd-button-color:var(--sd-button-contrast-color);--sd-button-background-color-hover:oklab(from var(--sd-button-contrast-source,var(--color-bg-default,#fff)) calc(l + sign(.5 - l) * .1) a b);--sd-button-color-hover:var(--sd-button-contrast-color);--sd-button-background-color-pressed:oklab(from var(--sd-button-contrast-source,var(--color-bg-default,#fff)) calc(l + sign(.5 - l) * .2) a b);--sd-button-color-pressed:var(--sd-button-contrast-color);--sd-button-background-color-disabled:transparent}:host([variant=selection i][aria-pressed=true]){--sd-button-background-color:var(--color-bg-selection-accent-weak,#c7dbef);--sd-button-border:1px solid var(--color-border-selection-accent-default,#1467ba);--sd-button-background-color-hover:var(--color-bg-selection-accent-weak,#c7dbef);--sd-button-border-color-hover:var(--color-border-selection-accent-default,#1467ba)}.icon:is(:not([src]),[src=""],[src="data:,"]){display:none}.content{align-items:center;min-width:0;display:flex}.content ::slotted(*){font:var(--text-body,400 15px/20px Inter);margin-left:var(--sd-button-content-padding,8px)}.content ::slotted(:last-child){margin-right:var(--sd-button-content-padding,8px)}.icon{max-height:var(--sd-button-max-icon-size,24px);max-width:var(--sd-button-max-icon-size,24px);color:inherit}`,re=[`primary`,`outline`,`standard`,`ghost`,`outline-danger`,`ghost-danger`,`selection`,`custom`,`contrast`],ie=`standard`;function ae(e){return re.includes(e)}var V=class t extends ee{static{this.ID=`sd-button`}static{this.ensureDefined=()=>{customElements.get(t.ID)||(customElements.define(t.ID,t),e.ensureDefined())}}static{this.styleSheet=new CSSStyleSheet}static{this.styleSheet.replaceSync(ne)}get imageElement(){return this._image}get icon(){return this.getAttribute(`icon`)}set icon(e){this.icon!==e&&(e?this.setAttribute(`icon`,e):this.removeAttribute(`icon`),this.updateIcon())}get variant(){let e=this.getAttribute(`variant`);return ae(e)?e:ie}set variant(e){this.setAttribute(`variant`,ae(e)?e:ie)}get disabled(){return this.getAttribute(`aria-disabled`)==`true`}set disabled(e){this.setAttribute(`aria-disabled`,e.toString())}static get observedAttributes(){return[`icon`,`variant`]}is(){return t.ID}template(){let e=document.createElement(`template`);return e.innerHTML=te,e}constructor(){super(),this._isSpaceOrEnterKeyDown=!1,this.addEventListener(`keydown`,e=>{this.isSpaceOrEnter(e)&&(this._isSpaceOrEnterKeyDown=!0,e.preventDefault())}),this.addEventListener(`keyup`,e=>{this.isSpaceOrEnter(e)&&this._isSpaceOrEnterKeyDown==1&&(this._isSpaceOrEnterKeyDown=!1,this.click())}),this.addEventListener(`click`,e=>{if(this.disabled||this.hasAttribute(`disabled`)){e.stopImmediatePropagation();return}let t=this.getAttribute(`type`)?.toLowerCase()?.trim();if(t!==`submit`&&t!==`reset`)return;let n=this.closest(`form`);n&&t===`submit`&&n.requestSubmit(),n&&t===`reset`&&n.reset()},{capture:!0})}isSpaceOrEnter(e){switch(e.key){case` `:case`Space`:case`Enter`:return!0;default:return!1}}click(){!this.disabled&&!this.hasAttribute(`disabled`)&&super.click()}connectedCallback(){let e=this.shadowRoot==null;super.connectedCallback(),e&&(this.shadowRoot.adoptedStyleSheets=[t.styleSheet]),this.hasAttribute(`tabIndex`)||(this.tabIndex=0),this._image=this.shadowRoot.querySelector(`.icon`),this.updateIcon(),this.hasAttribute(`role`)||this.setAttribute(`role`,`button`)}attributeChangedCallback(e,t){switch(e){case`icon`:this.updateIcon();break;case`variant`:this.variant===`selection`?this.hasAttribute(`aria-pressed`)||this.setAttribute(`aria-pressed`,`false`):t?.toLowerCase()===`selection`&&this.removeAttribute(`aria-pressed`);break}}updateIcon(){if(this._image){let e=this.getAttribute(`icon`);e&&(this._image.src=e)}}};V.ensureDefined();var oe=s(((e,t)=>{var n=String,r=function(){return{isColorSupported:!1,reset:n,bold:n,dim:n,italic:n,underline:n,inverse:n,hidden:n,strikethrough:n,black:n,red:n,green:n,yellow:n,blue:n,magenta:n,cyan:n,white:n,gray:n,bgBlack:n,bgRed:n,bgGreen:n,bgYellow:n,bgBlue:n,bgMagenta:n,bgCyan:n,bgWhite:n,blackBright:n,redBright:n,greenBright:n,yellowBright:n,blueBright:n,magentaBright:n,cyanBright:n,whiteBright:n,bgBlackBright:n,bgRedBright:n,bgGreenBright:n,bgYellowBright:n,bgBlueBright:n,bgMagentaBright:n,bgCyanBright:n,bgWhiteBright:n}};t.exports=r(),t.exports.createColors=r})),H=s(((e,t)=>{t.exports={}})),se=s(((e,t)=>{var n=oe(),r=H(),i=class e extends Error{constructor(t,n,r,i,a,o){super(t),this.name=`CssSyntaxError`,this.reason=t,a&&(this.file=a),i&&(this.source=i),o&&(this.plugin=o),n!==void 0&&r!==void 0&&(typeof n==`number`?(this.line=n,this.column=r):(this.line=n.line,this.column=n.column,this.endLine=r.line,this.endColumn=r.column)),this.setMessage(),Error.captureStackTrace&&Error.captureStackTrace(this,e)}setMessage(){this.message=this.plugin?this.plugin+`: `:``,this.message+=this.file?this.file:`<css input>`,this.line!==void 0&&(this.message+=`:`+this.line+`:`+this.column),this.message+=`: `+this.reason}showSourceCode(e){if(!this.source)return``;let t=this.source;e??=n.isColorSupported;let i=e=>e,a=e=>e,o=e=>e;if(e){let{bold:e,gray:t,red:s}=n.createColors(!0);a=t=>e(s(t)),i=e=>t(e),r&&(o=e=>r(e))}let s=t.split(/\r?\n/),c=Math.max(this.line-3,0),l=Math.min(this.line+2,s.length),u=String(l).length;return s.slice(c,l).map((e,t)=>{let n=c+1+t,r=` `+(` `+n).slice(-u)+` | `;if(n===this.line){if(e.length>160){let t=Math.max(0,this.column-20),n=Math.max(this.column+20,this.endColumn+20),s=e.slice(t,n),c=i(r.replace(/\d/g,` `))+e.slice(0,Math.min(this.column-1,19)).replace(/[^\t]/g,` `);return a(`>`)+i(r)+o(s)+`
+`,ne=`:host{contain:content;box-sizing:border-box;vertical-align:middle;height:min-content;min-height:36px;padding:var(--spacing-x3,6px) var(--spacing-x4,8px);border-radius:var(--radius-s,4px);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:inline-flex}:host:focus-visible{outline:1px solid var(--sd-button-outline-color,var(--color-border-interaction-focus,#111));outline-offset:var(--spacing-x1,2px)}:host:is(:disabled,[disabled],[aria-disabled=true]){cursor:default}:host{background-color:var(--sd-button-background-color,var(--color-bg-action-neutral-default,#d4d4d4));color:var(--sd-button-color,var(--color-fg-action-neutral-default,#111))}:host:after{content:"";border:var(--sd-button-border,none);border-radius:inherit;pointer-events:none;position:absolute;inset:0}:host(:is(:focus,:hover)){background-color:var(--sd-button-background-color-hover,var(--color-bg-action-neutral-default-hover,#c6c6c6));color:var(--sd-button-color-hover,var(--color-fg-action-neutral-default-hover,#1b1b1b))}:host(:is(:focus,:hover)):after{border-color:var(--sd-button-border-color-hover,transparent)}:host(:active){background-color:var(--sd-button-background-color-pressed,var(--color-bg-action-neutral-default-pressed,#b3b3b3));color:var(--sd-button-color-pressed,var(--color-fg-action-neutral-default-pressed,#242424))}:host(:active):after{border-color:var(--sd-button-border-color-pressed,transparent)}:host(:is([aria-disabled=true],[disabled])){background-color:var(--sd-button-background-color-disabled,var(--color-bg-interaction-disabled,#e7e7e7));color:var(--sd-button-color-disabled,var(--color-fg-interaction-disabled,#999))}:host(:is([aria-disabled=true],[disabled])):after{border-color:var(--sd-button-border-color-disabled,transparent)}:host(:is([aria-disabled=true],[disabled])){cursor:default}:host(:focus-visible){outline:1px solid var(--sd-button-outline-color,var(--color-border-interaction-focus,#111));outline-offset:var(--spacing-x1,2px)}:host([variant=primary i]){--sd-button-background-color:var(--color-bg-action-accent-default,#1467ba);--sd-button-color:var(--color-fg-interaction-on-color,#fff);--sd-button-background-color-hover:var(--color-bg-action-accent-default-hover,#0f4d8b);--sd-button-color-hover:var(--color-fg-interaction-on-color,#fff);--sd-button-background-color-pressed:var(--color-bg-action-accent-default-pressed,#0b3a69);--sd-button-color-pressed:var(--color-fg-interaction-on-color,#fff)}:host([variant=outline i]){--sd-button-background-color:var(--color-bg-action-accent-weak,#e0ebf6);--sd-button-color:var(--color-fg-action-accent-default,#1467ba);--sd-button-border:1px solid var(--color-border-action-accent-default,#1467ba);--sd-button-background-color-hover:var(--color-bg-action-accent-weak-hover,#d5e4f3);--sd-button-color-hover:var(--color-fg-action-accent-default-hover,#0f4d8b);--sd-button-border-color-hover:var(--color-border-action-accent-default-hover,#0f4d8b);--sd-button-background-color-pressed:var(--color-bg-action-accent-weak-pressed,#c7dbef);--sd-button-color-pressed:var(--color-fg-action-accent-default-pressed,#0b3a69);--sd-button-border-color-pressed:var(--color-border-action-accent-default-pressed,#0b3a69);--sd-button-background-color-disabled:transparent;--sd-button-border-color-disabled:var(--color-border-interaction-disabled,#c6c6c6)}:host([variant=ghost i]){--sd-button-background-color:transparent;--sd-button-color:var(--color-fg-action-accent-default,#1467ba);--sd-button-background-color-hover:var(--color-bg-action-accent-weakest-hover,#e0ebf6);--sd-button-color-hover:var(--color-fg-action-accent-default-hover,#0f4d8b);--sd-button-background-color-pressed:var(--color-bg-action-accent-weakest-pressed,#c7dbef);--sd-button-color-pressed:var(--color-fg-action-accent-default-pressed,#0b3a69);--sd-button-background-color-disabled:transparent}:host([variant=outline-danger i]){--sd-button-background-color:var(--color-bg-action-danger-default,#fbdde0);--sd-button-color:var(--color-fg-action-danger-default,#a90014);--sd-button-border:1px solid var(--color-border-action-danger-default,#a90014);--sd-button-background-color-hover:var(--color-bg-action-danger-default-hover,#fad2d6);--sd-button-color-hover:var(--color-fg-action-danger-default-hover,#7f000f);--sd-button-border-color-hover:var(--color-border-action-danger-default-hover,#7f000f);--sd-button-background-color-pressed:var(--color-bg-action-danger-default-pressed,#f8c3c9);--sd-button-color-pressed:var(--color-fg-action-danger-default-pressed,#5f000b);--sd-button-border-color-pressed:var(--color-border-action-danger-default-pressed,#5f000b);--sd-button-background-color-disabled:transparent;--sd-button-border-color-disabled:var(--color-border-interaction-disabled,#c6c6c6)}:host([variant=ghost-danger i]){--sd-button-background-color:transparent;--sd-button-color:var(--color-fg-action-danger-default,#a90014);--sd-button-background-color-hover:var(--color-bg-action-danger-default-hover,#fad2d6);--sd-button-color-hover:var(--color-fg-action-danger-default-hover,#7f000f);--sd-button-background-color-pressed:var(--color-bg-action-danger-default-pressed,#f8c3c9);--sd-button-color-pressed:var(--color-fg-action-danger-default-pressed,#5f000b);--sd-button-background-color-disabled:transparent}:host([variant=selection i]){--sd-button-background-color:var(--color-bg-selection-neutral-weakest,#fff);--sd-button-color:var(--color-fg-selection-neutral-default,#111);--sd-button-border:1px solid var(--color-border-selection-neutral-default,#999);--sd-button-background-color-hover:var(--color-bg-selection-accent-weak-hover,#e0ebf6);--sd-button-color-hover:var(--color-fg-selection-neutral-default,#111);--sd-button-border-color-hover:var(--color-border-selection-neutral-default,#999);--sd-button-background-color-pressed:var(--color-bg-selection-accent-weak,#c7dbef);--sd-button-color-pressed:var(--color-fg-selection-neutral-default,#111);--sd-button-border-color-pressed:var(--color-border-selection-accent-default,#1467ba);--sd-button-border-color-disabled:var(--color-border-interaction-disabled,#c6c6c6)}:host([variant=custom i]){--sd-button-background-color-hover:color-mix(in oklab, var(--sd-button-background-color,var(--color-bg-action-neutral-default,#d4d4d4)), var(--color-fg-default,#111) 10%);--sd-button-color-hover:var(--sd-button-color,var(--color-fg-action-neutral-default,#111));--sd-button-background-color-pressed:color-mix(in oklab, var(--sd-button-background-color,var(--color-bg-action-neutral-default,#d4d4d4)), var(--color-fg-default,#111) 20%);--sd-button-color-pressed:var(--sd-button-color,var(--color-fg-action-neutral-default,#111))}:host([variant=contrast i]){--sd-button-contrast-color:color-mix(in oklab, color(from var(--sd-button-contrast-source,var(--color-bg-default,#fff)) xyz round(up, min(1, max(0, .18 - y)), 1) round(up, min(1, max(0, .18 - y)), 1) round(up, min(1, max(0, .18 - y)), 1)), #fff 17.6%);--sd-button-background-color:transparent;--sd-button-color:var(--sd-button-contrast-color);--sd-button-background-color-hover:oklab(from var(--sd-button-contrast-source,var(--color-bg-default,#fff)) calc(l + sign(.5 - l) * .1) a b);--sd-button-color-hover:var(--sd-button-contrast-color);--sd-button-background-color-pressed:oklab(from var(--sd-button-contrast-source,var(--color-bg-default,#fff)) calc(l + sign(.5 - l) * .2) a b);--sd-button-color-pressed:var(--sd-button-contrast-color);--sd-button-background-color-disabled:transparent;--sd-button-outline-color:var(--sd-button-contrast-color)}:host([variant=selection i][aria-pressed=true]){--sd-button-background-color:var(--color-bg-selection-accent-weak,#c7dbef);--sd-button-border:1px solid var(--color-border-selection-accent-default,#1467ba);--sd-button-background-color-hover:var(--color-bg-selection-accent-weak,#c7dbef);--sd-button-border-color-hover:var(--color-border-selection-accent-default,#1467ba)}.icon:is(:not([src]),[src=""],[src="data:,"]){display:none}:host([has-content]) .content{display:flex}.content{align-items:center;width:100%;min-width:0;display:none}.content ::slotted(*){font:var(--text-body,400 15px/20px Inter);margin-left:var(--sd-button-content-padding,8px)}.content ::slotted(:last-child){margin-right:var(--sd-button-content-padding,8px)}.icon{max-height:var(--sd-button-max-icon-size,24px);max-width:var(--sd-button-max-icon-size,24px);color:inherit;flex-shrink:0}::slotted([slot=icon]){flex-shrink:0}`,re=[`primary`,`outline`,`standard`,`ghost`,`outline-danger`,`ghost-danger`,`selection`,`custom`,`contrast`],ie=`standard`;function ae(e){return re.includes(e)}var V=class t extends ee{static{this.ID=`sd-button`}static{this.ensureDefined=()=>{customElements.get(t.ID)||(customElements.define(t.ID,t),e.ensureDefined())}}static{this.styleSheet=new CSSStyleSheet}static{this.styleSheet.replaceSync(ne)}get imageElement(){return this._image}get icon(){return this.getAttribute(`icon`)}set icon(e){this.icon!==e&&(e?this.setAttribute(`icon`,e):this.removeAttribute(`icon`),this.updateIcon())}get variant(){let e=this.getAttribute(`variant`);return ae(e)?e:ie}set variant(e){this.setAttribute(`variant`,ae(e)?e:ie)}get disabled(){return this.getAttribute(`aria-disabled`)==`true`}set disabled(e){this.setAttribute(`aria-disabled`,e.toString())}static get observedAttributes(){return[`icon`,`variant`]}is(){return t.ID}template(){let e=document.createElement(`template`);return e.innerHTML=te,e}constructor(){super(),this._isSpaceOrEnterKeyDown=!1,this.onContentSlotChanged=()=>{this.contentSlot.assignedElements().length>0?this.setAttribute(`has-content`,``):this.removeAttribute(`has-content`)},this.addEventListener(`keydown`,e=>{this.isSpaceOrEnter(e)&&(this._isSpaceOrEnterKeyDown=!0,e.preventDefault())}),this.addEventListener(`keyup`,e=>{this.isSpaceOrEnter(e)&&this._isSpaceOrEnterKeyDown==1&&(this._isSpaceOrEnterKeyDown=!1,this.click())}),this.addEventListener(`click`,e=>{if(this.disabled||this.hasAttribute(`disabled`)){e.stopImmediatePropagation();return}let t=this.getAttribute(`type`)?.toLowerCase()?.trim();if(t!==`submit`&&t!==`reset`)return;let n=this.closest(`form`);n&&t===`submit`&&n.requestSubmit(),n&&t===`reset`&&n.reset()},{capture:!0})}isSpaceOrEnter(e){switch(e.key){case` `:case`Space`:case`Enter`:return!0;default:return!1}}click(){!this.disabled&&!this.hasAttribute(`disabled`)&&super.click()}connectedCallback(){let e=this.shadowRoot==null;super.connectedCallback(),e&&(this.shadowRoot.adoptedStyleSheets=[t.styleSheet]),this.hasAttribute(`tabIndex`)||(this.tabIndex=0),this._image=this.shadowRoot.querySelector(`.icon`),this.updateIcon(),this.hasAttribute(`role`)||this.setAttribute(`role`,`button`),this.contentSlot.addEventListener(`slotchange`,this.onContentSlotChanged)}disconnectedCallback(){this.contentSlot.removeEventListener(`slotchange`,this.onContentSlotChanged)}get contentSlot(){return this.shadowRoot.querySelector(`.content > slot`)}attributeChangedCallback(e,t){switch(e){case`icon`:this.updateIcon();break;case`variant`:this.variant===`selection`?this.hasAttribute(`aria-pressed`)||this.setAttribute(`aria-pressed`,`false`):t?.toLowerCase()===`selection`&&this.removeAttribute(`aria-pressed`);break}}updateIcon(){if(this._image){let e=this.getAttribute(`icon`);this._image.src=e}}};V.ensureDefined();var oe=s(((e,t)=>{var n=String,r=function(){return{isColorSupported:!1,reset:n,bold:n,dim:n,italic:n,underline:n,inverse:n,hidden:n,strikethrough:n,black:n,red:n,green:n,yellow:n,blue:n,magenta:n,cyan:n,white:n,gray:n,bgBlack:n,bgRed:n,bgGreen:n,bgYellow:n,bgBlue:n,bgMagenta:n,bgCyan:n,bgWhite:n,blackBright:n,redBright:n,greenBright:n,yellowBright:n,blueBright:n,magentaBright:n,cyanBright:n,whiteBright:n,bgBlackBright:n,bgRedBright:n,bgGreenBright:n,bgYellowBright:n,bgBlueBright:n,bgMagentaBright:n,bgCyanBright:n,bgWhiteBright:n}};t.exports=r(),t.exports.createColors=r})),H=s(((e,t)=>{t.exports={}})),se=s(((e,t)=>{var n=oe(),r=H(),i=class e extends Error{constructor(t,n,r,i,a,o){super(t),this.name=`CssSyntaxError`,this.reason=t,a&&(this.file=a),i&&(this.source=i),o&&(this.plugin=o),n!==void 0&&r!==void 0&&(typeof n==`number`?(this.line=n,this.column=r):(this.line=n.line,this.column=n.column,this.endLine=r.line,this.endColumn=r.column)),this.setMessage(),Error.captureStackTrace&&Error.captureStackTrace(this,e)}setMessage(){this.message=this.plugin?this.plugin+`: `:``,this.message+=this.file?this.file:`<css input>`,this.line!==void 0&&(this.message+=`:`+this.line+`:`+this.column),this.message+=`: `+this.reason}showSourceCode(e){if(!this.source)return``;let t=this.source;e??=n.isColorSupported;let i=e=>e,a=e=>e,o=e=>e;if(e){let{bold:e,gray:t,red:s}=n.createColors(!0);a=t=>e(s(t)),i=e=>t(e),r&&(o=e=>r(e))}let s=t.split(/\r?\n/),c=Math.max(this.line-3,0),l=Math.min(this.line+2,s.length),u=String(l).length;return s.slice(c,l).map((e,t)=>{let n=c+1+t,r=` `+(` `+n).slice(-u)+` | `;if(n===this.line){if(e.length>160){let t=Math.max(0,this.column-20),n=Math.max(this.column+20,this.endColumn+20),s=e.slice(t,n),c=i(r.replace(/\d/g,` `))+e.slice(0,Math.min(this.column-1,19)).replace(/[^\t]/g,` `);return a(`>`)+i(r)+o(s)+`
  `+c+a(`^`)}let t=i(r.replace(/\d/g,` `))+e.slice(0,this.column-1).replace(/[^\t]/g,` `);return a(`>`)+i(r)+o(e)+`
  `+t+a(`^`)}return` `+i(r)+o(e)}).join(`
 `)}toString(){let e=this.showSourceCode();return e&&=`

package/dist/docs/radio-button-group.mjs

@@ -51,7 +51,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
                 </div>
                 <label class="label" for="${this.a11yID}" @click="${this.handleClick}">${this.label}</label>
             </div>
-        `}};Q([Y({type:Boolean,reflect:!0,attribute:!0}),Z(`design:type`,Object)],Qt.prototype,`checked`,void 0),Q([Y({type:String,reflect:!0,attribute:!0}),Z(`design:type`,Object)],Qt.prototype,`value`,void 0),Q([Y({type:Boolean,reflect:!0,attribute:!0}),Z(`design:type`,Object)],Qt.prototype,`disabled`,void 0),Q([Y({type:String,reflect:!0,attribute:!0}),Z(`design:type`,Object)],Qt.prototype,`label`,void 0);var $t=`:host{display:block}:host(:focus){outline:none}:host(:focus-visible) ::slotted([focused]){outline:1px solid var(--color-border-interaction-focus,#111);outline-offset:var(--spacing-x1,2px);border-radius:var(--radius-s,4px);z-index:10!important}.buttons-container{align-items:start;gap:var(--sd-radio-button-group-gap,0);border-radius:var(--radius-s,4px);max-width:100%;display:inline-flex}.buttons-container.vertical{flex-direction:column}.validation-message{margin-left:5px}`,$=class e extends J{constructor(...e){super(...e),this.layout=`horizontal`,this.value=``,this.uncheckAllowed=!1,this.disabled=!1,this._buttons=[],this._focusIndex=-1,this._checkedButton=void 0,this.handleSlotChange=()=>{this._buttons=this.buttonsSlot.assignedElements(),this._buttons.forEach(e=>{!e.hasAttribute(`disabled`)&&this.disabled&&e.setAttribute(`disabled`,``),e.setAttribute(`tabIndex`,`-1`),this.updateCheckedButton(e)})},this.handleFocusIn=e=>{let t=e.target,n=this._buttons.findIndex(e=>e==t);this.focusIndex=this.focusIndex>=0?this.focusIndex:this.getNextFocusIndex(n===-1?0:n),this.updateFocused(void 0,this._buttons[this.focusIndex])},this.handleFocusOut=()=>{this.updateFocused(this._buttons[this.focusIndex])},this.handleButtonClick=e=>{this.focus();let t=this._buttons.find(t=>t.contains(e.target));if(t?.matches(`[disabled], [aria-disabled='true']`))return;let n=this._buttons.findIndex(e=>e==t);n>=0&&(this.focusIndex=n,this.updateChecked())},this.handleKeyDown=e=>{let t=!0;switch(e.key){case`Down`:case`ArrowDown`:case`Right`:case`ArrowRight`:this.focusNext();break;case`Up`:case`ArrowUp`:case`Left`:case`ArrowLeft`:this.focusPrevious();break;case`Enter`:this.updateChecked();break;default:t=!1}t&&(e.preventDefault(),e.stopPropagation())}}static{this.ID=`sd-radio-button-group`}static{this.ensureDefined=()=>{Qt.ensureDefined(),customElements.get(e.ID)||customElements.define(e.ID,e)}}get focusIndex(){return this._focusIndex}set focusIndex(e){if(e>=-1&&e<this.childElementCount){let t=this._focusIndex;if(this._focusIndex=e,t!==e){let e=this._buttons[t],n=this._buttons[this.focusIndex];this.updateFocused(e,n)}}}firstUpdated(e){super.firstUpdated(e),this.buttonsSlot.addEventListener(`slotchange`,this.handleSlotChange),this.addEventListener(`focusin`,this.handleFocusIn),this.addEventListener(`focusout`,this.handleFocusOut),this.addEventListener(`keydown`,this.handleKeyDown)}updated(e){super.updated(e),e.has(`disabled`)&&(this.disabled?this.disableButtons():this.enableButtons())}static get styles(){return[it`
+        `}};Q([Y({type:Boolean,reflect:!0,attribute:!0}),Z(`design:type`,Object)],Qt.prototype,`checked`,void 0),Q([Y({type:String,reflect:!0,attribute:!0}),Z(`design:type`,Object)],Qt.prototype,`value`,void 0),Q([Y({type:Boolean,reflect:!0,attribute:!0}),Z(`design:type`,Object)],Qt.prototype,`disabled`,void 0),Q([Y({type:String,reflect:!0,attribute:!0}),Z(`design:type`,Object)],Qt.prototype,`label`,void 0);var $t=`:host{display:block}:host(:focus){outline:none}:host(:focus-visible) ::slotted([focused]){outline:1px solid var(--color-border-interaction-focus,#111);outline-offset:var(--spacing-x1,2px);border-radius:var(--radius-s,4px);z-index:10!important}.buttons-container{align-items:start;gap:var(--sd-radio-button-group-gap,0);border-radius:var(--radius-s,4px);max-width:100%;display:inline-flex}.buttons-container.vertical{flex-direction:column}.validation-message{margin-left:5px}`,$=class e extends J{constructor(...e){super(...e),this.layout=`horizontal`,this.value=``,this.uncheckAllowed=!1,this.disabled=!1,this._buttons=[],this._focusIndex=-1,this._checkedButton=void 0,this.handleSlotChange=()=>{this._buttons=this.buttonsSlot.assignedElements(),this._buttons.forEach(e=>{!e.hasAttribute(`disabled`)&&this.disabled&&e.setAttribute(`disabled`,``),e.setAttribute(`tabIndex`,`-1`),this.updateCheckedButton(e)})},this.handleFocusIn=e=>{let t=e.target,n=this._buttons.findIndex(e=>e==t);this.focusIndex=this.focusIndex>=0?this.focusIndex:this.getNextFocusIndex(n===-1?0:n),this.updateFocused(void 0,this._buttons[this.focusIndex])},this.handleFocusOut=()=>{this.updateFocused(this._buttons[this.focusIndex])},this.handleMouseDown=e=>{this._buttons.some(t=>t.contains(e.target))&&e.preventDefault()},this.handleButtonClick=e=>{this.focus();let t=this._buttons.find(t=>t.contains(e.target));if(t?.matches(`[disabled], [aria-disabled='true']`))return;let n=this._buttons.findIndex(e=>e==t);n>=0&&(this.focusIndex=n,this.updateChecked())},this.handleKeyDown=e=>{let t=!0;switch(e.key){case`Down`:case`ArrowDown`:case`Right`:case`ArrowRight`:this.focusNext();break;case`Up`:case`ArrowUp`:case`Left`:case`ArrowLeft`:this.focusPrevious();break;case`Enter`:this.updateChecked();break;default:t=!1}t&&(e.preventDefault(),e.stopPropagation())}}static{this.ID=`sd-radio-button-group`}static{this.ensureDefined=()=>{Qt.ensureDefined(),customElements.get(e.ID)||customElements.define(e.ID,e)}}get focusIndex(){return this._focusIndex}set focusIndex(e){if(e>=-1&&e<this.childElementCount){let t=this._focusIndex;if(this._focusIndex=e,t!==e){let e=this._buttons[t],n=this._buttons[this.focusIndex];this.updateFocused(e,n)}}}firstUpdated(e){super.firstUpdated(e),this.buttonsSlot.addEventListener(`slotchange`,this.handleSlotChange),this.addEventListener(`focusin`,this.handleFocusIn),this.addEventListener(`focusout`,this.handleFocusOut),this.addEventListener(`keydown`,this.handleKeyDown),this.addEventListener(`mousedown`,this.handleMouseDown)}updated(e){super.updated(e),e.has(`disabled`)&&(this.disabled?this.disableButtons():this.enableButtons())}static get styles(){return[it`
                 ${rt($t)}
             `]}render(){return B`
             <div

package/dist/radio-button-group.d.ts

@@ -37,6 +37,7 @@ export declare class RadioButtonGroup extends LitElement {
     private handleFocusOut;
     private disableButtons;
     private enableButtons;
+    private handleMouseDown;
     private handleButtonClick;
     private fireValueChangeEvent;
     private handleKeyDown;

package/dist/radio-button-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button-group.d.ts","sourceRoot":"","sources":["../radio-button-group.ts"],"names":[],"mappings":"AAAA,OAAiC,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACtG,OAAO,EACH,UAAU,EACV,KAAK,cAAc,EAEnB,KAAK,cAAc,EAItB,MAAM,KAAK,CAAC;AAIb,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAI7D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,mBAAmB,SAAS,CAAC;AAI7B,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,gBAAgB,CAAC,EAAE,CAAC,EAAE,gBAAgB,CAAC;KAC3C;IACD,UAAU,mBAAmB;QACzB,oCAAoC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;KACxE;CACJ;AAED,qBAAa,gBAAiB,SAAQ,UAAU;IAC5C,gBAAuB,EAAE,2BAA2B;IACpD,OAAc,aAAa,QAAO,IAAI,CAKpC;IAEK,MAAM,EAAE,UAAU,CAAgB;IAElC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAM;IAE/B,cAAc,UAAS;IAEvB,QAAQ,UAAS;IAEjB,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAC;IAEtC,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAC;IAYtC,eAAe,EAAE,eAAe,GAAG,SAAS,CAAC;IAEpD,OAAO,CAAC,YAAY,CAA8B;IAClD,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,cAAc,CAAsC;IAE5D,IAAW,UAAU,IAAI,MAAM,CAE9B;IAED,IAAW,UAAU,CAAC,KAAK,EAAE,MAAM,EAUlC;cAEkB,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;cAQrD,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAWnE,WAAoB,MAAM,8BAMzB;IACe,MAAM,IAAI,cAAc;IAsBxC,OAAO,CAAC,gBAAgB,CAWtB;IAEF,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAO,CAAC,cAAc,CAEpB;IAEF,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,iBAAiB,CAYvB;IAEF,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,aAAa,CA6BnB;IAEF,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,aAAa;IAQrB,OAAO,KAAK,WAAW,GAKtB;IAED,OAAO,KAAK,aAAa,GAKxB;CACJ"}
+{"version":3,"file":"radio-button-group.d.ts","sourceRoot":"","sources":["../radio-button-group.ts"],"names":[],"mappings":"AAAA,OAAiC,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACtG,OAAO,EACH,UAAU,EACV,KAAK,cAAc,EAEnB,KAAK,cAAc,EAItB,MAAM,KAAK,CAAC;AAIb,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAI7D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,mBAAmB,SAAS,CAAC;AAI7B,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,gBAAgB,CAAC,EAAE,CAAC,EAAE,gBAAgB,CAAC;KAC3C;IACD,UAAU,mBAAmB;QACzB,oCAAoC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;KACxE;CACJ;AAED,qBAAa,gBAAiB,SAAQ,UAAU;IAC5C,gBAAuB,EAAE,2BAA2B;IACpD,OAAc,aAAa,QAAO,IAAI,CAKpC;IAEK,MAAM,EAAE,UAAU,CAAgB;IAElC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAM;IAE/B,cAAc,UAAS;IAEvB,QAAQ,UAAS;IAEjB,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAC;IAEtC,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAC;IAYtC,eAAe,EAAE,eAAe,GAAG,SAAS,CAAC;IAEpD,OAAO,CAAC,YAAY,CAA8B;IAClD,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,cAAc,CAAsC;IAE5D,IAAW,UAAU,IAAI,MAAM,CAE9B;IAED,IAAW,UAAU,CAAC,KAAK,EAAE,MAAM,EAUlC;cAEkB,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;cASrD,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAWnE,WAAoB,MAAM,8BAMzB;IACe,MAAM,IAAI,cAAc;IAsBxC,OAAO,CAAC,gBAAgB,CAWtB;IAEF,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAO,CAAC,cAAc,CAEpB;IAEF,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,eAAe,CAWrB;IAEF,OAAO,CAAC,iBAAiB,CAYvB;IAEF,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,aAAa,CA6BnB;IAEF,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,aAAa;IAQrB,OAAO,KAAK,WAAW,GAKtB;IAED,OAAO,KAAK,aAAa,GAKxB;CACJ"}

package/dist/radio-button-group.mjs

@@ -96,6 +96,8 @@ var f = ":host{display:block}:host(:focus){outline:none}:host(:focus-visible) ::
 			this.focusIndex = this.focusIndex >= 0 ? this.focusIndex : this.getNextFocusIndex(n === -1 ? 0 : n), this.updateFocused(void 0, this._buttons[this.focusIndex]);
 		}, this.handleFocusOut = () => {
 			this.updateFocused(this._buttons[this.focusIndex]);
+		}, this.handleMouseDown = (e) => {
+			this._buttons.some((t) => t.contains(e.target)) && e.preventDefault();
 		}, this.handleButtonClick = (e) => {
 			this.focus();
 			let t = this._buttons.find((t) => t.contains(e.target));
@@ -146,7 +148,7 @@ var f = ":host{display:block}:host(:focus){outline:none}:host(:focus-visible) ::
 		}
 	}
 	firstUpdated(e) {
-		super.firstUpdated(e), this.buttonsSlot.addEventListener("slotchange", this.handleSlotChange), this.addEventListener("focusin", this.handleFocusIn), this.addEventListener("focusout", this.handleFocusOut), this.addEventListener("keydown", this.handleKeyDown);
+		super.firstUpdated(e), this.buttonsSlot.addEventListener("slotchange", this.handleSlotChange), this.addEventListener("focusin", this.handleFocusIn), this.addEventListener("focusout", this.handleFocusOut), this.addEventListener("keydown", this.handleKeyDown), this.addEventListener("mousedown", this.handleMouseDown);
 	}
 	updated(e) {
 		super.updated(e), e.has("disabled") && (this.disabled ? this.disableButtons() : this.enableButtons());

package/dist/radio-button-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button-group.mjs","names":[],"sources":["../scss/button.scss?inline","../radio-button.ts","../scss/group.scss?inline","../radio-button-group.ts"],"sourcesContent":[":host {\n\tdisplay: block;\n}\n\n:host,\n.label,\n.checkbox {\n\toutline: none;\n}\n\n:host([disabled]) {\n\tpointer-events: none;\n\n\t.root {\n\t\tcursor: default;\n\n\t\tcircle.inner-bg {\n\t\t\tfill: var(--color-bg-interaction-disabled, #e7e7e7);\n\t\t}\n\n\t\tcircle.inner {\n\t\t\tfill: var(--color-fg-interaction-disabled, #999999);\n\t\t}\n\n\t\tcircle.outer {\n\t\t\tstroke: var(--color-border-interaction-disabled, #c6c6c6) !important;\n\t\t}\n\n\t\t.label {\n\t\t\tcolor: var(--color-fg-interaction-disabled, #999999);\n\t\t}\n\t}\n}\n\n:host([checked]) {\n\tcircle.inner {\n\t\tdisplay: block !important;\n\t}\n\tcircle.outer {\n\t\tstroke: var(--sd-radio-button-checked-color, var(--color-fg-selection-accent-default, #1467ba)) !important;\n\t}\n}\n\n:host([oneline]) {\n\tmax-width: 100%;\n}\n\n:host([oneline]) .label {\n\twhite-space: pre;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n}\n\n.root {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tvertical-align: middle;\n\twidth: 100%;\n\tpadding: var(--sd-radio-button-padding, 0px);\n\tgap: var(--spacing-x4, 8px);\n\n\t.radio-button-container {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\twidth: 28px;\n\t\theight: 28px;\n\t\tbox-sizing: border-box;\n\t\tcursor: pointer;\n\t\tflex-shrink: 0;\n\n\t\tinput {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\topacity: 0;\n\t\t}\n\t\tcircle.inner {\n\t\t\tfill: var(--sd-radio-button-checked-color, var(--color-fg-selection-accent-default, #1467ba));\n\t\t}\n\t\tcircle.outer {\n\t\t\tstroke: var(--sd-radio-button-unchecked-color, var(--color-border-selection-neutral-default, #999999));\n\t\t}\n\t}\n\n\t.label {\n\t\tfont: var(--text-body);\n\t\tcolor: var(--color-fg-selection-neutral-default, #111111);\n\t\ttext-overflow: ellipsis;\n\t\toverflow-x: hidden;\n\t\tuser-select: none;\n\t\tcursor: pointer;\n\t\tpadding-top: 2px;\n\t\tpadding-bottom: 2px;\n\t\tpadding-right: var(--spacing-x4, 8px);\n\t}\n}\n","import { LitElement, type TemplateResult, html, unsafeCSS, css } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [RadioButton.ID]: RadioButton;\n    }\n}\n\nimport style from \"./scss/button.scss?inline\";\nlet idCounter = 0;\n\nexport class RadioButton extends LitElement {\n    public static readonly ID = \"sd-radio-button\";\n    public static ensureDefined = (): void => {\n        if (!customElements.get(RadioButton.ID)) {\n            customElements.define(RadioButton.ID, RadioButton);\n        }\n    };\n    @property({ type: Boolean, reflect: true, attribute: true })\n    public checked = false;\n    @property({ type: String, reflect: true, attribute: true })\n    public value = \"\";\n    @property({ type: Boolean, reflect: true, attribute: true })\n    public disabled = false;\n    @property({ type: String, reflect: true, attribute: true })\n    public label = \"\";\n\n    private a11yID;\n\n    constructor() {\n        super();\n        this.a11yID = RadioButton.ID + \"_\" + idCounter++;\n    }\n\n    static override get styles() {\n        return [\n            css`\n                ${unsafeCSS(style)}\n            `,\n        ];\n    }\n\n    public override render(): TemplateResult {\n        return html`\n            <div class=\"root\">\n                <div class=\"radio-button-container\">\n                    <input\n                        type=\"radio\"\n                        id=\"${this.a11yID}\"\n                        .checked=\"${this.checked}\"\n                        ?disabled=\"${this.disabled}\"\n                        @click=\"${this.handleClick}\"\n                        class=\"radio-button\"\n                    />\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-14 -14 28 28\">\n                        <circle\n                            class=\"inner-bg\"\n                            r=\"8px\"\n                            style=\"${this.disabled ? \"\" : \"display:none\"}\"\n                            stroke=\"none\"\n                        ></circle>\n                        <circle class=\"inner\" r=\"6px\" style=\"display:none\" stroke=\"none\"></circle>\n                        <circle class=\"outer\" r=\"9px\" fill=\"transparent\" stroke-width=\"2px\"></circle>\n                    </svg>\n                </div>\n                <label class=\"label\" for=\"${this.a11yID}\" @click=\"${this.handleClick}\">${this.label}</label>\n            </div>\n        `;\n    }\n\n    private handleClick = (event: MouseEvent): void => {\n        event.preventDefault();\n    };\n}\n",":host {\n\tdisplay: block;\n}\n\n:host(:focus) {\n\toutline: none;\n}\n\n:host(:focus-visible) ::slotted([focused]) {\n\toutline: 1px solid var(--color-border-interaction-focus, #111);\n\toutline-offset: var(--spacing-x1, 2px);\n\tborder-radius: var(--radius-s, 4px);\n\tz-index: 10 !important;\n}\n\n.buttons-container {\n\tdisplay: inline-flex;\n\talign-items: start;\n\tgap: var(--sd-radio-button-group-gap, 0);\n\tborder-radius: var(--radius-s, 4px);\n\tmax-width: 100%;\n}\n\n.buttons-container.vertical {\n\tflex-direction: column;\n}\n\n.validation-message {\n\tmargin-left: 5px;\n}\n","import SDFieldValidationMessage, { ValidationLevel } from \"@cas-smartdesign/field-validation-message\";\nimport {\n    LitElement,\n    type TemplateResult,\n    html,\n    type PropertyValues,\n    type ComplexAttributeConverter,\n    unsafeCSS,\n    css,\n} from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\nimport type { LayoutType, IValueChangeEvent } from \"./types\";\n\nimport { RadioButton } from \"./radio-button\";\n\nexport { RadioButton } from \"./radio-button\";\nexport type * from \"./types\";\n\nimport style from \"./scss/group.scss?inline\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [RadioButtonGroup.ID]: RadioButtonGroup;\n    }\n    interface HTMLElementEventMap {\n        \"sd-radio-button-group-value-change\": CustomEvent<IValueChangeEvent>;\n    }\n}\n\nexport class RadioButtonGroup extends LitElement {\n    public static readonly ID = \"sd-radio-button-group\";\n    public static ensureDefined = (): void => {\n        RadioButton.ensureDefined();\n        if (!customElements.get(RadioButtonGroup.ID)) {\n            customElements.define(RadioButtonGroup.ID, RadioButtonGroup);\n        }\n    };\n    @property({ type: String, reflect: true, attribute: true })\n    public layout: LayoutType = \"horizontal\";\n    @property({ type: String })\n    public value: string | undefined = \"\";\n    @property({ type: Boolean, reflect: true, attribute: \"uncheck-allowed\" })\n    public uncheckAllowed = false;\n    @property({ type: Boolean, reflect: true, attribute: true })\n    public disabled = false;\n    @property({ type: String })\n    public validationMessage: string | undefined;\n    @property({ type: String })\n    public validationIconSrc: string | undefined;\n    @property({\n        type: {\n            fromAttribute(value: string): ValidationLevel | undefined {\n                return SDFieldValidationMessage.parseLevel(value);\n            },\n            toAttribute(value: ValidationLevel | undefined): string | undefined {\n                return value != null ? value.toLowerCase() : undefined;\n            },\n        } as ComplexAttributeConverter,\n        reflect: true,\n    })\n    public validationLevel: ValidationLevel | undefined;\n\n    private _buttonsSlot: HTMLSlotElement | undefined;\n    private _buttons: HTMLElement[] = [];\n    private _focusIndex = -1;\n    private _checkedButton: HTMLElement | undefined = undefined;\n\n    public get focusIndex(): number {\n        return this._focusIndex;\n    }\n\n    public set focusIndex(index: number) {\n        if (index >= -1 && index < this.childElementCount) {\n            const oldValue = this._focusIndex;\n            this._focusIndex = index;\n            if (oldValue !== index) {\n                const previousButton = this._buttons[oldValue];\n                const currentButton = this._buttons[this.focusIndex];\n                this.updateFocused(previousButton, currentButton);\n            }\n        }\n    }\n\n    protected override firstUpdated(changedProperties: PropertyValues): void {\n        super.firstUpdated(changedProperties);\n        this.buttonsSlot!.addEventListener(\"slotchange\", this.handleSlotChange);\n        this.addEventListener(\"focusin\", this.handleFocusIn);\n        this.addEventListener(\"focusout\", this.handleFocusOut);\n        this.addEventListener(\"keydown\", this.handleKeyDown);\n    }\n\n    protected override updated(changedProperties: PropertyValues): void {\n        super.updated(changedProperties);\n        if (changedProperties.has(\"disabled\")) {\n            if (this.disabled) {\n                this.disableButtons();\n            } else {\n                this.enableButtons();\n            }\n        }\n    }\n\n    static override get styles() {\n        return [\n            css`\n                ${unsafeCSS(style)}\n            `,\n        ];\n    }\n    public override render(): TemplateResult {\n        return html`\n            <div\n                class=\"buttons-container ${this.layout === \"vertical\" ? \"vertical\" : \"horizontal\"}\"\n                @click=\"${ifDefined(this.disabled ? undefined : this.handleButtonClick)}\"\n            >\n                <slot></slot>\n            </div>\n            ${this.validationMessage &&\n            html`\n                <br />\n                <sd-field-validation-message\n                    class=\"validation-message\"\n                    .message=${this.validationMessage}\n                    .icon=${this.validationIconSrc}\n                    .level=${this.validationLevel}\n                >\n                </sd-field-validation-message>\n            `}\n        `;\n    }\n\n    private handleSlotChange = (): void => {\n        this._buttons = this.buttonsSlot!.assignedElements() as HTMLElement[];\n        this._buttons.forEach((button) => {\n            if (!button.hasAttribute(\"disabled\") && this.disabled) {\n                button.setAttribute(\"disabled\", \"\");\n            }\n            // prevent radio buttons to be able to get focus by tabbing\n            // as focus is handled by this element\n            button.setAttribute(\"tabIndex\", \"-1\");\n            this.updateCheckedButton(button);\n        });\n    };\n\n    private updateCheckedButton(button: HTMLElement): void {\n        if (!this._checkedButton && this.isChecked(button)) {\n            this._checkedButton = button;\n            this.updateValue(button.getAttribute(\"value\"));\n        } else if (this._checkedButton !== button) {\n            // single selection: the first checked button wins; this also\n            // initializes aria-pressed=\"false\" on plain (non-radio) buttons\n            this.uncheckButton(button);\n        }\n    }\n\n    private handleFocusIn = (event: FocusEvent): void => {\n        const target = event.target as HTMLElement;\n        const ind = this._buttons.findIndex((button) => button == target);\n        this.focusIndex = this.focusIndex >= 0 ? this.focusIndex : this.getNextFocusIndex(ind !== -1 ? ind : 0);\n        this.updateFocused(undefined, this._buttons[this.focusIndex]);\n    };\n\n    private handleFocusOut = (): void => {\n        this.updateFocused(this._buttons[this.focusIndex]);\n    };\n\n    private disableButtons(): void {\n        this._buttons?.forEach((button) => {\n            button.setAttribute(\"disabled\", \"\");\n        });\n    }\n\n    private enableButtons(): void {\n        this._buttons?.forEach((button) => {\n            button.removeAttribute(\"disabled\");\n        });\n    }\n\n    private handleButtonClick = (event: MouseEvent): void => {\n        // the individual buttons are not focusable\n        this.focus();\n        const target = this._buttons.find((button) => button.contains(event.target as Node));\n        if (target?.matches(\"[disabled], [aria-disabled='true']\")) {\n            return;\n        }\n        const targetIndex = this._buttons.findIndex((button) => button == target);\n        if (targetIndex >= 0) {\n            this.focusIndex = targetIndex;\n            this.updateChecked();\n        }\n    };\n\n    private fireValueChangeEvent(): void {\n        this.dispatchEvent(\n            new CustomEvent<IValueChangeEvent>(\"sd-radio-button-group-value-change\", {\n                detail: {\n                    value: this.value,\n                    selectedIndex: this.selectedIndex,\n                },\n            }),\n        );\n    }\n\n    private handleKeyDown = (event: KeyboardEvent): void => {\n        let shouldPrevent = true;\n        switch (event.key) {\n            case \"Down\":\n            case \"ArrowDown\":\n            case \"Right\":\n            case \"ArrowRight\": {\n                this.focusNext();\n                break;\n            }\n            case \"Up\":\n            case \"ArrowUp\":\n            case \"Left\":\n            case \"ArrowLeft\": {\n                this.focusPrevious();\n                break;\n            }\n            case \"Enter\": {\n                this.updateChecked();\n                break;\n            }\n            default: {\n                shouldPrevent = false;\n            }\n        }\n        if (shouldPrevent) {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    };\n\n    private focusNext() {\n        const newIndex = this.getNextFocusIndex(this.focusIndex + 1);\n        this.focusIndex = newIndex !== -1 ? newIndex : this.getNextFocusIndex(0);\n        if (!this.uncheckAllowed) {\n            this.updateChecked();\n        }\n    }\n\n    private focusPrevious() {\n        const newIndex = this.getPreviousFocusIndex(this.focusIndex - 1);\n        this.focusIndex = newIndex !== -1 ? newIndex : this.getPreviousFocusIndex(this.childElementCount - 1);\n        if (!this.uncheckAllowed) {\n            this.updateChecked();\n        }\n    }\n\n    private getNextFocusIndex(index: number): number {\n        for (let i = index; i < this.childElementCount; i++) {\n            const button = this._buttons[i];\n            if (button != null && this.isFocusable(button)) {\n                return i;\n            }\n        }\n\n        return -1;\n    }\n\n    private getPreviousFocusIndex(index: number): number {\n        for (let i = index; i >= 0; i--) {\n            const button = this._buttons[i];\n            if (button != null && this.isFocusable(button)) {\n                return i;\n            }\n        }\n\n        return -1;\n    }\n\n    private isFocusable(button: HTMLElement): boolean {\n        return !button.matches(\"[disabled], [aria-disabled='true']\");\n    }\n\n    private updateChecked(): void {\n        const previousChecked = this._checkedButton;\n        const currentChecked = this._buttons[this.focusIndex];\n        if (!currentChecked || currentChecked.matches(\"[disabled], [aria-disabled='true']\")) {\n            return;\n        }\n        this._checkedButton = currentChecked;\n        if (previousChecked && previousChecked !== currentChecked) {\n            this.uncheckButton(previousChecked);\n        }\n        if (currentChecked) {\n            this.toggleButton(currentChecked);\n        }\n    }\n\n    private toggleButton(button: HTMLElement): void {\n        const checked = this.isChecked(button);\n        if (checked) {\n            if (this.uncheckAllowed) {\n                this.uncheckButton(button);\n                this._checkedButton = undefined;\n                this.updateValue(\"\");\n            }\n        } else {\n            this.checkButton(button);\n            this.updateValue(button.getAttribute(\"value\"));\n        }\n    }\n\n    private updateValue(newValue: string | null | undefined): void {\n        this.value = newValue ?? undefined;\n        this.fireValueChangeEvent();\n    }\n\n    private updateFocused(previousFocused?: HTMLElement, currentFocused?: HTMLElement): void {\n        previousFocused?.removeAttribute?.(\"focused\");\n        currentFocused?.setAttribute?.(\"focused\", \"\");\n    }\n\n    private isRadioButton(button: HTMLElement): boolean {\n        return button.localName === RadioButton.ID;\n    }\n\n    private isChecked(button: HTMLElement): boolean {\n        return this.isRadioButton(button)\n            ? button.hasAttribute(\"checked\")\n            : button.getAttribute(\"aria-pressed\") === \"true\";\n    }\n\n    private checkButton(button: HTMLElement): void {\n        if (this.isRadioButton(button)) {\n            button.setAttribute(\"checked\", \"\");\n        } else {\n            button.setAttribute(\"aria-pressed\", \"true\");\n        }\n    }\n\n    private uncheckButton(button: HTMLElement): void {\n        if (this.isRadioButton(button)) {\n            button.removeAttribute(\"checked\");\n        } else {\n            button.setAttribute(\"aria-pressed\", \"false\");\n        }\n    }\n\n    private get buttonsSlot(): HTMLSlotElement | undefined {\n        if (this.shadowRoot && !this._buttonsSlot) {\n            this._buttonsSlot = this.shadowRoot.querySelector(\"slot\") ?? undefined;\n        }\n        return this._buttonsSlot;\n    }\n\n    private get selectedIndex(): number {\n        if (this._buttons == undefined || this._checkedButton == undefined) {\n            return -1;\n        }\n        return this._buttons.indexOf(this._checkedButton);\n    }\n}\n\nRadioButtonGroup.ensureDefined();\n"],"mappings":"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"}
+{"version":3,"file":"radio-button-group.mjs","names":[],"sources":["../scss/button.scss?inline","../radio-button.ts","../scss/group.scss?inline","../radio-button-group.ts"],"sourcesContent":[":host {\n\tdisplay: block;\n}\n\n:host,\n.label,\n.checkbox {\n\toutline: none;\n}\n\n:host([disabled]) {\n\tpointer-events: none;\n\n\t.root {\n\t\tcursor: default;\n\n\t\tcircle.inner-bg {\n\t\t\tfill: var(--color-bg-interaction-disabled, #e7e7e7);\n\t\t}\n\n\t\tcircle.inner {\n\t\t\tfill: var(--color-fg-interaction-disabled, #999999);\n\t\t}\n\n\t\tcircle.outer {\n\t\t\tstroke: var(--color-border-interaction-disabled, #c6c6c6) !important;\n\t\t}\n\n\t\t.label {\n\t\t\tcolor: var(--color-fg-interaction-disabled, #999999);\n\t\t}\n\t}\n}\n\n:host([checked]) {\n\tcircle.inner {\n\t\tdisplay: block !important;\n\t}\n\tcircle.outer {\n\t\tstroke: var(--sd-radio-button-checked-color, var(--color-fg-selection-accent-default, #1467ba)) !important;\n\t}\n}\n\n:host([oneline]) {\n\tmax-width: 100%;\n}\n\n:host([oneline]) .label {\n\twhite-space: pre;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n}\n\n.root {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tvertical-align: middle;\n\twidth: 100%;\n\tpadding: var(--sd-radio-button-padding, 0px);\n\tgap: var(--spacing-x4, 8px);\n\n\t.radio-button-container {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\twidth: 28px;\n\t\theight: 28px;\n\t\tbox-sizing: border-box;\n\t\tcursor: pointer;\n\t\tflex-shrink: 0;\n\n\t\tinput {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\topacity: 0;\n\t\t}\n\t\tcircle.inner {\n\t\t\tfill: var(--sd-radio-button-checked-color, var(--color-fg-selection-accent-default, #1467ba));\n\t\t}\n\t\tcircle.outer {\n\t\t\tstroke: var(--sd-radio-button-unchecked-color, var(--color-border-selection-neutral-default, #999999));\n\t\t}\n\t}\n\n\t.label {\n\t\tfont: var(--text-body);\n\t\tcolor: var(--color-fg-selection-neutral-default, #111111);\n\t\ttext-overflow: ellipsis;\n\t\toverflow-x: hidden;\n\t\tuser-select: none;\n\t\tcursor: pointer;\n\t\tpadding-top: 2px;\n\t\tpadding-bottom: 2px;\n\t\tpadding-right: var(--spacing-x4, 8px);\n\t}\n}\n","import { LitElement, type TemplateResult, html, unsafeCSS, css } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [RadioButton.ID]: RadioButton;\n    }\n}\n\nimport style from \"./scss/button.scss?inline\";\nlet idCounter = 0;\n\nexport class RadioButton extends LitElement {\n    public static readonly ID = \"sd-radio-button\";\n    public static ensureDefined = (): void => {\n        if (!customElements.get(RadioButton.ID)) {\n            customElements.define(RadioButton.ID, RadioButton);\n        }\n    };\n    @property({ type: Boolean, reflect: true, attribute: true })\n    public checked = false;\n    @property({ type: String, reflect: true, attribute: true })\n    public value = \"\";\n    @property({ type: Boolean, reflect: true, attribute: true })\n    public disabled = false;\n    @property({ type: String, reflect: true, attribute: true })\n    public label = \"\";\n\n    private a11yID;\n\n    constructor() {\n        super();\n        this.a11yID = RadioButton.ID + \"_\" + idCounter++;\n    }\n\n    static override get styles() {\n        return [\n            css`\n                ${unsafeCSS(style)}\n            `,\n        ];\n    }\n\n    public override render(): TemplateResult {\n        return html`\n            <div class=\"root\">\n                <div class=\"radio-button-container\">\n                    <input\n                        type=\"radio\"\n                        id=\"${this.a11yID}\"\n                        .checked=\"${this.checked}\"\n                        ?disabled=\"${this.disabled}\"\n                        @click=\"${this.handleClick}\"\n                        class=\"radio-button\"\n                    />\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-14 -14 28 28\">\n                        <circle\n                            class=\"inner-bg\"\n                            r=\"8px\"\n                            style=\"${this.disabled ? \"\" : \"display:none\"}\"\n                            stroke=\"none\"\n                        ></circle>\n                        <circle class=\"inner\" r=\"6px\" style=\"display:none\" stroke=\"none\"></circle>\n                        <circle class=\"outer\" r=\"9px\" fill=\"transparent\" stroke-width=\"2px\"></circle>\n                    </svg>\n                </div>\n                <label class=\"label\" for=\"${this.a11yID}\" @click=\"${this.handleClick}\">${this.label}</label>\n            </div>\n        `;\n    }\n\n    private handleClick = (event: MouseEvent): void => {\n        event.preventDefault();\n    };\n}\n",":host {\n\tdisplay: block;\n}\n\n:host(:focus) {\n\toutline: none;\n}\n\n:host(:focus-visible) ::slotted([focused]) {\n\toutline: 1px solid var(--color-border-interaction-focus, #111);\n\toutline-offset: var(--spacing-x1, 2px);\n\tborder-radius: var(--radius-s, 4px);\n\tz-index: 10 !important;\n}\n\n.buttons-container {\n\tdisplay: inline-flex;\n\talign-items: start;\n\tgap: var(--sd-radio-button-group-gap, 0);\n\tborder-radius: var(--radius-s, 4px);\n\tmax-width: 100%;\n}\n\n.buttons-container.vertical {\n\tflex-direction: column;\n}\n\n.validation-message {\n\tmargin-left: 5px;\n}\n","import SDFieldValidationMessage, { ValidationLevel } from \"@cas-smartdesign/field-validation-message\";\nimport {\n    LitElement,\n    type TemplateResult,\n    html,\n    type PropertyValues,\n    type ComplexAttributeConverter,\n    unsafeCSS,\n    css,\n} from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\nimport type { LayoutType, IValueChangeEvent } from \"./types\";\n\nimport { RadioButton } from \"./radio-button\";\n\nexport { RadioButton } from \"./radio-button\";\nexport type * from \"./types\";\n\nimport style from \"./scss/group.scss?inline\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [RadioButtonGroup.ID]: RadioButtonGroup;\n    }\n    interface HTMLElementEventMap {\n        \"sd-radio-button-group-value-change\": CustomEvent<IValueChangeEvent>;\n    }\n}\n\nexport class RadioButtonGroup extends LitElement {\n    public static readonly ID = \"sd-radio-button-group\";\n    public static ensureDefined = (): void => {\n        RadioButton.ensureDefined();\n        if (!customElements.get(RadioButtonGroup.ID)) {\n            customElements.define(RadioButtonGroup.ID, RadioButtonGroup);\n        }\n    };\n    @property({ type: String, reflect: true, attribute: true })\n    public layout: LayoutType = \"horizontal\";\n    @property({ type: String })\n    public value: string | undefined = \"\";\n    @property({ type: Boolean, reflect: true, attribute: \"uncheck-allowed\" })\n    public uncheckAllowed = false;\n    @property({ type: Boolean, reflect: true, attribute: true })\n    public disabled = false;\n    @property({ type: String })\n    public validationMessage: string | undefined;\n    @property({ type: String })\n    public validationIconSrc: string | undefined;\n    @property({\n        type: {\n            fromAttribute(value: string): ValidationLevel | undefined {\n                return SDFieldValidationMessage.parseLevel(value);\n            },\n            toAttribute(value: ValidationLevel | undefined): string | undefined {\n                return value != null ? value.toLowerCase() : undefined;\n            },\n        } as ComplexAttributeConverter,\n        reflect: true,\n    })\n    public validationLevel: ValidationLevel | undefined;\n\n    private _buttonsSlot: HTMLSlotElement | undefined;\n    private _buttons: HTMLElement[] = [];\n    private _focusIndex = -1;\n    private _checkedButton: HTMLElement | undefined = undefined;\n\n    public get focusIndex(): number {\n        return this._focusIndex;\n    }\n\n    public set focusIndex(index: number) {\n        if (index >= -1 && index < this.childElementCount) {\n            const oldValue = this._focusIndex;\n            this._focusIndex = index;\n            if (oldValue !== index) {\n                const previousButton = this._buttons[oldValue];\n                const currentButton = this._buttons[this.focusIndex];\n                this.updateFocused(previousButton, currentButton);\n            }\n        }\n    }\n\n    protected override firstUpdated(changedProperties: PropertyValues): void {\n        super.firstUpdated(changedProperties);\n        this.buttonsSlot!.addEventListener(\"slotchange\", this.handleSlotChange);\n        this.addEventListener(\"focusin\", this.handleFocusIn);\n        this.addEventListener(\"focusout\", this.handleFocusOut);\n        this.addEventListener(\"keydown\", this.handleKeyDown);\n        this.addEventListener(\"mousedown\", this.handleMouseDown);\n    }\n\n    protected override updated(changedProperties: PropertyValues): void {\n        super.updated(changedProperties);\n        if (changedProperties.has(\"disabled\")) {\n            if (this.disabled) {\n                this.disableButtons();\n            } else {\n                this.enableButtons();\n            }\n        }\n    }\n\n    static override get styles() {\n        return [\n            css`\n                ${unsafeCSS(style)}\n            `,\n        ];\n    }\n    public override render(): TemplateResult {\n        return html`\n            <div\n                class=\"buttons-container ${this.layout === \"vertical\" ? \"vertical\" : \"horizontal\"}\"\n                @click=\"${ifDefined(this.disabled ? undefined : this.handleButtonClick)}\"\n            >\n                <slot></slot>\n            </div>\n            ${this.validationMessage &&\n            html`\n                <br />\n                <sd-field-validation-message\n                    class=\"validation-message\"\n                    .message=${this.validationMessage}\n                    .icon=${this.validationIconSrc}\n                    .level=${this.validationLevel}\n                >\n                </sd-field-validation-message>\n            `}\n        `;\n    }\n\n    private handleSlotChange = (): void => {\n        this._buttons = this.buttonsSlot!.assignedElements() as HTMLElement[];\n        this._buttons.forEach((button) => {\n            if (!button.hasAttribute(\"disabled\") && this.disabled) {\n                button.setAttribute(\"disabled\", \"\");\n            }\n            // prevent radio buttons to be able to get focus by tabbing\n            // as focus is handled by this element\n            button.setAttribute(\"tabIndex\", \"-1\");\n            this.updateCheckedButton(button);\n        });\n    };\n\n    private updateCheckedButton(button: HTMLElement): void {\n        if (!this._checkedButton && this.isChecked(button)) {\n            this._checkedButton = button;\n            this.updateValue(button.getAttribute(\"value\"));\n        } else if (this._checkedButton !== button) {\n            // single selection: the first checked button wins; this also\n            // initializes aria-pressed=\"false\" on plain (non-radio) buttons\n            this.uncheckButton(button);\n        }\n    }\n\n    private handleFocusIn = (event: FocusEvent): void => {\n        const target = event.target as HTMLElement;\n        const ind = this._buttons.findIndex((button) => button == target);\n        this.focusIndex = this.focusIndex >= 0 ? this.focusIndex : this.getNextFocusIndex(ind !== -1 ? ind : 0);\n        this.updateFocused(undefined, this._buttons[this.focusIndex]);\n    };\n\n    private handleFocusOut = (): void => {\n        this.updateFocused(this._buttons[this.focusIndex]);\n    };\n\n    private disableButtons(): void {\n        this._buttons?.forEach((button) => {\n            button.setAttribute(\"disabled\", \"\");\n        });\n    }\n\n    private enableButtons(): void {\n        this._buttons?.forEach((button) => {\n            button.removeAttribute(\"disabled\");\n        });\n    }\n\n    private handleMouseDown = (event: MouseEvent): void => {\n        // The buttons carry tabindex=\"-1\" to stay out of the tab order, but that still\n        // lets a pointer press focus them, which decouples the real focus from the\n        // group's roving [focused] state: e.g. press a button, release the pointer\n        // outside it (no click fires), then the arrow keys move [focused] while\n        // document.activeElement stays stuck on the pressed button. Keep focus on the\n        // group by preventing the press from focusing a button; focus is set on the\n        // group from the click handler instead, so the group always owns the focus.\n        if (this._buttons.some((button) => button.contains(event.target as Node))) {\n            event.preventDefault();\n        }\n    };\n\n    private handleButtonClick = (event: MouseEvent): void => {\n        // the individual buttons are not focusable\n        this.focus();\n        const target = this._buttons.find((button) => button.contains(event.target as Node));\n        if (target?.matches(\"[disabled], [aria-disabled='true']\")) {\n            return;\n        }\n        const targetIndex = this._buttons.findIndex((button) => button == target);\n        if (targetIndex >= 0) {\n            this.focusIndex = targetIndex;\n            this.updateChecked();\n        }\n    };\n\n    private fireValueChangeEvent(): void {\n        this.dispatchEvent(\n            new CustomEvent<IValueChangeEvent>(\"sd-radio-button-group-value-change\", {\n                detail: {\n                    value: this.value,\n                    selectedIndex: this.selectedIndex,\n                },\n            }),\n        );\n    }\n\n    private handleKeyDown = (event: KeyboardEvent): void => {\n        let shouldPrevent = true;\n        switch (event.key) {\n            case \"Down\":\n            case \"ArrowDown\":\n            case \"Right\":\n            case \"ArrowRight\": {\n                this.focusNext();\n                break;\n            }\n            case \"Up\":\n            case \"ArrowUp\":\n            case \"Left\":\n            case \"ArrowLeft\": {\n                this.focusPrevious();\n                break;\n            }\n            case \"Enter\": {\n                this.updateChecked();\n                break;\n            }\n            default: {\n                shouldPrevent = false;\n            }\n        }\n        if (shouldPrevent) {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    };\n\n    private focusNext() {\n        const newIndex = this.getNextFocusIndex(this.focusIndex + 1);\n        this.focusIndex = newIndex !== -1 ? newIndex : this.getNextFocusIndex(0);\n        if (!this.uncheckAllowed) {\n            this.updateChecked();\n        }\n    }\n\n    private focusPrevious() {\n        const newIndex = this.getPreviousFocusIndex(this.focusIndex - 1);\n        this.focusIndex = newIndex !== -1 ? newIndex : this.getPreviousFocusIndex(this.childElementCount - 1);\n        if (!this.uncheckAllowed) {\n            this.updateChecked();\n        }\n    }\n\n    private getNextFocusIndex(index: number): number {\n        for (let i = index; i < this.childElementCount; i++) {\n            const button = this._buttons[i];\n            if (button != null && this.isFocusable(button)) {\n                return i;\n            }\n        }\n\n        return -1;\n    }\n\n    private getPreviousFocusIndex(index: number): number {\n        for (let i = index; i >= 0; i--) {\n            const button = this._buttons[i];\n            if (button != null && this.isFocusable(button)) {\n                return i;\n            }\n        }\n\n        return -1;\n    }\n\n    private isFocusable(button: HTMLElement): boolean {\n        return !button.matches(\"[disabled], [aria-disabled='true']\");\n    }\n\n    private updateChecked(): void {\n        const previousChecked = this._checkedButton;\n        const currentChecked = this._buttons[this.focusIndex];\n        if (!currentChecked || currentChecked.matches(\"[disabled], [aria-disabled='true']\")) {\n            return;\n        }\n        this._checkedButton = currentChecked;\n        if (previousChecked && previousChecked !== currentChecked) {\n            this.uncheckButton(previousChecked);\n        }\n        if (currentChecked) {\n            this.toggleButton(currentChecked);\n        }\n    }\n\n    private toggleButton(button: HTMLElement): void {\n        const checked = this.isChecked(button);\n        if (checked) {\n            if (this.uncheckAllowed) {\n                this.uncheckButton(button);\n                this._checkedButton = undefined;\n                this.updateValue(\"\");\n            }\n        } else {\n            this.checkButton(button);\n            this.updateValue(button.getAttribute(\"value\"));\n        }\n    }\n\n    private updateValue(newValue: string | null | undefined): void {\n        this.value = newValue ?? undefined;\n        this.fireValueChangeEvent();\n    }\n\n    private updateFocused(previousFocused?: HTMLElement, currentFocused?: HTMLElement): void {\n        previousFocused?.removeAttribute?.(\"focused\");\n        currentFocused?.setAttribute?.(\"focused\", \"\");\n    }\n\n    private isRadioButton(button: HTMLElement): boolean {\n        return button.localName === RadioButton.ID;\n    }\n\n    private isChecked(button: HTMLElement): boolean {\n        return this.isRadioButton(button)\n            ? button.hasAttribute(\"checked\")\n            : button.getAttribute(\"aria-pressed\") === \"true\";\n    }\n\n    private checkButton(button: HTMLElement): void {\n        if (this.isRadioButton(button)) {\n            button.setAttribute(\"checked\", \"\");\n        } else {\n            button.setAttribute(\"aria-pressed\", \"true\");\n        }\n    }\n\n    private uncheckButton(button: HTMLElement): void {\n        if (this.isRadioButton(button)) {\n            button.removeAttribute(\"checked\");\n        } else {\n            button.setAttribute(\"aria-pressed\", \"false\");\n        }\n    }\n\n    private get buttonsSlot(): HTMLSlotElement | undefined {\n        if (this.shadowRoot && !this._buttonsSlot) {\n            this._buttonsSlot = this.shadowRoot.querySelector(\"slot\") ?? undefined;\n        }\n        return this._buttonsSlot;\n    }\n\n    private get selectedIndex(): number {\n        if (this._buttons == undefined || this._checkedButton == undefined) {\n            return -1;\n        }\n        return this._buttons.indexOf(this._checkedButton);\n    }\n}\n\nRadioButtonGroup.ensureDefined();\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cas-smartdesign/radio-button-group",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "description": "Radio button and radio button group elements with SmartDesign look & feel",
   "license": "SEE LICENSE IN LICENSE",
   "files": [
@@ -17,11 +17,11 @@
   },
   "dependencies": {
     "lit": "^3.3.2",
-    "@cas-smartdesign/field-validation-message": "^7.0.0"
+    "@cas-smartdesign/field-validation-message": "^7.0.2"
   },
   "devDependencies": {
-    "@cas-smartdesign/button": "^7.1.1",
     "@cas-smartdesign/element-preview": "^1.1.0",
+    "@cas-smartdesign/button": "^7.1.4",
     "@cas-smartdesign/license-generator": "^1.10.0"
   },
   "peerDependencies": {