daisyui 5.0.0-alpha.21 → 5.0.0-alpha.22

package/components/dropdown.css

@@ -1 +1,1123 @@
-/*! 🌼 daisyUI 5.0.0-alpha.21 – MIT License */ .dropdown{position-area:var(--anchor-v,bottom)var(--anchor-h,span-right);display:inline-block;position:relative;&>:not(summary):focus{outline-offset:2px;outline:2px solid #0000}& .dropdown-content{transition-property:opacity,scale;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);position:absolute}&:not(details){& .dropdown-content{visibility:hidden;transform-origin:top;--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y);opacity:0}}&.dropdown-open,&:not(.dropdown-hover):focus,&:focus-within{& .dropdown-content{visibility:visible;opacity:1}}&.dropdown-hover:hover{& .dropdown-content{visibility:visible;--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y);opacity:1}}&:is(details){& summary{&::-webkit-details-marker{display:none}}}&.dropdown-open,&:focus,&:focus-within{& .dropdown-content{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}}&[popover]{z-index:1000;color:inherit;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-property:opacity,scale;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);position:fixed;@supports not (position-area:bottom){&{margin:auto}&.dropdown-open{visibility:hidden;transform-origin:top;--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y);opacity:0;&:popover-open{visibility:visible;--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y);opacity:1}}&::backdrop{background-color:oklab(0% none none/.3)}}&:not(.dropdown-open,:popover-open){visibility:hidden;transform-origin:top;--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y);opacity:0}}}.dropdown-start{--anchor-h:span-right;& :where(.dropdown-content){inset-inline-end:auto}&.dropdown-left{--anchor-h:left;--anchor-v:span-bottom;& .dropdown-content{top:var(--spacing-0,0px);bottom:auto}}&.dropdown-right{--anchor-h:right;--anchor-v:span-bottom;& .dropdown-content{top:var(--spacing-0,0px);bottom:auto}}}.dropdown-center{--anchor-h:center;& :where(.dropdown-content){inset-inline-end:50%;translate:50%}&.dropdown-left{--anchor-h:left;--anchor-v:center;& .dropdown-content{top:auto;bottom:50%;translate:0 50%}}&.dropdown-right{--anchor-h:right;--anchor-v:center;& .dropdown-content{top:auto;bottom:50%;translate:0 50%}}}.dropdown-end{--anchor-h:span-left;& :where(.dropdown-content){inset-inline-end:var(--spacing-0,0px)}&.dropdown-left{--anchor-h:left;--anchor-v:span-top;& .dropdown-content{top:auto;bottom:var(--spacing-0,0px)}}&.dropdown-right{--anchor-h:right;--anchor-v:span-top;& .dropdown-content{top:auto;bottom:var(--spacing-0,0px)}}}.dropdown-left{--anchor-h:left;--anchor-v:span-bottom;& .dropdown-content{inset-inline-end:100%;top:var(--spacing-0,0px);transform-origin:100%;bottom:auto}}.dropdown-right{--anchor-h:right;--anchor-v:span-bottom;& .dropdown-content{inset-inline-start:100%;top:var(--spacing-0,0px);transform-origin:0;bottom:auto}}.dropdown-bottom{--anchor-v:bottom;& .dropdown-content{transform-origin:top;top:100%;bottom:auto}}.dropdown-top{--anchor-v:top;& .dropdown-content{transform-origin:bottom;top:auto;bottom:100%}}
+.dropdown {
+    position: relative;
+    display: inline-block;
+    position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
+    &>*:not(summary):focus {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    .dropdown-content {
+      position: absolute;
+      transition-property: opacity, scale;
+      transition-duration: .2s;
+      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    }
+    &:not(details) {
+      .dropdown-content {
+        visibility: hidden;
+        transform-origin: top;
+        opacity: 0%;
+        scale: 95%;
+      }
+    }
+    &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within {
+      .dropdown-content {
+        visibility: visible;
+        opacity: 100%;
+      }
+    }
+    &.dropdown-hover:hover {
+      .dropdown-content {
+        visibility: visible;
+        opacity: 100%;
+        scale: 100%;
+      }
+    }
+    &:is(details) {
+      summary {
+        &::-webkit-details-marker {
+          display: none;
+        }
+      }
+    }
+    &.dropdown-open, &:focus, &:focus-within {
+      .dropdown-content {
+        scale: 100%;
+      }
+    }
+    &[popover] {
+      position: fixed;
+      z-index: 1000;
+      color: inherit;
+      transition-property: opacity, scale;
+      transition-duration: .2s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      @supports not (position-area: bottom) {
+        margin: auto;
+        &.dropdown-open {
+          visibility: hidden;
+          transform-origin: top;
+          opacity: 0%;
+          scale: 95%;
+          &:popover-open {
+            visibility: visible;
+            opacity: 100%;
+            scale: 100%;
+          }
+        }
+        &::backdrop {
+          background-color: color-mix(in oklab, black 30%, transparent);
+        }
+      }
+      &:not(.dropdown-open, :popover-open) {
+        visibility: hidden;
+        transform-origin: top;
+        opacity: 0%;
+        scale: 95%;
+      }
+    }
+  }
+  .dropdown-start {
+    --anchor-h: span-right;
+    :where(.dropdown-content) {
+      inset-inline-end: auto;
+    }
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-bottom;
+      .dropdown-content {
+        top: var(--spacing-0, 0px);
+        bottom: auto;
+      }
+    }
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-bottom;
+      .dropdown-content {
+        top: var(--spacing-0, 0px);
+        bottom: auto;
+      }
+    }
+  }
+  .dropdown-center {
+    --anchor-h: center;
+    :where(.dropdown-content) {
+      inset-inline-end: calc(1/2 * 100%);
+      translate: 50% 0;
+    }
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: center;
+      .dropdown-content {
+        top: auto;
+        bottom: calc(1/2 * 100%);
+        translate: 0 50%;
+      }
+    }
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: center;
+      .dropdown-content {
+        top: auto;
+        bottom: calc(1/2 * 100%);
+        translate: 0 50%;
+      }
+    }
+  }
+  .dropdown-end {
+    --anchor-h: span-left;
+    :where(.dropdown-content) {
+      inset-inline-end: var(--spacing-0, 0px);
+    }
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-top;
+      .dropdown-content {
+        top: auto;
+        bottom: var(--spacing-0, 0px);
+      }
+    }
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-top;
+      .dropdown-content {
+        top: auto;
+        bottom: var(--spacing-0, 0px);
+      }
+    }
+  }
+  .dropdown-left {
+    --anchor-h: left;
+    --anchor-v: span-bottom;
+    .dropdown-content {
+      inset-inline-end: 100%;
+      top: var(--spacing-0, 0px);
+      bottom: auto;
+      transform-origin: right;
+    }
+  }
+  .dropdown-right {
+    --anchor-h: right;
+    --anchor-v: span-bottom;
+    .dropdown-content {
+      inset-inline-start: 100%;
+      top: var(--spacing-0, 0px);
+      bottom: auto;
+      transform-origin: left;
+    }
+  }
+  .dropdown-bottom {
+    --anchor-v: bottom;
+    .dropdown-content {
+      top: 100%;
+      bottom: auto;
+      transform-origin: top;
+    }
+  }
+  .dropdown-top {
+    --anchor-v: top;
+    .dropdown-content {
+      top: auto;
+      bottom: 100%;
+      transform-origin: bottom;
+    }
+  }
+@media (min-width: 640px) {
+.sm\:dropdown {
+    position: relative;
+    display: inline-block;
+    position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
+    &>*:not(summary):focus {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    .dropdown-content {
+      position: absolute;
+      transition-property: opacity, scale;
+      transition-duration: .2s;
+      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    }
+    &:not(details) {
+      .dropdown-content {
+        visibility: hidden;
+        transform-origin: top;
+        opacity: 0%;
+        scale: 95%;
+      }
+    }
+    &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within {
+      .dropdown-content {
+        visibility: visible;
+        opacity: 100%;
+      }
+    }
+    &.dropdown-hover:hover {
+      .dropdown-content {
+        visibility: visible;
+        opacity: 100%;
+        scale: 100%;
+      }
+    }
+    &:is(details) {
+      summary {
+        &::-webkit-details-marker {
+          display: none;
+        }
+      }
+    }
+    &.dropdown-open, &:focus, &:focus-within {
+      .dropdown-content {
+        scale: 100%;
+      }
+    }
+    &[popover] {
+      position: fixed;
+      z-index: 1000;
+      color: inherit;
+      transition-property: opacity, scale;
+      transition-duration: .2s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      @supports not (position-area: bottom) {
+        margin: auto;
+        &.dropdown-open {
+          visibility: hidden;
+          transform-origin: top;
+          opacity: 0%;
+          scale: 95%;
+          &:popover-open {
+            visibility: visible;
+            opacity: 100%;
+            scale: 100%;
+          }
+        }
+        &::backdrop {
+          background-color: color-mix(in oklab, black 30%, transparent);
+        }
+      }
+      &:not(.dropdown-open, :popover-open) {
+        visibility: hidden;
+        transform-origin: top;
+        opacity: 0%;
+        scale: 95%;
+      }
+    }
+  }
+  .sm\:dropdown-start {
+    --anchor-h: span-right;
+    :where(.dropdown-content) {
+      inset-inline-end: auto;
+    }
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-bottom;
+      .dropdown-content {
+        top: var(--spacing-0, 0px);
+        bottom: auto;
+      }
+    }
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-bottom;
+      .dropdown-content {
+        top: var(--spacing-0, 0px);
+        bottom: auto;
+      }
+    }
+  }
+  .sm\:dropdown-center {
+    --anchor-h: center;
+    :where(.dropdown-content) {
+      inset-inline-end: calc(1/2 * 100%);
+      translate: 50% 0;
+    }
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: center;
+      .dropdown-content {
+        top: auto;
+        bottom: calc(1/2 * 100%);
+        translate: 0 50%;
+      }
+    }
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: center;
+      .dropdown-content {
+        top: auto;
+        bottom: calc(1/2 * 100%);
+        translate: 0 50%;
+      }
+    }
+  }
+  .sm\:dropdown-end {
+    --anchor-h: span-left;
+    :where(.dropdown-content) {
+      inset-inline-end: var(--spacing-0, 0px);
+    }
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-top;
+      .dropdown-content {
+        top: auto;
+        bottom: var(--spacing-0, 0px);
+      }
+    }
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-top;
+      .dropdown-content {
+        top: auto;
+        bottom: var(--spacing-0, 0px);
+      }
+    }
+  }
+  .sm\:dropdown-left {
+    --anchor-h: left;
+    --anchor-v: span-bottom;
+    .dropdown-content {
+      inset-inline-end: 100%;
+      top: var(--spacing-0, 0px);
+      bottom: auto;
+      transform-origin: right;
+    }
+  }
+  .sm\:dropdown-right {
+    --anchor-h: right;
+    --anchor-v: span-bottom;
+    .dropdown-content {
+      inset-inline-start: 100%;
+      top: var(--spacing-0, 0px);
+      bottom: auto;
+      transform-origin: left;
+    }
+  }
+  .sm\:dropdown-bottom {
+    --anchor-v: bottom;
+    .dropdown-content {
+      top: 100%;
+      bottom: auto;
+      transform-origin: top;
+    }
+  }
+  .sm\:dropdown-top {
+    --anchor-v: top;
+    .dropdown-content {
+      top: auto;
+      bottom: 100%;
+      transform-origin: bottom;
+    }
+  }
+}
+
+
+@media (min-width: 768px) {
+.md\:dropdown {
+    position: relative;
+    display: inline-block;
+    position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
+    &>*:not(summary):focus {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    .dropdown-content {
+      position: absolute;
+      transition-property: opacity, scale;
+      transition-duration: .2s;
+      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    }
+    &:not(details) {
+      .dropdown-content {
+        visibility: hidden;
+        transform-origin: top;
+        opacity: 0%;
+        scale: 95%;
+      }
+    }
+    &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within {
+      .dropdown-content {
+        visibility: visible;
+        opacity: 100%;
+      }
+    }
+    &.dropdown-hover:hover {
+      .dropdown-content {
+        visibility: visible;
+        opacity: 100%;
+        scale: 100%;
+      }
+    }
+    &:is(details) {
+      summary {
+        &::-webkit-details-marker {
+          display: none;
+        }
+      }
+    }
+    &.dropdown-open, &:focus, &:focus-within {
+      .dropdown-content {
+        scale: 100%;
+      }
+    }
+    &[popover] {
+      position: fixed;
+      z-index: 1000;
+      color: inherit;
+      transition-property: opacity, scale;
+      transition-duration: .2s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      @supports not (position-area: bottom) {
+        margin: auto;
+        &.dropdown-open {
+          visibility: hidden;
+          transform-origin: top;
+          opacity: 0%;
+          scale: 95%;
+          &:popover-open {
+            visibility: visible;
+            opacity: 100%;
+            scale: 100%;
+          }
+        }
+        &::backdrop {
+          background-color: color-mix(in oklab, black 30%, transparent);
+        }
+      }
+      &:not(.dropdown-open, :popover-open) {
+        visibility: hidden;
+        transform-origin: top;
+        opacity: 0%;
+        scale: 95%;
+      }
+    }
+  }
+  .md\:dropdown-start {
+    --anchor-h: span-right;
+    :where(.dropdown-content) {
+      inset-inline-end: auto;
+    }
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-bottom;
+      .dropdown-content {
+        top: var(--spacing-0, 0px);
+        bottom: auto;
+      }
+    }
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-bottom;
+      .dropdown-content {
+        top: var(--spacing-0, 0px);
+        bottom: auto;
+      }
+    }
+  }
+  .md\:dropdown-center {
+    --anchor-h: center;
+    :where(.dropdown-content) {
+      inset-inline-end: calc(1/2 * 100%);
+      translate: 50% 0;
+    }
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: center;
+      .dropdown-content {
+        top: auto;
+        bottom: calc(1/2 * 100%);
+        translate: 0 50%;
+      }
+    }
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: center;
+      .dropdown-content {
+        top: auto;
+        bottom: calc(1/2 * 100%);
+        translate: 0 50%;
+      }
+    }
+  }
+  .md\:dropdown-end {
+    --anchor-h: span-left;
+    :where(.dropdown-content) {
+      inset-inline-end: var(--spacing-0, 0px);
+    }
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-top;
+      .dropdown-content {
+        top: auto;
+        bottom: var(--spacing-0, 0px);
+      }
+    }
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-top;
+      .dropdown-content {
+        top: auto;
+        bottom: var(--spacing-0, 0px);
+      }
+    }
+  }
+  .md\:dropdown-left {
+    --anchor-h: left;
+    --anchor-v: span-bottom;
+    .dropdown-content {
+      inset-inline-end: 100%;
+      top: var(--spacing-0, 0px);
+      bottom: auto;
+      transform-origin: right;
+    }
+  }
+  .md\:dropdown-right {
+    --anchor-h: right;
+    --anchor-v: span-bottom;
+    .dropdown-content {
+      inset-inline-start: 100%;
+      top: var(--spacing-0, 0px);
+      bottom: auto;
+      transform-origin: left;
+    }
+  }
+  .md\:dropdown-bottom {
+    --anchor-v: bottom;
+    .dropdown-content {
+      top: 100%;
+      bottom: auto;
+      transform-origin: top;
+    }
+  }
+  .md\:dropdown-top {
+    --anchor-v: top;
+    .dropdown-content {
+      top: auto;
+      bottom: 100%;
+      transform-origin: bottom;
+    }
+  }
+}
+
+
+@media (min-width: 1024px) {
+.lg\:dropdown {
+    position: relative;
+    display: inline-block;
+    position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
+    &>*:not(summary):focus {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    .dropdown-content {
+      position: absolute;
+      transition-property: opacity, scale;
+      transition-duration: .2s;
+      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    }
+    &:not(details) {
+      .dropdown-content {
+        visibility: hidden;
+        transform-origin: top;
+        opacity: 0%;
+        scale: 95%;
+      }
+    }
+    &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within {
+      .dropdown-content {
+        visibility: visible;
+        opacity: 100%;
+      }
+    }
+    &.dropdown-hover:hover {
+      .dropdown-content {
+        visibility: visible;
+        opacity: 100%;
+        scale: 100%;
+      }
+    }
+    &:is(details) {
+      summary {
+        &::-webkit-details-marker {
+          display: none;
+        }
+      }
+    }
+    &.dropdown-open, &:focus, &:focus-within {
+      .dropdown-content {
+        scale: 100%;
+      }
+    }
+    &[popover] {
+      position: fixed;
+      z-index: 1000;
+      color: inherit;
+      transition-property: opacity, scale;
+      transition-duration: .2s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      @supports not (position-area: bottom) {
+        margin: auto;
+        &.dropdown-open {
+          visibility: hidden;
+          transform-origin: top;
+          opacity: 0%;
+          scale: 95%;
+          &:popover-open {
+            visibility: visible;
+            opacity: 100%;
+            scale: 100%;
+          }
+        }
+        &::backdrop {
+          background-color: color-mix(in oklab, black 30%, transparent);
+        }
+      }
+      &:not(.dropdown-open, :popover-open) {
+        visibility: hidden;
+        transform-origin: top;
+        opacity: 0%;
+        scale: 95%;
+      }
+    }
+  }
+  .lg\:dropdown-start {
+    --anchor-h: span-right;
+    :where(.dropdown-content) {
+      inset-inline-end: auto;
+    }
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-bottom;
+      .dropdown-content {
+        top: var(--spacing-0, 0px);
+        bottom: auto;
+      }
+    }
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-bottom;
+      .dropdown-content {
+        top: var(--spacing-0, 0px);
+        bottom: auto;
+      }
+    }
+  }
+  .lg\:dropdown-center {
+    --anchor-h: center;
+    :where(.dropdown-content) {
+      inset-inline-end: calc(1/2 * 100%);
+      translate: 50% 0;
+    }
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: center;
+      .dropdown-content {
+        top: auto;
+        bottom: calc(1/2 * 100%);
+        translate: 0 50%;
+      }
+    }
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: center;
+      .dropdown-content {
+        top: auto;
+        bottom: calc(1/2 * 100%);
+        translate: 0 50%;
+      }
+    }
+  }
+  .lg\:dropdown-end {
+    --anchor-h: span-left;
+    :where(.dropdown-content) {
+      inset-inline-end: var(--spacing-0, 0px);
+    }
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-top;
+      .dropdown-content {
+        top: auto;
+        bottom: var(--spacing-0, 0px);
+      }
+    }
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-top;
+      .dropdown-content {
+        top: auto;
+        bottom: var(--spacing-0, 0px);
+      }
+    }
+  }
+  .lg\:dropdown-left {
+    --anchor-h: left;
+    --anchor-v: span-bottom;
+    .dropdown-content {
+      inset-inline-end: 100%;
+      top: var(--spacing-0, 0px);
+      bottom: auto;
+      transform-origin: right;
+    }
+  }
+  .lg\:dropdown-right {
+    --anchor-h: right;
+    --anchor-v: span-bottom;
+    .dropdown-content {
+      inset-inline-start: 100%;
+      top: var(--spacing-0, 0px);
+      bottom: auto;
+      transform-origin: left;
+    }
+  }
+  .lg\:dropdown-bottom {
+    --anchor-v: bottom;
+    .dropdown-content {
+      top: 100%;
+      bottom: auto;
+      transform-origin: top;
+    }
+  }
+  .lg\:dropdown-top {
+    --anchor-v: top;
+    .dropdown-content {
+      top: auto;
+      bottom: 100%;
+      transform-origin: bottom;
+    }
+  }
+}
+
+
+@media (min-width: 1280px) {
+.xl\:dropdown {
+    position: relative;
+    display: inline-block;
+    position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
+    &>*:not(summary):focus {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    .dropdown-content {
+      position: absolute;
+      transition-property: opacity, scale;
+      transition-duration: .2s;
+      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    }
+    &:not(details) {
+      .dropdown-content {
+        visibility: hidden;
+        transform-origin: top;
+        opacity: 0%;
+        scale: 95%;
+      }
+    }
+    &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within {
+      .dropdown-content {
+        visibility: visible;
+        opacity: 100%;
+      }
+    }
+    &.dropdown-hover:hover {
+      .dropdown-content {
+        visibility: visible;
+        opacity: 100%;
+        scale: 100%;
+      }
+    }
+    &:is(details) {
+      summary {
+        &::-webkit-details-marker {
+          display: none;
+        }
+      }
+    }
+    &.dropdown-open, &:focus, &:focus-within {
+      .dropdown-content {
+        scale: 100%;
+      }
+    }
+    &[popover] {
+      position: fixed;
+      z-index: 1000;
+      color: inherit;
+      transition-property: opacity, scale;
+      transition-duration: .2s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      @supports not (position-area: bottom) {
+        margin: auto;
+        &.dropdown-open {
+          visibility: hidden;
+          transform-origin: top;
+          opacity: 0%;
+          scale: 95%;
+          &:popover-open {
+            visibility: visible;
+            opacity: 100%;
+            scale: 100%;
+          }
+        }
+        &::backdrop {
+          background-color: color-mix(in oklab, black 30%, transparent);
+        }
+      }
+      &:not(.dropdown-open, :popover-open) {
+        visibility: hidden;
+        transform-origin: top;
+        opacity: 0%;
+        scale: 95%;
+      }
+    }
+  }
+  .xl\:dropdown-start {
+    --anchor-h: span-right;
+    :where(.dropdown-content) {
+      inset-inline-end: auto;
+    }
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-bottom;
+      .dropdown-content {
+        top: var(--spacing-0, 0px);
+        bottom: auto;
+      }
+    }
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-bottom;
+      .dropdown-content {
+        top: var(--spacing-0, 0px);
+        bottom: auto;
+      }
+    }
+  }
+  .xl\:dropdown-center {
+    --anchor-h: center;
+    :where(.dropdown-content) {
+      inset-inline-end: calc(1/2 * 100%);
+      translate: 50% 0;
+    }
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: center;
+      .dropdown-content {
+        top: auto;
+        bottom: calc(1/2 * 100%);
+        translate: 0 50%;
+      }
+    }
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: center;
+      .dropdown-content {
+        top: auto;
+        bottom: calc(1/2 * 100%);
+        translate: 0 50%;
+      }
+    }
+  }
+  .xl\:dropdown-end {
+    --anchor-h: span-left;
+    :where(.dropdown-content) {
+      inset-inline-end: var(--spacing-0, 0px);
+    }
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-top;
+      .dropdown-content {
+        top: auto;
+        bottom: var(--spacing-0, 0px);
+      }
+    }
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-top;
+      .dropdown-content {
+        top: auto;
+        bottom: var(--spacing-0, 0px);
+      }
+    }
+  }
+  .xl\:dropdown-left {
+    --anchor-h: left;
+    --anchor-v: span-bottom;
+    .dropdown-content {
+      inset-inline-end: 100%;
+      top: var(--spacing-0, 0px);
+      bottom: auto;
+      transform-origin: right;
+    }
+  }
+  .xl\:dropdown-right {
+    --anchor-h: right;
+    --anchor-v: span-bottom;
+    .dropdown-content {
+      inset-inline-start: 100%;
+      top: var(--spacing-0, 0px);
+      bottom: auto;
+      transform-origin: left;
+    }
+  }
+  .xl\:dropdown-bottom {
+    --anchor-v: bottom;
+    .dropdown-content {
+      top: 100%;
+      bottom: auto;
+      transform-origin: top;
+    }
+  }
+  .xl\:dropdown-top {
+    --anchor-v: top;
+    .dropdown-content {
+      top: auto;
+      bottom: 100%;
+      transform-origin: bottom;
+    }
+  }
+}
+
+
+@media (min-width: 1536px) {
+.\32xl\:dropdown {
+    position: relative;
+    display: inline-block;
+    position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
+    &>*:not(summary):focus {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    .dropdown-content {
+      position: absolute;
+      transition-property: opacity, scale;
+      transition-duration: .2s;
+      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    }
+    &:not(details) {
+      .dropdown-content {
+        visibility: hidden;
+        transform-origin: top;
+        opacity: 0%;
+        scale: 95%;
+      }
+    }
+    &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within {
+      .dropdown-content {
+        visibility: visible;
+        opacity: 100%;
+      }
+    }
+    &.dropdown-hover:hover {
+      .dropdown-content {
+        visibility: visible;
+        opacity: 100%;
+        scale: 100%;
+      }
+    }
+    &:is(details) {
+      summary {
+        &::-webkit-details-marker {
+          display: none;
+        }
+      }
+    }
+    &.dropdown-open, &:focus, &:focus-within {
+      .dropdown-content {
+        scale: 100%;
+      }
+    }
+    &[popover] {
+      position: fixed;
+      z-index: 1000;
+      color: inherit;
+      transition-property: opacity, scale;
+      transition-duration: .2s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      @supports not (position-area: bottom) {
+        margin: auto;
+        &.dropdown-open {
+          visibility: hidden;
+          transform-origin: top;
+          opacity: 0%;
+          scale: 95%;
+          &:popover-open {
+            visibility: visible;
+            opacity: 100%;
+            scale: 100%;
+          }
+        }
+        &::backdrop {
+          background-color: color-mix(in oklab, black 30%, transparent);
+        }
+      }
+      &:not(.dropdown-open, :popover-open) {
+        visibility: hidden;
+        transform-origin: top;
+        opacity: 0%;
+        scale: 95%;
+      }
+    }
+  }
+  .\32xl\:dropdown-start {
+    --anchor-h: span-right;
+    :where(.dropdown-content) {
+      inset-inline-end: auto;
+    }
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-bottom;
+      .dropdown-content {
+        top: var(--spacing-0, 0px);
+        bottom: auto;
+      }
+    }
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-bottom;
+      .dropdown-content {
+        top: var(--spacing-0, 0px);
+        bottom: auto;
+      }
+    }
+  }
+  .\32xl\:dropdown-center {
+    --anchor-h: center;
+    :where(.dropdown-content) {
+      inset-inline-end: calc(1/2 * 100%);
+      translate: 50% 0;
+    }
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: center;
+      .dropdown-content {
+        top: auto;
+        bottom: calc(1/2 * 100%);
+        translate: 0 50%;
+      }
+    }
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: center;
+      .dropdown-content {
+        top: auto;
+        bottom: calc(1/2 * 100%);
+        translate: 0 50%;
+      }
+    }
+  }
+  .\32xl\:dropdown-end {
+    --anchor-h: span-left;
+    :where(.dropdown-content) {
+      inset-inline-end: var(--spacing-0, 0px);
+    }
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-top;
+      .dropdown-content {
+        top: auto;
+        bottom: var(--spacing-0, 0px);
+      }
+    }
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-top;
+      .dropdown-content {
+        top: auto;
+        bottom: var(--spacing-0, 0px);
+      }
+    }
+  }
+  .\32xl\:dropdown-left {
+    --anchor-h: left;
+    --anchor-v: span-bottom;
+    .dropdown-content {
+      inset-inline-end: 100%;
+      top: var(--spacing-0, 0px);
+      bottom: auto;
+      transform-origin: right;
+    }
+  }
+  .\32xl\:dropdown-right {
+    --anchor-h: right;
+    --anchor-v: span-bottom;
+    .dropdown-content {
+      inset-inline-start: 100%;
+      top: var(--spacing-0, 0px);
+      bottom: auto;
+      transform-origin: left;
+    }
+  }
+  .\32xl\:dropdown-bottom {
+    --anchor-v: bottom;
+    .dropdown-content {
+      top: 100%;
+      bottom: auto;
+      transform-origin: top;
+    }
+  }
+  .\32xl\:dropdown-top {
+    --anchor-v: top;
+    .dropdown-content {
+      top: auto;
+      bottom: 100%;
+      transform-origin: bottom;
+    }
+  }
+}
+