daftcss 1.3.0

package/src/layout/grid.css

@@ -0,0 +1,67 @@
+/**
+ * Grid layout
+ * Auto-layout columns that collapse on small screens
+ */
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing);
+  margin-bottom: var(--spacing);
+}
+
+.grid:last-child {
+  margin-bottom: 0;
+}
+
+/* Auto-layout columns on larger screens */
+@media (min-width: 768px) {
+  .grid {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+
+  /* Explicit column counts when children are present */
+  .grid:has(> :nth-child(2):last-child) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .grid:has(> :nth-child(3):last-child) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .grid:has(> :nth-child(4):last-child) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .grid:has(> :nth-child(5):last-child) {
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  .grid:has(> :nth-child(6):last-child) {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+/* Grid items */
+.grid > * {
+  min-width: 0; /* Prevent overflow */
+}
+
+/* Full-width grid items */
+.grid > [data-span="full"] {
+  grid-column: 1 / -1;
+}
+
+/* Column span utilities */
+.grid > .span-2 {
+  grid-column: span 2;
+}
+
+.grid > .span-3 {
+  grid-column: span 3;
+}
+
+.grid > .span-4 {
+  grid-column: span 4;
+}
+

package/src/layout/landmarks.css

@@ -0,0 +1,53 @@
+/**
+ * Landmark styles
+ * Semantic HTML structure elements: header, main, footer, section, aside, article
+ */
+
+/* Main content area */
+main {
+  display: block;
+  min-height: 1px;
+}
+
+/* Header landmark */
+body > header,
+main > header,
+.container > header {
+  padding-block: var(--spacing);
+}
+
+/* Footer landmark */
+body > footer,
+main > footer,
+.container > footer {
+  padding-block: var(--spacing);
+}
+
+/* Section with spacing */
+section {
+  margin-bottom: var(--spacing-xl);
+}
+
+section:last-child {
+  margin-bottom: 0;
+}
+
+/* Nested sections have less spacing */
+section section {
+  margin-bottom: var(--spacing);
+}
+
+/* Article spacing when used as a direct child */
+body > article,
+main > article,
+section > article,
+.container > article {
+  margin-bottom: var(--spacing);
+}
+
+/* Responsive section spacing */
+@media (min-width: 768px) {
+  section {
+    margin-bottom: calc(var(--spacing-xl) * 1.5);
+  }
+}

package/src/layout/overflow.css

@@ -0,0 +1,24 @@
+/**
+ * Overflow utilities
+ * Horizontal scrolling for wide content
+ */
+
+.overflow-auto {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Ensure tables inside overflow containers display properly */
+.overflow-auto > table {
+  margin-bottom: 0;
+}
+
+/* Add fade indicators for scroll containers */
+.overflow-auto {
+  position: relative;
+}
+
+/* Scrollable code blocks already handle overflow */
+pre.overflow-auto {
+  overflow-x: auto;
+}

package/src/layout/sidebar.css

@@ -0,0 +1,178 @@
+/**
+ * Sidebar
+ *
+ * <aside class="sidebar"> as a direct child of <main> is an app-dashboard
+ * sidebar:
+ *   - Desktop (≥ 768px): position-fixed full viewport height on the left.
+ *     Body gets padding-left so header / main / footer flow in the column
+ *     to the right of it.
+ *   - Mobile (< 768px): hidden by default. Add the popover attribute and a
+ *     <button class="sidebar-toggle" popovertarget="sidebar"> to slide it
+ *     out as a drawer.
+ *
+ * Plain <aside> (no .sidebar class) keeps normal document flow — useful
+ * for pullquotes, callouts, and other tangential content.
+ *
+ * Customization: override --aside-width for column width, override
+ * background-color on the selector below for surface color.
+ */
+
+/* Surface (applies on all viewports — hidden on mobile via media query) */
+main > aside.sidebar {
+  background-color: var(--muted);
+  color: inherit;
+  border: none;
+  padding: var(--spacing-lg);
+}
+
+/* ============================================================
+   Desktop: fixed full-height column
+   ============================================================ */
+
+@media (min-width: 768px) {
+  /* display + height overrides fight the UA popover styles, which set
+     display: none on closed popovers and height: fit-content always. */
+  main > aside.sidebar {
+    display: block;
+    position: fixed;
+    inset: 0 auto 0 0;
+    width: var(--aside-width);
+    height: 100dvh;
+    overflow-y: auto;
+    z-index: 10;
+  }
+
+  /* Make room for the fixed sidebar by padding the body */
+  body:has(> main > aside.sidebar) {
+    padding-left: var(--aside-width);
+  }
+
+  /* Disable any grid layout on main (the aside is out of normal flow now) */
+  main:has(> aside.sidebar) {
+    display: block;
+  }
+}
+
+/* ============================================================
+   Mobile: hidden by default, slide-out drawer when popover-open
+   ============================================================ */
+
+@media (max-width: 767.98px) {
+  main > aside.sidebar {
+    display: none;
+  }
+
+  main > aside.sidebar[popover]:popover-open {
+    display: block;
+    position: fixed;
+    inset: 0 auto 0 0;
+    width: min(var(--aside-width), 85vw);
+    height: 100dvh;
+    z-index: 100;
+    overflow-y: auto;
+    transform: translateX(0);
+    transition: transform var(--transition-slow) var(--ease-default),
+                overlay var(--transition-slow) var(--ease-default) allow-discrete,
+                display var(--transition-slow) var(--ease-default) allow-discrete;
+  }
+
+  main > aside.sidebar[popover]::backdrop {
+    background-color: var(--modal-overlay);
+    backdrop-filter: blur(4px);
+  }
+
+  @starting-style {
+    main > aside.sidebar[popover]:popover-open {
+      transform: translateX(-100%);
+    }
+  }
+}
+
+/* ============================================================
+   Aside nav (vertical link list)
+   ============================================================ */
+
+main > aside.sidebar > nav {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  justify-content: flex-start;
+  gap: var(--spacing-sm);
+}
+
+main > aside.sidebar > nav > ul {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  gap: var(--spacing-xs);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+main > aside.sidebar > nav > ul > li {
+  margin: 0;
+}
+
+/* Section labels */
+main > aside.sidebar > nav > ul > li > strong {
+  display: block;
+  padding: var(--spacing-sm) var(--spacing);
+  margin-top: var(--spacing);
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  color: var(--muted-foreground);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+main > aside.sidebar > nav > ul > li:first-child > strong {
+  margin-top: 0;
+}
+
+/* Sidebar links */
+main > aside.sidebar > nav > ul > li > a {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  width: 100%;
+  padding: var(--spacing-sm) var(--spacing);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--foreground);
+  text-decoration: none;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: background-color var(--transition-default),
+              color var(--transition-default);
+}
+
+/* Hover/active: a subtle shade darker than --muted in light mode, lighter
+   in dark mode — matches shadcn's sidebar-accent pattern of a quiet hover
+   that stays within the sidebar's tonal range. */
+main > aside.sidebar > nav > ul > li > a:hover,
+main > aside.sidebar > nav > ul > li > a[aria-current="page"],
+main > aside.sidebar > nav > ul > li > a[aria-current="true"] {
+  background-color: color-mix(in oklch, var(--muted) 88%, var(--foreground));
+  color: var(--foreground);
+}
+
+/* ============================================================
+   Hamburger toggle (mobile-only)
+   ============================================================
+   .sidebar-toggle is a behavior-only class: it hides the button on desktop.
+   For the visual look, pair it with .ghost and .icon (or any button variant
+   you prefer). Example:
+     <button class="ghost icon sidebar-toggle" popovertarget="sidebar">☰</button>
+*/
+
+@media (min-width: 768px) {
+  .sidebar-toggle,
+  li:has(> .sidebar-toggle) {
+    display: none;
+  }
+}

package/src/utilities/helpers.css

@@ -0,0 +1,351 @@
+/**
+ * Utility/helper classes
+ * Color modifiers, visibility, and other helpers
+ */
+
+/* ===== COLOR MODIFIERS (text colors) ===== */
+
+/* Secondary color - for links and text */
+a.secondary {
+  color: var(--muted-foreground);
+
+  &:hover {
+    color: var(--foreground);
+  }
+}
+
+/* Muted text */
+.muted {
+  color: var(--muted-foreground);
+}
+
+:where(:not(.badge):not(button):not([role="button"]):not(progress)).primary {
+  color: var(--primary);
+}
+
+:where(:not(.badge):not(button):not([role="button"]):not(progress)).destructive {
+  color: var(--destructive);
+}
+
+:where(:not(.badge):not(button):not([role="button"]):not(progress)).success {
+  color: var(--success);
+}
+
+:where(:not(.badge):not(button):not([role="button"]):not(progress)).warning {
+  color: var(--warning);
+}
+
+/* ===== VISIBILITY ===== */
+
+/* Screen reader only - visually hidden but accessible */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Hidden completely */
+.hidden {
+  display: none !important;
+}
+
+/* Invisible but takes up space */
+.invisible {
+  visibility: hidden;
+}
+
+/* ===== TEXT UTILITIES ===== */
+
+/* Text alignment */
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+/* Font weight */
+.font-normal {
+  font-weight: var(--font-normal);
+}
+
+.font-medium {
+  font-weight: var(--font-medium);
+}
+
+.font-semibold {
+  font-weight: var(--font-semibold);
+}
+
+.font-bold {
+  font-weight: var(--font-bold);
+}
+
+/* Font size */
+.text-xs {
+  font-size: var(--text-xs);
+}
+
+.text-sm {
+  font-size: var(--text-sm);
+}
+
+.text-base {
+  font-size: var(--text-base);
+}
+
+.text-lg {
+  font-size: var(--text-lg);
+}
+
+.text-xl {
+  font-size: var(--text-xl);
+}
+
+.text-2xl {
+  font-size: var(--text-2xl);
+}
+
+.text-3xl {
+  font-size: var(--text-3xl);
+}
+
+.text-4xl {
+  font-size: var(--text-4xl);
+}
+
+/* ===== LAYOUT UTILITIES ===== */
+
+/* Sticky positioning - useful for headers/navs */
+.sticky {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  background-color: var(--background);
+  border-bottom: var(--border-width) solid var(--border);
+}
+
+/* Flexbox */
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.gap-2 {
+  gap: var(--spacing-sm);
+}
+
+.gap-4 {
+  gap: var(--spacing);
+}
+
+/* Full width */
+.w-full {
+  width: 100%;
+}
+
+/* Margin utilities */
+.m-0 {
+  margin: 0;
+}
+
+.mx-auto {
+  margin-inline: auto;
+}
+
+.mt-4 {
+  margin-top: var(--spacing);
+}
+
+.mb-4 {
+  margin-bottom: var(--spacing);
+}
+
+.my-4 {
+  margin-top: var(--spacing);
+  margin-bottom: var(--spacing);
+}
+
+/* Padding utilities */
+.p-0 {
+  padding: 0;
+}
+
+.p-4 {
+  padding: var(--spacing);
+}
+
+.p-6 {
+  padding: var(--spacing-lg);
+}
+
+/* ===== OVERFLOW & TRUNCATION ===== */
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ===== BORDER UTILITIES ===== */
+
+.rounded-none {
+  border-radius: 0;
+}
+
+.rounded-sm {
+  border-radius: var(--radius-sm);
+}
+
+.rounded {
+  border-radius: var(--radius-md);
+}
+
+.rounded-lg {
+  border-radius: var(--radius-lg);
+}
+
+.rounded-xl {
+  border-radius: var(--radius-xl);
+}
+
+.rounded-full {
+  border-radius: var(--radius-full);
+}
+
+.border {
+  border: var(--border-width) solid var(--border);
+}
+
+.border-none {
+  border: none;
+}
+
+/* ===== BACKGROUND UTILITIES ===== */
+
+.bg-muted {
+  background-color: var(--muted);
+}
+
+.bg-card {
+  background-color: var(--card);
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+/* ===== SHADOW UTILITIES ===== */
+
+.shadow-none {
+  box-shadow: none;
+}
+
+.shadow-sm {
+  box-shadow: var(--shadow-sm);
+}
+
+.shadow {
+  box-shadow: var(--shadow-sm);
+}
+
+.shadow-md {
+  box-shadow: var(--shadow-md);
+}
+
+.shadow-lg {
+  box-shadow: var(--shadow-lg);
+}
+
+/* ===== INTERACTION UTILITIES ===== */
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.select-none {
+  user-select: none;
+}
+
+/* ===== TRANSITION UTILITIES ===== */
+
+.transition {
+  transition: all var(--transition-default);
+}
+
+.transition-none {
+  transition: none;
+}
+
+/* ===== ANIMATION UTILITIES ===== */
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+.animate-pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* ===== PRINT UTILITIES ===== */
+
+@media print {
+  .no-print {
+    display: none !important;
+  }
+}