cetec-design-system 1.1.0 → 1.2.0

package/dist/types/index.d.ts

@@ -439,7 +439,7 @@ declare interface Conditions {
     	"_focusWithin": string
     	/** `&:is(:focus-visible, [data-focus-visible=true])` */
     	"_focusVisible": string
-    	/** `&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])` */
+    	/** `&:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true])` */
     	"_disabled": string
     	/** `&:is(:active, [data-active=true])` */
     	"_active": string
@@ -447,25 +447,25 @@ declare interface Conditions {
     	"_visited": string
     	/** `&:target` */
     	"_target": string
-    	/** `&:is(:read-only, [data-read-only], [aria-readonly=true])` */
+    	/** `&:is(:read-only, [readonly], [data-read-only=true], [aria-readonly=true])` */
     	"_readOnly": string
     	/** `&:read-write` */
     	"_readWrite": string
-    	/** `&:is(:empty, [data-empty])` */
+    	/** `&:is(:empty, [data-empty=true])` */
     	"_empty": string
-    	/** `&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])` */
+    	/** `&:is(:checked, [data-checked=true], [aria-checked=true], [data-state="checked"])` */
     	"_checked": string
     	/** `&:enabled` */
     	"_enabled": string
-    	/** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */
+    	/** `&:is([aria-expanded=true], [data-expanded=true], [data-state="expanded"])` */
     	"_expanded": string
-    	/** `&[data-highlighted]` */
+    	/** `&[data-highlighted=true]` */
     	"_highlighted": string
-    	/** `&[data-complete]` */
+    	/** `&[data-complete=true]` */
     	"_complete": string
-    	/** `&[data-incomplete]` */
+    	/** `&[data-incomplete=true]` */
     	"_incomplete": string
-    	/** `&[data-dragging]` */
+    	/** `&[data-dragging=true]` */
     	"_dragging": string
     	/** `&::before` */
     	"_before": string
@@ -499,105 +499,105 @@ declare interface Conditions {
     	"_lastOfType": string
     	/** `&:only-of-type` */
     	"_onlyOfType": string
-    	/** `.peer:is(:focus, [data-focus]) ~ &` */
+    	/** `.peer:is(:focus, [data-focus=true]) ~ &` */
     	"_peerFocus": string
-    	/** `.peer:is(:hover, [data-hover]) ~ &` */
+    	/** `.peer:is(:hover, [data-hover=true]) ~ &` */
     	"_peerHover": string
-    	/** `.peer:is(:active, [data-active]) ~ &` */
+    	/** `.peer:is(:active, [data-active=true]) ~ &` */
     	"_peerActive": string
     	/** `.peer:focus-within ~ &` */
     	"_peerFocusWithin": string
     	/** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */
     	"_peerFocusVisible": string
-    	/** `.peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &` */
+    	/** `.peer:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) ~ &` */
     	"_peerDisabled": string
-    	/** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */
+    	/** `.peer:is(:checked, [data-checked=true], [aria-checked=true], [data-state="checked"]) ~ &` */
     	"_peerChecked": string
-    	/** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */
+    	/** `.peer:is(:invalid, [data-invalid=true], [aria-invalid=true]) ~ &` */
     	"_peerInvalid": string
-    	/** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */
+    	/** `.peer:is([aria-expanded=true], [data-expanded=true], [data-state="expanded"]) ~ &` */
     	"_peerExpanded": string
     	/** `.peer:placeholder-shown ~ &` */
     	"_peerPlaceholderShown": string
-    	/** `.group:is(:focus, [data-focus]) &` */
+    	/** `.group:is(:focus, [data-focus=true]) &` */
     	"_groupFocus": string
-    	/** `.group:is(:hover, [data-hover]) &` */
+    	/** `.group:is(:hover, [data-hover=true]) &` */
     	"_groupHover": string
-    	/** `.group:is(:active, [data-active]) &` */
+    	/** `.group:is(:active, [data-active=true]) &` */
     	"_groupActive": string
     	/** `.group:focus-within &` */
     	"_groupFocusWithin": string
-    	/** `.group:is(:focus-visible, [data-focus-visible]) &` */
+    	/** `.group:is(:focus-visible, [data-focus-visible=true]) &` */
     	"_groupFocusVisible": string
-    	/** `.group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &` */
+    	/** `.group:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) &` */
     	"_groupDisabled": string
-    	/** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */
+    	/** `.group:is(:checked, [data-checked=true], [aria-checked=true], [data-state="checked"]) &` */
     	"_groupChecked": string
-    	/** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */
+    	/** `.group:is([aria-expanded=true], [data-expanded=true], [data-state="expanded"]) &` */
     	"_groupExpanded": string
-    	/** `.group:is(:invalid, [data-invalid], [aria-invalid=true]) &` */
+    	/** `.group:is(:invalid, [data-invalid=true], [aria-invalid=true]) &` */
     	"_groupInvalid": string
-    	/** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])` */
+    	/** `&:is(:indeterminate, [data-indeterminate=true], [aria-checked=mixed], [data-state="indeterminate"])` */
     	"_indeterminate": string
-    	/** `&:is(:required, [data-required], [aria-required=true])` */
+    	/** `&:is(:required, [data-required=true], [aria-required=true])` */
     	"_required": string
-    	/** `&:is(:valid, [data-valid])` */
+    	/** `&:is(:valid, [data-valid=true])` */
     	"_valid": string
-    	/** `&:is(:invalid, [data-invalid], [aria-invalid=true])` */
+    	/** `&:is(:invalid, [data-invalid=true], [aria-invalid=true])` */
     	"_invalid": string
     	/** `&:autofill` */
     	"_autofill": string
-    	/** `&:is(:in-range, [data-in-range])` */
+    	/** `&:is(:in-range, [data-in-range=true])` */
     	"_inRange": string
-    	/** `&:is(:out-of-range, [data-outside-range])` */
+    	/** `&:is(:out-of-range, [data-outside-range=true])` */
     	"_outOfRange": string
-    	/** `&::placeholder, &[data-placeholder]` */
+    	/** `&::placeholder, &[data-placeholder=true]` */
     	"_placeholder": string
-    	/** `&:is(:placeholder-shown, [data-placeholder-shown])` */
+    	/** `&:is(:placeholder-shown, [data-placeholder-shown=true])` */
     	"_placeholderShown": string
-    	/** `&:is([aria-pressed=true], [data-pressed])` */
+    	/** `&:is([aria-pressed=true], [data-pressed=true])` */
     	"_pressed": string
     	/** `&:is([aria-selected=true], [data-selected=true])` */
     	"_selected": string
-    	/** `&:is([aria-grabbed=true], [data-grabbed])` */
+    	/** `&:is([aria-grabbed=true], [data-grabbed=true])` */
     	"_grabbed": string
-    	/** `&[data-state=under-value]` */
+    	/** `&[data-state="under-value"]` */
     	"_underValue": string
-    	/** `&[data-state=over-value]` */
+    	/** `&[data-state="over-value"]` */
     	"_overValue": string
-    	/** `&[data-state=at-value]` */
+    	/** `&[data-state="at-value"]` */
     	"_atValue": string
     	/** `&:default` */
     	"_default": string
     	/** `&:optional` */
     	"_optional": string
-    	/** `&:is([open], [data-open], [data-state="open"], :popover-open)` */
+    	/** `&:is([open], [data-open=true], [data-state="open"], :popover-open)` */
     	"_open": string
-    	/** `&:is([closed], [data-closed], [data-state="closed"])` */
+    	/** `&:is([closed], [data-closed=true], [data-state="closed"])` */
     	"_closed": string
-    	/** `&:is(:fullscreen, [data-fullscreen])` */
+    	/** `&:is(:fullscreen, [data-fullscreen=true])` */
     	"_fullscreen": string
-    	/** `&:is([data-loading], [aria-busy=true])` */
+    	/** `&:is([data-loading=true], [aria-busy=true])` */
     	"_loading": string
-    	/** `&:is([hidden], [data-hidden])` */
+    	/** `&:is([hidden], [data-hidden=true])` */
     	"_hidden": string
-    	/** `&:is([aria-current=true], [data-current])` */
+    	/** `&:is([aria-current=true], [data-current=true])` */
     	"_current": string
     	/** `&[aria-current=page]` */
     	"_currentPage": string
     	/** `&[aria-current=step]` */
     	"_currentStep": string
-    	/** `&:is([data-today])` */
+    	/** `&:is([data-today=true])` */
     	"_today": string
-    	/** `&[data-unavailable]` */
+    	/** `&[data-unavailable=true]` */
     	"_unavailable": string
-    	/** `&[data-range-start]` */
+    	/** `&[data-range-start=true]` */
     	"_rangeStart": string
-    	/** `&[data-range-end]` */
+    	/** `&[data-range-end=true]` */
     	"_rangeEnd": string
-    	/** `&[data-now]` */
+    	/** `&[data-now=true]` */
     	"_now": string
-    	/** `&[data-topmost]` */
+    	/** `&[data-topmost=true]` */
     	"_topmost": string
     	/** `@media (prefers-reduced-motion: reduce)` */
     	"_motionReduce": string
@@ -609,9 +609,9 @@ declare interface Conditions {
     	"_landscape": string
     	/** `@media (orientation: portrait)` */
     	"_portrait": string
-    	/** `.dark &, &:is([data-color-mode=dark] *), [data-color-mode=dark] &` */
+    	/** `.dark &, &:is([data-color-mode="dark"] *), [data-color-mode="dark"] &` */
     	"_dark": string
-    	/** `.light &, &:is([data-color-mode=light] *), [data-color-mode=light] &` */
+    	/** `.light &, &:is([data-color-mode="light"] *), [data-color-mode="light"] &` */
     	"_light": string
     	/** `@media (prefers-color-scheme: dark)` */
     	"_osDark": string
@@ -647,11 +647,11 @@ declare interface Conditions {
     	"_invertedColors": string
     	/** `&:is(:deleted, [deleted], [data-deleted=true])` */
     	"_deleted": string
-    	/** `&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])` */
+    	/** `&:is([aria-collapsed=true], [data-collapsed=true], [data-state="collapsed"])` */
     	"_collapsed": string
     	/** `&[data-utility=true]` */
     	"_utility": string
-    	/** `&:is([data-error], [data-error=true])` */
+    	/** `&:is([data-error=true])` */
     	"_error": string
     	/** `&:is([data-paused=true])` */
     	"_paused": string
@@ -1952,7 +1952,10 @@ export declare type IconProviderProps = {
 };
 
 declare interface IconVariant {
-
+    /**
+     * @default "24"
+     */
+    size: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "22" | "24" | "28" | "32" | "40" | "48" | "56" | "64" | "72" | "80" | "88" | "96" | "104" | "112" | "120" | "128" | "136" | "144" | "152" | "160" | "168" | "176" | "184" | "192" | "200" | "208" | "216" | "224" | "232" | "240" | "248" | "256" | "264" | "272" | "280"
 }
 
 declare type IconVariantProps = {
@@ -2175,7 +2178,7 @@ declare type MenuRootContextValue = {
     diginDepth: number;
 };
 
-declare type MenuTriggerInteraction = 'click' | 'hover';
+declare type MenuTriggerInteraction = 'click' | 'hover' | 'click-and-hover';
 
 declare interface MenuVariant {
     /**
@@ -19371,6 +19374,8 @@ declare type TextInputProps = Omit<BoxProps, keyof TextInputVariantProps> & Omit
     iconAfter?: IconNamesList;
     error?: boolean;
     disabled?: boolean;
+    valid?: boolean;
+    invalid?: boolean;
     type?: 'text' | 'number' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local' | 'month' | 'week';
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cetec-design-system",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Cetec-ERP Design System",
   "type": "module",
   "main": "./dist/index.js",

package/src/recipes/icon.ts

@@ -1,13 +1,24 @@
 import { defineRecipe } from '@pandacss/dev';
 
-const iconBase = {
-  w: '24',
-  aspectRatio: 'square',
-  fill: 'icon.decorative',
-};
+import type { AllowedIconSizes } from '~/components/Icon';
+import { numericSizes } from '~/styles/primitives';
+
+const sizeVariants = Object.fromEntries(
+  Object.keys(numericSizes).map((key) => [key, { w: key }]),
+) as Record<AllowedIconSizes, { w: AllowedIconSizes }>;
 
 export const iconRecipe = defineRecipe({
   className: 'icon',
   jsx: ['Icon'],
-  base: iconBase,
+  base: {
+    aspectRatio: 'square',
+    fill: 'icon.decorative',
+  },
+  variants: {
+    size: sizeVariants,
+  },
+  defaultVariants: {
+    size: '24',
+  },
+  staticCss: [{ size: ['*'] }],
 });

package/src/recipes/{index.ts → recipes-regular.ts}

@@ -15,19 +15,3 @@ export { tagRecipe } from './tag';
 export { radioInputRecipe } from './radioInput';
 export { checkboxInputRecipe } from './checkboxInput';
 export { iconRecipe } from './icon';
-
-// Slot Recipes
-export { buttonRecipe, iconButtonRecipe } from './button';
-export { checkboxRecipe } from './checkbox';
-export { radioRecipe } from './radio';
-export { tooltipRecipe } from './tooltip';
-export { menuRecipe } from './menu';
-export { textInputRecipe } from './textInput';
-export { formFieldRecipe } from './formField';
-export { avatarRecipe } from './avatar';
-export { badgeRecipe } from './badge';
-export { chipRecipe } from './chip';
-export { modalRecipe } from './modal';
-export { datePickerRecipe } from './datePicker';
-export { timePickerRecipe } from './timePicker';
-export { breadcrumbsRecipe } from './breadcrumbs';

package/src/recipes/recipes-slot.ts

@@ -0,0 +1,14 @@
+export { buttonRecipe, iconButtonRecipe } from './button';
+export { checkboxRecipe } from './checkbox';
+export { radioRecipe } from './radio';
+export { tooltipRecipe } from './tooltip';
+export { menuRecipe } from './menu';
+export { textInputRecipe } from './textInput';
+export { formFieldRecipe } from './formField';
+export { avatarRecipe } from './avatar';
+export { badgeRecipe } from './badge';
+export { chipRecipe } from './chip';
+export { modalRecipe } from './modal';
+export { datePickerRecipe } from './datePicker';
+export { timePickerRecipe } from './timePicker';
+export { breadcrumbsRecipe } from './breadcrumbs';

package/src/recipes/textInput.ts

@@ -25,6 +25,20 @@ const textInputBase = {
         outlineColor: 'border.danger',
       },
     },
+    _invalid: {
+      borderColor: 'border.danger',
+      _focusWithin: {
+        borderColor: 'border.danger',
+        outlineColor: 'border.danger',
+      },
+    },
+    _valid: {
+      borderColor: 'border.success',
+      _focusWithin: {
+        borderColor: 'border.success',
+        outlineColor: 'border.success',
+      },
+    },
     _disabled: {
       opacity: 0.4,
       cursor: 'not-allowed',
@@ -33,6 +47,14 @@ const textInputBase = {
         borderColor: 'border.input',
       },
     },
+    _readOnly: {
+      opacity: 0.4,
+      cursor: 'not-allowed',
+      _focusWithin: {
+        outlineColor: 'transparent',
+        borderColor: 'border.input',
+      },
+    },
     _groupDisabled: {
       opacity: 1, // let FormField handle disabled state opacity
     },

package/src/styles/utilities/conditions.ts

@@ -4,25 +4,26 @@ export const conditions = {
   focusWithin: '&:focus-within',
   focusVisible: '&:is(:focus-visible, [data-focus-visible=true])',
   disabled:
-    '&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])',
+    '&:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true])',
   deleted: '&:is(:deleted, [deleted], [data-deleted=true])',
   active: '&:is(:active, [data-active=true])',
   visited: '&:visited',
   target: '&:target',
-  readOnly: '&:is(:read-only, [data-read-only], [aria-readonly=true])',
+  readOnly:
+    '&:is(:read-only, [readonly], [data-read-only=true], [aria-readonly=true])',
   readWrite: '&:read-write',
-  empty: '&:is(:empty, [data-empty])',
+  empty: '&:is(:empty, [data-empty=true])',
   checked:
-    '&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])',
+    '&:is(:checked, [data-checked=true], [aria-checked=true], [data-state="checked"])',
   enabled: '&:enabled',
   expanded:
-    '&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])',
+    '&:is([aria-expanded=true], [data-expanded=true], [data-state="expanded"])',
   collapsed:
-    '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',
-  highlighted: '&[data-highlighted]',
-  complete: '&[data-complete]',
-  incomplete: '&[data-incomplete]',
-  dragging: '&[data-dragging]',
+    '&:is([aria-collapsed=true], [data-collapsed=true], [data-state="collapsed"])',
+  highlighted: '&[data-highlighted=true]',
+  complete: '&[data-complete=true]',
+  incomplete: '&[data-incomplete=true]',
+  dragging: '&[data-dragging=true]',
   utility: '&[data-utility=true]',
 
   before: '&::before',
@@ -44,68 +45,70 @@ export const conditions = {
   lastOfType: '&:last-of-type',
   onlyOfType: '&:only-of-type',
 
-  peerFocus: '.peer:is(:focus, [data-focus]) ~ &',
-  peerHover: '.peer:is(:hover, [data-hover]) ~ &',
-  peerActive: '.peer:is(:active, [data-active]) ~ &',
+  peerFocus: '.peer:is(:focus, [data-focus=true]) ~ &',
+  peerHover: '.peer:is(:hover, [data-hover=true]) ~ &',
+  peerActive: '.peer:is(:active, [data-active=true]) ~ &',
   peerFocusWithin: '.peer:focus-within ~ &',
   peerFocusVisible: '.peer:is(:focus-visible, [data-focus-visible]) ~ &',
   peerDisabled:
-    '.peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &',
+    '.peer:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) ~ &',
   peerChecked:
-    '.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &',
-  peerInvalid: '.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &',
+    '.peer:is(:checked, [data-checked=true], [aria-checked=true], [data-state="checked"]) ~ &',
+  peerInvalid:
+    '.peer:is(:invalid, [data-invalid=true], [aria-invalid=true]) ~ &',
   peerExpanded:
-    '.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &',
+    '.peer:is([aria-expanded=true], [data-expanded=true], [data-state="expanded"]) ~ &',
   peerPlaceholderShown: '.peer:placeholder-shown ~ &',
 
-  groupFocus: '.group:is(:focus, [data-focus]) &',
-  groupHover: '.group:is(:hover, [data-hover]) &',
-  groupActive: '.group:is(:active, [data-active]) &',
+  groupFocus: '.group:is(:focus, [data-focus=true]) &',
+  groupHover: '.group:is(:hover, [data-hover=true]) &',
+  groupActive: '.group:is(:active, [data-active=true]) &',
   groupFocusWithin: '.group:focus-within &',
-  groupFocusVisible: '.group:is(:focus-visible, [data-focus-visible]) &',
+  groupFocusVisible: '.group:is(:focus-visible, [data-focus-visible=true]) &',
   groupDisabled:
-    '.group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &',
+    '.group:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) &',
   groupChecked:
-    '.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &',
+    '.group:is(:checked, [data-checked=true], [aria-checked=true], [data-state="checked"]) &',
   groupExpanded:
-    '.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &',
-  groupInvalid: '.group:is(:invalid, [data-invalid], [aria-invalid=true]) &',
+    '.group:is([aria-expanded=true], [data-expanded=true], [data-state="expanded"]) &',
+  groupInvalid:
+    '.group:is(:invalid, [data-invalid=true], [aria-invalid=true]) &',
 
   indeterminate:
-    '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])',
-  required: '&:is(:required, [data-required], [aria-required=true])',
-  valid: '&:is(:valid, [data-valid])',
-  invalid: '&:is(:invalid, [data-invalid], [aria-invalid=true])',
-  error: '&:is([data-error], [data-error=true])',
+    '&:is(:indeterminate, [data-indeterminate=true], [aria-checked=mixed], [data-state="indeterminate"])',
+  required: '&:is(:required, [data-required=true], [aria-required=true])',
+  valid: '&:is(:valid, [data-valid=true])',
+  invalid: '&:is(:invalid, [data-invalid=true], [aria-invalid=true])',
+  error: '&:is([data-error=true])',
   autofill: '&:autofill',
-  inRange: '&:is(:in-range, [data-in-range])',
-  outOfRange: '&:is(:out-of-range, [data-outside-range])',
-  placeholder: '&::placeholder, &[data-placeholder]',
-  placeholderShown: '&:is(:placeholder-shown, [data-placeholder-shown])',
-  pressed: '&:is([aria-pressed=true], [data-pressed])',
+  inRange: '&:is(:in-range, [data-in-range=true])',
+  outOfRange: '&:is(:out-of-range, [data-outside-range=true])',
+  placeholder: '&::placeholder, &[data-placeholder=true]',
+  placeholderShown: '&:is(:placeholder-shown, [data-placeholder-shown=true])',
+  pressed: '&:is([aria-pressed=true], [data-pressed=true])',
   selected: '&:is([aria-selected=true], [data-selected=true])',
-  grabbed: '&:is([aria-grabbed=true], [data-grabbed])',
-  underValue: '&[data-state=under-value]',
-  overValue: '&[data-state=over-value]',
-  atValue: '&[data-state=at-value]',
+  grabbed: '&:is([aria-grabbed=true], [data-grabbed=true])',
+  underValue: '&[data-state="under-value"]',
+  overValue: '&[data-state="over-value"]',
+  atValue: '&[data-state="at-value"]',
 
   default: '&:default',
   optional: '&:optional',
-  open: '&:is([open], [data-open], [data-state="open"], :popover-open)',
-  closed: '&:is([closed], [data-closed], [data-state="closed"])',
-  fullscreen: '&:is(:fullscreen, [data-fullscreen])',
-  loading: '&:is([data-loading], [aria-busy=true])',
-  hidden: '&:is([hidden], [data-hidden])',
+  open: '&:is([open], [data-open=true], [data-state="open"], :popover-open)',
+  closed: '&:is([closed], [data-closed=true], [data-state="closed"])',
+  fullscreen: '&:is(:fullscreen, [data-fullscreen=true])',
+  loading: '&:is([data-loading=true], [aria-busy=true])',
+  hidden: '&:is([hidden], [data-hidden=true])',
 
-  current: '&:is([aria-current=true], [data-current])',
+  current: '&:is([aria-current=true], [data-current=true])',
   currentPage: '&[aria-current=page]',
   currentStep: '&[aria-current=step]',
-  today: '&:is([data-today])',
-  unavailable: '&[data-unavailable]',
-  rangeStart: '&[data-range-start]',
-  rangeEnd: '&[data-range-end]',
-  now: '&[data-now]',
-  topmost: '&[data-topmost]',
+  today: '&:is([data-today=true])',
+  unavailable: '&[data-unavailable=true]',
+  rangeStart: '&[data-range-start=true]',
+  rangeEnd: '&[data-range-end=true]',
+  now: '&[data-now=true]',
+  topmost: '&[data-topmost=true]',
 
   motionReduce: '@media (prefers-reduced-motion: reduce)',
   motionSafe: '@media (prefers-reduced-motion: no-preference)',
@@ -114,8 +117,9 @@ export const conditions = {
   landscape: '@media (orientation: landscape)',
   portrait: '@media (orientation: portrait)',
 
-  dark: '.dark &, &:is([data-color-mode=dark] *), [data-color-mode=dark] &',
-  light: '.light &, &:is([data-color-mode=light] *), [data-color-mode=light] &',
+  dark: '.dark &, &:is([data-color-mode="dark"] *), [data-color-mode="dark"] &',
+  light:
+    '.light &, &:is([data-color-mode="light"] *), [data-color-mode="light"] &',
   osDark: '@media (prefers-color-scheme: dark)',
   osLight: '@media (prefers-color-scheme: light)',