@duskmoon-dev/core 1.19.3 → 1.19.4

package/README.md

@@ -442,4 +442,4 @@ See [specs/004-oklch-color-system/quickstart.md](./specs/004-oklch-color-system/
 
 MIT
 
-<!-- release 34867104439 -->
+<!-- release 35341084904 -->

package/dist/base.css

@@ -0,0 +1,484 @@
+/* Individual-control prerequisite, matching the generated base.css export. */
+/**
+ * Base styles
+ * Core styling and color token definitions
+ */
+
+/* Root styles */
+/**
+ * Root styles and CSS reset
+ * Applied to all pages using the plugin
+ */
+
+/* Smooth scrolling for anchors */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Prevent text inflation on mobile */
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+/* Use theme color scheme - OKLCH format */
+:root,
+[data-theme] {
+  background-color: var(--color-base-100);
+  color: var(--color-base-content);
+}
+
+/* Focus ring utility */
+:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Disabled state utility */
+[disabled],
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* Selection color */
+::selection {
+  background-color: color-mix(in oklch, var(--color-primary) 20%, transparent);
+  color: var(--color-base-content);
+}
+
+/* Scrollbar styling for webkit browsers */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-base-200);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-base-300);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in oklch, var(--color-base-content) 30%, transparent);
+}
+
+/* Firefox scrollbar */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-base-300) var(--color-base-200);
+}
+
+/* Reduce motion for users who prefer it */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+
+/* Color token definitions */
+/**
+ * Color Token Definitions
+ * 65+ Material Design 3 color tokens using CSS custom properties
+ * Format: OKLCH from codegen (e.g., "oklch(72% 0.17 75)")
+ */
+
+@theme {
+  /* ============================================
+   * THEME METADATA (5 tokens)
+   * Set by generated theme CSS files (e.g., sunshine.css)
+   * Enables data-driven theme switching via --theme-pair
+   * ============================================ */
+
+  --theme-name: initial;
+  --theme-mode: initial;
+  --theme-family: initial;
+  --theme-pair: initial;
+  --theme-description: initial;
+
+  /* ============================================
+   * BRAND COLORS (12 tokens)
+   * ============================================ */
+
+  /* Primary Color Family */
+  --color-primary: initial;
+  --color-primary-content: initial;
+  --color-primary-container: initial;
+  --color-on-primary-container: initial;
+
+  /* Secondary Color Family */
+  --color-secondary: initial;
+  --color-secondary-content: initial;
+  --color-secondary-container: initial;
+  --color-on-secondary-container: initial;
+
+  /* Tertiary Color Family */
+  --color-tertiary: initial;
+  --color-tertiary-content: initial;
+  --color-tertiary-container: initial;
+  --color-on-tertiary-container: initial;
+
+  /* ============================================
+   * ACCENT COLORS (2 tokens)
+   * ============================================ */
+
+  --color-accent: initial;
+  --color-accent-content: initial;
+
+  /* ============================================
+   * NEUTRAL COLORS (3 tokens)
+   * ============================================ */
+
+  --color-neutral: initial;
+  --color-neutral-content: initial;
+  --color-neutral-variant: initial;
+
+  /* ============================================
+   * SURFACE COLORS (11 tokens)
+   * ============================================ */
+
+  --color-surface: initial;
+  --color-surface-dim: initial;
+  --color-surface-bright: initial;
+  --color-surface-container-lowest: initial;
+  --color-surface-container-low: initial;
+  --color-surface-container: initial;
+  --color-surface-container-high: initial;
+  --color-surface-container-highest: initial;
+  --color-surface-variant: initial;
+  --color-on-surface: initial;
+  --color-on-surface-variant: initial;
+
+  /* ============================================
+   * SEMANTIC COLORS (16 tokens)
+   * ============================================ */
+
+  /* Info */
+  --color-info: initial;
+  --color-info-content: initial;
+  --color-info-container: initial;
+  --color-on-info-container: initial;
+
+  /* Success */
+  --color-success: initial;
+  --color-success-content: initial;
+  --color-success-container: initial;
+  --color-on-success-container: initial;
+
+  /* Warning */
+  --color-warning: initial;
+  --color-warning-content: initial;
+  --color-warning-container: initial;
+  --color-on-warning-container: initial;
+
+  /* Error */
+  --color-error: initial;
+  --color-error-content: initial;
+  --color-error-container: initial;
+  --color-on-error-container: initial;
+
+  /* ============================================
+   * BASE SCALE (10 tokens)
+   * ============================================ */
+
+  --color-base-100: initial;
+  --color-base-200: initial;
+  --color-base-300: initial;
+  --color-base-400: initial;
+  --color-base-500: initial;
+  --color-base-600: initial;
+  --color-base-700: initial;
+  --color-base-800: initial;
+  --color-base-900: initial;
+  --color-base-content: initial;
+
+  /* ============================================
+   * OUTLINE COLORS (2 tokens)
+   * ============================================ */
+
+  --color-outline: initial;
+  --color-outline-variant: initial;
+
+  /* ============================================
+   * INVERSE COLORS (3 tokens)
+   * ============================================ */
+
+  --color-inverse-surface: initial;
+  --color-inverse-on-surface: initial;
+  --color-inverse-primary: initial;
+
+  /* ============================================
+   * SHADOW & SCRIM (2 tokens)
+   * ============================================ */
+
+  --color-shadow: initial;
+  --color-scrim: initial;
+
+  /* ============================================
+   * ELEVATION SHADOWS (6 + 6 tokens)
+   * Computed from --color-shadow (theme-provided) via color-mix()
+   * Registered in @theme so Tailwind v4 generates shadow-* utilities natively
+   * ============================================ */
+
+  --shadow-xs: 0 1px 2px 0 color-mix(in srgb, var(--color-shadow) 5%, transparent);
+  --shadow-sm: 0 1px 3px 0 color-mix(in srgb, var(--color-shadow) 10%, transparent), 0 1px 2px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent);
+  --shadow-md: 0 4px 6px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--color-shadow) 10%, transparent);
+  --shadow-lg: 0 10px 15px -3px color-mix(in srgb, var(--color-shadow) 10%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--color-shadow) 10%, transparent);
+  --shadow-xl: 0 20px 25px -5px color-mix(in srgb, var(--color-shadow) 10%, transparent), 0 8px 10px -6px color-mix(in srgb, var(--color-shadow) 10%, transparent);
+  --shadow-2xl: 0 25px 50px -12px color-mix(in srgb, var(--color-shadow) 25%, transparent);
+
+  /* MD3 Elevation Levels — semantic shadow aliases */
+  --shadow-elevation-0: none;
+  --shadow-elevation-1: var(--shadow-xs);
+  --shadow-elevation-2: var(--shadow-sm);
+  --shadow-elevation-3: var(--shadow-md);
+  --shadow-elevation-4: var(--shadow-lg);
+  --shadow-elevation-5: var(--shadow-xl);
+
+  /* ============================================
+   * SHAPE / BORDER RADIUS (8 tokens)
+   * Values provided by generated/spacing.css
+   * ============================================ */
+
+  --radius-none: initial;
+  --radius-xs: initial;
+  --radius-sm: initial;
+  --radius-md: initial;
+  --radius-lg: initial;
+  --radius-xl: initial;
+  --radius-2xl: initial;
+  --radius-full: initial;
+
+  /* ============================================
+   * THEME SHAPE TOKENS (8 tokens)
+   * Per-theme shape values from codegen
+   * ============================================ */
+
+  --radius-selector: initial;
+  --radius-field: initial;
+  --radius-box: initial;
+  --size-selector: initial;
+  --size-field: initial;
+  --border: initial;
+  --depth: initial;
+  --noise: initial;
+}
+
+/* Utility classes for colors — token references + color-mix() for states */
+@layer utilities {
+  /* Background Colors */
+  .bg-primary { background-color: var(--color-primary); }
+  .bg-primary-focus { background-color: color-mix(in oklch, var(--color-primary), black 10%); }
+  .bg-primary-container { background-color: var(--color-primary-container); }
+
+  .bg-secondary { background-color: var(--color-secondary); }
+  .bg-secondary-focus { background-color: color-mix(in oklch, var(--color-secondary), black 10%); }
+  .bg-secondary-container { background-color: var(--color-secondary-container); }
+
+  .bg-tertiary { background-color: var(--color-tertiary); }
+  .bg-tertiary-focus { background-color: color-mix(in oklch, var(--color-tertiary), black 10%); }
+  .bg-tertiary-container { background-color: var(--color-tertiary-container); }
+
+  .bg-surface { background-color: var(--color-surface); }
+  .bg-surface-dim { background-color: var(--color-surface-dim); }
+  .bg-surface-bright { background-color: var(--color-surface-bright); }
+  .bg-surface-container-lowest { background-color: var(--color-surface-container-lowest); }
+  .bg-surface-container-low { background-color: var(--color-surface-container-low); }
+  .bg-surface-container { background-color: var(--color-surface-container); }
+  .bg-surface-container-high { background-color: var(--color-surface-container-high); }
+  .bg-surface-container-highest { background-color: var(--color-surface-container-highest); }
+
+  .bg-info { background-color: var(--color-info); }
+  .bg-info-container { background-color: var(--color-info-container); }
+  .bg-success { background-color: var(--color-success); }
+  .bg-success-container { background-color: var(--color-success-container); }
+  .bg-warning { background-color: var(--color-warning); }
+  .bg-warning-container { background-color: var(--color-warning-container); }
+  .bg-error { background-color: var(--color-error); }
+  .bg-error-container { background-color: var(--color-error-container); }
+
+  .bg-base-100 { background-color: var(--color-base-100); }
+  .bg-base-200 { background-color: var(--color-base-200); }
+  .bg-base-300 { background-color: var(--color-base-300); }
+  .bg-base-400 { background-color: var(--color-base-400); }
+  .bg-base-500 { background-color: var(--color-base-500); }
+  .bg-base-600 { background-color: var(--color-base-600); }
+  .bg-base-700 { background-color: var(--color-base-700); }
+  .bg-base-800 { background-color: var(--color-base-800); }
+  .bg-base-900 { background-color: var(--color-base-900); }
+
+  /* Text Colors */
+  .text-primary { color: var(--color-primary); }
+  .text-primary-content { color: var(--color-primary-content); }
+  .text-on-primary-container { color: var(--color-on-primary-container); }
+
+  .text-secondary { color: var(--color-secondary); }
+  .text-secondary-content { color: var(--color-secondary-content); }
+  .text-on-secondary-container { color: var(--color-on-secondary-container); }
+
+  .text-tertiary { color: var(--color-tertiary); }
+  .text-tertiary-content { color: var(--color-tertiary-content); }
+  .text-on-tertiary-container { color: var(--color-on-tertiary-container); }
+
+  .text-on-surface { color: var(--color-on-surface); }
+  .text-on-surface-variant { color: var(--color-on-surface-variant); }
+
+  .text-info { color: var(--color-info); }
+  .text-info-content { color: var(--color-info-content); }
+  .text-on-info-container { color: var(--color-on-info-container); }
+
+  .text-success { color: var(--color-success); }
+  .text-success-content { color: var(--color-success-content); }
+  .text-on-success-container { color: var(--color-on-success-container); }
+
+  .text-warning { color: var(--color-warning); }
+  .text-warning-content { color: var(--color-warning-content); }
+  .text-on-warning-container { color: var(--color-on-warning-container); }
+
+  .text-error { color: var(--color-error); }
+  .text-error-content { color: var(--color-error-content); }
+  .text-on-error-container { color: var(--color-on-error-container); }
+
+  .text-base-content { color: var(--color-base-content); }
+
+  /* Border Colors */
+  .border-primary { border-color: var(--color-primary); }
+  .border-secondary { border-color: var(--color-secondary); }
+  .border-tertiary { border-color: var(--color-tertiary); }
+  .border-outline { border-color: var(--color-outline); }
+  .border-outline-variant { border-color: var(--color-outline-variant); }
+  .border-info { border-color: var(--color-info); }
+  .border-success { border-color: var(--color-success); }
+  .border-warning { border-color: var(--color-warning); }
+  .border-error { border-color: var(--color-error); }
+
+  /* Ring Colors */
+  .ring-primary { --tw-ring-color: var(--color-primary); }
+  .ring-secondary { --tw-ring-color: var(--color-secondary); }
+  .ring-tertiary { --tw-ring-color: var(--color-tertiary); }
+  .ring-info { --tw-ring-color: var(--color-info); }
+  .ring-success { --tw-ring-color: var(--color-success); }
+  .ring-warning { --tw-ring-color: var(--color-warning); }
+  .ring-error { --tw-ring-color: var(--color-error); }
+
+  /* Accent Colors */
+  .bg-accent { background-color: var(--color-accent); }
+  .bg-accent-focus { background-color: color-mix(in oklch, var(--color-accent), black 10%); }
+  .text-accent { color: var(--color-accent); }
+  .text-accent-content { color: var(--color-accent-content); }
+  .border-accent { border-color: var(--color-accent); }
+  .ring-accent { --tw-ring-color: var(--color-accent); }
+
+  /* Neutral Colors */
+  .bg-neutral { background-color: var(--color-neutral); }
+  .bg-neutral-focus { background-color: color-mix(in oklch, var(--color-neutral), black 10%); }
+  .text-neutral { color: var(--color-neutral); }
+  .text-neutral-content { color: var(--color-neutral-content); }
+  .border-neutral { border-color: var(--color-neutral); }
+  .ring-neutral { --tw-ring-color: var(--color-neutral); }
+
+  /* Surface Variant */
+  .bg-surface-variant { background-color: var(--color-surface-variant); }
+
+  /* Inverse Colors */
+  .bg-inverse-surface { background-color: var(--color-inverse-surface); }
+  .text-inverse-on-surface { color: var(--color-inverse-on-surface); }
+  .text-inverse-primary { color: var(--color-inverse-primary); }
+
+  /* MD3 Elevation Utilities — semantic shadow levels */
+  .elevation-0 { box-shadow: var(--shadow-elevation-0); }
+  .elevation-1 { box-shadow: var(--shadow-elevation-1); }
+  .elevation-2 { box-shadow: var(--shadow-elevation-2); }
+  .elevation-3 { box-shadow: var(--shadow-elevation-3); }
+  .elevation-4 { box-shadow: var(--shadow-elevation-4); }
+  .elevation-5 { box-shadow: var(--shadow-elevation-5); }
+}
+
+
+/* Custom utilities */
+/**
+ * Custom utility classes
+ * Extends Tailwind CSS v4 with additional utilities
+ */
+
+/* Responsive grid utilities with auto-fill/auto-fit */
+@utility grid-cols-auto-fill-* {
+  grid-template-columns: repeat(auto-fill, minmax(min(calc(--value(integer) * 0.25rem), 100%), 1fr));
+}
+
+@utility grid-cols-auto-fit-* {
+  grid-template-columns: repeat(auto-fit, minmax(min(calc(--value(integer) * 0.25rem), 100%), 1fr));
+}
+
+/* Screen reader only utility - 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;
+}
+
+/* Undo sr-only for focus states (useful for skip links) */
+.not-sr-only {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+
+/* GENERATED — DO NOT EDIT */
+/* Source: tokens/_spacing.yaml */
+/* Generator: duskmoon-codegen v2.0.0 */
+
+:root {
+  --spacing-0: 0px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --spacing-16: 64px;
+  --spacing-20: 80px;
+  --spacing-24: 96px;
+
+  --radius-none: 0px;
+  --radius-xs: 4px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-2xl: 28px;
+  --radius-full: 9999px;
+
+  --elevation-level0: 0px;
+  --elevation-level1: 1px;
+  --elevation-level2: 3px;
+  --elevation-level3: 6px;
+  --elevation-level4: 8px;
+  --elevation-level5: 12px;
+}
+

package/dist/components/accordion.css

@@ -42,7 +42,7 @@
     background-color: transparent;
     border: none;
     cursor: pointer;
-    text-align: left;
+    text-align: start;
     transition: background-color 150ms ease-in-out;
   }
 
@@ -56,7 +56,8 @@
     box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
-  .accordion-item.open .accordion-header {
+  .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header,
+  details.accordion-item[open] > .accordion-header {
     background-color: var(--color-surface-container);
   }
 
@@ -67,7 +68,7 @@
     justify-content: center;
     width: 1.5rem;
     height: 1.5rem;
-    margin-right: 0.75rem;
+    margin-inline-end: 0.75rem;
     color: var(--color-on-surface-variant);
     flex-shrink: 0;
   }
@@ -92,13 +93,14 @@
     justify-content: center;
     width: 1.5rem;
     height: 1.5rem;
-    margin-left: auto;
+    margin-inline-start: auto;
     color: var(--color-on-surface-variant);
     transition: transform 200ms ease-in-out;
     flex-shrink: 0;
   }
 
-  .accordion-item.open .accordion-expand {
+  .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header > .accordion-expand,
+  details.accordion-item[open] > .accordion-header > .accordion-expand {
     transform: rotate(180deg);
   }
 
@@ -109,12 +111,14 @@
     transition: grid-template-rows 200ms ease-in-out;
   }
 
-  .accordion-item.open .accordion-content {
+  .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-content,
+  details.accordion-item[open] > .accordion-content {
     grid-template-rows: 1fr;
   }
 
   .accordion-body {
     overflow: hidden;
+    min-block-size: 0;
   }
 
   .accordion-body-inner {
@@ -152,7 +156,8 @@
   }
 
   .accordion-filled .accordion-header:hover,
-  .accordion-filled .accordion-item.open .accordion-header {
+  .accordion-filled > .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header,
+  .accordion-filled > details.accordion-item[open] > .accordion-header {
     background-color: var(--color-surface-container-high);
   }
 
@@ -224,15 +229,34 @@
   }
 
   /* Color Variants */
-  .accordion-primary .accordion-item.open .accordion-header {
+  .accordion-primary > .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header,
+  .accordion-primary > details.accordion-item[open] > .accordion-header {
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
   }
 
-  .accordion-primary .accordion-item.open .accordion-expand {
+  .accordion-primary > .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header > .accordion-expand,
+  .accordion-primary > details.accordion-item[open] > .accordion-header > .accordion-expand {
     color: var(--color-on-primary-container);
   }
 
+  .accordion-outlined { border: 1px solid var(--color-outline-variant); }
+  .accordion-comfortable .accordion-header { padding: 1.25rem; }
+  .accordion-header-icon { display: flex; align-items: center; gap: 0.75rem; }
+  .accordion-header-icon-leading { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
+  .accordion-item-disabled > .accordion-header { opacity: 0.6; cursor: not-allowed; }
+  .accordion-no-animation .accordion-content, .accordion-no-animation .accordion-expand { transition: none; }
+  .accordion-secondary > .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header,
+  .accordion-secondary > details.accordion-item[open] > .accordion-header { color: var(--color-secondary); }
+  .accordion-tertiary > .accordion-item:not(details):is(.open, .accordion-item-open) > .accordion-header,
+  .accordion-tertiary > details.accordion-item[open] > .accordion-header { color: var(--color-tertiary); }
+  details.accordion-item > summary { list-style: none; }
+  details.accordion-item > summary::-webkit-details-marker { display: none; }
+  details.accordion-item:not([open]) > .accordion-content,
+  .accordion-item:not(details):not(.open):not(.accordion-item-open) > .accordion-content,
+  .accordion-content[hidden] { display: none; }
+  .accordion-title, .accordion-body-inner { min-inline-size: 0; overflow-wrap: anywhere; }
+
   /* Reduce Motion */
   @media (prefers-reduced-motion: reduce) {
     .accordion-content,