daftcss 1.3.0

package/src/components/group.css

@@ -0,0 +1,119 @@
+/**
+ * Group styles
+ * Button groups and form input groups using role="group"
+ */
+
+[role="group"] {
+  display: inline-flex;
+  border-radius: var(--radius-md);
+}
+
+[role="group"] > * {
+  flex: 1 1 auto;
+}
+
+/* Remove inner border radius */
+[role="group"] > *:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+[role="group"] > *:first-child:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+[role="group"] > *:last-child:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+/* Button groups - merge borders */
+[role="group"] > button:not(:first-child),
+[role="group"] > [type="submit"]:not(:first-child),
+[role="group"] > [type="button"]:not(:first-child),
+[role="group"] > [role="button"]:not(:first-child) {
+  margin-left: calc(var(--border-width) * -1);
+}
+
+/* Active button in group - raise above siblings for border visibility */
+[role="group"] > button[aria-current="true"],
+[role="group"] > [role="button"][aria-current="true"] {
+  z-index: 1;
+}
+
+/* Input groups */
+[role="group"] > input,
+[role="group"] > select {
+  flex: 1 1 auto;
+}
+
+[role="group"] > input:not(:first-child),
+[role="group"] > select:not(:first-child) {
+  margin-left: calc(var(--border-width) * -1);
+}
+
+/* Focus state raises element */
+[role="group"] > *:focus-visible {
+  z-index: 2;
+}
+
+/* Fieldset as group */
+fieldset[role="group"] {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  border: none;
+}
+
+/* Buttons in groups don't flex-grow */
+[role="group"] > :is(button, [type="submit"], [type="reset"], [type="button"]) {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+/* Search form group */
+[role="search"] {
+  display: flex;
+}
+
+[role="search"] > input[type="search"] {
+  flex: 1 1 auto;
+}
+
+[role="search"] > input[type="search"]:not(:only-child) {
+  border-radius: var(--radius-full) 0 0 var(--radius-full);
+}
+
+[role="search"] > [type="submit"],
+[role="search"] > button {
+  border-radius: 0 var(--radius-full) var(--radius-full) 0;
+  margin-left: calc(var(--border-width) * -1);
+}
+
+/* Full width group */
+[role="group"].full-width {
+  display: flex;
+  width: 100%;
+}
+
+/* Vertical group */
+[role="group"].vertical {
+  flex-direction: column;
+}
+
+[role="group"].vertical > *:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+[role="group"].vertical > *:first-child:not(:last-child) {
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+}
+
+[role="group"].vertical > *:last-child:not(:first-child) {
+  border-radius: 0 0 var(--radius-md) var(--radius-md);
+}
+
+[role="group"].vertical > *:not(:first-child) {
+  margin-left: 0;
+  margin-top: calc(var(--border-width) * -1);
+}

package/src/components/loading.css

@@ -0,0 +1,105 @@
+/**
+ * Loading/busy state styles
+ * Uses aria-busy attribute for semantic loading states
+ */
+
+/* Loading spinner keyframes */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Base busy state - shows spinner */
+[aria-busy="true"] {
+  position: relative;
+  pointer-events: none;
+}
+
+/* Spinner for empty elements (article, button without text, etc.) */
+[aria-busy="true"]:empty::before,
+button[aria-busy="true"]:not(:has(*))::before {
+  content: "";
+  display: block;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: var(--spacing) auto;
+  border: 2px solid var(--muted);
+  border-top-color: var(--primary);
+  border-radius: var(--radius-full);
+  animation: spin 0.75s linear infinite;
+}
+
+/* Inline spinner (before text) */
+[aria-busy="true"]:not(:empty)::before {
+  content: "";
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  margin-right: var(--spacing-sm);
+  vertical-align: middle;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: var(--radius-full);
+  animation: spin 0.75s linear infinite;
+  opacity: 0.7;
+}
+
+/* Button loading state */
+button[aria-busy="true"] {
+  cursor: wait;
+  opacity: 0.8;
+}
+
+button[aria-busy="true"]::before {
+  width: 1rem;
+  height: 1rem;
+  border-width: 2px;
+  margin-right: var(--spacing-sm);
+}
+
+/* Icon-only button loading */
+button[aria-busy="true"][aria-label]::before {
+  margin-right: 0;
+}
+
+/* Article loading state (skeleton) */
+article[aria-busy="true"] {
+  min-height: 10rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+article[aria-busy="true"]::before {
+  width: 2rem;
+  height: 2rem;
+  margin: 0;
+  border-width: 3px;
+}
+
+/* Span/text loading state */
+span[aria-busy="true"]::before,
+p[aria-busy="true"]::before {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+/* Table row loading */
+tr[aria-busy="true"] {
+  opacity: 0.5;
+}
+
+/* Form loading state */
+form[aria-busy="true"] {
+  opacity: 0.7;
+}
+
+form[aria-busy="true"]::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+}
+

package/src/components/modal.css

@@ -0,0 +1,182 @@
+/**
+ * Modal/Dialog styles
+ * Supports both native <dialog> and Popover API for no-JS modals
+ *
+ * Popover usage (no JavaScript needed):
+ * <button popovertarget="my-modal">Open</button>
+ * <dialog id="my-modal" popover>
+ *   <article>Content</article>
+ * </dialog>
+ */
+
+/* Base dialog styles (shared by both approaches) */
+dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+  padding: var(--spacing);
+  background-color: transparent;
+  border: none;
+  overflow: auto;
+}
+
+dialog::backdrop {
+  background-color: var(--modal-overlay);
+  backdrop-filter: blur(4px);
+}
+
+dialog:not([open]):not(:popover-open) {
+  display: none;
+}
+
+/* Popover-based modal (no JS required) */
+dialog[popover] {
+  margin: auto;
+}
+
+dialog[popover]:popover-open {
+  display: flex;
+}
+
+/* Modal content (article inside dialog) */
+dialog > article {
+  position: relative;
+  width: 100%;
+  max-width: 32rem;
+  max-height: calc(100vh - var(--spacing-xl));
+  margin: 0;
+  padding: var(--spacing-lg);
+  overflow: auto;
+  background-color: var(--card);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--modal-radius);
+  box-shadow: var(--modal-shadow);
+  animation: modal-in var(--transition-slow) var(--ease-default);
+}
+
+@keyframes modal-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-1rem);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* Modal header */
+dialog > article > header {
+  display: block;
+  padding: 0;
+  margin-bottom: var(--spacing-sm);
+}
+
+dialog > article > header > p {
+  margin: 0;
+}
+
+dialog > article > header > strong,
+dialog > article > header > p > strong {
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  color: var(--foreground);
+}
+
+/* Close button - positioned at corner intersection */
+dialog > article > button[aria-label="Close"],
+dialog > article > header > button[aria-label="Close"],
+dialog > article > button[rel="prev"],
+dialog > article > header > button[rel="prev"] {
+  position: absolute;
+  top: var(--spacing);
+  right: var(--spacing);
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  color: var(--muted-foreground);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  box-shadow: none;
+  cursor: pointer;
+  transition: background-color var(--transition-default),
+              color var(--transition-default);
+
+  &:hover {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
+
+  &::before {
+    content: "✕";
+    font-size: var(--text-base);
+  }
+}
+
+/* Modal body */
+dialog > article > p,
+dialog > article > div {
+  padding: 0;
+  margin-bottom: var(--spacing-sm);
+}
+
+dialog > article > p:last-child,
+dialog > article > div:last-child {
+  margin-bottom: 0;
+}
+
+/* Modal footer */
+dialog > article > footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-sm);
+  padding: 0;
+  margin-top: var(--spacing-sm);
+}
+
+/* Utility classes for HTML element (modal state) */
+html.modal-is-open {
+  overflow: hidden;
+  pointer-events: none;
+  touch-action: none;
+}
+
+html.modal-is-open dialog {
+  pointer-events: auto;
+}
+
+/* Opening animation class */
+html.modal-is-opening dialog > article {
+  animation: modal-in var(--transition-slow) var(--ease-default);
+}
+
+/* Closing animation class */
+html.modal-is-closing dialog::backdrop {
+  animation: backdrop-out var(--transition-default) forwards;
+}
+
+html.modal-is-closing dialog > article {
+  animation: modal-out var(--transition-default) forwards;
+}
+
+@keyframes backdrop-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes modal-out {
+  to {
+    opacity: 0;
+    transform: scale(0.95) translateY(-1rem);
+  }
+}

package/src/components/nav.css

@@ -0,0 +1,131 @@
+/**
+ * Navigation styles
+ * Horizontal nav bars, vertical nav, and breadcrumbs
+ */
+
+nav {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing);
+}
+
+nav > ul {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-xs);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+nav > ul > li {
+  margin: 0;
+  line-height: var(--line-height);
+}
+
+/* Nav links */
+nav a {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--muted-foreground);
+  text-decoration: none;
+  border-radius: var(--radius-md);
+  transition: color var(--transition-default),
+              background-color var(--transition-default);
+
+  &:hover {
+    color: var(--foreground);
+    background-color: var(--muted);
+  }
+}
+
+/* Active page indicator */
+nav a[aria-current="page"],
+nav a[aria-current="true"] {
+  color: var(--foreground);
+  background-color: var(--muted);
+}
+
+/* Nav with strong (brand) */
+nav strong {
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  color: var(--foreground);
+}
+
+/* Nav buttons */
+nav button {
+  height: var(--button-height-sm);
+  font-size: var(--text-sm);
+}
+
+/* Dropdown in nav */
+nav details.dropdown > summary {
+  height: auto;
+  padding: var(--spacing-sm) var(--spacing-md);
+  color: var(--muted-foreground);
+  background-color: transparent;
+  border: none;
+
+  &:hover {
+    color: var(--foreground);
+    background-color: var(--muted);
+  }
+}
+
+nav details.dropdown > ul {
+  right: 0;
+}
+
+/* Breadcrumb navigation */
+nav[aria-label="breadcrumb"] > ul {
+  gap: 0;
+}
+
+nav[aria-label="breadcrumb"] > ul > li {
+  display: flex;
+  align-items: center;
+}
+
+nav[aria-label="breadcrumb"] > ul > li:not(:last-child)::after {
+  content: var(--breadcrumb-divider);
+  padding: 0 var(--spacing-sm);
+  color: var(--muted-foreground);
+}
+
+nav[aria-label="breadcrumb"] a {
+  padding: var(--spacing-xs) 0;
+  color: var(--muted-foreground);
+  background-color: transparent;
+  border-radius: 0;
+
+  &:hover {
+    color: var(--foreground);
+    background-color: transparent;
+    text-decoration: underline;
+  }
+}
+
+nav[aria-label="breadcrumb"] > ul > li:last-child {
+  color: var(--foreground);
+  font-weight: var(--font-medium);
+}
+
+/* Mobile-friendly nav (stacks on small screens) */
+@media (max-width: 768px) {
+  nav {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  nav > ul {
+    justify-content: center;
+  }
+}
+

package/src/components/progress.css

@@ -0,0 +1,160 @@
+/**
+ * Progress bar styles
+ */
+
+progress {
+  display: block;
+  width: 100%;
+  height: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
+  overflow: hidden;
+  background-color: var(--muted);
+  border: none;
+  border-radius: var(--progress-radius);
+  appearance: none;
+}
+
+progress:last-child {
+  margin-bottom: 0;
+}
+
+progress::-webkit-progress-bar {
+  background-color: var(--muted);
+  border-radius: var(--progress-radius);
+}
+
+progress::-webkit-progress-value {
+  background-color: var(--primary);
+  border-radius: var(--progress-radius);
+  transition: width var(--transition-slow) var(--ease-default);
+}
+
+progress::-moz-progress-bar {
+  background-color: var(--primary);
+  border-radius: var(--progress-radius);
+}
+
+/* Indeterminate progress */
+progress:not([value]) {
+  position: relative;
+  background: linear-gradient(
+    90deg,
+    var(--muted) 0%,
+    var(--muted) 40%,
+    var(--primary) 50%,
+    var(--muted) 60%,
+    var(--muted) 100%
+  );
+  background-size: 200% 100%;
+  animation: progress-indeterminate 1.5s linear infinite;
+}
+
+progress:not([value])::-webkit-progress-bar {
+  background: transparent;
+}
+
+progress:not([value])::-moz-progress-bar {
+  background: transparent;
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Secondary variant */
+progress.secondary::-webkit-progress-value {
+  background-color: var(--muted-foreground);
+}
+
+progress.secondary::-moz-progress-bar {
+  background-color: var(--muted-foreground);
+}
+
+progress.secondary:not([value]) {
+  background: linear-gradient(
+    90deg,
+    var(--muted) 0%,
+    var(--muted) 40%,
+    var(--muted-foreground) 50%,
+    var(--muted) 60%,
+    var(--muted) 100%
+  );
+  background-size: 200% 100%;
+}
+
+/* Success variant */
+progress.success::-webkit-progress-value {
+  background-color: var(--success);
+}
+
+progress.success::-moz-progress-bar {
+  background-color: var(--success);
+}
+
+progress.success:not([value]) {
+  background: linear-gradient(
+    90deg,
+    var(--muted) 0%,
+    var(--muted) 40%,
+    var(--success) 50%,
+    var(--muted) 60%,
+    var(--muted) 100%
+  );
+  background-size: 200% 100%;
+}
+
+/* Warning variant */
+progress.warning::-webkit-progress-value {
+  background-color: var(--warning);
+}
+
+progress.warning::-moz-progress-bar {
+  background-color: var(--warning);
+}
+
+progress.warning:not([value]) {
+  background: linear-gradient(
+    90deg,
+    var(--muted) 0%,
+    var(--muted) 40%,
+    var(--warning) 50%,
+    var(--muted) 60%,
+    var(--muted) 100%
+  );
+  background-size: 200% 100%;
+}
+
+/* Destructive variant */
+progress.destructive::-webkit-progress-value {
+  background-color: var(--destructive);
+}
+
+progress.destructive::-moz-progress-bar {
+  background-color: var(--destructive);
+}
+
+progress.destructive:not([value]) {
+  background: linear-gradient(
+    90deg,
+    var(--muted) 0%,
+    var(--muted) 40%,
+    var(--destructive) 50%,
+    var(--muted) 60%,
+    var(--muted) 100%
+  );
+  background-size: 200% 100%;
+}
+
+/* Label with progress */
+label:has(> progress) {
+  display: block;
+
+  & > progress {
+    margin-top: var(--spacing-sm);
+  }
+}