cladux-html 0.2.0 → 0.3.0

package/components/combobox.css

@@ -0,0 +1,260 @@
+/*! cladux-html v0.3.0 | Apache-2.0 | https://cladux.vercel.app/docs/html */
+@layer cl.base, cl.components, cl.utilities;
+
+@layer cl.components {
+  .cl-popover,
+  .cl-menu,
+  .cl-tooltip,
+  .cl-combobox-content {
+    --_slide: 0.5rem;
+    position: fixed;
+    inset: auto;
+    z-index: 50;
+    margin: 0;
+    border: 0 solid var(--border);
+    overflow: visible;
+    opacity: 0;
+    scale: 0.95;
+    transition-property:
+      opacity,
+      scale,
+      translate,
+      display,
+      overlay;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-behavior: allow-discrete;
+  }
+  .cl-popover:popover-open,
+  .cl-menu:popover-open,
+  .cl-tooltip:popover-open,
+  .cl-combobox-content:popover-open {
+    opacity: 1;
+    scale: 1;
+  }
+  @starting-style {
+    .cl-popover:popover-open,
+    .cl-menu:popover-open,
+    .cl-tooltip:popover-open,
+    .cl-combobox-content:popover-open {
+      opacity: 0;
+      scale: 0.95;
+    }
+    :is(.cl-popover, .cl-menu, .cl-tooltip, .cl-combobox-content):popover-open[data-placed=bottom] {
+      translate: 0 calc(var(--_slide) * -1);
+    }
+    :is(.cl-popover, .cl-menu, .cl-tooltip, .cl-combobox-content):popover-open[data-placed=top] {
+      translate: 0 var(--_slide);
+    }
+    :is(.cl-popover, .cl-menu, .cl-tooltip, .cl-combobox-content):popover-open[data-placed=left] {
+      translate: var(--_slide) 0;
+    }
+    :is(.cl-popover, .cl-menu, .cl-tooltip, .cl-combobox-content):popover-open[data-placed=right] {
+      translate: calc(var(--_slide) * -1) 0;
+    }
+  }
+}
+
+@layer cl.components {
+  .cl-combobox {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 2rem;
+    min-width: 0;
+    border: 1px solid var(--input);
+    border-radius: var(--radius);
+    transition-property:
+      color,
+      background-color,
+      border-color,
+      outline-color,
+      text-decoration-color,
+      fill,
+      stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-combobox:has(> .cl-combobox-input:focus-visible) {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  .cl-combobox:has(> .cl-combobox-input[aria-invalid=true]) {
+    border-color: var(--destructive);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent);
+  }
+  .cl-combobox:has(> .cl-combobox-input:disabled) {
+    background-color: color-mix(in oklab, var(--input) 50%, transparent);
+    opacity: 0.5;
+  }
+  :where(.dark, [data-theme=dark]) .cl-combobox {
+    background-color: color-mix(in oklab, var(--input) 30%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-combobox:has(> .cl-combobox-input:disabled) {
+    background-color: color-mix(in oklab, var(--input) 80%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-combobox:has(> .cl-combobox-input[aria-invalid=true]) {
+    border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 40%, transparent);
+  }
+  .cl-combobox-input {
+    flex: 1;
+    width: 100%;
+    min-width: 0;
+    height: 2rem;
+    padding: 0.25rem 0.375rem 0.25rem 0.625rem;
+    border: 0;
+    border-radius: 0;
+    background-color: transparent;
+    color: inherit;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    outline: none;
+  }
+  .cl-combobox-input::placeholder {
+    color: var(--muted-foreground);
+  }
+  .cl-combobox-input:disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+  @media (width >= 48rem) {
+    .cl-combobox-input {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
+  }
+  .cl-combobox-trigger {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-inline-end: 0.2rem;
+    padding: 0;
+    border: 0;
+    border-radius: calc(var(--radius) - 3px);
+    background-color: transparent;
+    cursor: default;
+    transition-property: color, background-color;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-combobox-trigger::before {
+    content: "";
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--muted-foreground);
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+  @media (hover: hover) {
+    .cl-combobox-trigger:hover {
+      background-color: var(--muted);
+    }
+  }
+  .cl-combobox-trigger:disabled {
+    pointer-events: none;
+  }
+  .cl-combobox-content {
+    display: none;
+    width: var(--cl-anchor-width, auto);
+    min-width: max(9rem, calc(var(--cl-anchor-width, 0px) + 1.75rem));
+    max-height: min(18rem, var(--cl-available-height, 18rem));
+    overflow: hidden;
+    padding: 0;
+    border-radius: var(--radius);
+    background-color: var(--popover);
+    color: var(--popover-foreground);
+    font-size: 1rem;
+    line-height: 1.5rem;
+    box-shadow:
+      0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent),
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1);
+  }
+  .cl-combobox-content:popover-open {
+    display: block;
+  }
+  .cl-combobox-list {
+    max-height: min(15.75rem, calc(var(--cl-available-height, 18rem) - 2.25rem));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scroll-padding-block: 0.25rem;
+    scrollbar-width: none;
+    padding: 0.25rem;
+  }
+  .cl-combobox-list::-webkit-scrollbar {
+    display: none;
+  }
+  .cl-combobox-content[data-empty] .cl-combobox-list {
+    padding: 0;
+  }
+  .cl-combobox-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding-block: 0.25rem;
+    padding-inline: 0.375rem 2rem;
+    border-radius: calc(var(--radius) * 0.8);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    cursor: default;
+    -webkit-user-select: none;
+    user-select: none;
+    outline: none;
+  }
+  .cl-combobox-item[hidden] {
+    display: none;
+  }
+  .cl-combobox-item[data-highlighted] {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
+  .cl-combobox-item[aria-disabled=true] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  .cl-combobox-item svg {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    pointer-events: none;
+  }
+  .cl-combobox-item[aria-selected=true]::after {
+    content: "";
+    position: absolute;
+    inset-inline-end: 0.5rem;
+    width: 1rem;
+    height: 1rem;
+    background-color: currentColor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
+    pointer-events: none;
+  }
+  .cl-combobox-label {
+    padding: 0.375rem 0.5rem;
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+  .cl-combobox-separator {
+    height: 1px;
+    margin: 0.25rem -0.25rem;
+    background-color: var(--border);
+  }
+  .cl-combobox-empty {
+    display: none;
+    justify-content: center;
+    width: 100%;
+    padding-block: 0.5rem;
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    text-align: center;
+  }
+  .cl-combobox-content[data-empty] .cl-combobox-empty {
+    display: flex;
+  }
+}

package/components/combobox.min.css

@@ -0,0 +1,2 @@
+/*! cladux-html v0.3.0 | Apache-2.0 | https://cladux.vercel.app/docs/html */
+@layer cl.base,cl.components,cl.utilities;@layer cl.components{.cl-popover,.cl-menu,.cl-tooltip,.cl-combobox-content{--_slide: .5rem;position:fixed;inset:auto;z-index:50;margin:0;border:0 solid var(--border);overflow:visible;opacity:0;scale:.95;transition-property:opacity,scale,translate,display,overlay;transition-duration:.1s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-behavior:allow-discrete}.cl-popover:popover-open,.cl-menu:popover-open,.cl-tooltip:popover-open,.cl-combobox-content:popover-open{opacity:1;scale:1}@starting-style{.cl-popover:popover-open,.cl-menu:popover-open,.cl-tooltip:popover-open,.cl-combobox-content:popover-open{opacity:0;scale:.95}:is(.cl-popover,.cl-menu,.cl-tooltip,.cl-combobox-content):popover-open[data-placed=bottom]{translate:0 calc(var(--_slide) * -1)}:is(.cl-popover,.cl-menu,.cl-tooltip,.cl-combobox-content):popover-open[data-placed=top]{translate:0 var(--_slide)}:is(.cl-popover,.cl-menu,.cl-tooltip,.cl-combobox-content):popover-open[data-placed=left]{translate:var(--_slide) 0}:is(.cl-popover,.cl-menu,.cl-tooltip,.cl-combobox-content):popover-open[data-placed=right]{translate:calc(var(--_slide) * -1) 0}}}@layer cl.components{.cl-combobox{position:relative;display:flex;align-items:center;height:2rem;min-width:0;border:1px solid var(--input);border-radius:var(--radius);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cl-combobox:has(>.cl-combobox-input:focus-visible){border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}.cl-combobox:has(>.cl-combobox-input[aria-invalid=true]){border-color:var(--destructive);box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 20%,transparent)}.cl-combobox:has(>.cl-combobox-input:disabled){background-color:color-mix(in oklab,var(--input) 50%,transparent);opacity:.5}:where(.dark,[data-theme=dark]) .cl-combobox{background-color:color-mix(in oklab,var(--input) 30%,transparent)}:where(.dark,[data-theme=dark]) .cl-combobox:has(>.cl-combobox-input:disabled){background-color:color-mix(in oklab,var(--input) 80%,transparent)}:where(.dark,[data-theme=dark]) .cl-combobox:has(>.cl-combobox-input[aria-invalid=true]){border-color:color-mix(in oklab,var(--destructive) 50%,transparent);box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 40%,transparent)}.cl-combobox-input{flex:1;width:100%;min-width:0;height:2rem;padding:.25rem .375rem .25rem .625rem;border:0;border-radius:0;background-color:transparent;color:inherit;font-size:1rem;line-height:1.5rem;outline:none}.cl-combobox-input::placeholder{color:var(--muted-foreground)}.cl-combobox-input:disabled{pointer-events:none;cursor:not-allowed}@media(width>=48rem){.cl-combobox-input{font-size:.875rem;line-height:1.25rem}}.cl-combobox-trigger{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-inline-end:.2rem;padding:0;border:0;border-radius:calc(var(--radius) - 3px);background-color:transparent;cursor:default;transition-property:color,background-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cl-combobox-trigger:before{content:"";width:1rem;height:1rem;background-color:var(--muted-foreground);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat}@media(hover:hover){.cl-combobox-trigger:hover{background-color:var(--muted)}}.cl-combobox-trigger:disabled{pointer-events:none}.cl-combobox-content{display:none;width:var(--cl-anchor-width, auto);min-width:max(9rem,calc(var(--cl-anchor-width, 0px) + 1.75rem));max-height:min(18rem,var(--cl-available-height, 18rem));overflow:hidden;padding:0;border-radius:var(--radius);background-color:var(--popover);color:var(--popover-foreground);font-size:1rem;line-height:1.5rem;box-shadow:0 0 0 1px color-mix(in oklab,var(--foreground) 10%,transparent),0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.cl-combobox-content:popover-open{display:block}.cl-combobox-list{max-height:min(15.75rem,calc(var(--cl-available-height, 18rem) - 2.25rem));overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:.25rem;scrollbar-width:none;padding:.25rem}.cl-combobox-list::-webkit-scrollbar{display:none}.cl-combobox-content[data-empty] .cl-combobox-list{padding:0}.cl-combobox-item{position:relative;display:flex;align-items:center;gap:.5rem;width:100%;padding-block:.25rem;padding-inline:.375rem 2rem;border-radius:calc(var(--radius) * .8);font-size:.875rem;line-height:1.25rem;cursor:default;-webkit-user-select:none;user-select:none;outline:none}.cl-combobox-item[hidden]{display:none}.cl-combobox-item[data-highlighted]{background-color:var(--accent);color:var(--accent-foreground)}.cl-combobox-item[aria-disabled=true]{pointer-events:none;opacity:.5}.cl-combobox-item svg{flex-shrink:0;width:1rem;height:1rem;pointer-events:none}.cl-combobox-item[aria-selected=true]:after{content:"";position:absolute;inset-inline-end:.5rem;width:1rem;height:1rem;background-color:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;pointer-events:none}.cl-combobox-label{padding:.375rem .5rem;color:var(--muted-foreground);font-size:.75rem;line-height:1rem}.cl-combobox-separator{height:1px;margin:.25rem -.25rem;background-color:var(--border)}.cl-combobox-empty{display:none;justify-content:center;width:100%;padding-block:.5rem;color:var(--muted-foreground);font-size:.875rem;line-height:1.25rem;text-align:center}.cl-combobox-content[data-empty] .cl-combobox-empty{display:flex}}

package/components/dialog.css

@@ -0,0 +1,128 @@
+/*! cladux-html v0.3.0 | Apache-2.0 | https://cladux.vercel.app/docs/html */
+@layer cl.base, cl.components, cl.utilities;
+
+@layer cl.components {
+  .cl-dialog {
+    position: fixed;
+    inset: 50% auto auto 50%;
+    z-index: 50;
+    gap: 1rem;
+    width: 100%;
+    height: auto;
+    max-width: calc(100% - 2rem);
+    max-height: none;
+    margin: 0;
+    padding: 1rem;
+    border: 0;
+    border-radius: calc(var(--radius) * 1.4);
+    background-color: var(--popover);
+    color: var(--popover-foreground);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    outline: none;
+    box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent);
+    translate: -50% -50%;
+    opacity: 0;
+    scale: 0.95;
+    transition-property:
+      opacity,
+      scale,
+      display,
+      overlay;
+    transition-duration: 100ms;
+    transition-timing-function: ease;
+    transition-behavior: allow-discrete;
+  }
+  .cl-dialog[open] {
+    display: grid;
+    opacity: 1;
+    scale: 1;
+  }
+  @starting-style {
+    .cl-dialog[open] {
+      opacity: 0;
+      scale: 0.95;
+    }
+  }
+  @media (width >= 40rem) {
+    .cl-dialog {
+      max-width: 24rem;
+    }
+  }
+  .cl-dialog::backdrop {
+    background-color: rgb(0 0 0 / 0);
+    transition-property:
+      background-color,
+      backdrop-filter,
+      display,
+      overlay;
+    transition-duration: 100ms;
+    transition-timing-function: ease;
+    transition-behavior: allow-discrete;
+  }
+  .cl-dialog[open]::backdrop {
+    background-color: rgb(0 0 0 / 0.1);
+    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(4px);
+  }
+  @starting-style {
+    .cl-dialog[open]::backdrop {
+      background-color: rgb(0 0 0 / 0);
+      -webkit-backdrop-filter: blur(0);
+      backdrop-filter: blur(0);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cl-dialog,
+    .cl-dialog::backdrop {
+      transition-duration: 0s;
+    }
+  }
+  .cl-dialog-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .cl-dialog-title {
+    margin: 0;
+    font-size: 1rem;
+    line-height: 1;
+    font-weight: 500;
+  }
+  .cl-dialog-description {
+    margin: 0;
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+  .cl-dialog-description > a {
+    text-decoration-line: underline;
+    text-underline-offset: 3px;
+  }
+  @media (hover: hover) {
+    .cl-dialog-description > a:hover {
+      color: var(--foreground);
+    }
+  }
+  .cl-dialog-footer {
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 0.5rem;
+    margin: 0 -1rem -1rem;
+    padding: 1rem;
+    border-top: 1px solid var(--border);
+    border-radius: 0 0 calc(var(--radius) * 1.4) calc(var(--radius) * 1.4);
+    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+  }
+  @media (width >= 40rem) {
+    .cl-dialog-footer {
+      flex-direction: row;
+      justify-content: flex-end;
+    }
+  }
+  .cl-dialog-close {
+    position: absolute;
+    top: 0.5rem;
+    inset-inline-end: 0.5rem;
+  }
+}

package/components/dialog.min.css

@@ -0,0 +1,2 @@
+/*! cladux-html v0.3.0 | Apache-2.0 | https://cladux.vercel.app/docs/html */
+@layer cl.base,cl.components,cl.utilities;@layer cl.components{.cl-dialog{position:fixed;inset:50% auto auto 50%;z-index:50;gap:1rem;width:100%;height:auto;max-width:calc(100% - 2rem);max-height:none;margin:0;padding:1rem;border:0;border-radius:calc(var(--radius) * 1.4);background-color:var(--popover);color:var(--popover-foreground);font-size:.875rem;line-height:1.25rem;outline:none;box-shadow:0 0 0 1px color-mix(in oklab,var(--foreground) 10%,transparent);translate:-50% -50%;opacity:0;scale:.95;transition-property:opacity,scale,display,overlay;transition-duration:.1s;transition-timing-function:ease;transition-behavior:allow-discrete}.cl-dialog[open]{display:grid;opacity:1;scale:1}@starting-style{.cl-dialog[open]{opacity:0;scale:.95}}@media(width>=40rem){.cl-dialog{max-width:24rem}}.cl-dialog::backdrop{background-color:#0000;transition-property:background-color,backdrop-filter,display,overlay;transition-duration:.1s;transition-timing-function:ease;transition-behavior:allow-discrete}.cl-dialog[open]::backdrop{background-color:#0000001a;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@starting-style{.cl-dialog[open]::backdrop{background-color:#0000;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}@media(prefers-reduced-motion:reduce){.cl-dialog,.cl-dialog::backdrop{transition-duration:0s}}.cl-dialog-header{display:flex;flex-direction:column;gap:.5rem}.cl-dialog-title{margin:0;font-size:1rem;line-height:1;font-weight:500}.cl-dialog-description{margin:0;color:var(--muted-foreground);font-size:.875rem;line-height:1.25rem}.cl-dialog-description>a{text-decoration-line:underline;text-underline-offset:3px}@media(hover:hover){.cl-dialog-description>a:hover{color:var(--foreground)}}.cl-dialog-footer{display:flex;flex-direction:column-reverse;gap:.5rem;margin:0 -1rem -1rem;padding:1rem;border-top:1px solid var(--border);border-radius:0 0 calc(var(--radius) * 1.4) calc(var(--radius) * 1.4);background-color:color-mix(in oklab,var(--muted) 50%,transparent)}@media(width>=40rem){.cl-dialog-footer{flex-direction:row;justify-content:flex-end}}.cl-dialog-close{position:absolute;top:.5rem;inset-inline-end:.5rem}}

package/components/dropdown-menu.css

@@ -0,0 +1,178 @@
+/*! cladux-html v0.3.0 | Apache-2.0 | https://cladux.vercel.app/docs/html */
+@layer cl.base, cl.components, cl.utilities;
+
+@layer cl.components {
+  .cl-popover,
+  .cl-menu,
+  .cl-tooltip,
+  .cl-combobox-content {
+    --_slide: 0.5rem;
+    position: fixed;
+    inset: auto;
+    z-index: 50;
+    margin: 0;
+    border: 0 solid var(--border);
+    overflow: visible;
+    opacity: 0;
+    scale: 0.95;
+    transition-property:
+      opacity,
+      scale,
+      translate,
+      display,
+      overlay;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-behavior: allow-discrete;
+  }
+  .cl-popover:popover-open,
+  .cl-menu:popover-open,
+  .cl-tooltip:popover-open,
+  .cl-combobox-content:popover-open {
+    opacity: 1;
+    scale: 1;
+  }
+  @starting-style {
+    .cl-popover:popover-open,
+    .cl-menu:popover-open,
+    .cl-tooltip:popover-open,
+    .cl-combobox-content:popover-open {
+      opacity: 0;
+      scale: 0.95;
+    }
+    :is(.cl-popover, .cl-menu, .cl-tooltip, .cl-combobox-content):popover-open[data-placed=bottom] {
+      translate: 0 calc(var(--_slide) * -1);
+    }
+    :is(.cl-popover, .cl-menu, .cl-tooltip, .cl-combobox-content):popover-open[data-placed=top] {
+      translate: 0 var(--_slide);
+    }
+    :is(.cl-popover, .cl-menu, .cl-tooltip, .cl-combobox-content):popover-open[data-placed=left] {
+      translate: var(--_slide) 0;
+    }
+    :is(.cl-popover, .cl-menu, .cl-tooltip, .cl-combobox-content):popover-open[data-placed=right] {
+      translate: calc(var(--_slide) * -1) 0;
+    }
+  }
+}
+
+@layer cl.components {
+  .cl-menu {
+    display: none;
+    width: var(--cl-anchor-width, auto);
+    min-width: 8rem;
+    max-height: var(--cl-available-height, none);
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 0.25rem;
+    border-radius: var(--radius);
+    background-color: var(--popover);
+    color: var(--popover-foreground);
+    font-size: 1rem;
+    line-height: 1.5rem;
+    outline: none;
+    box-shadow:
+      0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent),
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1);
+  }
+  .cl-menu:popover-open {
+    display: block;
+  }
+  .cl-menu-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    width: 100%;
+    padding: 0.25rem 0.375rem;
+    border: 0 solid var(--border);
+    border-radius: calc(var(--radius) * 0.8);
+    background-color: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    text-align: start;
+    text-decoration: none;
+    cursor: default;
+    outline: none;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  .cl-menu-item svg {
+    pointer-events: none;
+    flex-shrink: 0;
+  }
+  .cl-menu-item svg:not([class*=size-]) {
+    width: 1rem;
+    height: 1rem;
+  }
+  .cl-menu-item:focus {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
+  .cl-menu-item:not([data-variant=destructive]):focus * {
+    color: var(--accent-foreground);
+  }
+  .cl-menu-item[data-inset] {
+    padding-inline-start: 1.75rem;
+  }
+  .cl-menu-item:disabled,
+  .cl-menu-item[aria-disabled=true] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  .cl-menu-item[data-variant=destructive],
+  .cl-menu-item[data-variant=destructive] > svg {
+    color: var(--destructive);
+  }
+  .cl-menu-item[data-variant=destructive]:focus {
+    background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+    color: var(--destructive);
+  }
+  :where(.dark, [data-theme=dark]) .cl-menu-item[data-variant=destructive]:focus {
+    background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+  }
+  .cl-menu-item:is([role=menuitemcheckbox], [role=menuitemradio]) {
+    padding-inline-end: 2rem;
+    padding-inline-start: 0.375rem;
+  }
+  .cl-menu-item:is([role=menuitemcheckbox], [role=menuitemradio])::after {
+    content: "";
+    position: absolute;
+    inset-inline-end: 0.5rem;
+    width: 1rem;
+    height: 1rem;
+    background-color: currentColor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
+    visibility: hidden;
+  }
+  .cl-menu-item[aria-checked=true]::after {
+    visibility: visible;
+  }
+  .cl-menu-label {
+    padding: 0.25rem 0.375rem;
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-weight: 500;
+  }
+  .cl-menu-label[data-inset] {
+    padding-inline-start: 1.75rem;
+  }
+  .cl-menu-separator {
+    height: 1px;
+    margin: 0.25rem -0.25rem;
+    background-color: var(--border);
+  }
+  .cl-menu-shortcut {
+    margin-inline-start: auto;
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+    line-height: 1rem;
+    letter-spacing: 0.1em;
+  }
+  .cl-menu-item:focus .cl-menu-shortcut {
+    color: var(--accent-foreground);
+  }
+}

package/components/dropdown-menu.min.css

@@ -0,0 +1,2 @@
+/*! cladux-html v0.3.0 | Apache-2.0 | https://cladux.vercel.app/docs/html */
+@layer cl.base,cl.components,cl.utilities;@layer cl.components{.cl-popover,.cl-menu,.cl-tooltip,.cl-combobox-content{--_slide: .5rem;position:fixed;inset:auto;z-index:50;margin:0;border:0 solid var(--border);overflow:visible;opacity:0;scale:.95;transition-property:opacity,scale,translate,display,overlay;transition-duration:.1s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-behavior:allow-discrete}.cl-popover:popover-open,.cl-menu:popover-open,.cl-tooltip:popover-open,.cl-combobox-content:popover-open{opacity:1;scale:1}@starting-style{.cl-popover:popover-open,.cl-menu:popover-open,.cl-tooltip:popover-open,.cl-combobox-content:popover-open{opacity:0;scale:.95}:is(.cl-popover,.cl-menu,.cl-tooltip,.cl-combobox-content):popover-open[data-placed=bottom]{translate:0 calc(var(--_slide) * -1)}:is(.cl-popover,.cl-menu,.cl-tooltip,.cl-combobox-content):popover-open[data-placed=top]{translate:0 var(--_slide)}:is(.cl-popover,.cl-menu,.cl-tooltip,.cl-combobox-content):popover-open[data-placed=left]{translate:var(--_slide) 0}:is(.cl-popover,.cl-menu,.cl-tooltip,.cl-combobox-content):popover-open[data-placed=right]{translate:calc(var(--_slide) * -1) 0}}}@layer cl.components{.cl-menu{display:none;width:var(--cl-anchor-width, auto);min-width:8rem;max-height:var(--cl-available-height, none);overflow-x:hidden;overflow-y:auto;padding:.25rem;border-radius:var(--radius);background-color:var(--popover);color:var(--popover-foreground);font-size:1rem;line-height:1.5rem;outline:none;box-shadow:0 0 0 1px color-mix(in oklab,var(--foreground) 10%,transparent),0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.cl-menu:popover-open{display:block}.cl-menu-item{position:relative;display:flex;align-items:center;gap:.375rem;width:100%;padding:.25rem .375rem;border:0 solid var(--border);border-radius:calc(var(--radius) * .8);background-color:transparent;color:inherit;font:inherit;font-size:.875rem;line-height:1.25rem;text-align:start;text-decoration:none;cursor:default;outline:none;user-select:none;-webkit-user-select:none}.cl-menu-item svg{pointer-events:none;flex-shrink:0}.cl-menu-item svg:not([class*=size-]){width:1rem;height:1rem}.cl-menu-item:focus{background-color:var(--accent);color:var(--accent-foreground)}.cl-menu-item:not([data-variant=destructive]):focus *{color:var(--accent-foreground)}.cl-menu-item[data-inset]{padding-inline-start:1.75rem}.cl-menu-item:disabled,.cl-menu-item[aria-disabled=true]{pointer-events:none;opacity:.5}.cl-menu-item[data-variant=destructive],.cl-menu-item[data-variant=destructive]>svg{color:var(--destructive)}.cl-menu-item[data-variant=destructive]:focus{background-color:color-mix(in oklab,var(--destructive) 10%,transparent);color:var(--destructive)}:where(.dark,[data-theme=dark]) .cl-menu-item[data-variant=destructive]:focus{background-color:color-mix(in oklab,var(--destructive) 20%,transparent)}.cl-menu-item:is([role=menuitemcheckbox],[role=menuitemradio]){padding-inline-end:2rem;padding-inline-start:.375rem}.cl-menu-item:is([role=menuitemcheckbox],[role=menuitemradio]):after{content:"";position:absolute;inset-inline-end:.5rem;width:1rem;height:1rem;background-color:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;visibility:hidden}.cl-menu-item[aria-checked=true]:after{visibility:visible}.cl-menu-label{padding:.25rem .375rem;color:var(--muted-foreground);font-size:.75rem;line-height:1rem;font-weight:500}.cl-menu-label[data-inset]{padding-inline-start:1.75rem}.cl-menu-separator{height:1px;margin:.25rem -.25rem;background-color:var(--border)}.cl-menu-shortcut{margin-inline-start:auto;color:var(--muted-foreground);font-size:.75rem;line-height:1rem;letter-spacing:.1em}.cl-menu-item:focus .cl-menu-shortcut{color:var(--accent-foreground)}}

package/components/input.css

@@ -0,0 +1,71 @@
+/*! cladux-html v0.3.0 | Apache-2.0 | https://cladux.vercel.app/docs/html */
+@layer cl.base, cl.components, cl.utilities;
+
+@layer cl.components {
+  .cl-input {
+    width: 100%;
+    min-width: 0;
+    height: 2rem;
+    padding: 0.25rem 0.625rem;
+    border: 1px solid var(--input);
+    border-radius: var(--radius);
+    background-color: transparent;
+    color: inherit;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    outline: none;
+    transition-property:
+      color,
+      background-color,
+      border-color,
+      outline-color,
+      text-decoration-color,
+      fill,
+      stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-input::placeholder {
+    color: var(--muted-foreground);
+  }
+  .cl-input::file-selector-button {
+    display: inline-flex;
+    height: 1.5rem;
+    border: 0;
+    background-color: transparent;
+    color: var(--foreground);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+  }
+  .cl-input:focus-visible {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  .cl-input:disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.5;
+    background-color: color-mix(in oklab, var(--input) 50%, transparent);
+  }
+  .cl-input[aria-invalid=true] {
+    border-color: var(--destructive);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent);
+  }
+  @media (width >= 48rem) {
+    .cl-input {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
+  }
+  :where(.dark, [data-theme=dark]) .cl-input {
+    background-color: color-mix(in oklab, var(--input) 30%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-input:disabled {
+    background-color: color-mix(in oklab, var(--input) 80%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-input[aria-invalid=true] {
+    border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 40%, transparent);
+  }
+}

package/components/input.min.css

@@ -0,0 +1,2 @@
+/*! cladux-html v0.3.0 | Apache-2.0 | https://cladux.vercel.app/docs/html */
+@layer cl.base,cl.components,cl.utilities;@layer cl.components{.cl-input{width:100%;min-width:0;height:2rem;padding:.25rem .625rem;border:1px solid var(--input);border-radius:var(--radius);background-color:transparent;color:inherit;font-size:1rem;line-height:1.5rem;outline:none;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cl-input::placeholder{color:var(--muted-foreground)}.cl-input::file-selector-button{display:inline-flex;height:1.5rem;border:0;background-color:transparent;color:var(--foreground);font-size:.875rem;line-height:1.25rem;font-weight:500}.cl-input:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}.cl-input:disabled{pointer-events:none;cursor:not-allowed;opacity:.5;background-color:color-mix(in oklab,var(--input) 50%,transparent)}.cl-input[aria-invalid=true]{border-color:var(--destructive);box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 20%,transparent)}@media(width>=48rem){.cl-input{font-size:.875rem;line-height:1.25rem}}:where(.dark,[data-theme=dark]) .cl-input{background-color:color-mix(in oklab,var(--input) 30%,transparent)}:where(.dark,[data-theme=dark]) .cl-input:disabled{background-color:color-mix(in oklab,var(--input) 80%,transparent)}:where(.dark,[data-theme=dark]) .cl-input[aria-invalid=true]{border-color:color-mix(in oklab,var(--destructive) 50%,transparent);box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 40%,transparent)}}