daftcss 1.3.0

package/src/forms/checkbox.css

@@ -0,0 +1,173 @@
+/**
+ * Checkbox, radio, and switch styles
+ */
+
+/* Base checkbox and radio */
+input[type="checkbox"],
+input[type="radio"] {
+  width: var(--control-size);
+  height: var(--control-size);
+  margin: 0;
+  vertical-align: middle;
+  cursor: pointer;
+  appearance: none;
+  background-color: var(--background);
+  border: var(--border-width) solid var(--input);
+  position: relative;
+  transition: background-color var(--transition-default),
+              border-color var(--transition-default),
+              box-shadow var(--transition-default);
+}
+
+input[type="checkbox"] {
+  border-radius: var(--radius-sm);
+}
+
+input[type="radio"] {
+  border-radius: var(--radius-full);
+}
+
+/* Checked state */
+input[type="checkbox"]:checked,
+input[type="radio"]:checked {
+  background-color: var(--primary);
+  border-color: var(--primary);
+}
+
+/* Checkbox checkmark using mask */
+input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: var(--primary-foreground);
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
+  mask-size: 0.875rem;
+  mask-position: center;
+  mask-repeat: no-repeat;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
+  -webkit-mask-size: 0.875rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+
+/* Radio dot using mask */
+input[type="radio"]:checked::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: var(--primary-foreground);
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E");
+  mask-size: 0.875rem;
+  mask-position: center;
+  mask-repeat: no-repeat;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E");
+  -webkit-mask-size: 0.875rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+
+/* Indeterminate checkbox using mask */
+input[type="checkbox"]:indeterminate {
+  background-color: var(--primary);
+  border-color: var(--primary);
+}
+
+input[type="checkbox"]:indeterminate::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: var(--primary-foreground);
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
+  mask-size: 0.875rem;
+  mask-position: center;
+  mask-repeat: no-repeat;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
+  -webkit-mask-size: 0.875rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+
+/* Focus state */
+input[type="checkbox"]:focus-visible,
+input[type="radio"]:focus-visible {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in oklch, var(--ring) var(--focus-ring-opacity), transparent);
+}
+
+/* Disabled state */
+input[type="checkbox"]:disabled,
+input[type="radio"]:disabled {
+  cursor: not-allowed;
+  opacity: var(--disabled-opacity);
+}
+
+/* Label with checkbox/radio inline */
+label:has(> input[type="checkbox"]),
+label:has(> input[type="radio"]) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
+  font-weight: var(--font-normal);
+  cursor: pointer;
+
+  & > input {
+    margin-top: 0;
+    flex-shrink: 0;
+  }
+}
+
+/* Disabled label */
+label:has(> input:disabled) {
+  cursor: not-allowed;
+  opacity: var(--disabled-opacity);
+}
+
+label[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: var(--disabled-opacity);
+}
+
+/* Switch (checkbox with role="switch") */
+input[type="checkbox"][role="switch"] {
+  width: var(--switch-width);
+  height: var(--switch-height);
+  border-radius: var(--radius-full);
+  background-color: var(--muted-foreground);
+  border-color: var(--muted-foreground);
+  position: relative;
+  transition: background-color var(--transition-default);
+}
+
+input[type="checkbox"][role="switch"]::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 1px;
+  margin: auto 0;
+  width: var(--switch-thumb);
+  height: var(--switch-thumb);
+  background-color: var(--background);
+  border-radius: var(--radius-full);
+  transition: transform var(--transition-default);
+}
+
+/* Switch checked - disable the checkmark ::after */
+input[type="checkbox"][role="switch"]:checked::after {
+  display: none;
+}
+
+input[type="checkbox"][role="switch"]:checked {
+  background-color: var(--primary);
+  border-color: var(--primary);
+}
+
+input[type="checkbox"][role="switch"]:checked::before {
+  transform: translateX(calc(var(--switch-width) - var(--switch-thumb) - 2 * var(--border-width) - 2px));
+}
+
+input[type="checkbox"][role="switch"]:focus-visible {
+  box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in oklch, var(--ring) var(--focus-ring-opacity), transparent);
+}

package/src/forms/input.css

@@ -0,0 +1,248 @@
+/**
+ * Input styles
+ * Text inputs, textarea, select, and file inputs
+ */
+
+/* Base input styles */
+/* :where() keeps the long :not() chain at specificity 0 so type-specific rules
+   below (search pill radius, etc.) can override without an arms race. */
+input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="reset"]):not([type="button"])),
+textarea,
+select {
+  display: block;
+  width: 100%;
+  height: var(--input-height);
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-family: inherit;
+  font-size: var(--text-base);
+  font-weight: var(--font-normal);
+  line-height: var(--line-height);
+  color: var(--foreground);
+  background-color: var(--input-background);
+  border: var(--border-width) solid var(--input);
+  border-radius: var(--input-radius);
+  transition: border-color var(--transition-default),
+              box-shadow var(--transition-default);
+  appearance: none;
+
+  &::placeholder {
+    color: var(--muted-foreground);
+    opacity: 1;
+  }
+
+  &:focus-visible {
+    outline: none;
+    border-color: var(--ring);
+    box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in oklch, var(--ring) var(--focus-ring-opacity), transparent);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--disabled-opacity);
+    background-color: var(--muted);
+    border-color: var(--muted-foreground);
+  }
+}
+
+/* Form buttons span full width — except in search forms, which stay inline. */
+form:not([role="search"]) :is(button, [type="submit"], [type="reset"], [type="button"]):not(.icon) {
+  width: 100%;
+}
+
+/* Read-only state - only for text inputs and textarea, not select */
+input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="reset"]):not([type="button"])):read-only,
+textarea:read-only {
+  background-color: var(--muted);
+}
+
+/* Textarea specific */
+textarea {
+  height: auto;
+  min-height: calc(var(--input-height) * 2);
+  padding: var(--spacing-md);
+  resize: vertical;
+}
+
+/* Select specific */
+select {
+  /* Line-height calculated to fill available space: height - borders - padding */
+  line-height: calc(var(--input-height) - 2 * var(--border-width) - 2 * var(--spacing-sm));
+  padding-right: var(--spacing-xl);
+  background-image: var(--icon-select-chevron);
+  background-repeat: no-repeat;
+  background-position: right var(--spacing-md) center;
+  background-size: var(--icon-size);
+
+  &[multiple] {
+    height: auto;
+    padding-right: var(--spacing-md);
+    background-image: none;
+  }
+}
+
+/* File input */
+input[type="file"] {
+  width: 100%;
+  height: var(--input-height);
+  padding: 0 var(--spacing-sm);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  /* Line-height for vertical centering (flex doesn't work on file inputs) */
+  line-height: calc(var(--input-height) - 2 * var(--border-width));
+  color: var(--foreground);
+  background-color: var(--input-background);
+  border: var(--border-width) solid var(--input);
+  border-radius: var(--input-radius);
+  cursor: pointer;
+  transition: border-color var(--transition-default);
+
+  &::file-selector-button {
+    padding: var(--spacing-xs) var(--spacing-md);
+    margin-right: var(--spacing-md);
+    font-weight: var(--font-medium);
+    color: var(--foreground);
+    background-color: var(--accent);
+    border: none;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: background-color var(--transition-default);
+  }
+
+  &:hover::file-selector-button {
+    background-color: color-mix(in oklch, var(--accent) 80%, var(--foreground) 5%);
+  }
+
+  &:focus-visible {
+    outline: none;
+    border-color: var(--ring);
+    box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in oklch, var(--ring) var(--focus-ring-opacity), transparent);
+  }
+}
+
+/* Color input */
+input[type="color"] {
+  width: 100%;
+  height: var(--input-height);
+  padding: 6px;
+  background-color: var(--input-background);
+  border: var(--border-width) solid var(--input);
+  border-radius: var(--input-radius);
+  cursor: pointer;
+
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: var(--radius-sm);
+  }
+
+  &::-moz-color-swatch {
+    border: none;
+    border-radius: var(--radius-sm);
+  }
+}
+
+/* Search input - rounded */
+input[type="search"] {
+  border-radius: var(--radius-full);
+  padding-left: var(--spacing);
+  padding-right: var(--spacing);
+
+  /* Remove default clear button */
+  &::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+}
+
+/* Date/time inputs */
+input[type="date"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="time"],
+input[type="week"] {
+  &::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity var(--transition-default);
+  }
+
+  &::-webkit-calendar-picker-indicator:hover {
+    opacity: 1;
+  }
+}
+
+/* Labels */
+label {
+  display: block;
+  margin-bottom: var(--spacing-sm);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--foreground);
+}
+
+/* Label wrapping input */
+label:has(> input),
+label:has(> select),
+label:has(> textarea) {
+  display: block;
+
+  & > input,
+  & > select,
+  & > textarea {
+    margin-top: var(--spacing-sm);
+  }
+}
+
+/* Helper text */
+small {
+  display: block;
+  margin-top: var(--spacing-xs);
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+}
+
+/* Form layout */
+form {
+  & > label,
+  & > input,
+  & > textarea,
+  & > select,
+  & > fieldset,
+  & > div,
+  & > p,
+  & > small {
+    margin-bottom: var(--spacing);
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+/* Fieldset */
+fieldset {
+  margin-bottom: var(--spacing);
+}
+
+fieldset:last-child {
+  margin-bottom: 0;
+}
+
+legend {
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  color: var(--foreground);
+  margin-bottom: var(--spacing-md);
+}
+
+/* Disabled fieldset */
+fieldset:disabled {
+  opacity: var(--disabled-opacity);
+}
+
+fieldset:disabled * {
+  cursor: not-allowed;
+}

package/src/forms/range.css

@@ -0,0 +1,112 @@
+/**
+ * Range slider styles
+ */
+
+input[type="range"] {
+  width: 100%;
+  height: 1.5rem;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+  appearance: none;
+}
+
+/* Track */
+input[type="range"]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 0.5rem;
+  background-color: var(--muted);
+  border-radius: var(--radius-full);
+  transition: background-color var(--transition-default);
+}
+
+input[type="range"]::-moz-range-track {
+  width: 100%;
+  height: 0.5rem;
+  background-color: var(--muted);
+  border-radius: var(--radius-full);
+  transition: background-color var(--transition-default);
+}
+
+/* Thumb */
+input[type="range"]::-webkit-slider-thumb {
+  width: var(--control-size);
+  height: var(--control-size);
+  margin-top: calc((0.5rem - var(--control-size)) / 2);
+  background-color: var(--foreground);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  appearance: none;
+  transition: background-color var(--transition-default),
+              transform var(--transition-default);
+}
+
+input[type="range"]::-moz-range-thumb {
+  width: var(--control-size);
+  height: var(--control-size);
+  background-color: var(--foreground);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background-color var(--transition-default),
+              transform var(--transition-default);
+}
+
+/* Hover state */
+input[type="range"]:hover::-webkit-slider-thumb {
+  background-color: var(--primary);
+  transform: scale(1.1);
+}
+
+input[type="range"]:hover::-moz-range-thumb {
+  background-color: var(--primary);
+  transform: scale(1.1);
+}
+
+/* Active state */
+input[type="range"]:active::-webkit-slider-thumb {
+  background-color: var(--primary);
+  transform: scale(1.15);
+}
+
+input[type="range"]:active::-moz-range-thumb {
+  background-color: var(--primary);
+  transform: scale(1.15);
+}
+
+/* Focus state */
+input[type="range"]:focus-visible {
+  outline: none;
+}
+
+input[type="range"]:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in oklch, var(--ring) var(--focus-ring-opacity), transparent);
+}
+
+input[type="range"]:focus-visible::-moz-range-thumb {
+  box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in oklch, var(--ring) var(--focus-ring-opacity), transparent);
+}
+
+/* Disabled state */
+input[type="range"]:disabled {
+  cursor: not-allowed;
+  opacity: var(--disabled-opacity);
+}
+
+input[type="range"]:disabled::-webkit-slider-thumb {
+  cursor: not-allowed;
+}
+
+input[type="range"]:disabled::-moz-range-thumb {
+  cursor: not-allowed;
+}
+
+/* Label with range */
+label:has(> input[type="range"]) {
+  display: block;
+
+  & > input[type="range"] {
+    margin-top: var(--spacing-sm);
+  }
+}

package/src/forms/validation.css

@@ -0,0 +1,79 @@
+/**
+ * Form validation styles
+ * Uses aria-invalid for semantic validation states
+ */
+
+/* Invalid state */
+input[aria-invalid="true"],
+textarea[aria-invalid="true"],
+select[aria-invalid="true"] {
+  border-color: var(--destructive);
+}
+
+/* Valid state */
+input[aria-invalid="false"],
+textarea[aria-invalid="false"],
+select[aria-invalid="false"] {
+  border-color: var(--primary);
+}
+
+/* Helper text colors for validation */
+input[aria-invalid="true"] + small,
+textarea[aria-invalid="true"] + small,
+select[aria-invalid="true"] + small,
+input[aria-invalid="true"] ~ small,
+textarea[aria-invalid="true"] ~ small,
+select[aria-invalid="true"] ~ small {
+  color: var(--destructive);
+}
+
+input[aria-invalid="false"] + small,
+textarea[aria-invalid="false"] + small,
+select[aria-invalid="false"] + small,
+input[aria-invalid="false"] ~ small,
+textarea[aria-invalid="false"] ~ small,
+select[aria-invalid="false"] ~ small {
+  color: var(--primary);
+}
+
+/* Checkbox/radio validation */
+input[type="checkbox"][aria-invalid="true"],
+input[type="radio"][aria-invalid="true"] {
+  border-color: var(--destructive);
+}
+
+input[type="checkbox"][aria-invalid="false"],
+input[type="radio"][aria-invalid="false"] {
+  border-color: var(--primary);
+}
+
+/* Native browser validation (optional enhancement) */
+input:user-invalid:not([type="checkbox"]):not([type="radio"]),
+textarea:user-invalid {
+  border-color: var(--destructive);
+}
+
+input:user-valid:not(:placeholder-shown):not([type="checkbox"]):not([type="radio"]),
+textarea:user-valid:not(:placeholder-shown) {
+  border-color: var(--primary);
+}
+
+/* Required field indicator */
+label:has(+ input:required)::after,
+label:has(+ textarea:required)::after,
+label:has(+ select:required)::after,
+label:has(> input:required)::after,
+label:has(> textarea:required)::after,
+label:has(> select:required)::after {
+  content: " *";
+  color: var(--destructive);
+}
+
+/* Dropdown validation */
+details.dropdown[aria-invalid="true"] > summary {
+  border-color: var(--destructive);
+}
+
+details.dropdown[aria-invalid="false"] > summary {
+  border-color: var(--primary);
+}

package/src/layout/container.css

@@ -0,0 +1,68 @@
+/**
+ * Container styles
+ * Centered content containers with responsive max-widths
+ */
+
+.container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--spacing);
+  padding-right: var(--spacing);
+}
+
+/* Responsive max-widths */
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1140px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1320px;
+  }
+}
+
+/* Fluid container - full width with padding */
+.container-fluid {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--spacing);
+  padding-right: var(--spacing);
+}
+
+@media (min-width: 768px) {
+  .container-fluid {
+    padding-left: var(--spacing-lg);
+    padding-right: var(--spacing-lg);
+  }
+}
+
+@media (min-width: 1024px) {
+  .container-fluid {
+    padding-left: var(--spacing-xl);
+    padding-right: var(--spacing-xl);
+  }
+}