@warp-ds/css - npm Package Compare versions

Comparing version 1.8.4-next.2 to 1.8.4-next.3

component-classes/index.d.ts

@@ -412,36 +412,35 @@ export namespace pageIndicator {
     export { wrapper_10 as wrapper };
-    export let deadToggleWrapper: string;
+    export let wrapperRadioButtons: string;
+    export let wrapperRadioButtonsJustified: string;
+    export let radioButtonsGroup: string;
+    export let radioButtonsGroupJustified: string;
     export let input: string;
-    export let deadToggleInput: string;
-    export let inputDisabled: string;
-    export let focusable: string;
-    export let focusableWithin: string;
+    let a11y_5: string;
+    export { a11y_5 as a11y };
     let label_5: string;
     export { label_5 as label };
-    export let deadToggleLabel: string;
-    export let noContent: string;
-    export let indeterminate: string;
-    let labelDisabled_1: string;
-    export { labelDisabled_1 as labelDisabled };
+    export let labelBefore: string;
     export let checkbox: string;
-    export let checkboxChecked: string;
     export let checkboxInvalid: string;
     export let checkboxDisabled: string;
-    export let labelCheckboxBorder: string;
+    export let indeterminate: string;
+    export let indeterminateInvalid: string;
+    export let indeterminateDisabled: string;
     export let radio: string;
-    export let radioChecked: string;
     export let radioInvalid: string;
     export let radioDisabled: string;
-    export let labelRadioBorder: string;
-    export let radioButtons: string;
-    export let radioButtonsGroup: string;
     export let radioButtonsLabel: string;
-    export let radioButtonsJustified: string;
-    export let radioButtonsGroupJustified: string;
-    export let radioButtonsLabelSmall: string;
-    let icon_3: string;
-    export { icon_3 as icon };
-    let a11y_5: string;
-    export { a11y_5 as a11y };
+    export let radioButtonsRegular: string;
+    export let radioButtonsSmall: string;
 }
+export namespace deadToggle {
+    let wrapper_11: string;
+    export { wrapper_11 as wrapper };
+    let input_1: string;
+    export { input_1 as input };
+    export let inputVue: string;
+    export let labelRadio: string;
+    export let labelCheckbox: string;
+    export let labelVue: string;
+}
 export namespace clickable {
@@ -455,4 +454,4 @@ export let toggle: string;
 export namespace combobox {
-    let wrapper_11: string;
-    export { wrapper_11 as wrapper };
+    let wrapper_12: string;
+    export { wrapper_12 as wrapper };
     export let combobox: string;
@@ -501,2 +500,6 @@ export let textMatch: string;
     export let pillClose: string;
+    let toggle_1: string;
+    export { toggle_1 as toggle };
+    export let radioButton: string;
+    export let toggleIndeterminate: string;
     export let removedAlertTokens: string;
@@ -534,4 +537,4 @@ export let removedBadgeTokens: string;
     export let currentPage: string;
-    let icon_4: string;
-    export { icon_4 as icon };
+    let icon_3: string;
+    export { icon_3 as icon };
     export let containerNav: string;
@@ -538,0 +541,0 @@ let a11y_7: string;

component-classes/index.js

@@ -446,35 +446,42 @@ export const pageIndicator = {
 export const toggle = {
-  field: 'relative text-m',
-  wrapper: 'relative py-1',
-  deadToggleWrapper: 'h-20 w-20 pointer-events-none',
+  // wrapper classes
+  field: 'relative text-m', // true
+  wrapper: 'relative py-1', // true
+  wrapperRadioButtons: 'inline-flex font-bold rounded-8 focus-within:focusable', // isRadioButton && !isEqualWidth
+  wrapperRadioButtonsJustified: 'flex font-bold rounded-8 focus-within:focusable', // isRadioButton && isEqualWidth,
+
+  // group classes
+  radioButtonsGroup: 'group', // isRadioButton
+  radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto', // isRadioButton && isEqualWidth
+
+  // input classes
   input: 'peer',
-  deadToggleInput: 'hidden',
-  inputDisabled: 'pointer-events-none',
-  focusable: 'peer-focus:focusable',
-  focusableWithin: 'focus-within:focusable',
-  label: 'cursor-pointer text-m s-text py-2 pl-28 select-none relative block before:block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2',
-  deadToggleLabel: '-mt-2',
-  noContent: `before:content-[""]`,
-  indeterminate: `before:flex! before:items-center before:justify-center before:s-icon-inverted before:text-center before:font-bold before:content-["-"] peer-indeterminate:before:s-border-primary peer-indeterminate:before:s-bg-primary peer-indeterminate:hover:before:s-border-primary peer-indeterminate:hover:before:s-bg-primary-hover`,
-  labelDisabled: 'pointer-events-none',
-  checkbox: 'before:s-bg before:rounded-2 hover:before:s-border-primary hover:before:s-bg-subtle',
-  checkboxChecked: 'peer-checked:before:s-border-primary peer-checked:before:s-bg-primary peer-checked:peer-hover:before:s-border-primary-hover peer-checked:peer-hover:before:s-bg-primary-hover',
-  checkboxInvalid: 'before:s-bg hover:before:s-bg-negative-subtle-hover peer-checked:before:s-border-negative hover:before:s-border-negative-hover peer-checked:before:s-bg-negative peer-checked:peer-hover:before:s-bg-negative-hover peer-checked:peer-hover:before:s-border-negative-hover',
-  checkboxDisabled: 'peer-disabled:before:s-bg-disabled-subtle before:s-border-disabled peer-checked:before:s-border-disabled peer-checked:before:s-bg-disabled',
-  labelCheckboxBorder: 's-border',
-  radio: 'before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:peer-hover:before:s-border-selected-hover peer-hover:before:s-border-primary peer-hover:before:s-bg-primary-subtle',
-  radioChecked: 'peer-checked:before:s-border-selected',
-  radioInvalid: 'before:s-bg peer-hover:before:s-bg-negative-subtle before:s-border-negative peer-hover:before:s-border-negative-hover peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-border-negative-hover ',
-  radioDisabled: 'peer-disabled:before:s-bg-disabled-subtle before:s-border-disabled peer-checked:before:s-border-disabled',
-  labelRadioBorder: 's-border',
-  radioButtons: 'inline-flex relative font-bold rounded-8',
-  radioButtonsGroup: 'group',
-  radioButtonsLabel: 'peer-hover:peer-not-checked:s-bg-hover peer-checked:s-text-inverted peer-checked:s-bg-primary peer-checked:s-border-primary block relative text-s font-bold cursor-pointer s-text-link text-center s-bg border-2 s-border py-8 pl-12 pr-14 group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2',
-  radioButtonsJustified: 'flex!',
-  radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto',
-  radioButtonsLabelSmall: 'text-xs py-[5px]! px-[8px]!',
-  icon: `peer-checked:before:bg-center before:bg-[url(var(--w-form-check-mark))]`,
   a11y: 'sr-only',
+
+  // label classes
+  label: 'peer-focus:focusable cursor-pointer text-m s-text s-border py-2 pl-28 select-none relative block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2', // !isRadioButton
+  labelBefore: 'before:content-[""] before:block', // !isRadioButton && !isIndeterminate
+  checkbox: 'before:s-bg before:rounded-2 hover:before:s-border-primary hover:before:s-bg-subtle peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-form-check-mark))] peer-checked:before:s-border-primary peer-checked:before:s-bg-primary peer-checked:peer-hover:before:s-border-primary-hover peer-checked:peer-hover:before:s-bg-primary-hover', // isCheckbox && !isIndeterminate && !isInvalid && !isDisabled
+  checkboxInvalid: 'before:s-bg before:s-border-negative before:rounded-2 hover:before:s-bg-negative-subtle-hover hover:before:s-border-negative-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-form-check-mark))] peer-checked:before:s-bg-negative peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-bg-negative-hover peer-checked:peer-hover:before:s-border-negative-hover', // isCheckbox && !isIndeterminate && isInvalid && !isDisabled
+  checkboxDisabled: 'before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-2 peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-form-check-mark))] peer-checked:before:s-border-disabled peer-checked:before:s-bg-disabled', // isCheckbox && !isIndeterminate && !isInvalid && isDisabled
+  indeterminate: 'before:content-["–"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-primary peer-indeterminate:before:s-bg-primary peer-indeterminate:hover:before:s-border-primary-hover peer-indeterminate:hover:before:s-bg-primary-hover', // isCheckbox && isIndeterminate && !isInvalid && !isDisabled
+  indeterminateInvalid: 'before:content-["–"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-negative peer-indeterminate:before:s-bg-negative peer-indeterminate:hover:before:s-border-negative-hover peer-indeterminate:hover:before:s-bg-negative-hover', // isCheckbox && isIndeterminate && isInvalid && !isDisabled
+  indeterminateDisabled: 'before:content-["–"] before:rounded-2 before:leading-xs before:text-center before:font-bold pointer-events-none before:s-icon-inverted peer-indeterminate:before:s-border-disabled peer-indeterminate:before:s-bg-disabled', // isCheckbox && isIndeterminate && !isInvalid && isDisabled
+  radio: 'before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:before:s-border-selected peer-checked:peer-hover:before:s-border-selected-hover peer-hover:before:s-border-primary peer-hover:before:s-bg-primary-subtle', // isRadio && !isDisabled && !isInvalid
+  radioInvalid: 'before:s-bg before:s-border-negative before:rounded-full peer-checked:before:border-[6] peer-hover:before:s-bg-negative-subtle peer-hover:before:s-border-negative-hover peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-border-negative-hover', // isRadio && isInvalid && !isDisabled
+  radioDisabled: 'before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-full peer-checked:before:border-[6]', // isRadio && !isInvalid && isDisabled
+  radioButtonsLabel: 'peer-hover:peer-not-checked:s-bg-hover peer-checked:s-text-inverted peer-checked:s-bg-primary peer-checked:s-border-primary block relative font-bold cursor-pointer s-text-link text-center s-bg border-2 s-border group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2', // isRadioButtons
+  radioButtonsRegular: 'text-s py-8 pl-12 pr-14', // isRadioButtons && !isSmall
+  radioButtonsSmall: 'text-xs py-[5px] px-[8px]', // isRadioButtons && isSmall
 };
 
+export const deadToggle = {
+  wrapper: `${toggle.wrapper} h-20 w-20 pointer-events-none`,
+  input: `${toggle.input} hidden`,
+  inputVue: 'hidden',
+  labelRadio: `${toggle.label} ${toggle.labelBefore} ${toggle.radio}`,
+  labelCheckbox: `${toggle.label} ${toggle.labelBefore} ${toggle.checkbox}`,
+  labelVue: '-mt-2',
+};
+
 export const clickable = {
@@ -526,2 +533,5 @@ toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',
   pillClose: 'pt-4 pb-6 text-m!', //replaced by py-8
+  toggle: 'peer-disabled:before:s-bg-disabled-subtle',
+  radioButton: 'flex! py-[5px]! px-[8px]!',
+  toggleIndeterminate: 'before:content-["-"] before:flex! before:items-center before:justify-center peer-indeterminate:hover:before:s-border-primary',
   removedAlertTokens: 'i-border-$color-alert-negative-subtle-border i-bg-$color-alert-negative-background i-text-$color-alert-negative-text i-border-l-$color-alert-negative-border i-text-$color-alert-negative-icon i-border-$color-alert-positive-subtle-border i-bg-$color-alert-positive-background i-text-$color-alert-positive-text i-border-l-$color-alert-positive-border i-text-$color-alert-positive-icon i-border-$color-alert-warning-subtle-border i-bg-$color-alert-warning-background i-text-$color-alert-warning-text i-border-l-$color-alert-warning-border i-text-$color-alert-warning-icon i-border-$color-alert-info-subtle-border i-bg-$color-alert-info-background i-text-$color-alert-info-text i-border-l-$color-alert-info-border i-text-$color-alert-info-icon',
@@ -528,0 +538,0 @@ removedBadgeTokens: 'i-bg-$color-badge-price-background i-bg-$color-badge-negative-background i-bg-$color-badge-warning-background i-bg-$color-badge-positive-background i-bg-$color-badge-info-background i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text i-text-$color-badge-negative-text i-text-$color-badge-warning-text i-text-$color-badge-positive-text i-text-$color-badge-info-text i-text-$color-badge-disabled-text i-bg-$color-badge-disabled-background i-text-$color-badge-price-text',

package.json

 {
   "name": "@warp-ds/css",
   "repository": "[e-mail]:warp-ds/css.git",
-  "version": "1.8.4-next.2",
+  "version": "1.8.4-next.3",
   "scripts": {
@@ -6,0 +6,0 @@ "build": "pnpm build:tokens && pnpm build:resets && pnpm build:cc",

No alert changes

Improved metrics

Total package byte prevSize

351517

increased by1.33%

Lines of code

1387

increased by1.46%

No dependency changes