daisyui 3.1.0 → 3.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/full.css +38 -35
  2. package/dist/styled.css +85 -89
  3. package/dist/styled.js +1 -1
  4. package/dist/styled.rtl.js +1 -1
  5. package/dist/unstyled.css +0 -1
  6. package/dist/unstyled.js +1 -1
  7. package/dist/unstyled.rtl.js +1 -1
  8. package/dist/utilities-styled.js +1 -1
  9. package/package.json +1 -1
package/dist/full.css CHANGED
@@ -1645,7 +1645,7 @@ html {
1645
1645
  .link-error:hover {
1646
1646
  --tw-text-opacity: 1;
1647
1647
  color: hsl(var(--er) / var(--tw-text-opacity))}
1648
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active), .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
1648
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active), :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
1649
1649
  --tw-bg-opacity: 1;
1650
1650
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
1651
1651
  --tw-text-opacity: 1;
@@ -2241,7 +2241,7 @@ html {
2241
2241
  --tw-scale-x: 1;
2242
2242
  --tw-scale-y: 1;
2243
2243
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
2244
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
2244
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
2245
2245
  cursor: pointer;
2246
2246
  background-color: hsl(var(--bc) / 0.1);
2247
2247
  --tw-text-opacity: 1;
@@ -2518,9 +2518,7 @@ html {
2518
2518
  padding: 0.5rem}
2519
2519
  .menu :where(li ul) {
2520
2520
  position: relative;
2521
- white-space: nowrap;
2522
- margin-left: 1rem;
2523
- padding-left: 0.5rem}
2521
+ white-space: nowrap}
2524
2522
  .menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
2525
2523
  .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
2526
2524
  display: grid;
@@ -2529,20 +2527,10 @@ html {
2529
2527
  align-items: center;
2530
2528
  gap: 0.5rem;
2531
2529
  grid-auto-columns: max-content auto max-content;
2532
- user-select: none;
2533
- padding-left: 1rem;
2534
- padding-right: 1rem;
2535
- padding-top: 0.5rem;
2536
- padding-bottom: 0.5rem;
2537
- text-align: left;
2538
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2539
- transition-duration: 200ms;
2540
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2541
- border-radius: var(--rounded-btn, 0.5rem)}
2530
+ user-select: none}
2542
2531
  .menu li.disabled {
2543
2532
  cursor: not-allowed;
2544
- user-select: none;
2545
- color: hsl(var(--bc) / 0.3)}
2533
+ user-select: none}
2546
2534
  .menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
2547
2535
  display: none}
2548
2536
  :where(.menu li) {
@@ -2753,7 +2741,6 @@ html {
2753
2741
  --tw-bg-opacity: 1}
2754
2742
  .select {
2755
2743
  display: inline-flex;
2756
- flex-shrink: 0;
2757
2744
  cursor: pointer;
2758
2745
  user-select: none;
2759
2746
  appearance: none;
@@ -4118,11 +4105,14 @@ details.collapse summary::-webkit-details-marker {
4118
4105
  .mask-triangle-4 {
4119
4106
  -webkit-mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.631 87.107.446.505l74.239 43.462 74.422 43.14-74.422 43.14L.446 173.71z' fill-rule='evenodd'/%3e%3c/svg%3e");
4120
4107
  mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.631 87.107.446.505l74.239 43.462 74.422 43.14-74.422 43.14L.446 173.71z' fill-rule='evenodd'/%3e%3c/svg%3e")}
4121
- .menu :where(li:empty) {
4108
+ :where(.menu li:empty) {
4122
4109
  background-color: hsl(var(--bc) / 0.1);
4123
4110
  margin: 0.5rem 1rem;
4124
4111
  height: 1px}
4125
- .menu :where(li ul):before {
4112
+ :where(.menu li ul) {
4113
+ margin-left: 1rem;
4114
+ padding-left: 0.5rem}
4115
+ :where(.menu li ul):before {
4126
4116
  position: absolute;
4127
4117
  left: 0px;
4128
4118
  top: 0.75rem;
@@ -4130,28 +4120,41 @@ details.collapse summary::-webkit-details-marker {
4130
4120
  width: 1px;
4131
4121
  background-color: hsl(var(--bc) / 0.1);
4132
4122
  content: ""}
4133
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active).focus,
4134
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):focus,
4135
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active).focus,
4136
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):focus {
4123
+ :where(.menu li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
4124
+ :where(.menu li:not(.menu-title) > details > summary:not(.menu-title)) {
4125
+ padding-left: 1rem;
4126
+ padding-right: 1rem;
4127
+ padding-top: 0.5rem;
4128
+ padding-bottom: 0.5rem;
4129
+ text-align: left;
4130
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
4131
+ transition-duration: 200ms;
4132
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
4133
+ border-radius: var(--rounded-btn, 0.5rem)}
4134
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active).focus,
4135
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):focus,
4136
+ :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active).focus,
4137
+ :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):focus {
4137
4138
  cursor: pointer;
4138
4139
  background-color: hsl(var(--bc) / 0.1);
4139
4140
  --tw-text-opacity: 1;
4140
4141
  color: hsl(var(--bc) / var(--tw-text-opacity));
4141
4142
  outline: 2px solid transparent;
4142
4143
  outline-offset: 2px}
4143
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):active,
4144
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active),
4145
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):active,
4146
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
4144
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):active,
4145
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active),
4146
+ :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):active,
4147
+ :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
4147
4148
  --tw-bg-opacity: 1;
4148
4149
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
4149
4150
  --tw-text-opacity: 1;
4150
4151
  color: hsl(var(--nc) / var(--tw-text-opacity))}
4151
- .menu :where(li > details > summary)::-webkit-details-marker {
4152
+ :where(.menu li.disabled) {
4153
+ color: hsl(var(--bc) / 0.3)}
4154
+ :where(.menu li > details > summary)::-webkit-details-marker {
4152
4155
  display: none}
4153
- .menu :where(li > details > summary):after,
4154
- .menu :where(li > .menu-dropdown-toggle):after {
4156
+ :where(.menu li > details > summary):after,
4157
+ :where(.menu li > .menu-dropdown-toggle):after {
4155
4158
  justify-self: end;
4156
4159
  display: block;
4157
4160
  margin-top: -0.5rem;
@@ -4165,11 +4168,11 @@ details.collapse summary::-webkit-details-marker {
4165
4168
  transform-origin: 75% 75%;
4166
4169
  box-shadow: 2px 2px;
4167
4170
  pointer-events: none}
4168
- .menu :where(li > details[open] > summary):after,
4169
- .menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
4171
+ :where(.menu li > details[open] > summary):after,
4172
+ :where(.menu li > .menu-dropdown-toggle.menu-dropdown-show):after {
4170
4173
  transform: rotate(225deg);
4171
4174
  margin-top: 0}
4172
- .menu .menu-title {
4175
+ .menu-title {
4173
4176
  padding-left: 1rem;
4174
4177
  padding-right: 1rem;
4175
4178
  padding-top: 0.5rem;
@@ -22592,7 +22595,7 @@ details.collapse summary::-webkit-details-marker {
22592
22595
  bottom: auto}
22593
22596
  .artboard-demo {
22594
22597
  --tw-bg-opacity: 1;
22595
- background-color: hsl(var(--b1) / var(--tw-bg-opacity));
22598
+ background-color: hsl(var(--b3) / var(--tw-bg-opacity));
22596
22599
  --tw-text-opacity: 1;
22597
22600
  color: hsl(var(--bc) / var(--tw-text-opacity));
22598
22601
  border-radius: var(--rounded-box, 1rem);
package/dist/styled.css CHANGED
@@ -988,7 +988,6 @@
988
988
  }
989
989
  .select {
990
990
  display: inline-flex;
991
- flex-shrink: 0;
992
991
  cursor: pointer;
993
992
  user-select: none;
994
993
  appearance: none;
@@ -3122,115 +3121,112 @@ details.collapse summary {
3122
3121
  mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.631 87.107.446.505l74.239 43.462 74.422 43.14-74.422 43.14L.446 173.71z' fill-rule='evenodd'/%3e%3c/svg%3e");
3123
3122
  }
3124
3123
  .menu {
3125
- padding: 0.5rem;
3124
+ padding: 0.5rem;
3126
3125
  }
3127
- .menu :where(li:empty) {
3128
- background-color: hsl(var(--bc) / 0.1);
3129
- margin: 0.5rem 1rem;
3130
- height: 1px;
3126
+ :where(.menu li:empty) {
3127
+ background-color: hsl(var(--bc) / 0.1);
3128
+ margin: 0.5rem 1rem;
3129
+ height: 1px;
3131
3130
  }
3132
- .menu :where(li ul) {
3133
- margin-left: 1rem;
3134
- padding-left: 0.5rem;
3131
+ :where(.menu li ul) {
3132
+ margin-left: 1rem;
3133
+ padding-left: 0.5rem;
3135
3134
  }
3136
- .menu :where(li ul):before {
3137
- position: absolute;
3138
- left: 0px;
3139
- top: 0.75rem;
3140
- bottom: 0.75rem;
3141
- width: 1px;
3142
- background-color: hsl(var(--bc) / 0.1);
3143
- content: "";
3135
+ :where(.menu li ul):before {
3136
+ position: absolute;
3137
+ left: 0px;
3138
+ top: 0.75rem;
3139
+ bottom: 0.75rem;
3140
+ width: 1px;
3141
+ background-color: hsl(var(--bc) / 0.1);
3142
+ content: "";
3144
3143
  }
3145
- /* :where(& > li:not(.menu-title) > details > ul) {
3146
- @apply bg-base-100 shadow-xl rounded-box;
3147
- } */
3148
- .menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
3149
- .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
3150
- padding-left: 1rem;
3151
- padding-right: 1rem;
3152
- padding-top: 0.5rem;
3153
- padding-bottom: 0.5rem;
3154
- text-align: left;
3155
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
3156
- transition-duration: 200ms;
3157
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3158
- border-radius: var(--rounded-btn, 0.5rem);
3144
+ :where(.menu li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
3145
+ :where(.menu li:not(.menu-title) > details > summary:not(.menu-title)) {
3146
+ padding-left: 1rem;
3147
+ padding-right: 1rem;
3148
+ padding-top: 0.5rem;
3149
+ padding-bottom: 0.5rem;
3150
+ text-align: left;
3151
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
3152
+ transition-duration: 200ms;
3153
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3154
+ border-radius: var(--rounded-btn, 0.5rem);
3159
3155
  }
3160
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active).focus,
3161
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):focus,
3162
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active).focus,
3163
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):focus {
3156
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active).focus,
3157
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):focus,
3158
+ :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active).focus,
3159
+ :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):focus {
3160
+ cursor: pointer;
3161
+ background-color: hsl(var(--bc) / 0.1);
3162
+ --tw-text-opacity: 1;
3163
+ color: hsl(var(--bc) / var(--tw-text-opacity));
3164
+ outline: 2px solid transparent;
3165
+ outline-offset: 2px;
3166
+ }
3167
+ @media (hover: hover) {
3168
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
3164
3169
  cursor: pointer;
3165
3170
  background-color: hsl(var(--bc) / 0.1);
3166
3171
  --tw-text-opacity: 1;
3167
3172
  color: hsl(var(--bc) / var(--tw-text-opacity));
3168
3173
  outline: 2px solid transparent;
3169
3174
  outline-offset: 2px;
3175
+ }
3176
+ }
3177
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):active,
3178
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active),
3179
+ :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):active,
3180
+ :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
3181
+ --tw-bg-opacity: 1;
3182
+ background-color: hsl(var(--n) / var(--tw-bg-opacity));
3183
+ --tw-text-opacity: 1;
3184
+ color: hsl(var(--nc) / var(--tw-text-opacity));
3170
3185
  }
3171
- @media (hover: hover) {
3172
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
3173
- cursor: pointer;
3174
- background-color: hsl(var(--bc) / 0.1);
3175
- --tw-text-opacity: 1;
3176
- color: hsl(var(--bc) / var(--tw-text-opacity));
3177
- outline: 2px solid transparent;
3178
- outline-offset: 2px;
3179
- }
3180
- }
3181
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):active,
3182
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active),
3183
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):active,
3184
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
3186
+ @media (hover:hover) {
3187
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active), :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
3185
3188
  --tw-bg-opacity: 1;
3186
3189
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
3187
3190
  --tw-text-opacity: 1;
3188
3191
  color: hsl(var(--nc) / var(--tw-text-opacity));
3192
+ }
3189
3193
  }
3190
- @media (hover:hover) {
3191
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active), .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
3192
- --tw-bg-opacity: 1;
3193
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
3194
- --tw-text-opacity: 1;
3195
- color: hsl(var(--nc) / var(--tw-text-opacity));
3196
- }
3194
+ :where(.menu li.disabled) {
3195
+ color: hsl(var(--bc) / 0.3);
3197
3196
  }
3198
- .menu li.disabled {
3199
- color: hsl(var(--bc) / 0.3);
3197
+ :where(.menu li > details > summary)::-webkit-details-marker {
3198
+ display: none;
3200
3199
  }
3201
- .menu :where(li > details > summary)::-webkit-details-marker {
3202
- display: none;
3200
+ :where(.menu li > details > summary):after,
3201
+ :where(.menu li > .menu-dropdown-toggle):after {
3202
+ justify-self: end;
3203
+ display: block;
3204
+ margin-top: -0.5rem;
3205
+ height: 0.5rem;
3206
+ width: 0.5rem;
3207
+ transform: rotate(45deg);
3208
+ transition-property: transform, margin-top;
3209
+ transition-duration: 0.3s;
3210
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3211
+ content: "";
3212
+ transform-origin: 75% 75%;
3213
+ box-shadow: 2px 2px;
3214
+ pointer-events: none;
3203
3215
  }
3204
- .menu :where(li > details > summary):after,
3205
- .menu :where(li > .menu-dropdown-toggle):after {
3206
- justify-self: end;
3207
- display: block;
3208
- margin-top: -0.5rem;
3209
- height: 0.5rem;
3210
- width: 0.5rem;
3211
- transform: rotate(45deg);
3212
- transition-property: transform, margin-top;
3213
- transition-duration: 0.3s;
3214
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3215
- content: "";
3216
- transform-origin: 75% 75%;
3217
- box-shadow: 2px 2px;
3218
- pointer-events: none;
3216
+ :where(.menu li > details[open] > summary):after,
3217
+ :where(.menu li > .menu-dropdown-toggle.menu-dropdown-show):after {
3218
+ transform: rotate(225deg);
3219
+ margin-top: 0;
3219
3220
  }
3220
- .menu :where(li > details[open] > summary):after,
3221
- .menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
3222
- transform: rotate(225deg);
3223
- margin-top: 0;
3224
- }
3225
- .menu .menu-title {
3226
- padding-left: 1rem;
3227
- padding-right: 1rem;
3228
- padding-top: 0.5rem;
3229
- padding-bottom: 0.5rem;
3230
- font-size: 0.875rem;
3231
- line-height: 1.25rem;
3232
- font-weight: 700;
3233
- color: hsl(var(--bc) / 0.4);
3221
+ .menu-title {
3222
+ padding-left: 1rem;
3223
+ padding-right: 1rem;
3224
+ padding-top: 0.5rem;
3225
+ padding-bottom: 0.5rem;
3226
+ font-size: 0.875rem;
3227
+ line-height: 1.25rem;
3228
+ font-weight: 700;
3229
+ color: hsl(var(--bc) / 0.4);
3234
3230
  }
3235
3231
  .mockup-code {
3236
3232
  min-width: 18rem;