cladux-html 0.1.0 → 0.3.0

package/components/accordion.css

@@ -0,0 +1,103 @@
+/*! 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-accordion {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+  }
+  .cl-accordion-item:not(:last-child) {
+    border-bottom: 1px solid var(--border);
+  }
+  .cl-accordion-trigger {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 0.625rem 0;
+    border: 1px solid transparent;
+    border-radius: var(--radius);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    text-align: start;
+    outline: none;
+    cursor: pointer;
+    list-style: none;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-accordion-trigger::-webkit-details-marker {
+    display: none;
+  }
+  @media (hover: hover) {
+    .cl-accordion-trigger:hover {
+      text-decoration: underline;
+    }
+  }
+  .cl-accordion-trigger:focus-visible {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  .cl-accordion-item[data-disabled] > .cl-accordion-trigger {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  .cl-accordion-trigger::after {
+    content: "";
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    margin-inline-start: auto;
+    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;
+  }
+  .cl-accordion-item[open] > .cl-accordion-trigger::after {
+    rotate: 180deg;
+  }
+  .cl-accordion-item::details-content {
+    display: grid;
+    grid-template-rows: 0fr;
+    overflow: hidden;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    transition: grid-template-rows 200ms ease-out, content-visibility 200ms ease-out allow-discrete;
+  }
+  .cl-accordion-item[open]::details-content {
+    grid-template-rows: 1fr;
+  }
+  .cl-accordion-item[data-closing]::details-content {
+    transition: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cl-accordion-item::details-content {
+      transition: none;
+    }
+  }
+  .cl-accordion-content {
+    min-height: 0;
+    overflow: hidden;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+  .cl-accordion-content::after {
+    content: "";
+    display: block;
+    height: 0.625rem;
+  }
+  .cl-accordion-content a {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+  @media (hover: hover) {
+    .cl-accordion-content a:hover {
+      color: var(--foreground);
+    }
+  }
+  .cl-accordion-content p:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+}

package/components/accordion.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-accordion{display:flex;width:100%;flex-direction:column}.cl-accordion-item:not(:last-child){border-bottom:1px solid var(--border)}.cl-accordion-trigger{position:relative;display:flex;flex:1;align-items:flex-start;justify-content:space-between;padding:.625rem 0;border:1px solid transparent;border-radius:var(--radius);font-size:.875rem;line-height:1.25rem;font-weight:500;text-align:start;outline:none;cursor:pointer;list-style:none;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cl-accordion-trigger::-webkit-details-marker{display:none}@media(hover:hover){.cl-accordion-trigger:hover{text-decoration:underline}}.cl-accordion-trigger:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}.cl-accordion-item[data-disabled]>.cl-accordion-trigger{pointer-events:none;opacity:.5}.cl-accordion-trigger:after{content:"";flex-shrink:0;width:1rem;height:1rem;margin-inline-start:auto;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}.cl-accordion-item[open]>.cl-accordion-trigger:after{rotate:180deg}.cl-accordion-item::details-content{display:grid;grid-template-rows:0fr;overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:grid-template-rows .2s ease-out,content-visibility .2s ease-out allow-discrete}.cl-accordion-item[open]::details-content{grid-template-rows:1fr}.cl-accordion-item[data-closing]::details-content{transition:none}@media(prefers-reduced-motion:reduce){.cl-accordion-item::details-content{transition:none}}.cl-accordion-content{min-height:0;overflow:hidden;font-size:.875rem;line-height:1.25rem}.cl-accordion-content:after{content:"";display:block;height:.625rem}.cl-accordion-content a{text-decoration:underline;text-underline-offset:3px}@media(hover:hover){.cl-accordion-content a:hover{color:var(--foreground)}}.cl-accordion-content p:not(:last-child){margin-bottom:1rem}}

package/components/badge.css

@@ -0,0 +1,100 @@
+/*! 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-badge {
+    --_ring: color-mix(in oklab, var(--ring) 50%, transparent);
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    width: fit-content;
+    height: 1.25rem;
+    overflow: hidden;
+    padding: 0.125rem 0.5rem;
+    border: 1px solid transparent;
+    border-radius: calc(var(--radius) * 2.6);
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-badge:has([data-icon=inline-start]) {
+    padding-inline-start: 0.375rem;
+  }
+  .cl-badge:has([data-icon=inline-end]) {
+    padding-inline-end: 0.375rem;
+  }
+  .cl-badge > svg {
+    pointer-events: none;
+    width: 0.75rem !important;
+    height: 0.75rem !important;
+  }
+  .cl-badge:not([data-variant]),
+  .cl-badge[data-variant=default] {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+  .cl-badge[data-variant=secondary] {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+  }
+  .cl-badge[data-variant=destructive] {
+    --_ring: color-mix(in oklab, var(--destructive) 20%, transparent);
+    background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+    color: var(--destructive);
+  }
+  .cl-badge[data-variant=outline] {
+    border-color: var(--border);
+    color: var(--foreground);
+  }
+  .cl-badge[data-variant=link] {
+    color: var(--primary);
+    text-underline-offset: 4px;
+  }
+  @media (hover: hover) {
+    a.cl-badge:not([data-variant]):hover,
+    a.cl-badge[data-variant=default]:hover {
+      background-color: color-mix(in oklab, var(--primary) 80%, transparent);
+    }
+    a.cl-badge[data-variant=secondary]:hover {
+      background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+    }
+    a.cl-badge[data-variant=destructive]:hover {
+      background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+    a.cl-badge[data-variant=outline]:hover,
+    .cl-badge[data-variant=ghost]:hover {
+      background-color: var(--muted);
+      color: var(--muted-foreground);
+    }
+    .cl-badge[data-variant=link]:hover {
+      text-decoration-line: underline;
+    }
+  }
+  :where(.dark, [data-theme=dark]) .cl-badge[data-variant=destructive] {
+    --_ring: color-mix(in oklab, var(--destructive) 40%, transparent);
+    background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+  }
+  @media (hover: hover) {
+    :where(.dark, [data-theme=dark]) .cl-badge[data-variant=ghost]:hover {
+      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+    }
+  }
+  .cl-badge:focus-visible {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px var(--_ring);
+  }
+  .cl-badge[aria-invalid=true] {
+    --_ring: color-mix(in oklab, var(--destructive) 20%, transparent);
+    border-color: var(--destructive);
+  }
+  :where(.dark, [data-theme=dark]) .cl-badge[aria-invalid=true] {
+    --_ring: color-mix(in oklab, var(--destructive) 40%, transparent);
+  }
+}

package/components/badge.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-badge{--_ring: color-mix(in oklab, var(--ring) 50%, transparent);display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:.25rem;width:fit-content;height:1.25rem;overflow:hidden;padding:.125rem .5rem;border:1px solid transparent;border-radius:calc(var(--radius) * 2.6);font-size:.75rem;line-height:1rem;font-weight:500;white-space:nowrap;text-decoration:none;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cl-badge:has([data-icon=inline-start]){padding-inline-start:.375rem}.cl-badge:has([data-icon=inline-end]){padding-inline-end:.375rem}.cl-badge>svg{pointer-events:none;width:.75rem!important;height:.75rem!important}.cl-badge:not([data-variant]),.cl-badge[data-variant=default]{background-color:var(--primary);color:var(--primary-foreground)}.cl-badge[data-variant=secondary]{background-color:var(--secondary);color:var(--secondary-foreground)}.cl-badge[data-variant=destructive]{--_ring: color-mix(in oklab, var(--destructive) 20%, transparent);background-color:color-mix(in oklab,var(--destructive) 10%,transparent);color:var(--destructive)}.cl-badge[data-variant=outline]{border-color:var(--border);color:var(--foreground)}.cl-badge[data-variant=link]{color:var(--primary);text-underline-offset:4px}@media(hover:hover){a.cl-badge:not([data-variant]):hover,a.cl-badge[data-variant=default]:hover{background-color:color-mix(in oklab,var(--primary) 80%,transparent)}a.cl-badge[data-variant=secondary]:hover{background-color:color-mix(in oklab,var(--secondary) 80%,transparent)}a.cl-badge[data-variant=destructive]:hover{background-color:color-mix(in oklab,var(--destructive) 20%,transparent)}a.cl-badge[data-variant=outline]:hover,.cl-badge[data-variant=ghost]:hover{background-color:var(--muted);color:var(--muted-foreground)}.cl-badge[data-variant=link]:hover{text-decoration-line:underline}}:where(.dark,[data-theme=dark]) .cl-badge[data-variant=destructive]{--_ring: color-mix(in oklab, var(--destructive) 40%, transparent);background-color:color-mix(in oklab,var(--destructive) 20%,transparent)}@media(hover:hover){:where(.dark,[data-theme=dark]) .cl-badge[data-variant=ghost]:hover{background-color:color-mix(in oklab,var(--muted) 50%,transparent)}}.cl-badge:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px var(--_ring)}.cl-badge[aria-invalid=true]{--_ring: color-mix(in oklab, var(--destructive) 20%, transparent);border-color:var(--destructive)}:where(.dark,[data-theme=dark]) .cl-badge[aria-invalid=true]{--_ring: color-mix(in oklab, var(--destructive) 40%, transparent)}}

package/components/button.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-button {
+    --_h: 2rem;
+    --_px: 0.625rem;
+    --_px-icon: 0.5rem;
+    --_gap: 0.375rem;
+    --_svg: 1rem;
+    --_ring: color-mix(in oklab, var(--ring) 50%, transparent);
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    gap: var(--_gap);
+    height: var(--_h);
+    padding: 0 var(--_px);
+    border: 1px solid transparent;
+    border-radius: var(--radius);
+    background-color: transparent;
+    background-clip: padding-box;
+    color: inherit;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    outline: none;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .cl-button:has([data-icon=inline-start]) {
+    padding-inline-start: var(--_px-icon);
+  }
+  .cl-button:has([data-icon=inline-end]) {
+    padding-inline-end: var(--_px-icon);
+  }
+  .cl-button svg {
+    pointer-events: none;
+    flex-shrink: 0;
+  }
+  .cl-button svg:not([class*=size-]) {
+    width: var(--_svg);
+    height: var(--_svg);
+  }
+  .cl-button:active:not([aria-haspopup]) {
+    translate: 0 1px;
+  }
+  .cl-button:disabled,
+  .cl-button[aria-disabled=true] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  .cl-button:not([data-variant]),
+  .cl-button[data-variant=default] {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+  .cl-button[data-variant=outline] {
+    border-color: var(--border);
+    background-color: var(--background);
+  }
+  .cl-button[data-variant=secondary] {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+  }
+  .cl-button[data-variant=destructive] {
+    --_ring: color-mix(in oklab, var(--destructive) 20%, transparent);
+    background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+    color: var(--destructive);
+  }
+  .cl-button[data-variant=link] {
+    color: var(--primary);
+    text-underline-offset: 4px;
+  }
+  .cl-button:is([data-variant=outline], [data-variant=ghost])[aria-expanded=true] {
+    background-color: var(--muted);
+    color: var(--foreground);
+  }
+  @media (hover: hover) {
+    .cl-button:not([data-variant]):hover,
+    .cl-button[data-variant=default]:hover {
+      background-color: color-mix(in oklab, var(--primary) 80%, transparent);
+    }
+    .cl-button:is([data-variant=outline], [data-variant=ghost]):hover {
+      background-color: var(--muted);
+      color: var(--foreground);
+    }
+    .cl-button[data-variant=secondary]:hover {
+      background-color: color-mix(in oklch, var(--secondary), var(--foreground) 5%);
+    }
+    .cl-button[data-variant=destructive]:hover {
+      background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+    .cl-button[data-variant=link]:hover {
+      text-decoration-line: underline;
+    }
+  }
+  :where(.dark, [data-theme=dark]) .cl-button[data-variant=outline] {
+    border-color: var(--input);
+    background-color: color-mix(in oklab, var(--input) 30%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-button[data-variant=destructive] {
+    --_ring: color-mix(in oklab, var(--destructive) 40%, transparent);
+    background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+  }
+  @media (hover: hover) {
+    :where(.dark, [data-theme=dark]) .cl-button[data-variant=outline]:hover {
+      background-color: color-mix(in oklab, var(--input) 50%, transparent);
+    }
+    :where(.dark, [data-theme=dark]) .cl-button[data-variant=ghost]:hover {
+      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+    }
+    :where(.dark, [data-theme=dark]) .cl-button[data-variant=destructive]:hover {
+      background-color: color-mix(in oklab, var(--destructive) 30%, transparent);
+    }
+  }
+  .cl-button:focus-visible {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px var(--_ring);
+  }
+  .cl-button[data-variant=destructive]:focus-visible {
+    border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+  }
+  .cl-button[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-button[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-button[data-size=xs] {
+    --_h: 1.5rem;
+    --_px: 0.5rem;
+    --_px-icon: 0.375rem;
+    --_gap: 0.25rem;
+    --_svg: 0.75rem;
+    border-radius: min(calc(var(--radius) * 0.8), 10px);
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+  .cl-button[data-size=sm] {
+    --_h: 1.75rem;
+    --_px-icon: 0.375rem;
+    --_gap: 0.25rem;
+    --_svg: 0.875rem;
+    border-radius: min(calc(var(--radius) * 0.8), 12px);
+    font-size: 0.8rem;
+    line-height: inherit;
+  }
+  .cl-button[data-size=lg] {
+    --_h: 2.25rem;
+  }
+  .cl-button[data-size^=icon] {
+    --_px: 0;
+    --_px-icon: 0;
+    --_gap: normal;
+    width: var(--_h);
+  }
+  .cl-button[data-size=icon-xs] {
+    --_h: 1.5rem;
+    --_svg: 0.75rem;
+    border-radius: min(calc(var(--radius) * 0.8), 10px);
+  }
+  .cl-button[data-size=icon-sm] {
+    --_h: 1.75rem;
+    border-radius: min(calc(var(--radius) * 0.8), 12px);
+  }
+  .cl-button[data-size=icon-lg] {
+    --_h: 2.25rem;
+  }
+}

package/components/button.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-button{--_h: 2rem;--_px: .625rem;--_px-icon: .5rem;--_gap: .375rem;--_svg: 1rem;--_ring: color-mix(in oklab, var(--ring) 50%, transparent);display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:var(--_gap);height:var(--_h);padding:0 var(--_px);border:1px solid transparent;border-radius:var(--radius);background-color:transparent;background-clip:padding-box;color:inherit;font-size:.875rem;line-height:1.25rem;font-weight:500;white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;-webkit-user-select:none;outline:none;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cl-button:has([data-icon=inline-start]){padding-inline-start:var(--_px-icon)}.cl-button:has([data-icon=inline-end]){padding-inline-end:var(--_px-icon)}.cl-button svg{pointer-events:none;flex-shrink:0}.cl-button svg:not([class*=size-]){width:var(--_svg);height:var(--_svg)}.cl-button:active:not([aria-haspopup]){translate:0 1px}.cl-button:disabled,.cl-button[aria-disabled=true]{pointer-events:none;opacity:.5}.cl-button:not([data-variant]),.cl-button[data-variant=default]{background-color:var(--primary);color:var(--primary-foreground)}.cl-button[data-variant=outline]{border-color:var(--border);background-color:var(--background)}.cl-button[data-variant=secondary]{background-color:var(--secondary);color:var(--secondary-foreground)}.cl-button[data-variant=destructive]{--_ring: color-mix(in oklab, var(--destructive) 20%, transparent);background-color:color-mix(in oklab,var(--destructive) 10%,transparent);color:var(--destructive)}.cl-button[data-variant=link]{color:var(--primary);text-underline-offset:4px}.cl-button:is([data-variant=outline],[data-variant=ghost])[aria-expanded=true]{background-color:var(--muted);color:var(--foreground)}@media(hover:hover){.cl-button:not([data-variant]):hover,.cl-button[data-variant=default]:hover{background-color:color-mix(in oklab,var(--primary) 80%,transparent)}.cl-button:is([data-variant=outline],[data-variant=ghost]):hover{background-color:var(--muted);color:var(--foreground)}.cl-button[data-variant=secondary]:hover{background-color:color-mix(in oklch,var(--secondary),var(--foreground) 5%)}.cl-button[data-variant=destructive]:hover{background-color:color-mix(in oklab,var(--destructive) 20%,transparent)}.cl-button[data-variant=link]:hover{text-decoration-line:underline}}:where(.dark,[data-theme=dark]) .cl-button[data-variant=outline]{border-color:var(--input);background-color:color-mix(in oklab,var(--input) 30%,transparent)}:where(.dark,[data-theme=dark]) .cl-button[data-variant=destructive]{--_ring: color-mix(in oklab, var(--destructive) 40%, transparent);background-color:color-mix(in oklab,var(--destructive) 20%,transparent)}@media(hover:hover){:where(.dark,[data-theme=dark]) .cl-button[data-variant=outline]:hover{background-color:color-mix(in oklab,var(--input) 50%,transparent)}:where(.dark,[data-theme=dark]) .cl-button[data-variant=ghost]:hover{background-color:color-mix(in oklab,var(--muted) 50%,transparent)}:where(.dark,[data-theme=dark]) .cl-button[data-variant=destructive]:hover{background-color:color-mix(in oklab,var(--destructive) 30%,transparent)}}.cl-button:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px var(--_ring)}.cl-button[data-variant=destructive]:focus-visible{border-color:color-mix(in oklab,var(--destructive) 40%,transparent)}.cl-button[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-button[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-button[data-size=xs]{--_h: 1.5rem;--_px: .5rem;--_px-icon: .375rem;--_gap: .25rem;--_svg: .75rem;border-radius:min(calc(var(--radius) * .8),10px);font-size:.75rem;line-height:1rem}.cl-button[data-size=sm]{--_h: 1.75rem;--_px-icon: .375rem;--_gap: .25rem;--_svg: .875rem;border-radius:min(calc(var(--radius) * .8),12px);font-size:.8rem;line-height:inherit}.cl-button[data-size=lg]{--_h: 2.25rem}.cl-button[data-size^=icon]{--_px: 0;--_px-icon: 0;--_gap: normal;width:var(--_h)}.cl-button[data-size=icon-xs]{--_h: 1.5rem;--_svg: .75rem;border-radius:min(calc(var(--radius) * .8),10px)}.cl-button[data-size=icon-sm]{--_h: 1.75rem;border-radius:min(calc(var(--radius) * .8),12px)}.cl-button[data-size=icon-lg]{--_h: 2.25rem}}

package/components/card.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-card {
+    --card-spacing: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: var(--card-spacing);
+    overflow: hidden;
+    padding-block: var(--card-spacing);
+    border-radius: calc(var(--radius) * 1.4);
+    background-color: var(--card);
+    color: var(--card-foreground);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent);
+  }
+  .cl-card[data-size=sm] {
+    --card-spacing: 0.75rem;
+  }
+  .cl-card:has(.cl-card-footer) {
+    padding-bottom: 0;
+  }
+  .cl-card:has(> img:first-child) {
+    padding-top: 0;
+  }
+  .cl-card > img:first-child {
+    border-top-left-radius: calc(var(--radius) * 1.4);
+    border-top-right-radius: calc(var(--radius) * 1.4);
+  }
+  .cl-card > img:last-child {
+    border-bottom-left-radius: calc(var(--radius) * 1.4);
+    border-bottom-right-radius: calc(var(--radius) * 1.4);
+  }
+  .cl-card-header {
+    container: card-header / inline-size;
+    display: grid;
+    grid-auto-rows: min-content;
+    align-items: flex-start;
+    gap: 0.25rem;
+    padding-inline: var(--card-spacing);
+    border-top-left-radius: calc(var(--radius) * 1.4);
+    border-top-right-radius: calc(var(--radius) * 1.4);
+  }
+  .cl-card-header:has(.cl-card-action) {
+    grid-template-columns: 1fr auto;
+  }
+  .cl-card-header:has(.cl-card-description) {
+    grid-template-rows: auto auto;
+  }
+  .cl-card-header.border-b,
+  .cl-card-header[data-border] {
+    padding-bottom: var(--card-spacing);
+    border-bottom-width: 1px;
+  }
+  .cl-card-title {
+    font-size: 1rem;
+    line-height: 1.375;
+    font-weight: 500;
+  }
+  .cl-card[data-size=sm] .cl-card-title {
+    font-size: 0.875rem;
+  }
+  .cl-card-description {
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+  .cl-card-action {
+    grid-column-start: 2;
+    grid-row: 1 / span 2;
+    align-self: flex-start;
+    justify-self: flex-end;
+  }
+  .cl-card-content {
+    padding-inline: var(--card-spacing);
+  }
+  .cl-card-footer {
+    display: flex;
+    align-items: center;
+    padding: var(--card-spacing);
+    border-top-width: 1px;
+    border-bottom-left-radius: calc(var(--radius) * 1.4);
+    border-bottom-right-radius: calc(var(--radius) * 1.4);
+    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+  }
+}

package/components/card.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-card{--card-spacing: 1rem;display:flex;flex-direction:column;gap:var(--card-spacing);overflow:hidden;padding-block:var(--card-spacing);border-radius:calc(var(--radius) * 1.4);background-color:var(--card);color:var(--card-foreground);font-size:.875rem;line-height:1.25rem;box-shadow:0 0 0 1px color-mix(in oklab,var(--foreground) 10%,transparent)}.cl-card[data-size=sm]{--card-spacing: .75rem}.cl-card:has(.cl-card-footer){padding-bottom:0}.cl-card:has(>img:first-child){padding-top:0}.cl-card>img:first-child{border-top-left-radius:calc(var(--radius) * 1.4);border-top-right-radius:calc(var(--radius) * 1.4)}.cl-card>img:last-child{border-bottom-left-radius:calc(var(--radius) * 1.4);border-bottom-right-radius:calc(var(--radius) * 1.4)}.cl-card-header{container:card-header / inline-size;display:grid;grid-auto-rows:min-content;align-items:flex-start;gap:.25rem;padding-inline:var(--card-spacing);border-top-left-radius:calc(var(--radius) * 1.4);border-top-right-radius:calc(var(--radius) * 1.4)}.cl-card-header:has(.cl-card-action){grid-template-columns:1fr auto}.cl-card-header:has(.cl-card-description){grid-template-rows:auto auto}.cl-card-header.border-b,.cl-card-header[data-border]{padding-bottom:var(--card-spacing);border-bottom-width:1px}.cl-card-title{font-size:1rem;line-height:1.375;font-weight:500}.cl-card[data-size=sm] .cl-card-title{font-size:.875rem}.cl-card-description{color:var(--muted-foreground);font-size:.875rem;line-height:1.25rem}.cl-card-action{grid-column-start:2;grid-row:1 / span 2;align-self:flex-start;justify-self:flex-end}.cl-card-content{padding-inline:var(--card-spacing)}.cl-card-footer{display:flex;align-items:center;padding:var(--card-spacing);border-top-width:1px;border-bottom-left-radius:calc(var(--radius) * 1.4);border-bottom-right-radius:calc(var(--radius) * 1.4);background-color:color-mix(in oklab,var(--muted) 50%,transparent)}}

package/components/carousel.css

@@ -0,0 +1,75 @@
+/*! 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-carousel {
+    --cl-carousel-per-view: 1;
+    --cl-carousel-gap: 1rem;
+    position: relative;
+  }
+  .cl-carousel-content {
+    display: flex;
+    gap: var(--cl-carousel-gap);
+    overflow: auto hidden;
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    border-radius: var(--radius);
+    outline: none;
+  }
+  .cl-carousel-content::-webkit-scrollbar {
+    display: none;
+  }
+  .cl-carousel-content:focus-visible {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  .cl-carousel-content[data-dragging] {
+    scroll-snap-type: none;
+    cursor: grabbing;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .cl-carousel-item {
+    flex: 0 0 calc((100% - (var(--cl-carousel-per-view) - 1) * var(--cl-carousel-gap)) / var(--cl-carousel-per-view));
+    min-width: 0;
+    scroll-snap-align: start;
+  }
+  .cl-carousel[data-orientation=vertical] .cl-carousel-content {
+    flex-direction: column;
+    overflow: hidden auto;
+    overscroll-behavior-x: auto;
+    overscroll-behavior-y: contain;
+    scroll-snap-type: y mandatory;
+  }
+  .cl-carousel :is(.cl-carousel-previous, .cl-carousel-next) {
+    position: absolute;
+    inset-block: 0;
+    margin-block: auto;
+    border-radius: calc(infinity * 1px);
+    touch-action: manipulation;
+  }
+  .cl-carousel .cl-button:is(.cl-carousel-previous, .cl-carousel-next) {
+    border-radius: calc(infinity * 1px);
+  }
+  .cl-carousel-previous {
+    inset-inline-start: -3rem;
+  }
+  .cl-carousel-next {
+    inset-inline-end: -3rem;
+  }
+  .cl-carousel:not([data-orientation=vertical]) :is(.cl-carousel-previous, .cl-carousel-next):dir(rtl) svg {
+    rotate: 180deg;
+  }
+  .cl-carousel[data-orientation=vertical] :is(.cl-carousel-previous, .cl-carousel-next) {
+    inset: auto auto auto 50%;
+    margin: 0;
+    translate: -50% 0;
+    rotate: 90deg;
+  }
+  .cl-carousel[data-orientation=vertical] .cl-carousel-previous {
+    top: -3rem;
+  }
+  .cl-carousel[data-orientation=vertical] .cl-carousel-next {
+    bottom: -3rem;
+  }
+}

package/components/carousel.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-carousel{--cl-carousel-per-view: 1;--cl-carousel-gap: 1rem;position:relative}.cl-carousel-content{display:flex;gap:var(--cl-carousel-gap);overflow:auto hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--radius);outline:none}.cl-carousel-content::-webkit-scrollbar{display:none}.cl-carousel-content:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}.cl-carousel-content[data-dragging]{scroll-snap-type:none;cursor:grabbing;-webkit-user-select:none;user-select:none}.cl-carousel-item{flex:0 0 calc((100% - (var(--cl-carousel-per-view) - 1) * var(--cl-carousel-gap)) / var(--cl-carousel-per-view));min-width:0;scroll-snap-align:start}.cl-carousel[data-orientation=vertical] .cl-carousel-content{flex-direction:column;overflow:hidden auto;overscroll-behavior-x:auto;overscroll-behavior-y:contain;scroll-snap-type:y mandatory}.cl-carousel :is(.cl-carousel-previous,.cl-carousel-next){position:absolute;inset-block:0;margin-block:auto;border-radius:calc(infinity * 1px);touch-action:manipulation}.cl-carousel .cl-button:is(.cl-carousel-previous,.cl-carousel-next){border-radius:calc(infinity * 1px)}.cl-carousel-previous{inset-inline-start:-3rem}.cl-carousel-next{inset-inline-end:-3rem}.cl-carousel:not([data-orientation=vertical]) :is(.cl-carousel-previous,.cl-carousel-next):dir(rtl) svg{rotate:180deg}.cl-carousel[data-orientation=vertical] :is(.cl-carousel-previous,.cl-carousel-next){inset:auto auto auto 50%;margin:0;translate:-50% 0;rotate:90deg}.cl-carousel[data-orientation=vertical] .cl-carousel-previous{top:-3rem}.cl-carousel[data-orientation=vertical] .cl-carousel-next{bottom:-3rem}}

package/components/checkbox.css

@@ -0,0 +1,80 @@
+/*! 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-checkbox {
+    appearance: none;
+    -webkit-appearance: none;
+    position: relative;
+    display: inline-grid;
+    flex-shrink: 0;
+    place-content: center;
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    border: 1px solid var(--input);
+    border-radius: 4px;
+    background-color: transparent;
+    color: inherit;
+    cursor: default;
+    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-checkbox::before {
+    content: "";
+    width: 0.875rem;
+    height: 0.875rem;
+    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-checkbox::after {
+    content: "";
+    position: absolute;
+    inset: -0.5rem -0.75rem;
+  }
+  .cl-checkbox:checked {
+    border-color: var(--primary);
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+  .cl-checkbox:checked::before {
+    visibility: visible;
+  }
+  .cl-checkbox:focus-visible {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+  .cl-checkbox:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .cl-checkbox[aria-invalid=true] {
+    border-color: var(--destructive);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent);
+  }
+  .cl-checkbox[aria-invalid=true]:checked {
+    border-color: var(--primary);
+  }
+  :where(.dark, [data-theme=dark]) .cl-checkbox {
+    background-color: color-mix(in oklab, var(--input) 30%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-checkbox:checked {
+    background-color: var(--primary);
+  }
+  :where(.dark, [data-theme=dark]) .cl-checkbox[aria-invalid=true] {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 40%, transparent);
+  }
+  :where(.dark, [data-theme=dark]) .cl-checkbox[aria-invalid=true]:not(:checked) {
+    border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
+  }
+}

package/components/checkbox.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-checkbox{appearance:none;-webkit-appearance:none;position:relative;display:inline-grid;flex-shrink:0;place-content:center;width:1rem;height:1rem;margin:0;border:1px solid var(--input);border-radius:4px;background-color:transparent;color:inherit;cursor:default;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-checkbox:before{content:"";width:.875rem;height:.875rem;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-checkbox:after{content:"";position:absolute;inset:-.5rem -.75rem}.cl-checkbox:checked{border-color:var(--primary);background-color:var(--primary);color:var(--primary-foreground)}.cl-checkbox:checked:before{visibility:visible}.cl-checkbox:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}.cl-checkbox:disabled{cursor:not-allowed;opacity:.5}.cl-checkbox[aria-invalid=true]{border-color:var(--destructive);box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 20%,transparent)}.cl-checkbox[aria-invalid=true]:checked{border-color:var(--primary)}:where(.dark,[data-theme=dark]) .cl-checkbox{background-color:color-mix(in oklab,var(--input) 30%,transparent)}:where(.dark,[data-theme=dark]) .cl-checkbox:checked{background-color:var(--primary)}:where(.dark,[data-theme=dark]) .cl-checkbox[aria-invalid=true]{box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 40%,transparent)}:where(.dark,[data-theme=dark]) .cl-checkbox[aria-invalid=true]:not(:checked){border-color:color-mix(in oklab,var(--destructive) 50%,transparent)}}