@fluid-topics/ft-switch 1.0.21 → 1.0.22

package/build/ft-switch-option.css.js

@@ -47,7 +47,7 @@ export const optionStyles = css `
         position: relative;
     }
 
-    .ft-switch-option--input:checked + .ft-switch-option--content:before {
+    .ft-switch-option--selected .ft-switch-option--content:before {
         background-color: ${FtSwitchCssVariables.selectedBackgroundColor};
         border-radius: ${FtSwitchOptionCssVariables.borderRadiusLeft} ${FtSwitchOptionCssVariables.borderRadiusRight} ${FtSwitchOptionCssVariables.borderRadiusRight} ${FtSwitchOptionCssVariables.borderRadiusLeft};
         position: absolute;
@@ -68,7 +68,7 @@ export const optionStyles = css `
         ${setVariable(FtTypographyButtonCssVariables.lineHeight, "var(--ft-switch-option-internal-content-height)")}
     }
 
-    .ft-switch-option--input:checked + .ft-switch-option--content .ft-switch-option--label {
+    .ft-switch-option--selected .ft-switch-option--label {
         color: ${FtSwitchCssVariables.selectedTextColor};
     }
 
@@ -93,7 +93,7 @@ export const optionStyles = css `
         color: ${FtSwitchCssVariables.iconColor};
     }
 
-    .ft-switch-option--input:checked + .ft-switch-option--content ft-icon {
+    .ft-switch-option--selected ft-icon {
         color: ${FtSwitchCssVariables.selectedTextColor};
     }
 `;

package/build/ft-switch-option.js

@@ -40,13 +40,14 @@ class FtSwitchOption extends FtLitElement {
     render() {
         const classes = {
             "ft-switch-option": true,
-            "ft-switch-option--trailing-icon": this.trailingIcon
+            "ft-switch-option--trailing-icon": this.trailingIcon,
+            "ft-switch-option--selected": this.selected,
         };
         return this.addTooltip(html `
+            <input id="input" type="radio" class="ft-switch-option--input"
+                   .checked=${this.selected}>
             <label part="label" for="input" class=${classMap(classes)}
                    @click=${this.onChange}>
-                <input id="input" type="radio" class="ft-switch-option--input"
-                       .checked=${this.selected}>
                 <div class="ft-switch-option--content">
                     <ft-ripple part="ripple" class="ft-switch-option--ripple"></ft-ripple>
                     <ft-typography part="text"

package/build/ft-switch.js

@@ -102,7 +102,7 @@ class FtSwitch extends FtLitElement {
     }
     updateOptions() {
         this.options.forEach(option => {
-            option.selected = option == this.selectedOption;
+            option.selected = option === this.selectedOption;
         });
     }
 }

package/build/ft-switch.light.js

@@ -351,7 +351,7 @@ const tt=Symbol.for(""),it=t=>{if((null==t?void 0:t.r)===tt)return null==t?void
         position: relative;
     }
 
-    .ft-switch-option--input:checked + .ft-switch-option--content:before {
+    .ft-switch-option--selected .ft-switch-option--content:before {
         background-color: ${Mi.selectedBackgroundColor};
         border-radius: ${Wi.borderRadiusLeft} ${Wi.borderRadiusRight} ${Wi.borderRadiusRight} ${Wi.borderRadiusLeft};
         position: absolute;
@@ -372,7 +372,7 @@ const tt=Symbol.for(""),it=t=>{if((null==t?void 0:t.r)===tt)return null==t?void
         ${i.setVariable(hi.lineHeight,"var(--ft-switch-option-internal-content-height)")}
     }
 
-    .ft-switch-option--input:checked + .ft-switch-option--content .ft-switch-option--label {
+    .ft-switch-option--selected .ft-switch-option--label {
         color: ${Mi.selectedTextColor};
     }
 
@@ -397,14 +397,14 @@ const tt=Symbol.for(""),it=t=>{if((null==t?void 0:t.r)===tt)return null==t?void
         color: ${Mi.iconColor};
     }
 
-    .ft-switch-option--input:checked + .ft-switch-option--content ft-icon {
+    .ft-switch-option--selected ft-icon {
         color: ${Mi.selectedTextColor};
     }
-`;var Di=function(t,i,e,o){for(var s,n=arguments.length,r=n<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(i,e,r):s(i,e))||r);return n>3&&r&&Object.defineProperty(i,e,r),r};class Ki extends CustomEvent{constructor(){super("option-change",{bubbles:!0,composed:!0})}}class Li extends i.FtLitElement{constructor(){super(...arguments),this.value="",this.label="",this.tooltipPosition="bottom",this.selected=!1,this.trailingIcon=!1,this.unselectable=!1}focus(){this.input.focus()}updated(t){super.updated(t),t.has("selected")&&this.dispatchEvent(new Ki)}render(){const t={"ft-switch-option":!0,"ft-switch-option--trailing-icon":this.trailingIcon};return this.addTooltip(e.html`
+`;var Di=function(t,i,e,o){for(var s,n=arguments.length,r=n<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(i,e,r):s(i,e))||r);return n>3&&r&&Object.defineProperty(i,e,r),r};class Ki extends CustomEvent{constructor(){super("option-change",{bubbles:!0,composed:!0})}}class Li extends i.FtLitElement{constructor(){super(...arguments),this.value="",this.label="",this.tooltipPosition="bottom",this.selected=!1,this.trailingIcon=!1,this.unselectable=!1}focus(){this.input.focus()}updated(t){super.updated(t),t.has("selected")&&this.dispatchEvent(new Ki)}render(){const t={"ft-switch-option":!0,"ft-switch-option--trailing-icon":this.trailingIcon,"ft-switch-option--selected":this.selected};return this.addTooltip(e.html`
+            <input id="input" type="radio" class="ft-switch-option--input"
+                   .checked=${this.selected}>
             <label part="label" for="input" class=${s.classMap(t)}
                    @click=${this.onChange}>
-                <input id="input" type="radio" class="ft-switch-option--input"
-                       .checked=${this.selected}>
                 <div class="ft-switch-option--content">
                     <ft-ripple part="ripple" class="ft-switch-option--ripple"></ft-ripple>
                     <ft-typography part="text"
@@ -429,7 +429,7 @@ const tt=Symbol.for(""),it=t=>{if((null==t?void 0:t.r)===tt)return null==t?void
                 <slot @slotchange=${this.onSlotchange}
                       @option-change=${this.onOptionChange}></slot>
             </div>
-        `}onKeyDown(t){let i;"ArrowDown"!=t.key&&"ArrowRight"!=t.key||(i=this.selectedOption?this.options.indexOf(this.selectedOption)+1:0),"ArrowUp"!=t.key&&"ArrowLeft"!=t.key||(i=this.selectedOption?this.options.indexOf(this.selectedOption)-1:this.options.length-1),null!=i&&(t.preventDefault(),this.options[this.fixIndex(i)].selected=!0)}fixIndex(t){return t<0?this.options.length-1:t>this.options.length-1?0:t}onSlotchange(){var t;this.options=[],null===(t=this.slottedContent)||void 0===t||t.assignedElements().forEach((t=>{t instanceof Li&&this.registerOption(t)})),this.selectedOption=this.options.find((t=>t.selected))}registerOption(t){t.setAttribute("tabindex","-1"),t.unselectable=this.unselectable,this.options.push(t)}onOptionChange(t){t.stopPropagation();let i=t.target;i.selected?this.selectedOption=i:this.selectedOption=this.options.find((t=>t.selected))}focus(){this.ftSwitchDiv.focus()}updateOptions(){this.options.forEach((t=>{t.selected=t==this.selectedOption}))}}Pi.elementDefinitions={},Pi.styles=e.css`
+        `}onKeyDown(t){let i;"ArrowDown"!=t.key&&"ArrowRight"!=t.key||(i=this.selectedOption?this.options.indexOf(this.selectedOption)+1:0),"ArrowUp"!=t.key&&"ArrowLeft"!=t.key||(i=this.selectedOption?this.options.indexOf(this.selectedOption)-1:this.options.length-1),null!=i&&(t.preventDefault(),this.options[this.fixIndex(i)].selected=!0)}fixIndex(t){return t<0?this.options.length-1:t>this.options.length-1?0:t}onSlotchange(){var t;this.options=[],null===(t=this.slottedContent)||void 0===t||t.assignedElements().forEach((t=>{t instanceof Li&&this.registerOption(t)})),this.selectedOption=this.options.find((t=>t.selected))}registerOption(t){t.setAttribute("tabindex","-1"),t.unselectable=this.unselectable,this.options.push(t)}onOptionChange(t){t.stopPropagation();let i=t.target;i.selected?this.selectedOption=i:this.selectedOption=this.options.find((t=>t.selected))}focus(){this.ftSwitchDiv.focus()}updateOptions(){this.options.forEach((t=>{t.selected=t===this.selectedOption}))}}Pi.elementDefinitions={},Pi.styles=e.css`
         :host {
             display: inline-block;
         }

package/build/ft-switch.min.js

@@ -469,7 +469,7 @@ class ke extends zt{constructor(t){if(super(t),this.et=Y,t.type!==jt)throw Error
         position: relative;
     }
 
-    .ft-switch-option--input:checked + .ft-switch-option--content:before {
+    .ft-switch-option--selected .ft-switch-option--content:before {
         background-color: ${ze.selectedBackgroundColor};
         border-radius: ${Ae.borderRadiusLeft} ${Ae.borderRadiusRight} ${Ae.borderRadiusRight} ${Ae.borderRadiusLeft};
         position: absolute;
@@ -490,7 +490,7 @@ class ke extends zt{constructor(t){if(super(t),this.et=Y,t.type!==jt)throw Error
         ${xt(ee.lineHeight,"var(--ft-switch-option-internal-content-height)")}
     }
 
-    .ft-switch-option--input:checked + .ft-switch-option--content .ft-switch-option--label {
+    .ft-switch-option--selected .ft-switch-option--label {
         color: ${ze.selectedTextColor};
     }
 
@@ -515,14 +515,14 @@ class ke extends zt{constructor(t){if(super(t),this.et=Y,t.type!==jt)throw Error
         color: ${ze.iconColor};
     }
 
-    .ft-switch-option--input:checked + .ft-switch-option--content ft-icon {
+    .ft-switch-option--selected ft-icon {
         color: ${ze.selectedTextColor};
     }
-`;var Be=function(t,i,e,o){for(var s,n=arguments.length,r=n<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(i,e,r):s(i,e))||r);return n>3&&r&&Object.defineProperty(i,e,r),r};class Te extends CustomEvent{constructor(){super("option-change",{bubbles:!0,composed:!0})}}class Pe extends kt{constructor(){super(...arguments),this.value="",this.label="",this.tooltipPosition="bottom",this.selected=!1,this.trailingIcon=!1,this.unselectable=!1}focus(){this.input.focus()}updated(t){super.updated(t),t.has("selected")&&this.dispatchEvent(new Te)}render(){const t={"ft-switch-option":!0,"ft-switch-option--trailing-icon":this.trailingIcon};return this.addTooltip(q`
+`;var Be=function(t,i,e,o){for(var s,n=arguments.length,r=n<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(i,e,r):s(i,e))||r);return n>3&&r&&Object.defineProperty(i,e,r),r};class Te extends CustomEvent{constructor(){super("option-change",{bubbles:!0,composed:!0})}}class Pe extends kt{constructor(){super(...arguments),this.value="",this.label="",this.tooltipPosition="bottom",this.selected=!1,this.trailingIcon=!1,this.unselectable=!1}focus(){this.input.focus()}updated(t){super.updated(t),t.has("selected")&&this.dispatchEvent(new Te)}render(){const t={"ft-switch-option":!0,"ft-switch-option--trailing-icon":this.trailingIcon,"ft-switch-option--selected":this.selected};return this.addTooltip(q`
+            <input id="input" type="radio" class="ft-switch-option--input"
+                   .checked=${this.selected}>
             <label part="label" for="input" class=${At(t)}
                    @click=${this.onChange}>
-                <input id="input" type="radio" class="ft-switch-option--input"
-                       .checked=${this.selected}>
                 <div class="ft-switch-option--content">
                     <ft-ripple part="ripple" class="ft-switch-option--ripple"></ft-ripple>
                     <ft-typography part="text"
@@ -547,7 +547,7 @@ class ke extends zt{constructor(t){if(super(t),this.et=Y,t.type!==jt)throw Error
                 <slot @slotchange=${this.onSlotchange}
                       @option-change=${this.onOptionChange}></slot>
             </div>
-        `}onKeyDown(t){let i;"ArrowDown"!=t.key&&"ArrowRight"!=t.key||(i=this.selectedOption?this.options.indexOf(this.selectedOption)+1:0),"ArrowUp"!=t.key&&"ArrowLeft"!=t.key||(i=this.selectedOption?this.options.indexOf(this.selectedOption)-1:this.options.length-1),null!=i&&(t.preventDefault(),this.options[this.fixIndex(i)].selected=!0)}fixIndex(t){return t<0?this.options.length-1:t>this.options.length-1?0:t}onSlotchange(){var t;this.options=[],null===(t=this.slottedContent)||void 0===t||t.assignedElements().forEach((t=>{t instanceof Pe&&this.registerOption(t)})),this.selectedOption=this.options.find((t=>t.selected))}registerOption(t){t.setAttribute("tabindex","-1"),t.unselectable=this.unselectable,this.options.push(t)}onOptionChange(t){t.stopPropagation();let i=t.target;i.selected?this.selectedOption=i:this.selectedOption=this.options.find((t=>t.selected))}focus(){this.ftSwitchDiv.focus()}updateOptions(){this.options.forEach((t=>{t.selected=t==this.selectedOption}))}}De.elementDefinitions={},De.styles=x`
+        `}onKeyDown(t){let i;"ArrowDown"!=t.key&&"ArrowRight"!=t.key||(i=this.selectedOption?this.options.indexOf(this.selectedOption)+1:0),"ArrowUp"!=t.key&&"ArrowLeft"!=t.key||(i=this.selectedOption?this.options.indexOf(this.selectedOption)-1:this.options.length-1),null!=i&&(t.preventDefault(),this.options[this.fixIndex(i)].selected=!0)}fixIndex(t){return t<0?this.options.length-1:t>this.options.length-1?0:t}onSlotchange(){var t;this.options=[],null===(t=this.slottedContent)||void 0===t||t.assignedElements().forEach((t=>{t instanceof Pe&&this.registerOption(t)})),this.selectedOption=this.options.find((t=>t.selected))}registerOption(t){t.setAttribute("tabindex","-1"),t.unselectable=this.unselectable,this.options.push(t)}onOptionChange(t){t.stopPropagation();let i=t.target;i.selected?this.selectedOption=i:this.selectedOption=this.options.find((t=>t.selected))}focus(){this.ftSwitchDiv.focus()}updateOptions(){this.options.forEach((t=>{t.selected=t===this.selectedOption}))}}De.elementDefinitions={},De.styles=x`
         :host {
             display: inline-block;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-switch",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "two-state",
   "keywords": [
     "Lit"
@@ -19,12 +19,12 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-icon": "1.0.21",
-    "@fluid-topics/ft-ripple": "1.0.21",
-    "@fluid-topics/ft-tooltip": "1.0.21",
-    "@fluid-topics/ft-typography": "1.0.21",
-    "@fluid-topics/ft-wc-utils": "1.0.21",
+    "@fluid-topics/ft-icon": "1.0.22",
+    "@fluid-topics/ft-ripple": "1.0.22",
+    "@fluid-topics/ft-tooltip": "1.0.22",
+    "@fluid-topics/ft-typography": "1.0.22",
+    "@fluid-topics/ft-wc-utils": "1.0.22",
     "lit": "2.7.2"
   },
-  "gitHead": "e07f560e1fb9643e4a6719839de529952c1f70fa"
+  "gitHead": "d68f9748c223f9e8eb8da2da4f410e02a2121d36"
 }