@digiko-npm/designsystem 0.9.8 → 0.9.10

package/dist/designsystem.css

@@ -1,4 +1,4 @@
-/* @ds/designsystem v0.9.8 */
+/* @ds/designsystem v0.9.9 */
 /* ==========================================================================
    @digiko-npm/designsystem
 
@@ -165,6 +165,10 @@
 
 /* Shared tokens (same in both themes) */
 :root {
+  /* --- Static (theme-independent, never change between light/dark) --- */
+  --ds-color-static-white: #fafafa;
+  --ds-color-static-black: #09090b;
+
   /* --- Semantic Status --- */
   --ds-color-success: #16a34a;
   --ds-color-success-subtle: rgba(22, 163, 74, 0.1);
@@ -9497,17 +9501,17 @@ hr {
    Full-width hero section with background image, gradient overlay,
    and optional frosted glass backdrop.
 
-   Intentionally uses theme-independent colors for text on photo backgrounds.
-   The overlay uses color-mix() with --ds-color-bg for theme-aware darkening
-   while title/subtitle stay white for readability on any photo.
+   The overlay uses color-mix() with --ds-color-bg for theme-aware darkening.
+   Text color is NOT forced — use ds-text-always-white or ds-text-primary
+   depending on your background.
 
    Usage:
      <section class="ds-hero" style="background-image: url(...)">
        <div class="ds-hero__overlay"></div>
        <div class="ds-hero__content ds-container">
          <div class="ds-hero__backdrop">
-           <h1 class="ds-hero__title ds-hero-title">Heading</h1>
-           <p class="ds-hero__subtitle">Subheading</p>
+           <h1 class="ds-hero__title ds-hero-title ds-text-always-white">Heading</h1>
+           <p class="ds-hero__subtitle ds-text-always-white">Subheading</p>
          </div>
        </div>
      </section>
@@ -9599,13 +9603,11 @@ hr {
   margin-inline: auto;
 }
 
-/* --- Title & subtitle (theme-independent white for photo readability) --- */
-.ds-hero__title {
-  color: var(--ds-color-on-inverted);
-}
-
+/* --- Title & subtitle (no forced color — use ds-text-always-white or
+   ds-text-primary depending on your overlay/backdrop) --- */
+.ds-hero__title,
 .ds-hero__subtitle {
-  color: rgba(255, 255, 255, 0.85);
+  color: inherit;
 }
 
 /* ==========================================================================
@@ -11546,6 +11548,53 @@ tr:hover .ds-sortable__handle,
 }
 
 
+/* --- Space-X (horizontal gap between children) --- */
+.ds-space-x-1 > * + * { margin-inline-start: var(--ds-space-1); }
+.ds-space-x-2 > * + * { margin-inline-start: var(--ds-space-2); }
+.ds-space-x-3 > * + * { margin-inline-start: var(--ds-space-3); }
+.ds-space-x-4 > * + * { margin-inline-start: var(--ds-space-4); }
+
+/* --- Decimal spacing (0.5 = 0.125rem, 1.5 = 0.375rem, 2.5 = 0.625rem) --- */
+.ds-gap-0\.5 { gap: 0.125rem; }
+.ds-gap-1\.5 { gap: 0.375rem; }
+.ds-gap-2\.5 { gap: 0.625rem; }
+.ds-p-0\.5 { padding: 0.125rem; }
+.ds-p-1\.5 { padding: 0.375rem; }
+.ds-px-0\.5 { padding-inline: 0.125rem; }
+.ds-px-1\.5 { padding-inline: 0.375rem; }
+.ds-py-0\.5 { padding-inline: 0.125rem; }
+.ds-py-1\.5 { padding-block: 0.375rem; }
+.ds-mt-0\.5 { margin-block-start: 0.125rem; }
+.ds-mb-0\.5 { margin-block-end: 0.125rem; }
+.ds-space-y-0\.5 > * + * { margin-block-start: 0.125rem; }
+.ds-space-y-1\.5 > * + * { margin-block-start: 0.375rem; }
+.ds-space-x-0\.5 > * + * { margin-inline-start: 0.125rem; }
+.ds-space-x-1\.5 > * + * { margin-inline-start: 0.375rem; }
+
+/* --- Responsive: md (768px) — all-sides padding --- */
+@media (min-width: 768px) {
+
+  .ds-md\:p-2 { padding: var(--ds-space-2); }
+  .ds-md\:p-3 { padding: var(--ds-space-3); }
+  .ds-md\:p-4 { padding: var(--ds-space-4); }
+  .ds-md\:p-5 { padding: var(--ds-space-5); }
+  .ds-md\:p-6 { padding: var(--ds-space-6); }
+  .ds-md\:p-8 { padding: var(--ds-space-8); }
+  .ds-md\:p-10 { padding: var(--ds-space-10); }
+  .ds-md\:p-12 { padding: var(--ds-space-12); }
+}
+
+
+/* --- Responsive: lg (1024px) — all-sides padding --- */
+@media (min-width: 1024px) {
+
+  .ds-lg\:p-6 { padding: var(--ds-space-6); }
+  .ds-lg\:p-8 { padding: var(--ds-space-8); }
+  .ds-lg\:p-10 { padding: var(--ds-space-10); }
+  .ds-lg\:p-12 { padding: var(--ds-space-12); }
+}
+
+
 /* ==========================================================================
    Utilities: Sizing
    Width, height, min/max constraints.
@@ -11620,6 +11669,16 @@ tr:hover .ds-sortable__handle,
 }
 
 
+/* --- Decimal sizing --- */
+.ds-w-0\.5 { width: 0.125rem; }
+.ds-w-1\.5 { width: 0.375rem; }
+.ds-w-2\.5 { width: 0.625rem; }
+.ds-w-3\.5 { width: 0.875rem; }
+.ds-h-0\.5 { height: 0.125rem; }
+.ds-h-1\.5 { height: 0.375rem; }
+.ds-h-2\.5 { height: 0.625rem; }
+.ds-h-3\.5 { height: 0.875rem; }
+
 /* ==========================================================================
    Utilities: Text, Visual & style helpers
    ========================================================================== */
@@ -11691,6 +11750,10 @@ tr:hover .ds-sortable__handle,
 .ds-text-interactive { color: var(--ds-color-interactive); }
 .ds-text-on-inverted { color: var(--ds-color-on-inverted); }
 
+/* --- Theme-independent colors (ignore light/dark toggle) --- */
+.ds-text-always-white { color: var(--ds-color-static-white); }
+.ds-text-always-black { color: var(--ds-color-static-black); }
+
 /* --- Background Color --- */
 .ds-bg-base { background-color: var(--ds-color-bg); }
 .ds-bg-surface { background-color: var(--ds-color-surface); }
@@ -11996,6 +12059,16 @@ tr:hover .ds-sortable__handle,
   border-width: 0;
 }
 
+/* --- Responsive: md (768px) — small text sizes --- */
+@media (min-width: 768px) {
+
+  .ds-md\:text-xs { font-size: var(--ds-text-xs); }
+  .ds-md\:text-sm { font-size: var(--ds-text-sm); }
+  .ds-md\:text-base { font-size: var(--ds-text-base); }
+  .ds-md\:text-5xl { font-size: var(--ds-text-5xl); }
+}
+
+
 /* ==========================================================================
    Utilities: Interactive
    Hover states, reveal patterns, focus rings, and cursor utilities.
@@ -12113,80 +12186,193 @@ tr:hover .ds-sortable__handle,
   color: var(--ds-color-text);
 }
 
+/* --- Backdrop Blur (extended) --- */
+.ds-backdrop-blur-lg { backdrop-filter: blur(16px); }
+.ds-backdrop-blur-xl { backdrop-filter: blur(24px); }
+.ds-backdrop-blur-2xl { backdrop-filter: blur(40px); }
+
 /* ==========================================================================
    Utilities: State Variants
-   Hover, focus, active, focus-within, placeholder, and group-hover
-   modifiers for DS utility classes.
+   Comprehensive hover, focus, active, disabled, focus-within, placeholder,
+   and group-hover modifiers for DS utility classes.
+
+   Pattern: {state}\:ds-{utility}:{pseudo} { property: value; }
+   Usage:   <div class="ds-bg-surface hover:ds-bg-hover">
+
+   Only semantic DS tokens are used — no hardcoded values.
    ========================================================================== */
 
 /* --- Group Marker (enables group-hover on descendants) ---
    Supports both .group and .ds-group for compatibility. */
 .ds-group { /* marker — no styles */ }
 
+/* ==========================================================================
+   HOVER
+   ========================================================================== */
+
 /* --- Hover: Background --- */
 .hover\:ds-bg-base:hover { background-color: var(--ds-color-bg); }
-.hover\:ds-bg-elevated:hover { background-color: var(--ds-color-bg-elevated); }
-.hover\:ds-bg-muted:hover { background-color: var(--ds-color-bg-muted); }
 .hover\:ds-bg-subtle:hover { background-color: var(--ds-color-bg-subtle); }
+.hover\:ds-bg-muted:hover { background-color: var(--ds-color-bg-muted); }
+.hover\:ds-bg-elevated:hover { background-color: var(--ds-color-bg-elevated); }
 .hover\:ds-bg-surface:hover { background-color: var(--ds-color-surface); }
+.hover\:ds-bg-hover:hover { background-color: var(--ds-color-surface-hover); }
 .hover\:ds-bg-inverted:hover { background-color: var(--ds-color-inverted); }
+.hover\:ds-bg-overlay:hover { background-color: var(--ds-color-overlay-hover); }
+.hover\:ds-bg-success:hover { background-color: var(--ds-color-success); }
+.hover\:ds-bg-success-subtle:hover { background-color: var(--ds-color-success-subtle); }
+.hover\:ds-bg-error:hover { background-color: var(--ds-color-error); }
+.hover\:ds-bg-error-subtle:hover { background-color: var(--ds-color-error-subtle); }
+.hover\:ds-bg-warning:hover { background-color: var(--ds-color-warning); }
+.hover\:ds-bg-warning-subtle:hover { background-color: var(--ds-color-warning-subtle); }
 .hover\:ds-bg-info:hover { background-color: var(--ds-color-info); }
+.hover\:ds-bg-info-subtle:hover { background-color: var(--ds-color-info-subtle); }
+.hover\:ds-bg-accent-blue:hover { background-color: var(--ds-color-accent-blue); }
+.hover\:ds-bg-accent-blue-subtle:hover { background-color: var(--ds-color-accent-blue-subtle); }
+.hover\:ds-bg-accent-purple:hover { background-color: var(--ds-color-accent-purple); }
+.hover\:ds-bg-accent-purple-subtle:hover { background-color: var(--ds-color-accent-purple-subtle); }
 
 /* --- Hover: Text --- */
 .hover\:ds-text-primary:hover { color: var(--ds-color-text); }
 .hover\:ds-text-secondary:hover { color: var(--ds-color-text-secondary); }
-.hover\:ds-text-interactive:hover { color: var(--ds-color-interactive); }
+.hover\:ds-text-tertiary:hover { color: var(--ds-color-text-tertiary); }
+.hover\:ds-text-on-inverted:hover { color: var(--ds-color-on-inverted); }
+.hover\:ds-text-interactive:hover { color: var(--ds-color-interactive-hover); }
+.hover\:ds-text-success:hover { color: var(--ds-color-success); }
+.hover\:ds-text-error:hover { color: var(--ds-color-error); }
+.hover\:ds-text-warning:hover { color: var(--ds-color-warning); }
+.hover\:ds-text-info:hover { color: var(--ds-color-info); }
 
 /* --- Hover: Border --- */
+.hover\:ds-border-default:hover { border-color: var(--ds-color-border); }
 .hover\:ds-border-hover:hover { border-color: var(--ds-color-border-hover); }
+.hover\:ds-border-active:hover { border-color: var(--ds-color-border-active); }
 .hover\:ds-border-interactive:hover { border-color: var(--ds-color-interactive); }
+.hover\:ds-border-success:hover { border-color: var(--ds-color-success); }
+.hover\:ds-border-error:hover { border-color: var(--ds-color-error); }
+.hover\:ds-border-info:hover { border-color: var(--ds-color-info); }
+
+/* --- Hover: Opacity --- */
+.hover\:ds-opacity-0:hover { opacity: 0; }
+.hover\:ds-opacity-50:hover { opacity: 0.5; }
+.hover\:ds-opacity-75:hover { opacity: 0.75; }
+.hover\:ds-opacity-100:hover { opacity: 1; }
+
+/* --- Hover: Transform --- */
+.hover\:ds-scale-105:hover { transform: scale(1.05); }
+.hover\:ds-scale-110:hover { transform: scale(1.10); }
 
 /* --- Hover: Decoration --- */
 .hover\:ds-underline:hover { text-decoration: underline; text-underline-offset: 2px; }
+.hover\:ds-no-underline:hover { text-decoration: none; }
+
+/* --- Hover: Shadow --- */
+.hover\:ds-shadow:hover { box-shadow: var(--ds-shadow-md); }
+.hover\:ds-shadow-lg:hover { box-shadow: var(--ds-shadow-lg); }
+.hover\:ds-shadow-none:hover { box-shadow: none; }
+
+/* ==========================================================================
+   FOCUS
+   ========================================================================== */
 
-/* --- Focus --- */
 .focus\:ds-outline-none:focus { outline: none; }
 .focus\:ds-ring-0:focus { box-shadow: none; }
-.focus\:ds-ring-2:focus { box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-color-interactive); }
+.focus\:ds-ring-2:focus { box-shadow: 0 0 0 var(--ds-ring-width, 2px) var(--ds-color-interactive); }
+.focus\:ds-border-interactive:focus { border-color: var(--ds-color-interactive); }
+
+/* --- Focus-Visible (keyboard only) --- */
+.focus-visible\:ds-outline-none:focus-visible { outline: none; }
+.focus-visible\:ds-ring-2:focus-visible { box-shadow: 0 0 0 var(--ds-ring-width, 2px) var(--ds-color-interactive); }
 
 /* --- Focus-Within --- */
 .focus-within\:ds-border-interactive:focus-within { border-color: var(--ds-color-interactive); }
+.focus-within\:ds-border-error:focus-within { border-color: var(--ds-color-error); }
+
+/* ==========================================================================
+   ACTIVE
+   ========================================================================== */
 
-/* --- Active --- */
+.active\:ds-bg-hover:active { background-color: var(--ds-color-surface-hover); }
+.active\:ds-bg-muted:active { background-color: var(--ds-color-bg-muted); }
 .active\:ds-bg-elevated:active { background-color: var(--ds-color-bg-elevated); }
-.active\:ds-text-secondary:active { color: var(--ds-color-text-secondary); }
+.active\:ds-scale-95:active { transform: scale(0.95); }
+.active\:ds-scale-98:active { transform: scale(0.98); }
+
+/* ==========================================================================
+   DISABLED
+   ========================================================================== */
+
+.disabled\:ds-opacity-30:disabled,
+.disabled\:ds-opacity-30[aria-disabled="true"] { opacity: 0.3; }
+
+.disabled\:ds-opacity-50:disabled,
+.disabled\:ds-opacity-50[aria-disabled="true"] { opacity: 0.5; }
+
+.disabled\:ds-cursor-not-allowed:disabled,
+.disabled\:ds-cursor-not-allowed[aria-disabled="true"] { cursor: not-allowed; }
+
+.disabled\:ds-bg-subtle:disabled,
+.disabled\:ds-bg-subtle[aria-disabled="true"] { background-color: var(--ds-color-bg-subtle); }
+
+.disabled\:ds-pointer-events-none:disabled,
+.disabled\:ds-pointer-events-none[aria-disabled="true"] { pointer-events: none; }
+
+/* ==========================================================================
+   PLACEHOLDER
+   ========================================================================== */
 
-/* --- Placeholder --- */
 .placeholder\:ds-text-tertiary::placeholder { color: var(--ds-color-text-tertiary); }
+.placeholder\:ds-text-secondary::placeholder { color: var(--ds-color-text-secondary); }
 
-/* --- Group Hover (descendants of .group or .ds-group on hover) --- */
-.group:hover > .group-hover\:ds-text-interactive,
-.group:hover   .group-hover\:ds-text-interactive,
-.ds-group:hover > .group-hover\:ds-text-interactive,
-.ds-group:hover   .group-hover\:ds-text-interactive {
-  color: var(--ds-color-interactive);
-}
+/* ==========================================================================
+   GROUP-HOVER
+   Descendants of .group or .ds-group, activated on parent hover.
+   Uses both direct-child and any-descendant for flexibility.
+   ========================================================================== */
 
-.group:hover > .group-hover\:ds-scale-110,
-.group:hover   .group-hover\:ds-scale-110,
-.ds-group:hover > .group-hover\:ds-scale-110,
-.ds-group:hover   .group-hover\:ds-scale-110 {
-  transform: scale(1.1);
-}
+/* Text */
+.group:hover .group-hover\:ds-text-primary,
+.ds-group:hover .group-hover\:ds-text-primary { color: var(--ds-color-text); }
 
-.group:hover > .group-hover\:ds-translate-x-1,
-.group:hover   .group-hover\:ds-translate-x-1,
-.ds-group:hover > .group-hover\:ds-translate-x-1,
-.ds-group:hover   .group-hover\:ds-translate-x-1 {
-  transform: translateX(0.25rem);
-}
+.group:hover .group-hover\:ds-text-secondary,
+.ds-group:hover .group-hover\:ds-text-secondary { color: var(--ds-color-text-secondary); }
 
-.group:hover > .group-hover\:ds-opacity-100,
-.group:hover   .group-hover\:ds-opacity-100,
-.ds-group:hover > .group-hover\:ds-opacity-100,
-.ds-group:hover   .group-hover\:ds-opacity-100 {
-  opacity: 1;
-}
+.group:hover .group-hover\:ds-text-interactive,
+.ds-group:hover .group-hover\:ds-text-interactive { color: var(--ds-color-interactive-hover); }
+
+.group:hover .group-hover\:ds-text-success,
+.ds-group:hover .group-hover\:ds-text-success { color: var(--ds-color-success); }
+
+.group:hover .group-hover\:ds-text-info,
+.ds-group:hover .group-hover\:ds-text-info { color: var(--ds-color-info); }
+
+/* Opacity */
+.group:hover .group-hover\:ds-opacity-100,
+.ds-group:hover .group-hover\:ds-opacity-100 { opacity: 1; }
+
+.group:hover .group-hover\:ds-opacity-0,
+.ds-group:hover .group-hover\:ds-opacity-0 { opacity: 0; }
+
+/* Transform */
+.group:hover .group-hover\:ds-scale-105,
+.ds-group:hover .group-hover\:ds-scale-105 { transform: scale(1.05); }
+
+.group:hover .group-hover\:ds-scale-110,
+.ds-group:hover .group-hover\:ds-scale-110 { transform: scale(1.10); }
+
+.group:hover .group-hover\:ds-translate-x-1,
+.ds-group:hover .group-hover\:ds-translate-x-1 { transform: translateX(0.25rem); }
+
+.group:hover .group-hover\:ds-translate-y-0,
+.ds-group:hover .group-hover\:ds-translate-y-0 { transform: translateY(0); }
+
+/* Border */
+.group:hover .group-hover\:ds-border-active,
+.ds-group:hover .group-hover\:ds-border-active { border-color: var(--ds-color-border-active); }
+
+/* Visibility */
+.group:hover .group-hover\:ds-visible,
+.ds-group:hover .group-hover\:ds-visible { visibility: visible; }
 
 /* ==========================================================================
    Utilities: Accessibility