daisyui 3.1.0 → 3.1.2

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 +35 -32
  2. package/dist/styled.css +85 -90
  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,8 @@ 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
+ .menu li > *:active,
1649
+ .menu li > *.active {
1649
1650
  --tw-bg-opacity: 1;
1650
1651
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
1651
1652
  --tw-text-opacity: 1;
@@ -1721,12 +1722,7 @@ html {
1721
1722
  .btn-disabled,
1722
1723
  .btn[disabled],
1723
1724
  .btn:disabled {
1724
- pointer-events: none;
1725
- --tw-border-opacity: 0;
1726
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
1727
- --tw-bg-opacity: 0.2;
1728
- color: hsl(var(--bc) / var(--tw-text-opacity));
1729
- --tw-text-opacity: 0.2}
1725
+ pointer-events: none}
1730
1726
  .btn-square {
1731
1727
  height: 3rem;
1732
1728
  width: 3rem;
@@ -2241,7 +2237,7 @@ html {
2241
2237
  --tw-scale-x: 1;
2242
2238
  --tw-scale-y: 1;
2243
2239
  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 {
2240
+ :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
2241
  cursor: pointer;
2246
2242
  background-color: hsl(var(--bc) / 0.1);
2247
2243
  --tw-text-opacity: 1;
@@ -2529,16 +2525,7 @@ html {
2529
2525
  align-items: center;
2530
2526
  gap: 0.5rem;
2531
2527
  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)}
2528
+ user-select: none}
2542
2529
  .menu li.disabled {
2543
2530
  cursor: not-allowed;
2544
2531
  user-select: none;
@@ -2753,7 +2740,6 @@ html {
2753
2740
  --tw-bg-opacity: 1}
2754
2741
  .select {
2755
2742
  display: inline-flex;
2756
- flex-shrink: 0;
2757
2743
  cursor: pointer;
2758
2744
  user-select: none;
2759
2745
  appearance: none;
@@ -3378,6 +3364,14 @@ html {
3378
3364
  background-color: hsl(var(--er) / var(--tw-bg-opacity));
3379
3365
  --tw-text-opacity: 1;
3380
3366
  color: hsl(var(--erc) / var(--tw-text-opacity))}
3367
+ .btn.btn-disabled,
3368
+ .btn[disabled],
3369
+ .btn:disabled {
3370
+ --tw-border-opacity: 0;
3371
+ background-color: hsl(var(--n) / var(--tw-bg-opacity));
3372
+ --tw-bg-opacity: 0.2;
3373
+ color: hsl(var(--bc) / var(--tw-text-opacity));
3374
+ --tw-text-opacity: 0.2}
3381
3375
  .btn-group > input[type="radio"]:checked.btn,
3382
3376
  .btn-group > .btn-active {
3383
3377
  --tw-border-opacity: 1;
@@ -4118,7 +4112,7 @@ details.collapse summary::-webkit-details-marker {
4118
4112
  .mask-triangle-4 {
4119
4113
  -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
4114
  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) {
4115
+ :where(.menu li:empty) {
4122
4116
  background-color: hsl(var(--bc) / 0.1);
4123
4117
  margin: 0.5rem 1rem;
4124
4118
  height: 1px}
@@ -4130,20 +4124,29 @@ details.collapse summary::-webkit-details-marker {
4130
4124
  width: 1px;
4131
4125
  background-color: hsl(var(--bc) / 0.1);
4132
4126
  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 {
4127
+ :where(.menu li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
4128
+ :where(.menu li:not(.menu-title) > details > summary:not(.menu-title)) {
4129
+ padding-left: 1rem;
4130
+ padding-right: 1rem;
4131
+ padding-top: 0.5rem;
4132
+ padding-bottom: 0.5rem;
4133
+ text-align: left;
4134
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
4135
+ transition-duration: 200ms;
4136
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
4137
+ border-radius: var(--rounded-btn, 0.5rem)}
4138
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active).focus,
4139
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):focus,
4140
+ :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active).focus,
4141
+ :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):focus {
4137
4142
  cursor: pointer;
4138
4143
  background-color: hsl(var(--bc) / 0.1);
4139
4144
  --tw-text-opacity: 1;
4140
4145
  color: hsl(var(--bc) / var(--tw-text-opacity));
4141
4146
  outline: 2px solid transparent;
4142
4147
  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) {
4148
+ .menu li > *:active,
4149
+ .menu li > *.active {
4147
4150
  --tw-bg-opacity: 1;
4148
4151
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
4149
4152
  --tw-text-opacity: 1;
@@ -4151,7 +4154,7 @@ details.collapse summary::-webkit-details-marker {
4151
4154
  .menu :where(li > details > summary)::-webkit-details-marker {
4152
4155
  display: none}
4153
4156
  .menu :where(li > details > summary):after,
4154
- .menu :where(li > .menu-dropdown-toggle):after {
4157
+ .menu :where(li > .menu-dropdown-toggle):after {
4155
4158
  justify-self: end;
4156
4159
  display: block;
4157
4160
  margin-top: -0.5rem;
@@ -4166,10 +4169,10 @@ details.collapse summary::-webkit-details-marker {
4166
4169
  box-shadow: 2px 2px;
4167
4170
  pointer-events: none}
4168
4171
  .menu :where(li > details[open] > summary):after,
4169
- .menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
4172
+ .menu :where(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;
@@ -1907,7 +1906,7 @@
1907
1906
  color: hsl(var(--erc) / var(--tw-text-opacity));
1908
1907
  }
1909
1908
  /* disabled */
1910
- .btn-disabled,
1909
+ .btn.btn-disabled,
1911
1910
  .btn[disabled],
1912
1911
  .btn:disabled {
1913
1912
  --tw-border-opacity: 0;
@@ -3122,115 +3121,111 @@ 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
+ .menu :where(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
+ .menu :where(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
+ .menu li > *:active,
3178
+ .menu li > *.active {
3179
+ --tw-bg-opacity: 1;
3180
+ background-color: hsl(var(--n) / var(--tw-bg-opacity));
3181
+ --tw-text-opacity: 1;
3182
+ color: hsl(var(--nc) / var(--tw-text-opacity));
3170
3183
  }
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) {
3184
+ @media (hover:hover) {
3185
+ .menu li > *:active,
3186
+ .menu li > *.active {
3185
3187
  --tw-bg-opacity: 1;
3186
3188
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
3187
3189
  --tw-text-opacity: 1;
3188
3190
  color: hsl(var(--nc) / var(--tw-text-opacity));
3191
+ }
3189
3192
  }
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
- }
3193
+ .menu li.disabled {
3194
+ color: hsl(var(--bc) / 0.3);
3197
3195
  }
3198
- .menu li.disabled {
3199
- color: hsl(var(--bc) / 0.3);
3196
+ .menu :where(li > details > summary)::-webkit-details-marker {
3197
+ display: none;
3200
3198
  }
3201
- .menu :where(li > details > summary)::-webkit-details-marker {
3202
- display: none;
3199
+ .menu :where(li > details > summary):after,
3200
+ .menu :where(li > .menu-dropdown-toggle):after {
3201
+ justify-self: end;
3202
+ display: block;
3203
+ margin-top: -0.5rem;
3204
+ height: 0.5rem;
3205
+ width: 0.5rem;
3206
+ transform: rotate(45deg);
3207
+ transition-property: transform, margin-top;
3208
+ transition-duration: 0.3s;
3209
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3210
+ content: "";
3211
+ transform-origin: 75% 75%;
3212
+ box-shadow: 2px 2px;
3213
+ pointer-events: none;
3203
3214
  }
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;
3215
+ .menu :where(li > details[open] > summary):after,
3216
+ .menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
3217
+ transform: rotate(225deg);
3218
+ margin-top: 0;
3219
3219
  }
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);
3220
+ .menu-title {
3221
+ padding-left: 1rem;
3222
+ padding-right: 1rem;
3223
+ padding-top: 0.5rem;
3224
+ padding-bottom: 0.5rem;
3225
+ font-size: 0.875rem;
3226
+ line-height: 1.25rem;
3227
+ font-weight: 700;
3228
+ color: hsl(var(--bc) / 0.4);
3234
3229
  }
3235
3230
  .mockup-code {
3236
3231
  min-width: 18rem;