@justeattakeaway/pie-switch 0.29.8 → 0.29.10

package/README.md

@@ -17,16 +17,14 @@
 To install `pie-switch` in your application, run the following on your command line:
 
 ```bash
-# npm
-$ npm i @justeattakeaway/pie-switch
+npm i @justeattakeaway/pie-switch
 
-# yarn
-$ yarn add @justeattakeaway/pie-switch
+yarn add @justeattakeaway/pie-switch
 ```
 
 ## Documentation
 
-Visit  [Modal | PIE Design System](https://pie.design/components/modal/overview) to view more information on this component.
+Visit  [Switch | PIE Design System](https://pie.design/components/switch) to view more information on this component.
 
 ## Questions
 

package/custom-elements.json

@@ -35,7 +35,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    labelPlacement: 'leading',\n    checked: false,\n    required: false,\n    value: 'on',\n    disabled: false,\n}"
+          "default": "{\n    checked: false,\n    required: false,\n    disabled: false,\n    value: 'on',\n    labelPlacement: 'leading',\n}"
         }
       ],
       "exports": [

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
@@ -13,7 +13,7 @@ export declare type AriaProps = {
     describedBy?: string;
 };
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<SwitchProps, 'labelPlacement' | 'checked' | 'required' | 'value' | 'disabled'>;
+export declare type DefaultProps = ComponentDefaultProps<SwitchProps, keyof Omit<SwitchProps, 'aria' | 'label' | 'name'>>;
 
 export declare const defaultProps: DefaultProps;
 

package/dist/index.js

@@ -4,11 +4,11 @@ import { FormControlMixin as Ie, RtlMixin as Se, wrapNativeEvent as Te, validPro
 import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
 const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[disabled]{cursor:not-allowed}.c-switch{--switch-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--switch-bg-color)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch:hover{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)))}.c-switch:focus,.c-switch:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch:active{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)))}.c-switch[checked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[checked]:hover{background-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-switch[checked]:focus,.c-switch[checked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[checked]:active{background-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)))}[disabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;left:50%;transform:translate(-50%) translateY(-50%);bottom:0}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper[isRTL] .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
 `, Pe = ["leading", "trailing"], ze = "change", x = {
-  labelPlacement: "leading",
   checked: !1,
   required: !1,
+  disabled: !1,
   value: "on",
-  disabled: !1
+  labelPlacement: "leading"
 };
 (function() {
   (function(g) {

package/dist/react.d.ts

@@ -1,4 +1,4 @@
-import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
@@ -14,7 +14,7 @@ export declare type AriaProps = {
     describedBy?: string;
 };
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<SwitchProps, 'labelPlacement' | 'checked' | 'required' | 'value' | 'disabled'>;
+export declare type DefaultProps = ComponentDefaultProps<SwitchProps, keyof Omit<SwitchProps, 'aria' | 'label' | 'name'>>;
 
 export declare const defaultProps: DefaultProps;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "0.29.8",
+  "version": "0.29.10",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -40,8 +40,8 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "0.24.1",
-    "@justeattakeaway/pie-webc-core": "0.23.0",
+    "@justeattakeaway/pie-icons-webc": "0.24.2",
+    "@justeattakeaway/pie-webc-core": "0.24.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.1",
     "element-internals-polyfill": "1.3.11"
   },

package/src/defs.ts

@@ -1,4 +1,4 @@
-import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
 export const labelPlacements = ['leading', 'trailing'] as const;
 
@@ -51,11 +51,12 @@ export interface SwitchProps {
  */
 export const ON_SWITCH_CHANGED_EVENT = 'change';
 
-export type DefaultProps = ComponentDefaultPropsGeneric<SwitchProps, 'labelPlacement' | 'checked' | 'required' | 'value' | 'disabled'>;
+export type DefaultProps = ComponentDefaultProps<SwitchProps, keyof Omit<SwitchProps, 'aria' | 'label' | 'name'>>;
+
 export const defaultProps: DefaultProps = {
-    labelPlacement: 'leading',
     checked: false,
     required: false,
-    value: 'on',
     disabled: false,
+    value: 'on',
+    labelPlacement: 'leading',
 };