@fluid-topics/ft-radio 0.2.0

package/build/ft-radio.js

@@ -0,0 +1,192 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { designSystemVariables, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { classMap } from "lit/directives/class-map.js";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { FtTypography } from "@fluid-topics/ft-typography";
+export const FtRadioCssVariables = {
+    textColor: FtCssVariable.extend("--ft-radio-text-color", designSystemVariables.colorOnSurfaceHigh),
+    colorPrimary: FtCssVariable.external(designSystemVariables.colorPrimary, "Design system"),
+    colorOnPrimary: FtCssVariable.external(designSystemVariables.colorOnPrimary, "Design system"),
+    borderColor: FtCssVariable.extend("--ft-radio-border-color", designSystemVariables.colorOnSurfaceMedium),
+    colorOnSurfaceDisabled: FtCssVariable.external(designSystemVariables.colorOnSurfaceDisabled, "Design system"),
+};
+export class FtRadioChangeEvent extends CustomEvent {
+    constructor(value, checked) {
+        super("change", { detail: { value: value, checked: checked }, bubbles: true, composed: true });
+    }
+}
+export class FtRadio extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.value = "";
+        this.name = "";
+        this.checked = false;
+        this.disabled = false;
+    }
+    render() {
+        const classes = {
+            "ft-radio": true,
+            "ft-radio--checked": this.checked,
+            "ft-radio--disabled": this.disabled,
+        };
+        return html `
+            <div class="${classMap(classes)}">
+                <div class="ft-radio--box-container">
+                    <input id="radio-button"
+                           type="radio"
+                           name="${this.name}"
+                           value="${this.value}"
+                           .checked=${this.checked}
+                           .disabled=${this.disabled}
+                           @change=${this.onChange}
+                    >
+                    <ft-ripple
+                            ?disabled=${this.disabled}
+                            ?primary=${this.checked}
+                            unbounded>
+                    </ft-ripple>
+                    <div class="ft-radio--box">
+                    </div>
+                </div>
+                <label for="radio-button" @click=${(e) => e.stopPropagation()}>
+                    <ft-typography variant="body2">
+                        <slot></slot>
+                    </ft-typography>
+                </label>
+            </div>
+        `;
+    }
+    onChange(event) {
+        event.stopPropagation();
+        this.checked = event.target.checked;
+        this.dispatchEvent(new FtRadioChangeEvent(this.value, this.checked));
+    }
+    contentAvailableCallback(props) {
+        var _a;
+        super.contentAvailableCallback(props);
+        (_a = this.ripple) === null || _a === void 0 ? void 0 : _a.setupFor(this.container);
+    }
+    select() {
+        this.checked = true;
+        this.dispatchEvent(new FtRadioChangeEvent(this.value, this.checked));
+        this.focus();
+    }
+    focus() {
+        var _a;
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+}
+FtRadio.elementDefinitions = {
+    "ft-ripple": FtRipple,
+    "ft-typography": FtTypography
+};
+// language=CSS
+FtRadio.styles = css `
+        * {
+            box-sizing: border-box;
+        }
+
+        .ft-radio {
+            box-sizing: border-box;
+            color: ${FtRadioCssVariables.textColor};
+
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .ft-radio--disabled {
+            color: ${FtRadioCssVariables.colorOnSurfaceDisabled};
+        }
+
+        input {
+            opacity: 0;
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            margin: 0;
+        }
+
+        .ft-radio--box-container {
+            position: relative;
+            width: 40px;
+            height: 40px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+        }
+
+        .ft-radio--box {
+            border: 2px solid ${FtRadioCssVariables.borderColor};
+            border-radius: 50%;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            width: 20px;
+            height: 20px;
+        }
+
+        .ft-radio--box:after {
+            content: " ";
+            background-color: ${FtRadioCssVariables.colorPrimary};
+
+            border-radius: 50%;
+
+            width: 12px;
+            height: 12px;
+
+            transform: scale(0);
+            transition: transform 100ms ease;
+        }
+
+        .ft-radio--checked .ft-radio--box {
+            border-color: ${FtRadioCssVariables.colorPrimary};
+        }
+
+
+        .ft-radio--checked .ft-radio--box:after {
+            transform: scale(1);
+        }
+
+        .ft-radio--disabled .ft-radio--box {
+            border-color: ${FtRadioCssVariables.colorOnSurfaceDisabled};
+            background-color: transparent;
+        }
+
+        .ft-radio--disabled .ft-radio--box:after {
+            background-color: ${FtRadioCssVariables.colorOnSurfaceDisabled};
+        }
+    `;
+__decorate([
+    property()
+], FtRadio.prototype, "value", void 0);
+__decorate([
+    property()
+], FtRadio.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtRadio.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtRadio.prototype, "disabled", void 0);
+__decorate([
+    query(".ft-radio")
+], FtRadio.prototype, "container", void 0);
+__decorate([
+    query("ft-ripple")
+], FtRadio.prototype, "ripple", void 0);
+__decorate([
+    query("input")
+], FtRadio.prototype, "input", void 0);
+//# sourceMappingURL=ft-radio.js.map

package/build/ft-radio.light.js

@@ -0,0 +1,321 @@
+!function(t,i,e,o,s){var r=function(t,i,e,o){for(var s,r=arguments.length,n=r<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,h=t.length-1;h>=0;h--)(s=t[h])&&(n=(r<3?s(n):r>3?s(i,e,n):s(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};const n=i.FtCssVariable.extend("--ft-ripple-color",i.designSystemVariables.colorContent),h=i.FtCssVariable.extend("--ft-ripple-primary-color",i.FtCssVariable.extend("--ft-ripple-color",i.designSystemVariables.colorPrimary)),p=i.FtCssVariable.extend("--ft-ripple-secondary-color",i.FtCssVariable.extend("--ft-ripple-color",i.designSystemVariables.colorSecondary)),l=i.FtCssVariable.external(i.designSystemVariables.opacityContentOnSurfacePressed,"Design system"),a=i.FtCssVariable.external(i.designSystemVariables.opacityContentOnSurfaceHover,"Design system"),f=i.FtCssVariable.external(i.designSystemVariables.opacityContentOnSurfaceFocused,"Design system"),d=i.FtCssVariable.external(i.designSystemVariables.opacityContentOnSurfaceSelected,"Design system");class c extends i.FtLitElement{constructor(){super(...arguments),this.primary=!1,this.secondary=!1,this.unbounded=!1,this.activated=!1,this.selected=!1,this.disabled=!1,this.hovered=!1,this.focused=!1,this.pressed=!1,this.rippling=!1,this.rippleSize=0,this.originX=0,this.originY=0,this.resizeObserver=new ResizeObserver((()=>this.setRippleSize())),this.onTransitionStart=t=>{"transform"===t.propertyName&&(this.rippling=this.pressed)},this.onTransitionEnd=t=>{"transform"===t.propertyName&&(this.rippling=!1)},this.moveRipple=t=>{var i,e;let{x:o,y:s}=this.getCoordinates(t),r=null!==(e=null===(i=this.ripple)||void 0===i?void 0:i.getBoundingClientRect())&&void 0!==e?e:{x:0,y:0,width:0,height:0};this.originX=Math.round(null!=o?o-r.x:r.width/2),this.originY=Math.round(null!=s?s-r.y:r.height/2)},this.startPress=t=>{this.moveRipple(t),this.pressed=!this.isIgnored(t)},this.endPress=()=>{this.pressed=!1},this.startHover=t=>{this.hovered=!this.isIgnored(t)},this.endHover=()=>{this.hovered=!1},this.startFocus=t=>{this.focused=!this.isIgnored(t)},this.endFocus=()=>{this.focused=!1}}render(){let t={"ft-ripple":!0,"ft-ripple--primary":this.primary,"ft-ripple--secondary":this.secondary,"ft-ripple--unbounded":this.unbounded,"ft-ripple--selected":(this.selected||this.activated)&&!this.disabled,"ft-ripple--pressed":(this.pressed||this.rippling)&&!this.disabled,"ft-ripple--hovered":this.hovered&&!this.disabled,"ft-ripple--focused":this.focused&&!this.disabled};return e.html`
+            <style>
+                .ft-ripple .ft-ripple--effect,
+                .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
+                    width: ${this.rippleSize}px;
+                    height: ${this.rippleSize}px;
+                }
+
+                .ft-ripple .ft-ripple--effect {
+                    left: ${this.originX}px;
+                    top: ${this.originY}px;
+                }
+            </style>
+            <div class="${s.classMap(t)}">
+                <div class="ft-ripple--background"></div>
+                <div class="ft-ripple--effect"></div>
+            </div>
+        `}contentAvailableCallback(t){super.contentAvailableCallback(t),this.ripple&&this.resizeObserver.observe(this.ripple),this.rippleEffect&&this.rippleEffect.ontransitionstart!==this.onTransitionStart&&(this.rippleEffect.ontransitionstart=this.onTransitionStart,this.rippleEffect.ontransitionend=this.onTransitionEnd)}updated(t){super.updated(t),t.has("disabled")&&this.disabled&&this.endRipple(),t.has("unbounded")&&this.setRippleSize()}endRipple(){this.endHover(),this.endFocus(),this.endPress(),this.rippling=!1}setRippleSize(){if(this.ripple){const t=this.ripple.getBoundingClientRect();this.rippleSize=(this.unbounded?1:1.7)*Math.max(t.width,t.height)}}connectedCallback(){var t;super.connectedCallback();const i=null===(t=this.shadowRoot)||void 0===t?void 0:t.host.parentElement;i&&this.setupFor(i),this.setRippleSize()}setupFor(t){if(this.target===t)return;this.onDisconnect&&this.onDisconnect(),this.target=t,t.setAttribute("data-is-ft-ripple-target","true");const i=(...t)=>i=>{t.forEach((t=>window.addEventListener(t,this.endPress,{once:!0}))),this.startPress(i)},e=i("mouseup","contextmenu"),o=i("touchend","touchcancel"),s=t=>{["Enter"," "].includes(t.key)&&i("keyup")(t)};t.addEventListener("mouseover",this.startHover),t.addEventListener("mousemove",this.moveRipple),t.addEventListener("mouseleave",this.endHover),t.addEventListener("mousedown",e),t.addEventListener("touchstart",o),t.addEventListener("touchmove",this.moveRipple),t.addEventListener("keydown",s),t.addEventListener("focus",this.startFocus),t.addEventListener("blur",this.endFocus),t.addEventListener("focusin",this.startFocus),t.addEventListener("focusout",this.endFocus),this.onDisconnect=()=>{t.removeAttribute("data-is-ft-ripple-target"),t.removeEventListener("mouseover",this.startHover),t.removeEventListener("mousemove",this.moveRipple),t.removeEventListener("mouseleave",this.endHover),t.removeEventListener("mousedown",e),t.removeEventListener("touchstart",o),t.removeEventListener("touchmove",this.moveRipple),t.removeEventListener("keydown",s),t.removeEventListener("focus",this.startFocus),t.removeEventListener("blur",this.endFocus),t.removeEventListener("focusin",this.startFocus),t.removeEventListener("focusout",this.endFocus),this.onDisconnect=void 0}}getCoordinates(t){const i=t,e=t;let o,s;return null!=i.x?({x:o,y:s}=i):null!=e.touches&&(o=e.touches[0].clientX,s=e.touches[0].clientY),{x:o,y:s}}isIgnored(t){if(this.disabled)return!0;if(null!=t)for(let i of t.composedPath()){if(i===this.target)break;if("hasAttribute"in i&&i.hasAttribute("data-is-ft-ripple-target"))return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),this.onDisconnect&&this.onDisconnect(),this.resizeObserver.disconnect(),this.endRipple()}}
+/**
+     * @license
+     * Copyright 2017 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */
+var y;c.elementDefinitions={},c.styles=e.css`
+        :host {
+            display: contents;
+        }
+
+        .ft-ripple {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+        }
+
+        .ft-ripple:not(.ft-ripple--unbounded) {
+            overflow: hidden;
+        }
+
+        .ft-ripple .ft-ripple--background,
+        .ft-ripple .ft-ripple--effect {
+            position: absolute;
+            opacity: 0;
+            background-color: ${n};
+        }
+
+        .ft-ripple.ft-ripple--secondary .ft-ripple--background,
+        .ft-ripple.ft-ripple--secondary .ft-ripple--effect {
+            background-color: ${p};
+        }
+
+        .ft-ripple.ft-ripple--primary .ft-ripple--background,
+        .ft-ripple.ft-ripple--primary .ft-ripple--effect {
+            background-color: ${h};
+        }
+
+        .ft-ripple .ft-ripple--background {
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+        }
+
+        .ft-ripple .ft-ripple--effect,
+        .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
+            border-radius: 50%;
+        }
+
+        .ft-ripple .ft-ripple--effect {
+            transform: translate(-50%, -50%) scale(0.15);
+            transition: transform 300ms ease, opacity 75ms linear;
+        }
+
+        .ft-ripple.ft-ripple--unbounded .ft-ripple--effect,
+        .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
+            left: 50%;
+            top: 50%;
+        }
+
+        .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
+            transform: translate(-50%, -50%);
+        }
+
+        .ft-ripple.ft-ripple--hovered .ft-ripple--background {
+            opacity: ${a};
+        }
+
+        .ft-ripple.ft-ripple--selected .ft-ripple--background {
+            opacity: ${d};
+        }
+
+        .ft-ripple.ft-ripple--focused .ft-ripple--background {
+            opacity: ${f};
+        }
+
+        .ft-ripple.ft-ripple--pressed .ft-ripple--effect {
+            opacity: ${l};
+            transform: translate(-50%, -50%) scale(1);
+        }
+    `,r([o.property({type:Boolean})],c.prototype,"primary",void 0),r([o.property({type:Boolean})],c.prototype,"secondary",void 0),r([o.property({type:Boolean})],c.prototype,"unbounded",void 0),r([o.property({type:Boolean})],c.prototype,"activated",void 0),r([o.property({type:Boolean})],c.prototype,"selected",void 0),r([o.property({type:Boolean})],c.prototype,"disabled",void 0),r([o.state()],c.prototype,"hovered",void 0),r([o.state()],c.prototype,"focused",void 0),r([o.state()],c.prototype,"pressed",void 0),r([o.state()],c.prototype,"rippling",void 0),r([o.state()],c.prototype,"rippleSize",void 0),r([o.state()],c.prototype,"originX",void 0),r([o.state()],c.prototype,"originY",void 0),r([o.query(".ft-ripple")],c.prototype,"ripple",void 0),r([o.query(".ft-ripple--effect")],c.prototype,"rippleEffect",void 0),i.customElement("ft-ripple")(c);const u=globalThis.trustedTypes,g=u?u.createPolicy("lit-html",{createHTML:t=>t}):void 0,v=`lit$${(Math.random()+"").slice(9)}$`,b="?"+v,$=`<${b}>`,m=document,x=(t="")=>m.createComment(t),w=t=>null===t||"object"!=typeof t&&"function"!=typeof t,k=Array.isArray,z=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,A=/-->/g,_=/>/g,C=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,O=/'/g,S=/"/g,j=/^(?:script|style|textarea|title)$/i,D=(t=>(i,...e)=>({_$litType$:t,strings:i,values:e}))(1),E=Symbol.for("lit-noChange"),N=Symbol.for("lit-nothing"),T=new WeakMap,I=m.createTreeWalker(m,129,null,!1),B=(t,i)=>{const e=t.length-1,o=[];let s,r=2===i?"<svg>":"",n=z;for(let i=0;i<e;i++){const e=t[i];let h,p,l=-1,a=0;for(;a<e.length&&(n.lastIndex=a,p=n.exec(e),null!==p);)a=n.lastIndex,n===z?"!--"===p[1]?n=A:void 0!==p[1]?n=_:void 0!==p[2]?(j.test(p[2])&&(s=RegExp("</"+p[2],"g")),n=C):void 0!==p[3]&&(n=C):n===C?">"===p[0]?(n=null!=s?s:z,l=-1):void 0===p[1]?l=-2:(l=n.lastIndex-p[2].length,h=p[1],n=void 0===p[3]?C:'"'===p[3]?S:O):n===S||n===O?n=C:n===A||n===_?n=z:(n=C,s=void 0);const f=n===C&&t[i+1].startsWith("/>")?" ":"";r+=n===z?e+$:l>=0?(o.push(h),e.slice(0,l)+"$lit$"+e.slice(l)+v+f):e+v+(-2===l?(o.push(void 0),i):f)}const h=r+(t[e]||"<?>")+(2===i?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==g?g.createHTML(h):h,o]};class M{constructor({strings:t,_$litType$:i},e){let o;this.parts=[];let s=0,r=0;const n=t.length-1,h=this.parts,[p,l]=B(t,i);if(this.el=M.createElement(p,e),I.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes)}for(;null!==(o=I.nextNode())&&h.length<n;){if(1===o.nodeType){if(o.hasAttributes()){const t=[];for(const i of o.getAttributeNames())if(i.endsWith("$lit$")||i.startsWith(v)){const e=l[r++];if(t.push(i),void 0!==e){const t=o.getAttribute(e.toLowerCase()+"$lit$").split(v),i=/([.?@])?(.*)/.exec(e);h.push({type:1,index:s,name:i[2],strings:t,ctor:"."===i[1]?G:"?"===i[1]?K:"@"===i[1]?H:Z})}else h.push({type:6,index:s})}for(const i of t)o.removeAttribute(i)}if(j.test(o.tagName)){const t=o.textContent.split(v),i=t.length-1;if(i>0){o.textContent=u?u.emptyScript:"";for(let e=0;e<i;e++)o.append(t[e],x()),I.nextNode(),h.push({type:2,index:++s});o.append(t[i],x())}}}else if(8===o.nodeType)if(o.data===b)h.push({type:2,index:s});else{let t=-1;for(;-1!==(t=o.data.indexOf(v,t+1));)h.push({type:7,index:s}),t+=v.length-1}s++}}static createElement(t,i){const e=m.createElement("template");return e.innerHTML=t,e}}function R(t,i,e=t,o){var s,r,n,h;if(i===E)return i;let p=void 0!==o?null===(s=e._$Cl)||void 0===s?void 0:s[o]:e._$Cu;const l=w(i)?void 0:i._$litDirective$;return(null==p?void 0:p.constructor)!==l&&(null===(r=null==p?void 0:p._$AO)||void 0===r||r.call(p,!1),void 0===l?p=void 0:(p=new l(t),p._$AT(t,e,o)),void 0!==o?(null!==(n=(h=e)._$Cl)&&void 0!==n?n:h._$Cl=[])[o]=p:e._$Cu=p),void 0!==p&&(i=R(t,p._$AS(t,i.values),p,o)),i}class U{constructor(t,i){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=i}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var i;const{el:{content:e},parts:o}=this._$AD,s=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:m).importNode(e,!0);I.currentNode=s;let r=I.nextNode(),n=0,h=0,p=o[0];for(;void 0!==p;){if(n===p.index){let i;2===p.type?i=new F(r,r.nextSibling,this,t):1===p.type?i=new p.ctor(r,p.name,p.strings,this,t):6===p.type&&(i=new L(r,this,t)),this.v.push(i),p=o[++h]}n!==(null==p?void 0:p.index)&&(r=I.nextNode(),n++)}return s}m(t){let i=0;for(const e of this.v)void 0!==e&&(void 0!==e.strings?(e._$AI(t,e,i),i+=e.strings.length-2):e._$AI(t[i])),i++}}class F{constructor(t,i,e,o){var s;this.type=2,this._$AH=N,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=e,this.options=o,this._$Cg=null===(s=null==o?void 0:o.isConnected)||void 0===s||s}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=R(this,t,i),w(t)?t===N||null==t||""===t?(this._$AH!==N&&this._$AR(),this._$AH=N):t!==this._$AH&&t!==E&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.S(t):(t=>{var i;return k(t)||"function"==typeof(null===(i=t)||void 0===i?void 0:i[Symbol.iterator])})(t)?this.A(t):this.$(t)}M(t,i=this._$AB){return this._$AA.parentNode.insertBefore(t,i)}S(t){this._$AH!==t&&(this._$AR(),this._$AH=this.M(t))}$(t){this._$AH!==N&&w(this._$AH)?this._$AA.nextSibling.data=t:this.S(m.createTextNode(t)),this._$AH=t}T(t){var i;const{values:e,_$litType$:o}=t,s="number"==typeof o?this._$AC(t):(void 0===o.el&&(o.el=M.createElement(o.h,this.options)),o);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===s)this._$AH.m(e);else{const t=new U(s,this),i=t.p(this.options);t.m(e),this.S(i),this._$AH=t}}_$AC(t){let i=T.get(t.strings);return void 0===i&&T.set(t.strings,i=new M(t)),i}A(t){k(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let e,o=0;for(const s of t)o===i.length?i.push(e=new F(this.M(x()),this.M(x()),this,this.options)):e=i[o],e._$AI(s),o++;o<i.length&&(this._$AR(e&&e._$AB.nextSibling,o),i.length=o)}_$AR(t=this._$AA.nextSibling,i){var e;for(null===(e=this._$AP)||void 0===e||e.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var i;void 0===this._$AM&&(this._$Cg=t,null===(i=this._$AP)||void 0===i||i.call(this,t))}}class Z{constructor(t,i,e,o,s){this.type=1,this._$AH=N,this._$AN=void 0,this.element=t,this.name=i,this._$AM=o,this.options=s,e.length>2||""!==e[0]||""!==e[1]?(this._$AH=Array(e.length-1).fill(new String),this.strings=e):this._$AH=N}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,e,o){const s=this.strings;let r=!1;if(void 0===s)t=R(this,t,i,0),r=!w(t)||t!==this._$AH&&t!==E,r&&(this._$AH=t);else{const o=t;let n,h;for(t=s[0],n=0;n<s.length-1;n++)h=R(this,o[e+n],i,n),h===E&&(h=this._$AH[n]),r||(r=!w(h)||h!==this._$AH[n]),h===N?t=N:t!==N&&(t+=(null!=h?h:"")+s[n+1]),this._$AH[n]=h}r&&!o&&this.k(t)}k(t){t===N?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class G extends Z{constructor(){super(...arguments),this.type=3}k(t){this.element[this.name]=t===N?void 0:t}}const W=u?u.emptyScript:"";class K extends Z{constructor(){super(...arguments),this.type=4}k(t){t&&t!==N?this.element.setAttribute(this.name,W):this.element.removeAttribute(this.name)}}class H extends Z{constructor(t,i,e,o,s){super(t,i,e,o,s),this.type=5}_$AI(t,i=this){var e;if((t=null!==(e=R(this,t,i,0))&&void 0!==e?e:N)===E)return;const o=this._$AH,s=t===N&&o!==N||t.capture!==o.capture||t.once!==o.once||t.passive!==o.passive,r=t!==N&&(o===N||s);s&&this.element.removeEventListener(this.name,this,o),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var i,e;"function"==typeof this._$AH?this._$AH.call(null!==(e=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==e?e:this.element,t):this._$AH.handleEvent(t)}}class L{constructor(t,i,e){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=e}get _$AU(){return this._$AM._$AU}_$AI(t){R(this,t)}}const P=window.litHtmlPolyfillSupport;null==P||P(M,F),(null!==(y=globalThis.litHtmlVersions)&&void 0!==y?y:globalThis.litHtmlVersions=[]).push("2.1.3");
+/**
+     * @license
+     * Copyright 2020 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */
+const X=t=>({_$litStatic$:t}),Y=new Map,q=(t=>(i,...e)=>{var o;const s=e.length;let r,n;const h=[],p=[];let l,a=0,f=!1;for(;a<s;){for(l=i[a];a<s&&void 0!==(n=e[a],r=null===(o=n)||void 0===o?void 0:o._$litStatic$);)l+=r+i[++a],f=!0;p.push(n),h.push(l),a++}if(a===s&&h.push(i[s]),f){const t=h.join("$$lit$$");void 0===(i=Y.get(t))&&(h.raw=h,Y.set(t,i=h)),e=p}return t(i,...e)})(D);var J,Q=function(t,i,e,o){for(var s,r=arguments.length,n=r<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,h=t.length-1;h>=0;h--)(s=t[h])&&(n=(r<3?s(n):r>3?s(i,e,n):s(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};!function(t){t.title="title",t.title_dense="title-dense",t.subtitle1="subtitle1",t.subtitle2="subtitle2",t.body1="body1",t.body2="body2",t.caption="caption",t.breadcrumb="breadcrumb",t.overline="overline",t.button="button"}(J||(J={}));const V=i.FtCssVariable.extend("--ft-typography-font-family",i.designSystemVariables.titleFont),tt=i.FtCssVariable.extend("--ft-typography-font-family",i.designSystemVariables.contentFont),it={fontFamily:tt,fontSize:i.FtCssVariable.create("--ft-typography-font-size","SIZE","16px"),fontWeight:i.FtCssVariable.create("--ft-typography-font-weight","UNKNOWN","normal"),letterSpacing:i.FtCssVariable.create("--ft-typography-letter-spacing","SIZE","0.496px"),lineHeight:i.FtCssVariable.create("--ft-typography-line-height","SIZE","24px"),textTransform:i.FtCssVariable.create("--ft-typography-text-transform","UNKNOWN","inherit")},et=i.FtCssVariable.extend("--ft-typography-title-font-family",V),ot=i.FtCssVariable.extend("--ft-typography-title-font-size",it.fontSize,"20px"),st=i.FtCssVariable.extend("--ft-typography-title-font-weight",it.fontWeight,"normal"),rt=i.FtCssVariable.extend("--ft-typography-title-letter-spacing",it.letterSpacing,"0.15px"),nt=i.FtCssVariable.extend("--ft-typography-title-line-height",it.lineHeight,"24px"),ht=i.FtCssVariable.extend("--ft-typography-title-text-transform",it.textTransform,"inherit"),pt=i.FtCssVariable.extend("--ft-typography-title-dense-font-family",V),lt=i.FtCssVariable.extend("--ft-typography-title-dense-font-size",it.fontSize,"14px"),at=i.FtCssVariable.extend("--ft-typography-title-dense-font-weight",it.fontWeight,"normal"),ft=i.FtCssVariable.extend("--ft-typography-title-dense-letter-spacing",it.letterSpacing,"0.105px"),dt=i.FtCssVariable.extend("--ft-typography-title-dense-line-height",it.lineHeight,"24px"),ct=i.FtCssVariable.extend("--ft-typography-title-dense-text-transform",it.textTransform,"inherit"),yt=i.FtCssVariable.extend("--ft-typography-subtitle1-font-family",tt),ut=i.FtCssVariable.extend("--ft-typography-subtitle1-font-size",it.fontSize,"16px"),gt=i.FtCssVariable.extend("--ft-typography-subtitle1-font-weight",it.fontWeight,"600"),vt=i.FtCssVariable.extend("--ft-typography-subtitle1-letter-spacing",it.letterSpacing,"0.144px"),bt=i.FtCssVariable.extend("--ft-typography-subtitle1-line-height",it.lineHeight,"24px"),$t=i.FtCssVariable.extend("--ft-typography-subtitle1-text-transform",it.textTransform,"inherit"),mt=i.FtCssVariable.extend("--ft-typography-subtitle2-font-family",tt),xt=i.FtCssVariable.extend("--ft-typography-subtitle2-font-size",it.fontSize,"14px"),wt=i.FtCssVariable.extend("--ft-typography-subtitle2-font-weight",it.fontWeight,"normal"),kt=i.FtCssVariable.extend("--ft-typography-subtitle2-letter-spacing",it.letterSpacing,"0.098px"),zt=i.FtCssVariable.extend("--ft-typography-subtitle2-line-height",it.lineHeight,"24px"),At=i.FtCssVariable.extend("--ft-typography-subtitle2-text-transform",it.textTransform,"inherit"),_t=i.FtCssVariable.extend("--ft-typography-body1-font-family",tt),Ct=i.FtCssVariable.extend("--ft-typography-body1-font-size",it.fontSize,"16px"),Ot=i.FtCssVariable.extend("--ft-typography-body1-font-weight",it.fontWeight,"normal"),St=i.FtCssVariable.extend("--ft-typography-body1-letter-spacing",it.letterSpacing,"0.496px"),jt=i.FtCssVariable.extend("--ft-typography-body1-line-height",it.lineHeight,"24px"),Dt=i.FtCssVariable.extend("--ft-typography-body1-text-transform",it.textTransform,"inherit"),Et=i.FtCssVariable.extend("--ft-typography-body2-font-family",tt),Nt=i.FtCssVariable.extend("--ft-typography-body2-font-size",it.fontSize,"14px"),Tt=i.FtCssVariable.extend("--ft-typography-body2-font-weight",it.fontWeight,"normal"),It=i.FtCssVariable.extend("--ft-typography-body2-letter-spacing",it.letterSpacing,"0.252px"),Bt=i.FtCssVariable.extend("--ft-typography-body2-line-height",it.lineHeight,"20px"),Mt=i.FtCssVariable.extend("--ft-typography-body2-text-transform",it.textTransform,"inherit"),Rt=i.FtCssVariable.extend("--ft-typography-caption-font-family",tt),Ut=i.FtCssVariable.extend("--ft-typography-caption-font-size",it.fontSize,"12px"),Ft=i.FtCssVariable.extend("--ft-typography-caption-font-weight",it.fontWeight,"normal"),Zt=i.FtCssVariable.extend("--ft-typography-caption-letter-spacing",it.letterSpacing,"0.396px"),Gt=i.FtCssVariable.extend("--ft-typography-caption-line-height",it.lineHeight,"16px"),Wt=i.FtCssVariable.extend("--ft-typography-caption-text-transform",it.textTransform,"inherit"),Kt=i.FtCssVariable.extend("--ft-typography-breadcrumb-font-family",tt),Ht=i.FtCssVariable.extend("--ft-typography-breadcrumb-font-size",it.fontSize,"10px"),Lt=i.FtCssVariable.extend("--ft-typography-breadcrumb-font-weight",it.fontWeight,"normal"),Pt=i.FtCssVariable.extend("--ft-typography-breadcrumb-letter-spacing",it.letterSpacing,"0.33px"),Xt=i.FtCssVariable.extend("--ft-typography-breadcrumb-line-height",it.lineHeight,"16px"),Yt=i.FtCssVariable.extend("--ft-typography-breadcrumb-text-transform",it.textTransform,"inherit"),qt=i.FtCssVariable.extend("--ft-typography-overline-font-family",tt),Jt=i.FtCssVariable.extend("--ft-typography-overline-font-size",it.fontSize,"10px"),Qt=i.FtCssVariable.extend("--ft-typography-overline-font-weight",it.fontWeight,"normal"),Vt=i.FtCssVariable.extend("--ft-typography-overline-letter-spacing",it.letterSpacing,"1.5px"),ti=i.FtCssVariable.extend("--ft-typography-overline-line-height",it.lineHeight,"16px"),ii=i.FtCssVariable.extend("--ft-typography-overline-text-transform",it.textTransform,"uppercase"),ei=i.FtCssVariable.extend("--ft-typography-button-font-family",tt),oi=i.FtCssVariable.extend("--ft-typography-button-font-size",it.fontSize,"14px"),si=i.FtCssVariable.extend("--ft-typography-button-font-weight",it.fontWeight,"600"),ri=i.FtCssVariable.extend("--ft-typography-button-letter-spacing",it.letterSpacing,"1.246px"),ni=i.FtCssVariable.extend("--ft-typography-button-line-height",it.lineHeight,"16px"),hi=i.FtCssVariable.extend("--ft-typography-button-text-transform",it.textTransform,"uppercase"),pi=e.css`
+    .ft-typography--title {
+        font-family: ${et};
+        font-size: ${ot};
+        font-weight: ${st};
+        letter-spacing: ${rt};
+        line-height: ${nt};
+        text-transform: ${ht};
+    }
+`,li=e.css`
+    .ft-typography--title-dense {
+        font-family: ${pt};
+        font-size: ${lt};
+        font-weight: ${at};
+        letter-spacing: ${ft};
+        line-height: ${dt};
+        text-transform: ${ct};
+    }
+`,ai=e.css`
+    .ft-typography--subtitle1 {
+        font-family: ${yt};
+        font-size: ${ut};
+        font-weight: ${gt};
+        letter-spacing: ${vt};
+        line-height: ${bt};
+        text-transform: ${$t};
+    }
+`,fi=e.css`
+    .ft-typography--subtitle2 {
+        font-family: ${mt};
+        font-size: ${xt};
+        font-weight: ${wt};
+        letter-spacing: ${kt};
+        line-height: ${zt};
+        text-transform: ${At};
+    }
+
+`,di=e.css`
+    .ft-typography--body1 {
+        font-family: ${_t};
+        font-size: ${Ct};
+        font-weight: ${Ot};
+        letter-spacing: ${St};
+        line-height: ${jt};
+        text-transform: ${Dt};
+    }
+`,ci=e.css`
+    .ft-typography--body2 {
+        font-family: ${Et};
+        font-size: ${Nt};
+        font-weight: ${Tt};
+        letter-spacing: ${It};
+        line-height: ${Bt};
+        text-transform: ${Mt};
+    }
+`,yi=e.css`
+    .ft-typography--caption {
+        font-family: ${Rt};
+        font-size: ${Ut};
+        font-weight: ${Ft};
+        letter-spacing: ${Zt};
+        line-height: ${Gt};
+        text-transform: ${Wt};
+    }
+`,ui=e.css`
+    .ft-typography--breadcrumb {
+        font-family: ${Kt};
+        font-size: ${Ht};
+        font-weight: ${Lt};
+        letter-spacing: ${Pt};
+        line-height: ${Xt};
+        text-transform: ${Yt};
+    }
+`,gi=e.css`
+    .ft-typography--overline {
+        font-family: ${qt};
+        font-size: ${Jt};
+        font-weight: ${Qt};
+        letter-spacing: ${Vt};
+        line-height: ${ti};
+        text-transform: ${ii};
+    }
+`,vi=e.css`
+    .ft-typography--button {
+        font-family: ${ei};
+        font-size: ${oi};
+        font-weight: ${si};
+        letter-spacing: ${ri};
+        line-height: ${ni};
+        text-transform: ${hi};
+    }
+`;class bi extends i.FtLitElement{constructor(){super(...arguments),this.variant=J.body1}render(){return this.element?q`
+                <${X(this.element)}
+                        class="ft-typography ft-typography--${this.variant}">
+                    <slot></slot>
+                </${X(this.element)}>
+            `:q`
+            <slot class="ft-typography ft-typography--${this.variant}"></slot>
+        `}}bi.styles=[pi,li,ai,fi,di,ci,yi,ui,gi,vi,e.css`
+            .ft-typography {
+                vertical-align: inherit;
+            }
+        `],Q([o.property()],bi.prototype,"element",void 0),Q([o.property()],bi.prototype,"variant",void 0),i.customElement("ft-typography")(bi);var $i=function(t,i,e,o){for(var s,r=arguments.length,n=r<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,h=t.length-1;h>=0;h--)(s=t[h])&&(n=(r<3?s(n):r>3?s(i,e,n):s(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};const mi={textColor:i.FtCssVariable.extend("--ft-radio-text-color",i.designSystemVariables.colorOnSurfaceHigh),colorPrimary:i.FtCssVariable.external(i.designSystemVariables.colorPrimary,"Design system"),colorOnPrimary:i.FtCssVariable.external(i.designSystemVariables.colorOnPrimary,"Design system"),borderColor:i.FtCssVariable.extend("--ft-radio-border-color",i.designSystemVariables.colorOnSurfaceMedium),colorOnSurfaceDisabled:i.FtCssVariable.external(i.designSystemVariables.colorOnSurfaceDisabled,"Design system")};class xi extends CustomEvent{constructor(t,i){super("change",{detail:{value:t,checked:i},bubbles:!0,composed:!0})}}class wi extends i.FtLitElement{constructor(){super(...arguments),this.value="",this.name="",this.checked=!1,this.disabled=!1}render(){const t={"ft-radio":!0,"ft-radio--checked":this.checked,"ft-radio--disabled":this.disabled};return e.html`
+            <div class="${s.classMap(t)}">
+                <div class="ft-radio--box-container">
+                    <input id="radio-button"
+                           type="radio"
+                           name="${this.name}"
+                           value="${this.value}"
+                           .checked=${this.checked}
+                           .disabled=${this.disabled}
+                           @change=${this.onChange}
+                    >
+                    <ft-ripple
+                            ?disabled=${this.disabled}
+                            ?primary=${this.checked}
+                            unbounded>
+                    </ft-ripple>
+                    <div class="ft-radio--box">
+                    </div>
+                </div>
+                <label for="radio-button" @click=${t=>t.stopPropagation()}>
+                    <ft-typography variant="body2">
+                        <slot></slot>
+                    </ft-typography>
+                </label>
+            </div>
+        `}onChange(t){t.stopPropagation(),this.checked=t.target.checked,this.dispatchEvent(new xi(this.value,this.checked))}contentAvailableCallback(t){var i;super.contentAvailableCallback(t),null===(i=this.ripple)||void 0===i||i.setupFor(this.container)}select(){this.checked=!0,this.dispatchEvent(new xi(this.value,this.checked)),this.focus()}focus(){var t;null===(t=this.input)||void 0===t||t.focus()}}wi.elementDefinitions={"ft-ripple":c,"ft-typography":bi},wi.styles=e.css`
+        * {
+            box-sizing: border-box;
+        }
+
+        .ft-radio {
+            box-sizing: border-box;
+            color: ${mi.textColor};
+
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .ft-radio--disabled {
+            color: ${mi.colorOnSurfaceDisabled};
+        }
+
+        input {
+            opacity: 0;
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            margin: 0;
+        }
+
+        .ft-radio--box-container {
+            position: relative;
+            width: 40px;
+            height: 40px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+        }
+
+        .ft-radio--box {
+            border: 2px solid ${mi.borderColor};
+            border-radius: 50%;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            width: 20px;
+            height: 20px;
+        }
+
+        .ft-radio--box:after {
+            content: " ";
+            background-color: ${mi.colorPrimary};
+
+            border-radius: 50%;
+
+            width: 12px;
+            height: 12px;
+
+            transform: scale(0);
+            transition: transform 100ms ease;
+        }
+
+        .ft-radio--checked .ft-radio--box {
+            border-color: ${mi.colorPrimary};
+        }
+
+
+        .ft-radio--checked .ft-radio--box:after {
+            transform: scale(1);
+        }
+
+        .ft-radio--disabled .ft-radio--box {
+            border-color: ${mi.colorOnSurfaceDisabled};
+            background-color: transparent;
+        }
+
+        .ft-radio--disabled .ft-radio--box:after {
+            background-color: ${mi.colorOnSurfaceDisabled};
+        }
+    `,$i([o.property()],wi.prototype,"value",void 0),$i([o.property()],wi.prototype,"name",void 0),$i([o.property({type:Boolean})],wi.prototype,"checked",void 0),$i([o.property({type:Boolean})],wi.prototype,"disabled",void 0),$i([o.query(".ft-radio")],wi.prototype,"container",void 0),$i([o.query("ft-ripple")],wi.prototype,"ripple",void 0),$i([o.query("input")],wi.prototype,"input",void 0);var ki=function(t,i,e,o){for(var s,r=arguments.length,n=r<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,h=t.length-1;h>=0;h--)(s=t[h])&&(n=(r<3?s(n):r>3?s(i,e,n):s(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};class zi extends i.FtLitElement{constructor(){super(...arguments),this.name=""}render(){return e.html`
+            <slot @slotchange=${this.onSlotChange}
+                  @change=${this.onChange}
+                  @keydown=${this.onKeyDown}
+                  @focusin=${this.onFocusIn}
+            ></slot>
+        `}onSlotChange(){this.radioButtons.forEach((t=>t.name=this.name))}onChange(t){t.stopPropagation(),this.radioButtons.forEach((i=>i.checked=t.detail.value===i.value)),this.dispatchEvent(new CustomEvent("change",{detail:t.detail.value}))}onKeyDown(t){switch(t.key){case"ArrowUp":case"ArrowLeft":{let i=this.findFtRadio(t),e=this.radioButtons.indexOf(i)-1;this.radioButtons[e<0?this.radioButtons.length-1:e].select();break}case"ArrowDown":case"ArrowRight":{let i=this.radioButtons.indexOf(this.findFtRadio(t))+1;this.radioButtons[i>this.radioButtons.length-1?0:i].select();break}}}findFtRadio(t){return t.composedPath().find((t=>"FT-RADIO"===t.tagName))}onFocusIn(){setTimeout((()=>{var t;return null===(t=this.radioButtons.find((t=>t.checked)))||void 0===t?void 0:t.focus()}),10)}}zi.elementDefinitions={},zi.styles=e.css`
+        :host {
+            display: contents;
+        }
+    `,ki([o.property()],zi.prototype,"name",void 0),ki([o.queryAssignedElements()],zi.prototype,"radioButtons",void 0),i.customElement("ft-radio")(wi),i.customElement("ft-radio-group")(zi),t.FtRadio=wi,t.FtRadioChangeEvent=xi,t.FtRadioCssVariables=mi,t.FtRadioGroup=zi,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litClassMap);