daisyui 4.0.0-alpha.6 → 4.0.0-alpha.7

package/README.md

@@ -10,8 +10,6 @@
 
 </div>
 
-[![][banner-url]][docs-url]
-
 # daisyUI 3.0
 
 [![][build]][build-url] [![][npm]][npm-url] [![][number-of-components]][docs-url] [![][license]][license-url]  
@@ -61,89 +59,7 @@ See the official site: [ [daisyui.com →](https://daisyui.com/)]
 | **Backers** <br /> Thank you to all our backers! <br /> [[Become a backer](https://opencollective.com/daisyui)]                                                                     | <a href="https://opencollective.com/daisyui" target="_blank"><img src="https://opencollective.com/daisyui/backers.svg?button=false&width=500&avatarHeight=46"><img src="https://opencollective.com/daisyui/organizations.svg?button=false&width=500&avatarHeight=46"></a> |
 | **Contributors** <br /> This project exists thanks to all the people who contribute. <br /> [[Contribute](https://github.com/saadeghi/daisyui/blob/master/.github/CONTRIBUTING.md)] | <a href="https://github.com/saadeghi/daisyui/graphs/contributors" target="_blank"><img src="https://contrib.rocks/image?repo=saadeghi/daisyui&columns=14&anon=1&max=300" width="500"></a>                                                                                 |
 
-Tweet about daisyUI: [![][tweet]][tweet-url]
-
-## 📁 List of components
-
-<details>
-<summary>
-  show / hide
-</summary>
-
-- Actions
-
-  - [x] Button
-  - [x] Dropdown
-  - [x] Modal
-  - [x] Swap
-
-- Data display
-
-  - [x] Alert
-  - [x] Avatar
-  - [x] Badge
-  - [ ] Banner
-  - [ ] Calendar
-  - [x] Card
-  - [x] Carousel
-  - [x] Chat bubble
-  - [x] Collapse
-  - [x] Countdown
-  - [ ] Empty placeholder
-  - [x] Kbd
-  - [x] Loading
-  - [x] Progress
-  - [x] Radial progress
-  - [x] Stat
-  - [x] Table
-  - [ ] Tag
-  - [ ] Timeline
-  - [x] Toast
-  - [x] Tooltip
-  - [x] Treeview
-
-- Data input
-  - [x] Checkbox
-  - [x] File input
-  - [x] Text input
-  - [x] Radio
-  - [x] Range
-  - [x] Rating
-  - [x] Select
-  - [x] Textarea
-  - [x] Toggle
-- Layout
-
-  - [x] Artboard
-  - [x] Button group
-  - [x] Divider
-  - [x] Drawer
-  - [x] Footer
-  - [x] Join
-  - [x] Hero
-  - [x] Indicator
-  - [x] Input group
-  - [x] Mask
-  - [x] Stack
-
-- Navigation
-
-  - [x] Bottom Navigation
-  - [x] Breadcrumbs
-  - [x] Link
-  - [x] Menu
-  - [x] Navbar
-  - [x] Pagination
-  - [x] Steps
-  - [x] Tab
-
-- Mockup
-  - [x] Browser
-  - [x] Code
-  - [x] Phone
-  - [x] Window
-
-</details>
+[![][banner-url]][docs-url]
 
 ---
 

package/dist/full.css

@@ -1980,6 +1980,76 @@ html {
     top: calc(var(--value) * -1em);
     text-align: center;
     transition: all 1s cubic-bezier(1, 0, 0, 1)}
+.diff {
+    position: relative;
+    display: grid;
+    overflow: hidden;
+    container-type: inline-size;
+    grid-template-columns: auto 1fr}
+.diff-resizer {
+    position: relative;
+    top: 50%;
+    z-index: 1;
+    height: 3rem;
+    width: 25rem;
+    min-width: 1rem;
+    max-width: calc(100cqi - 1rem);
+    resize: horizontal;
+    overflow: hidden;
+    opacity: 0;
+    transform-origin: 100% 100%;
+    scale: 4;
+    translate: 1.5rem -1.5rem;
+    clip-path: inset(calc(100% - 0.75rem) 0 0 calc(100% - 0.75rem))}
+.diff-resizer,
+.diff-item-1,
+.diff-item-2 {
+    position: relative;
+    grid-column-start: 1;
+    grid-row-start: 1}
+.diff-item-1:after {
+    pointer-events: none;
+    position: absolute;
+    bottom: 0px;
+    right: 1px;
+    top: 50%;
+    z-index: 1;
+    height: 2rem;
+    width: 2rem;
+    --tw-content: '';
+    content: var(--tw-content);
+    translate: 50% -50%;
+    border-radius: 9999px;
+    border-width: 2px;
+    --tw-border-opacity: 1;
+    border-color: oklch(var(--b1) / var(--tw-border-opacity));
+    background-color: oklch(var(--b1) / 0.5);
+    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    outline-style: solid;
+    outline-offset: -3px;
+    outline-color: oklch(var(--bc) / 0.05);
+    --tw-backdrop-blur: blur(8px);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+            backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}
+.diff-item-2 {
+    overflow: hidden;
+    border-right-width: 2px;
+    --tw-border-opacity: 1;
+    border-color: oklch(var(--b1) / var(--tw-border-opacity))}
+.diff-item-1 > *,
+.diff-item-2 > * {
+    pointer-events: none;
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    top: 0px;
+    height: 100%;
+    width: 100cqi;
+    max-width: none;
+    object-fit: cover;
+    object-position: center}
 .divider {
     display: flex;
     flex-direction: row;
@@ -2980,29 +3050,28 @@ input.tab:checked + .tab-content,
 .timeline {
     position: relative;
     display: flex}
-:where(.timeline li) {
+:where(.timeline > li) {
     position: relative;
     display: grid;
     align-items: center;
     grid-template-rows: var(--timeline-row-start, 1fr) auto var(--timeline-row-end, 1fr);
     grid-template-columns: var(--timeline-col-start, 1fr) auto var(--timeline-col-end, 1fr)}
-:where(.timeline:not(:has(.timeline-start)) li) {
+:where(.timeline:not(:has(.timeline-start)) > li) {
     --timeline-row-start: min-content}
-:where(.timeline:not(:has(.timeline-end)) li) {
+:where(.timeline:not(:has(.timeline-end)) > li) {
     --timeline-row-end: min-content}
 :where(.timeline:not(:has(.timeline-start)):not(:has(.timeline-end)) li) {
     --timeline-row-start: min-content;
     --timeline-row-end: min-content}
-.timeline hr {
+.timeline > li > hr {
     width: 100%;
-    border-width: 0px;
-    height: 0.25rem}
-.timeline-snap-icon li {
+    border-width: 0px}
+.timeline-snap-icon > li {
     --timeline-col-start: 0.5rem}
-:where(.timeline hr):first-child {
+:where(.timeline > li > hr):first-child {
     grid-column-start: 1;
     grid-row-start: 2}
-:where(.timeline hr):last-child {
+:where(.timeline > li > hr):last-child {
     grid-column-start: 3;
     grid-row-start: 2}
 .timeline-start {
@@ -5026,9 +5095,15 @@ details.collapse summary::-webkit-details-marker {
 .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):first-child:before, .tab-lifted:is(input:checked):first-child:before {
     background-image: var(--radius-end);
     background-position: top right}
+[dir="rtl"] .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tab-lifted:is(input:checked):first-child:before {
+    background-image: var(--radius-start);
+    background-position: top left}
 .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):last-child:before, .tab-lifted:is(input:checked):last-child:before {
     background-image: var(--radius-start);
     background-position: top left}
+[dir="rtl"] .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tab-lifted:is(input:checked):last-child:before {
+    background-image: var(--radius-end);
+    background-position: top right}
 .tab-lifted.tab-active:not(.tab-disabled):not([disabled])
   + .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before, .tab-lifted:is(input:checked) + .tab-lifted:is(input:checked):before {
     background-image: var(--radius-end);
@@ -5138,6 +5213,8 @@ details.collapse summary::-webkit-details-marker {
   .textarea[disabled]::placeholder {
     color: oklch(var(--bc) / var(--tw-placeholder-opacity));
     --tw-placeholder-opacity: 0.2}
+.timeline hr {
+    height: 0.25rem}
 :where(.timeline hr) {
     --tw-bg-opacity: 1;
     background-color: oklch(var(--b3) / var(--tw-bg-opacity))}
@@ -23625,23 +23702,23 @@ details.collapse summary::-webkit-details-marker {
     line-height: 2}
 .timeline-vertical {
     flex-direction: column}
-:where(.timeline-vertical li) {
+:where(.timeline-vertical > li) {
     --timeline-row-start: 1fr;
     --timeline-row-end: 1fr;
     justify-items: center}
-:where(.timeline-vertical:not(:has(.timeline-start)) li) {
+:where(.timeline-vertical:not(:has(.timeline-start)) > li) {
     --timeline-col-start: min-content}
-:where(.timeline-vertical:not(:has(.timeline-end)) li) {
+:where(.timeline-vertical:not(:has(.timeline-end)) > li) {
     --timeline-col-end: min-content}
-:where(.timeline-vertical:not(:has(.timeline-start)):not(:has(.timeline-end)) li) {
+:where(.timeline-vertical:not(:has(.timeline-start)):not(:has(.timeline-end)) > li) {
     --timeline-col-start: min-content;
     --timeline-col-end: min-content}
-.timeline-vertical hr {
+.timeline-vertical > li > hr {
     height: 100%}
-:where(.timeline-vertical hr):first-child {
+:where(.timeline-vertical > li > hr):first-child {
     grid-column-start: 2;
     grid-row-start: 1}
-:where(.timeline-vertical hr):last-child {
+:where(.timeline-vertical > li > hr):last-child {
     grid-column-start: 2;
     grid-row-start: 3}
 .timeline-vertical .timeline-start {
@@ -23658,27 +23735,27 @@ details.collapse summary::-webkit-details-marker {
     grid-row-end: 4;
     align-self: center;
     justify-self: start}
-.timeline-vertical.timeline-snap-icon li {
+.timeline-vertical.timeline-snap-icon > li {
     --timeline-row-start: 0.5rem}
 .timeline-horizontal {
     flex-direction: row}
-:where(.timeline-horizontal li) {
+:where(.timeline-horizontal > li) {
     --timeline-col-start: 1fr;
     --timeline-col-end: 1fr;
     align-items: center}
-:where(.timeline-horizontal:not(:has(.timeline-start)) li) {
+:where(.timeline-horizontal:not(:has(.timeline-start)) > li) {
     --timeline-row-start: min-content}
-:where(.timeline-horizontal:not(:has(.timeline-end)) li) {
+:where(.timeline-horizontal:not(:has(.timeline-end)) > li) {
     --timeline-row-end: min-content}
-:where(.timeline-horizontal:not(:has(.timeline-start)):not(:has(.timeline-end)) li) {
+:where(.timeline-horizontal:not(:has(.timeline-start)):not(:has(.timeline-end)) > li) {
     --timeline-row-start: min-content;
     --timeline-row-end: min-content}
-.timeline-horizontal hr {
+.timeline-horizontal > li > hr {
     width: 100%}
-:where(.timeline-horizontal hr):first-child {
+:where(.timeline-horizontal > li > hr):first-child {
     grid-column-start: 1;
     grid-row-start: 2}
-:where(.timeline-horizontal hr):last-child {
+:where(.timeline-horizontal > li > hr):last-child {
     grid-column-start: 3;
     grid-row-start: 2}
 .timeline-horizontal .timeline-start {
@@ -23695,7 +23772,7 @@ details.collapse summary::-webkit-details-marker {
     grid-row-end: 4;
     align-self: flex-start;
     justify-self: center}
-.timeline-horizontal.timeline-snap-icon li {
+.timeline-horizontal.timeline-snap-icon > li {
     --timeline-col-start: 0.5rem}
 :where(.toast) {
     bottom: 0px;
@@ -24102,46 +24179,46 @@ details.collapse summary::-webkit-details-marker {
     padding-right: 1.5rem;
     padding-top: 1rem;
     padding-bottom: 1rem}
-.timeline-vertical hr {
+.timeline-vertical > li > hr {
     width: 0.25rem}
-:where(.timeline-vertical:has(.timeline-middle) hr):first-child {
+:where(.timeline-vertical:has(.timeline-middle) > li > hr):first-child {
     border-bottom-right-radius: var(--rounded-badge, 1.9rem);
     border-bottom-left-radius: var(--rounded-badge, 1.9rem);
     border-top-left-radius: 0px;
     border-top-right-radius: 0px}
-:where(.timeline-vertical:has(.timeline-middle) hr):last-child {
+:where(.timeline-vertical:has(.timeline-middle) > li > hr):last-child {
     border-top-left-radius: var(--rounded-badge, 1.9rem);
     border-top-right-radius: var(--rounded-badge, 1.9rem);
     border-bottom-right-radius: 0px;
     border-bottom-left-radius: 0px}
-:where(.timeline-vertical:not(:has(.timeline-middle)) :first-child hr:last-child) {
+:where(.timeline-vertical:not(:has(.timeline-middle)) :first-child > hr:last-child) {
     border-top-left-radius: var(--rounded-badge, 1.9rem);
     border-top-right-radius: var(--rounded-badge, 1.9rem);
     border-bottom-right-radius: 0px;
     border-bottom-left-radius: 0px}
-:where(.timeline-vertical:not(:has(.timeline-middle)) :last-child hr:first-child) {
+:where(.timeline-vertical:not(:has(.timeline-middle)) :last-child > hr:first-child) {
     border-bottom-right-radius: var(--rounded-badge, 1.9rem);
     border-bottom-left-radius: var(--rounded-badge, 1.9rem);
     border-top-left-radius: 0px;
     border-top-right-radius: 0px}
-.timeline-horizontal hr {
+.timeline-horizontal > li > hr {
     height: 0.25rem}
-:where(.timeline-horizontal:has(.timeline-middle) hr):first-child {
+:where(.timeline-horizontal:has(.timeline-middle) > li > hr):first-child {
     border-start-end-radius: var(--rounded-badge, 1.9rem);
     border-end-end-radius: var(--rounded-badge, 1.9rem);
     border-start-start-radius: 0px;
     border-end-start-radius: 0px}
-:where(.timeline-horizontal:has(.timeline-middle) hr):last-child {
+:where(.timeline-horizontal:has(.timeline-middle) > li > hr):last-child {
     border-start-start-radius: var(--rounded-badge, 1.9rem);
     border-end-start-radius: var(--rounded-badge, 1.9rem);
     border-start-end-radius: 0px;
     border-end-end-radius: 0px}
-:where(.timeline-horizontal:not(:has(.timeline-middle)) :first-child hr:last-child) {
+:where(.timeline-horizontal:not(:has(.timeline-middle)) :first-child > hr:last-child) {
     border-start-start-radius: var(--rounded-badge, 1.9rem);
     border-end-start-radius: var(--rounded-badge, 1.9rem);
     border-start-end-radius: 0px;
     border-end-end-radius: 0px}
-:where(.timeline-horizontal:not(:has(.timeline-middle)) :last-child hr:first-child) {
+:where(.timeline-horizontal:not(:has(.timeline-middle)) :last-child > hr:first-child) {
     border-start-end-radius: var(--rounded-badge, 1.9rem);
     border-end-end-radius: var(--rounded-badge, 1.9rem);
     border-start-start-radius: 0px;

package/dist/styled.css

@@ -378,6 +378,65 @@
       white-space: pre;
       top: calc(var(--value) * -1em);
     }
+.diff {
+  position: relative;
+  display: grid;
+  overflow: hidden;
+  container-type: inline-size;
+  grid-template-columns: auto 1fr
+}
+.diff-resizer {
+  position: relative;
+  top: 50%;
+  z-index: 1;
+  height: 3rem;
+  width: 25rem;
+  min-width: 1rem;
+  max-width: calc(100cqi - 1rem);
+  resize: horizontal;
+  overflow: hidden;
+  opacity: 0;
+  transform-origin: 100% 100%;
+  scale: 4;
+  translate: 1.5rem -1.5rem;
+  clip-path: inset(calc(100% - 0.75rem) 0 0 calc(100% - 0.75rem))
+}
+.diff-resizer,
+.diff-item-1,
+.diff-item-2 {
+  position: relative;
+  grid-column-start: 1;
+  grid-row-start: 1
+}
+.diff-item-1:after {
+  pointer-events: none;
+  position: absolute;
+  bottom: 0px;
+  right: 1px;
+  top: 50%;
+  z-index: 1;
+  height: 2rem;
+  width: 2rem;
+  --tw-content: '';
+  content: var(--tw-content);
+  translate: 50% -50%
+}
+.diff-item-2 {
+  overflow: hidden
+}
+.diff-item-1 > *,
+.diff-item-2 > * {
+  pointer-events: none;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  top: 0px;
+  height: 100%;
+  width: 100cqi;
+  max-width: none;
+  object-fit: cover;
+  object-position: center
+}
 .divider {
     display: flex;
     flex-direction: row;
@@ -1169,35 +1228,35 @@ input.tab:checked + .tab-content,
   position: relative;
   display: flex;
 }
-:where(.timeline li) {
+:where(.timeline > li) {
   position: relative;
   display: grid;
   align-items: center;
   grid-template-rows: var(--timeline-row-start, 1fr) auto var(--timeline-row-end, 1fr);
   grid-template-columns: var(--timeline-col-start, 1fr) auto var(--timeline-col-end, 1fr);
 }
-:where(.timeline:not(:has(.timeline-start)) li) {
+:where(.timeline:not(:has(.timeline-start)) > li) {
   --timeline-row-start: min-content;
 }
-:where(.timeline:not(:has(.timeline-end)) li) {
+:where(.timeline:not(:has(.timeline-end)) > li) {
   --timeline-row-end: min-content;
 }
 :where(.timeline:not(:has(.timeline-start)):not(:has(.timeline-end)) li) {
   --timeline-row-start: min-content;
   --timeline-row-end: min-content;
 }
-.timeline hr {
+.timeline > li > hr {
   width: 100%;
   border-width: 0px;
 }
-.timeline-snap-icon li {
+.timeline-snap-icon > li {
   --timeline-col-start: 0.5rem;
 }
-:where(.timeline hr):first-child {
+:where(.timeline > li > hr):first-child {
   grid-column-start: 1;
   grid-row-start: 2;
 }
-:where(.timeline hr):last-child {
+:where(.timeline > li > hr):last-child {
   grid-column-start: 3;
   grid-row-start: 2;
 }
@@ -2531,6 +2590,27 @@ details.collapse summary {
       text-align: center;
       transition: all 1s cubic-bezier(1, 0, 0, 1);
     }
+.diff-item-1:after {
+  border-radius: 9999px;
+  border-width: 2px;
+  --tw-border-opacity: 1;
+  border-color: oklch(var(--b1) / var(--tw-border-opacity));
+  background-color: oklch(var(--b1) / 0.5);
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline-style: solid;
+  outline-offset: -3px;
+  outline-color: oklch(var(--bc) / 0.05);
+  --tw-backdrop-blur: blur(8px);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  translate: 50% -50%
+}
+.diff-item-2 {
+  border-right-width: 2px;
+  --tw-border-opacity: 1;
+  border-color: oklch(var(--b1) / var(--tw-border-opacity))
+}
 .divider {
     margin-top: 1rem;
     margin-bottom: 1rem;
@@ -4512,10 +4592,18 @@ details.collapse summary {
       background-image: var(--radius-end);
       background-position: top right;
     }
+[dir="rtl"] .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tab-lifted:is(input:checked):first-child:before {
+        background-image: var(--radius-start);
+        background-position: top left;
+      }
 .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):last-child:before, .tab-lifted:is(input:checked):last-child:before {
       background-image: var(--radius-start);
       background-position: top left;
     }
+[dir="rtl"] .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tab-lifted:is(input:checked):last-child:before {
+        background-image: var(--radius-end);
+        background-position: top right;
+      }
 .tab-lifted.tab-active:not(.tab-disabled):not([disabled])
   + .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before, .tab-lifted:is(input:checked) + .tab-lifted:is(input:checked):before {
     background-image: var(--radius-end);