cladux-html 0.1.0 → 0.3.0

package/components/kbd.css

@@ -0,0 +1,34 @@
+/*! 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-kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    width: fit-content;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding-inline: 0.25rem;
+    border-radius: calc(var(--radius) * 0.6);
+    background-color: var(--muted);
+    color: var(--muted-foreground);
+    font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-weight: 500;
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  .cl-kbd svg:not([class*=size-]) {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .cl-kbd-group {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+}

package/components/kbd.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-kbd{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;width:fit-content;min-width:1.25rem;height:1.25rem;padding-inline:.25rem;border-radius:calc(var(--radius) * .6);background-color:var(--muted);color:var(--muted-foreground);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);font-size:.75rem;line-height:1rem;font-weight:500;pointer-events:none;user-select:none;-webkit-user-select:none}.cl-kbd svg:not([class*=size-]){width:.75rem;height:.75rem}.cl-kbd-group{display:inline-flex;align-items:center;gap:.25rem}}

package/components/label.css

@@ -0,0 +1,23 @@
+/*! 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-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1;
+    font-weight: 500;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  :disabled ~ .cl-label {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  :where([data-disabled=true]) .cl-label {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+}

package/components/label.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-label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;line-height:1;font-weight:500;user-select:none;-webkit-user-select:none}:disabled~.cl-label{cursor:not-allowed;opacity:.5}:where([data-disabled=true]) .cl-label{pointer-events:none;opacity:.5}}

package/components/popover.css

@@ -0,0 +1,94 @@
+/*! 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-popover {
+    display: none;
+    flex-direction: column;
+    gap: 0.625rem;
+    width: 18rem;
+    padding: 0.625rem;
+    border-radius: var(--radius);
+    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),
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1);
+  }
+  .cl-popover:popover-open {
+    display: flex;
+  }
+  .cl-popover-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+  .cl-popover-title {
+    margin: 0;
+    font-weight: 500;
+  }
+  .cl-popover-description {
+    margin: 0;
+    color: var(--muted-foreground);
+  }
+}

package/components/popover.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-popover{display:none;flex-direction:column;gap:.625rem;width:18rem;padding:.625rem;border-radius:var(--radius);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),0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.cl-popover:popover-open{display:flex}.cl-popover-header{display:flex;flex-direction:column;gap:.125rem;font-size:.875rem;line-height:1.25rem}.cl-popover-title{margin:0;font-weight:500}.cl-popover-description{margin:0;color:var(--muted-foreground)}}

package/components/select.css

@@ -0,0 +1,89 @@
+/*! 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-select {
+    --_h: 2rem;
+    position: relative;
+    width: fit-content;
+  }
+  .cl-select[data-size=sm] {
+    --_h: 1.75rem;
+  }
+  .cl-select:has(select:disabled) {
+    opacity: 0.5;
+  }
+  .cl-select > select {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 100%;
+    min-width: 0;
+    height: var(--_h);
+    margin: 0;
+    padding: 0.25rem 2rem 0.25rem 0.625rem;
+    border: 1px solid var(--input);
+    border-radius: var(--radius);
+    background-color: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    outline: none;
+    user-select: none;
+    -webkit-user-select: 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-select[data-size=sm] > select {
+    padding-block: 0.125rem;
+    border-radius: min(calc(var(--radius) * 0.8), 10px);
+  }
+  .cl-select > select > :is(option, optgroup) {
+    background-color: Canvas;
+    color: CanvasText;
+  }
+  .cl-select::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    inset-inline-end: 0.625rem;
+    width: 1rem;
+    height: 1rem;
+    translate: 0 -50%;
+    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;
+    pointer-events: none;
+  }
+  .cl-select > select:focus-visible {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  .cl-select > select:disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+  .cl-select > select[aria-invalid=true] {
+    border-color: var(--destructive);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-select > select {
+    background-color: color-mix(in oklab, var(--input) 30%, transparent);
+  }
+  @media (hover: hover) {
+    :where(.dark, [data-theme=dark]) .cl-select > select:hover {
+      background-color: color-mix(in oklab, var(--input) 50%, transparent);
+    }
+  }
+  :where(.dark, [data-theme=dark]) .cl-select > select[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/select.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-select{--_h: 2rem;position:relative;width:fit-content}.cl-select[data-size=sm]{--_h: 1.75rem}.cl-select:has(select:disabled){opacity:.5}.cl-select>select{appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:var(--_h);margin:0;padding:.25rem 2rem .25rem .625rem;border:1px solid var(--input);border-radius:var(--radius);background-color:transparent;color:inherit;font:inherit;font-size:.875rem;line-height:1.25rem;outline:none;user-select:none;-webkit-user-select: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-select[data-size=sm]>select{padding-block:.125rem;border-radius:min(calc(var(--radius) * .8),10px)}.cl-select>select>:is(option,optgroup){background-color:Canvas;color:CanvasText}.cl-select:after{content:"";position:absolute;top:50%;inset-inline-end:.625rem;width:1rem;height:1rem;translate:0 -50%;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;pointer-events:none}.cl-select>select:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}.cl-select>select:disabled{pointer-events:none;cursor:not-allowed}.cl-select>select[aria-invalid=true]{border-color:var(--destructive);box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 20%,transparent)}:where(.dark,[data-theme=dark]) .cl-select>select{background-color:color-mix(in oklab,var(--input) 30%,transparent)}@media(hover:hover){:where(.dark,[data-theme=dark]) .cl-select>select:hover{background-color:color-mix(in oklab,var(--input) 50%,transparent)}}:where(.dark,[data-theme=dark]) .cl-select>select[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/separator.css

@@ -0,0 +1,16 @@
+/*! 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-separator {
+    flex-shrink: 0;
+    width: 100%;
+    height: 1px;
+    background-color: var(--border);
+  }
+  .cl-separator[data-orientation=vertical] {
+    width: 1px;
+    height: auto;
+    align-self: stretch;
+  }
+}

package/components/separator.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-separator{flex-shrink:0;width:100%;height:1px;background-color:var(--border)}.cl-separator[data-orientation=vertical]{width:1px;height:auto;align-self:stretch}}

package/components/sheet.css

@@ -0,0 +1,134 @@
+/*! 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-sheet {
+    --_from: 2.5rem 0;
+    position: fixed;
+    inset: 0 0 0 auto;
+    z-index: 50;
+    gap: 1rem;
+    width: 75%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: 0 solid var(--border);
+    border-left-width: 1px;
+    background-color: var(--popover);
+    background-clip: padding-box;
+    color: var(--popover-foreground);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    outline: none;
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    opacity: 0;
+    translate: var(--_from);
+    transition-property:
+      opacity,
+      translate,
+      display,
+      overlay;
+    transition-duration: 200ms;
+    transition-timing-function: ease-in-out;
+    transition-behavior: allow-discrete;
+  }
+  .cl-sheet[open] {
+    display: flex;
+    flex-direction: column;
+    opacity: 1;
+    translate: 0 0;
+  }
+  @starting-style {
+    .cl-sheet[open] {
+      opacity: 0;
+      translate: var(--_from);
+    }
+  }
+  .cl-sheet[data-side=left] {
+    --_from: -2.5rem 0;
+    inset: 0 auto 0 0;
+    border-left-width: 0;
+    border-right-width: 1px;
+  }
+  .cl-sheet:is([data-side=top], [data-side=bottom]) {
+    width: auto;
+    height: auto;
+    border-left-width: 0;
+  }
+  .cl-sheet[data-side=top] {
+    --_from: 0 -2.5rem;
+    inset: 0 0 auto 0;
+    border-bottom-width: 1px;
+  }
+  .cl-sheet[data-side=bottom] {
+    --_from: 0 2.5rem;
+    inset: auto 0 0 0;
+    border-top-width: 1px;
+  }
+  @media (width >= 40rem) {
+    .cl-sheet:not([data-side=top], [data-side=bottom]) {
+      max-width: 24rem;
+    }
+  }
+  .cl-sheet::backdrop {
+    background-color: rgb(0 0 0 / 0);
+    transition-property:
+      background-color,
+      backdrop-filter,
+      display,
+      overlay;
+    transition-duration: 100ms;
+    transition-behavior: allow-discrete;
+  }
+  .cl-sheet[open]::backdrop {
+    background-color: rgb(0 0 0 / 0.1);
+    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(4px);
+  }
+  @starting-style {
+    .cl-sheet[open]::backdrop {
+      background-color: rgb(0 0 0 / 0);
+      -webkit-backdrop-filter: blur(0);
+      backdrop-filter: blur(0);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cl-sheet,
+    .cl-sheet::backdrop {
+      transition-duration: 0s;
+    }
+  }
+  .cl-sheet-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    padding: 1rem;
+  }
+  .cl-sheet-footer {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: auto;
+    padding: 1rem;
+  }
+  .cl-sheet-title {
+    margin: 0;
+    color: var(--foreground);
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 500;
+  }
+  .cl-sheet-description {
+    margin: 0;
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+  .cl-sheet-close {
+    position: absolute;
+    top: 0.75rem;
+    inset-inline-end: 0.75rem;
+  }
+}

package/components/sheet.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-sheet{--_from: 2.5rem 0;position:fixed;inset:0 0 0 auto;z-index:50;gap:1rem;width:75%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0 solid var(--border);border-left-width:1px;background-color:var(--popover);background-clip:padding-box;color:var(--popover-foreground);font-size:.875rem;line-height:1.25rem;outline:none;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;opacity:0;translate:var(--_from);transition-property:opacity,translate,display,overlay;transition-duration:.2s;transition-timing-function:ease-in-out;transition-behavior:allow-discrete}.cl-sheet[open]{display:flex;flex-direction:column;opacity:1;translate:0 0}@starting-style{.cl-sheet[open]{opacity:0;translate:var(--_from)}}.cl-sheet[data-side=left]{--_from: -2.5rem 0;inset:0 auto 0 0;border-left-width:0;border-right-width:1px}.cl-sheet:is([data-side=top],[data-side=bottom]){width:auto;height:auto;border-left-width:0}.cl-sheet[data-side=top]{--_from: 0 -2.5rem;inset:0 0 auto;border-bottom-width:1px}.cl-sheet[data-side=bottom]{--_from: 0 2.5rem;inset:auto 0 0;border-top-width:1px}@media(width>=40rem){.cl-sheet:not([data-side=top],[data-side=bottom]){max-width:24rem}}.cl-sheet::backdrop{background-color:#0000;transition-property:background-color,backdrop-filter,display,overlay;transition-duration:.1s;transition-behavior:allow-discrete}.cl-sheet[open]::backdrop{background-color:#0000001a;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@starting-style{.cl-sheet[open]::backdrop{background-color:#0000;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}@media(prefers-reduced-motion:reduce){.cl-sheet,.cl-sheet::backdrop{transition-duration:0s}}.cl-sheet-header{display:flex;flex-direction:column;gap:.125rem;padding:1rem}.cl-sheet-footer{display:flex;flex-direction:column;gap:.5rem;margin-top:auto;padding:1rem}.cl-sheet-title{margin:0;color:var(--foreground);font-size:1rem;line-height:1.5rem;font-weight:500}.cl-sheet-description{margin:0;color:var(--muted-foreground);font-size:.875rem;line-height:1.25rem}.cl-sheet-close{position:absolute;top:.75rem;inset-inline-end:.75rem}}

package/components/skeleton.css

@@ -0,0 +1,15 @@
+/*! cladux-html v0.3.0 | Apache-2.0 | https://cladux.vercel.app/docs/html */
+@layer cl.base, cl.components, cl.utilities;
+
+@layer cl.components {
+  @keyframes cl-pulse {
+    50% {
+      opacity: 0.5;
+    }
+  }
+  .cl-skeleton {
+    border-radius: calc(var(--radius) * 0.8);
+    background-color: var(--muted);
+    animation: cl-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+}

package/components/skeleton.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{@keyframes cl-pulse{50%{opacity:.5}}.cl-skeleton{border-radius:calc(var(--radius) * .8);background-color:var(--muted);animation:cl-pulse 2s cubic-bezier(.4,0,.6,1) infinite}}

package/components/slider.css

@@ -0,0 +1,88 @@
+/*! 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-slider {
+    appearance: none;
+    -webkit-appearance: none;
+    display: block;
+    width: 100%;
+    height: 1.75rem;
+    margin: -0.75rem 0;
+    padding: 0;
+    background: transparent;
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+    outline: none;
+  }
+  .cl-slider:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  .cl-slider::-webkit-slider-runnable-track {
+    height: 0.25rem;
+    border-radius: calc(infinity * 1px);
+    background:
+      linear-gradient(
+        to right,
+        var(--primary) var(--cl-slider-fill, 0%),
+        var(--muted) var(--cl-slider-fill, 0%));
+  }
+  .cl-slider:dir(rtl)::-webkit-slider-runnable-track {
+    background:
+      linear-gradient(
+        to left,
+        var(--primary) var(--cl-slider-fill, 0%),
+        var(--muted) var(--cl-slider-fill, 0%));
+  }
+  .cl-slider::-moz-range-track {
+    height: 0.25rem;
+    border-radius: calc(infinity * 1px);
+    background-color: var(--muted);
+  }
+  .cl-slider::-moz-range-progress {
+    height: 0.25rem;
+    border-radius: calc(infinity * 1px);
+    background-color: var(--primary);
+  }
+  .cl-slider::-webkit-slider-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+    box-sizing: border-box;
+    width: 0.75rem;
+    height: 0.75rem;
+    margin-top: -0.25rem;
+    border: 1px solid var(--ring);
+    border-radius: calc(infinity * 1px);
+    background-color: white;
+    transition-property: color, box-shadow;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-slider::-moz-range-thumb {
+    box-sizing: border-box;
+    width: 0.75rem;
+    height: 0.75rem;
+    border: 1px solid var(--ring);
+    border-radius: calc(infinity * 1px);
+    background-color: white;
+    transition-property: color, box-shadow;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-slider:is(:focus-visible, :active)::-webkit-slider-thumb {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  .cl-slider:is(:focus-visible, :active)::-moz-range-thumb {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  @media (hover: hover) {
+    .cl-slider::-webkit-slider-thumb:hover {
+      box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+    .cl-slider::-moz-range-thumb:hover {
+      box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+}

package/components/slider.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-slider{appearance:none;-webkit-appearance:none;display:block;width:100%;height:1.75rem;margin:-.75rem 0;padding:0;background:transparent;touch-action:none;-webkit-user-select:none;user-select:none;outline:none}.cl-slider:disabled{pointer-events:none;opacity:.5}.cl-slider::-webkit-slider-runnable-track{height:.25rem;border-radius:calc(infinity * 1px);background:linear-gradient(to right,var(--primary) var(--cl-slider-fill, 0%),var(--muted) var(--cl-slider-fill, 0%))}.cl-slider:dir(rtl)::-webkit-slider-runnable-track{background:linear-gradient(to left,var(--primary) var(--cl-slider-fill, 0%),var(--muted) var(--cl-slider-fill, 0%))}.cl-slider::-moz-range-track{height:.25rem;border-radius:calc(infinity * 1px);background-color:var(--muted)}.cl-slider::-moz-range-progress{height:.25rem;border-radius:calc(infinity * 1px);background-color:var(--primary)}.cl-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:.75rem;height:.75rem;margin-top:-.25rem;border:1px solid var(--ring);border-radius:calc(infinity * 1px);background-color:#fff;transition-property:color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cl-slider::-moz-range-thumb{box-sizing:border-box;width:.75rem;height:.75rem;border:1px solid var(--ring);border-radius:calc(infinity * 1px);background-color:#fff;transition-property:color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cl-slider:is(:focus-visible,:active)::-webkit-slider-thumb{box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}.cl-slider:is(:focus-visible,:active)::-moz-range-thumb{box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}@media(hover:hover){.cl-slider::-webkit-slider-thumb:hover{box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}.cl-slider::-moz-range-thumb:hover{box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}}}

package/components/switch.css

@@ -0,0 +1,84 @@
+/*! 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-switch {
+    --_w: 32px;
+    --_h: 18.4px;
+    --_thumb: 1rem;
+    appearance: none;
+    -webkit-appearance: none;
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    width: var(--_w);
+    height: var(--_h);
+    margin: 0;
+    border: 1px solid transparent;
+    border-radius: calc(infinity * 1px);
+    background-color: var(--input);
+    cursor: default;
+    outline: none;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-switch[data-size=sm] {
+    --_w: 24px;
+    --_h: 14px;
+    --_thumb: 0.75rem;
+  }
+  .cl-switch::before {
+    content: "";
+    display: block;
+    width: var(--_thumb);
+    height: var(--_thumb);
+    border-radius: calc(infinity * 1px);
+    background-color: var(--background);
+    pointer-events: none;
+    transition-property:
+      transform,
+      translate,
+      scale,
+      rotate;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-switch::after {
+    content: "";
+    position: absolute;
+    inset: -0.5rem -0.75rem;
+  }
+  .cl-switch:checked {
+    background-color: var(--primary);
+  }
+  .cl-switch:checked::before {
+    translate: calc(100% - 2px) 0;
+  }
+  .cl-switch:focus-visible {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  .cl-switch:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .cl-switch[aria-invalid=true] {
+    border-color: var(--destructive);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-switch:not(:checked) {
+    background-color: color-mix(in oklab, var(--input) 80%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-switch::before {
+    background-color: var(--foreground);
+  }
+  :where(.dark, [data-theme=dark]) .cl-switch:checked::before {
+    background-color: var(--primary-foreground);
+  }
+  :where(.dark, [data-theme=dark]) .cl-switch[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/switch.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-switch{--_w: 32px;--_h: 18.4px;--_thumb: 1rem;appearance:none;-webkit-appearance:none;position:relative;display:inline-flex;flex-shrink:0;align-items:center;width:var(--_w);height:var(--_h);margin:0;border:1px solid transparent;border-radius:calc(infinity * 1px);background-color:var(--input);cursor:default;outline:none;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cl-switch[data-size=sm]{--_w: 24px;--_h: 14px;--_thumb: .75rem}.cl-switch:before{content:"";display:block;width:var(--_thumb);height:var(--_thumb);border-radius:calc(infinity * 1px);background-color:var(--background);pointer-events:none;transition-property:transform,translate,scale,rotate;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cl-switch:after{content:"";position:absolute;inset:-.5rem -.75rem}.cl-switch:checked{background-color:var(--primary)}.cl-switch:checked:before{translate:calc(100% - 2px) 0}.cl-switch:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}.cl-switch:disabled{cursor:not-allowed;opacity:.5}.cl-switch[aria-invalid=true]{border-color:var(--destructive);box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 20%,transparent)}:where(.dark,[data-theme=dark]) .cl-switch:not(:checked){background-color:color-mix(in oklab,var(--input) 80%,transparent)}:where(.dark,[data-theme=dark]) .cl-switch:before{background-color:var(--foreground)}:where(.dark,[data-theme=dark]) .cl-switch:checked:before{background-color:var(--primary-foreground)}:where(.dark,[data-theme=dark]) .cl-switch[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)}}