@justeattakeaway/pie-radio 0.8.1 → 0.9.0

package/dist/index.js

@@ -1,30 +1,30 @@
-import { LitElement as f, html as k, unsafeCSS as m } from "lit";
-import { state as g, property as i, query as y } from "lit/decorators.js";
-import { ifDefined as C } from "lit/directives/if-defined.js";
-import { live as _ } from "lit/directives/live.js";
-import { classMap as x } from "lit/directives/class-map.js";
-import { FormControlMixin as z, RtlMixin as w, wrapNativeEvent as E, requiredProperty as $, validPropertyValues as q, defineCustomElement as B } from "@justeattakeaway/pie-webc-core";
-const A = ["default", "error"], d = {
+import { LitElement as g, html as k, unsafeCSS as f } from "lit";
+import { state as m, property as i, query as y } from "lit/decorators.js";
+import { ifDefined as x } from "lit/directives/if-defined.js";
+import { live as w } from "lit/directives/live.js";
+import { classMap as C } from "lit/directives/class-map.js";
+import { FormControlMixin as _, RtlMixin as z, wrapNativeEvent as E, requiredProperty as $, validPropertyValues as q, defineCustomElement as B } from "@justeattakeaway/pie-webc-core";
+const A = ["default", "error"], c = {
   checked: !1,
   defaultChecked: !1,
   disabled: !1,
   required: !1,
   status: "default"
-}, P = '*,*:after,*:before{box-sizing:inherit}.c-radio{--radio-dot-bg-color: var(--dt-color-content-interactive-primary);--radio-bg-color: transparent;--radio-bg-color--checked: var(--dt-color-interactive-brand);--radio-border-color: var(--dt-color-border-form);--radio-font-size: p.font-size(--dt-font-body-l-size);--radio-font-weight: var(--dt-font-weight-regular);--radio-text-color: var(--dt-color-content-default);--radio-size: 24px;--radio-dot-size: 8px;--radio-cursor: pointer;--radio-motion-easing: var(--dt-motion-easing-persistent-functional);--radio-border-width: 1px;display:flex;align-items:center;gap:var(--dt-spacing-b);cursor:var(--radio-cursor);font-size:var(--radio-font-size);font-weight:var(--radio-font-weight);color:var(--radio-text-color)}.c-radio .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01))}.c-radio .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01))}.c-radio .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)));--radio-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.c-radio .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)));--radio-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}.c-radio.c-radio--disabled{--radio-cursor: not-allowed}.c-radio.c-radio--status-error{--radio-bg-color--checked: var(--dt-color-support-error);--radio-border-color: var(--dt-color-support-error)}.c-radio.c-radio--status-error .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01))}.c-radio.c-radio--status-error .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01))}.c-radio.c-radio--status-error .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)));--radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)))}.c-radio.c-radio--status-error .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)));--radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)))}.c-radio .c-radio-input{align-self:flex-start;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;inline-size:var(--radio-size);block-size:var(--radio-size);border:var(--radio-border-width) solid var(--radio-border-color);border-radius:50%;margin:0;cursor:var(--radio-cursor);background-color:var(--radio-bg-color);transition:background-color var(--dt-motion-timing-100) var(--radio-motion-easing);flex-shrink:0}.c-radio .c-radio-input:before{--circle-size: calc(var(--radio-border-width) * -1);content:"";display:block;inset:var(--circle-size);border-radius:inherit;background-color:var(--radio-bg-color--checked);position:absolute;transform:scale(0)}@media (prefers-reduced-motion: no-preference){.c-radio .c-radio-input:not(:disabled):before{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}.c-radio .c-radio-input:after{content:"";position:absolute;top:50%;left:50%;width:var(--radio-dot-size);height:var(--radio-dot-size);background-color:var(--radio-dot-bg-color);border-radius:50%;transform:translate(-50%,-50%) scale(0)}.c-radio .c-radio-input:checked:after{transform:translate(-50%,-50%) scale(1)}.c-radio .c-radio-input:checked:before{transform:scale(1)}@media (prefers-reduced-motion: no-preference){.c-radio .c-radio-input:not(:disabled):after{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}@media (prefers-reduced-motion: no-preference){.c-radio .c-radio-input:not(:disabled):checked:after{transition:all var(--dt-motion-timing-150) var(--radio-motion-easing)}}.c-radio .c-radio-input:disabled{--radio-bg-color: var(--dt-color-disabled-01);--radio-border-color: var(--dt-color-border-default)}.c-radio .c-radio-input:checked:disabled{--radio-dot-bg-color: var(--dt-color-content-disabled);--radio-bg-color--checked: var(--dt-color-disabled-01)}:host(:focus-visible){outline:none}:host(:focus-visible) .c-radio .c-radio-input{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}';
-var S = Object.defineProperty, e = (h, r, t, l) => {
-  for (var a = void 0, c = h.length - 1, s; c >= 0; c--)
-    (s = h[c]) && (a = s(r, t, a) || a);
-  return a && S(r, t, a), a;
+}, P = '*,*:after,*:before{box-sizing:inherit}.c-radio{--radio-dot-bg-color: var(--dt-color-content-interactive-primary);--radio-bg-color: transparent;--radio-bg-color--checked: var(--dt-color-interactive-brand);--radio-border-color: var(--dt-color-border-form);--radio-font-size: p.font-size(--dt-font-body-l-size);--radio-font-weight: var(--dt-font-weight-regular);--radio-text-color: var(--dt-color-content-default);--radio-size: 24px;--radio-dot-size: 8px;--radio-cursor: pointer;--radio-motion-easing: var(--dt-motion-easing-persistent-functional);--radio-border-width: 1px;display:flex;align-items:center;gap:var(--dt-spacing-b);cursor:var(--radio-cursor);font-size:var(--radio-font-size);font-weight:var(--radio-font-weight);color:var(--radio-text-color)}.c-radio .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent)}}.c-radio .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent)}}.c-radio .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)));--radio-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(dt-color-interactive-brand))}}.c-radio .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)));--radio-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(dt-color-interactive-brand))}}.c-radio.is-disabled{--radio-cursor: not-allowed}.c-radio.c-radio--status-error{--radio-bg-color--checked: var(--dt-color-support-error);--radio-border-color: var(--dt-color-support-error)}.c-radio.c-radio--status-error .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent)}}.c-radio.c-radio--status-error .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent)}}.c-radio.c-radio--status-error .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)));--radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(dt-color-support-error))}}.c-radio.c-radio--status-error .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)));--radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(dt-color-support-error))}}.c-radio .c-radio-input{align-self:flex-start;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;inline-size:var(--radio-size);block-size:var(--radio-size);border:var(--radio-border-width) solid var(--radio-border-color);border-radius:50%;margin:0;cursor:var(--radio-cursor);background-color:var(--radio-bg-color);transition:background-color var(--dt-motion-timing-100) var(--radio-motion-easing);flex-shrink:0}.c-radio .c-radio-input:before{--circle-size: calc(var(--radio-border-width) * -1);content:"";display:block;inset:var(--circle-size);border-radius:inherit;background-color:var(--radio-bg-color--checked);position:absolute;transform:scale(0)}@media (prefers-reduced-motion: no-preference){.c-radio .c-radio-input:not(:disabled):before{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}.c-radio .c-radio-input:after{content:"";position:absolute;top:50%;left:50%;width:var(--radio-dot-size);height:var(--radio-dot-size);background-color:var(--radio-dot-bg-color);border-radius:50%;transform:translate(-50%,-50%) scale(0)}.c-radio .c-radio-input:checked:after{transform:translate(-50%,-50%) scale(1)}.c-radio .c-radio-input:checked:before{transform:scale(1)}@media (prefers-reduced-motion: no-preference){.c-radio .c-radio-input:not(:disabled):after{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}@media (prefers-reduced-motion: no-preference){.c-radio .c-radio-input:not(:disabled):checked:after{transition:all var(--dt-motion-timing-150) var(--radio-motion-easing)}}.c-radio .c-radio-input:disabled{--radio-bg-color: var(--dt-color-disabled-01);--radio-border-color: var(--dt-color-border-default)}.c-radio .c-radio-input:checked:disabled{--radio-dot-bg-color: var(--dt-color-content-disabled);--radio-bg-color--checked: var(--dt-color-disabled-01)}:host(:focus-visible){outline:none}:host(:focus-visible) .c-radio .c-radio-input{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}';
+var S = Object.defineProperty, e = (p, r, a, l) => {
+  for (var t = void 0, d = p.length - 1, s; d >= 0; d--)
+    (s = p[d]) && (t = s(r, a, t) || t);
+  return t && S(r, a, t), t;
 };
-const v = "pie-radio", p = class p extends z(w(f)) {
+const b = "pie-radio", v = class v extends _(z(g)) {
   constructor() {
-    super(...arguments), this._disabledByParent = !1, this.checked = d.checked, this.defaultChecked = d.defaultChecked, this.disabled = d.disabled, this.required = d.required, this.status = d.status;
+    super(...arguments), this._disabledByParent = !1, this.checked = c.checked, this.defaultChecked = c.defaultChecked, this.disabled = c.disabled, this.required = c.required, this.status = c.status;
   }
   connectedCallback() {
     super.connectedCallback(), this._abortController = new AbortController();
     const { signal: r } = this._abortController;
-    this.setAttribute("role", "radio"), this.addEventListener("pie-radio-group-disabled", (t) => {
-      this._disabledByParent = t.detail.disabled;
+    this.setAttribute("role", "radio"), this.addEventListener("pie-radio-group-disabled", (a) => {
+      this._disabledByParent = a.detail.disabled;
     }, { signal: r });
   }
   disconnectedCallback() {
@@ -41,8 +41,8 @@ const v = "pie-radio", p = class p extends z(w(f)) {
    * @param {Event} event - This should be the change event that was listened for on an input element with `type="radio"`.
    */
   _handleChange(r) {
-    const { checked: t } = r == null ? void 0 : r.currentTarget;
-    this.checked = t;
+    const { checked: a } = r == null ? void 0 : r.currentTarget;
+    this.checked = a;
     const l = E(r);
     this.dispatchEvent(l), this._handleFormAssociation();
   }
@@ -71,40 +71,40 @@ const v = "pie-radio", p = class p extends z(w(f)) {
   render() {
     const {
       checked: r,
-      disabled: t,
+      disabled: a,
       _disabledByParent: l,
-      name: a,
-      required: c,
+      name: t,
+      required: d,
       value: s,
-      status: b
-    } = this, n = t || l, u = {
+      status: h
+    } = this, n = a || l, u = {
       "c-radio": !0,
-      "c-radio--disabled": n,
-      [`c-radio--status-${b}`]: !n
+      "is-disabled": n,
+      [`c-radio--status-${h}`]: !n
     };
     return k`
-        <label class=${x(u)} for="radioId">
+        <label class=${C(u)} for="radioId">
             <input
                 tabindex="-1"
                 class="c-radio-input"
                 type="radio"
                 id="radioId"
                 data-test-id="pie-radio-input"
-                .checked="${_(r)}"
+                .checked="${w(r)}"
                 .value="${s}"
-                name="${C(a)}"
+                name="${x(t)}"
                 ?disabled="${n}"
-                ?required="${c}"
-                aria-invalid=${b === "error" ? "true" : "false"}
+                ?required="${d}"
+                aria-invalid=${h === "error" ? "true" : "false"}
                 @change="${this._handleChange}">
             <slot></slot>
         </label>`;
   }
 };
-p.styles = m(P);
-let o = p;
+v.styles = f(P);
+let o = v;
 e([
-  g()
+  m()
 ], o.prototype, "_disabledByParent");
 e([
   i({ type: Boolean, reflect: !0 })
@@ -123,18 +123,18 @@ e([
 ], o.prototype, "required");
 e([
   i({ type: String }),
-  $(v)
+  $(b)
 ], o.prototype, "value");
 e([
   i({ type: String }),
-  q(v, A, d.status)
+  q(b, A, c.status)
 ], o.prototype, "status");
 e([
   y('input[type="radio"]')
 ], o.prototype, "_radio");
-B(v, o);
+B(b, o);
 export {
   o as PieRadio,
-  d as defaultProps,
+  c as defaultProps,
   A as statusTypes
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-radio",
   "description": "PIE Design System Radio built using Web Components",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -34,7 +34,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.18.0",
-    "@justeattakeaway/pie-css": "0.14.1",
+    "@justeattakeaway/pie-css": "0.15.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {

package/src/index.ts

@@ -143,7 +143,7 @@ export class PieRadio extends FormControlMixin(RtlMixin(LitElement)) implements
 
         const classes = {
             'c-radio': true,
-            'c-radio--disabled': componentDisabled,
+            'is-disabled': componentDisabled,
             [`c-radio--status-${status}`]: !componentDisabled,
         };
 

package/src/radio.scss

@@ -4,16 +4,28 @@
     .c-radio-input {
         &:hover:not(:checked, :disabled) {
             --radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01));
+
+            @supports (background-color: color-mix(in srgb, black, white)) {
+                --radio-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01),  transparent);
+            }
         }
 
         &:active:not(:checked, :disabled) {
             --radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01));
+
+            @supports (background-color: color-mix(in srgb, black, white)) {
+                --radio-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01),  transparent);
+            }
         }
 
         &:hover:checked:not(:disabled) {
             &:before {
                 --radio-bg-color--checked: hsl(var(--#{$bg-color}-h), var(--#{$bg-color}-s), calc(var(--#{$bg-color}-l) - var(--dt-color-hover-01)));
                 --radio-border-color: hsl(var(--#{$bg-color}-h), var(--#{$bg-color}-s), calc(var(--#{$bg-color}-l) - var(--dt-color-hover-01)));
+
+                @supports (background-color: color-mix(in srgb, black, white)) {
+                    --radio-bg-color--checked: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01),  var(#{$bg-color}));
+                }
             }
         }
 
@@ -21,6 +33,10 @@
             &:before {
                 --radio-bg-color--checked: hsl(var(--#{$bg-color}-h), var(--#{$bg-color}-s), calc(var(--#{$bg-color}-l) - var(--dt-color-active-01)));
                 --radio-border-color: hsl(var(--#{$bg-color}-h), var(--#{$bg-color}-s), calc(var(--#{$bg-color}-l) - var(--dt-color-active-01)));
+
+                @supports (background-color: color-mix(in srgb, black, white)) {
+                    --radio-bg-color--checked: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01),  var(#{$bg-color}));
+                }
             }
         }
     }
@@ -52,7 +68,7 @@
 
 
 
-    &.c-radio--disabled {
+    &.is-disabled {
         --radio-cursor: not-allowed;
     }