@digiko-npm/designsystem 0.8.3 → 0.9.1

package/dist/designsystem.css

@@ -1,4 +1,4 @@
-/* @ds/designsystem v0.8.3 */
+/* @ds/designsystem v0.9.1 */
 /* ==========================================================================
    @digiko-npm/designsystem
 
@@ -9479,6 +9479,628 @@ button.ds-tag:focus-visible {
 }
 
 
+/* ==========================================================================
+   Component: Hero
+   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.
+
+   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>
+         </div>
+       </div>
+     </section>
+
+   Variants:
+     ds-hero--full      Generous padding, auto height (no min-height)
+     ds-hero__overlay--subtle   Lighter overlay, photo shows through more
+
+   ARIA: role="banner" or within <header>. Background images are decorative
+   — add meaningful content in the markup, not in CSS.
+   ========================================================================== */
+
+.ds-hero {
+  position: relative;
+  min-height: 28rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-size: cover;
+  background-position: center;
+}
+
+/* --- Full variant (generous padding, no min-height) --- */
+.ds-hero--full {
+  min-height: auto;
+  padding-block: var(--ds-space-16);
+}
+
+@media (min-width: 768px) {
+
+  .ds-hero--full {
+    padding-block: var(--ds-space-20);
+  }
+}
+
+
+/* --- Gradient overlay (theme-aware darkening) --- */
+.ds-hero__overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--ds-color-bg) 70%, transparent),
+    color-mix(in srgb, var(--ds-color-bg) 92%, transparent)
+  );
+}
+
+.ds-hero__overlay--subtle {
+  background: linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--ds-color-bg) 20%, transparent),
+    color-mix(in srgb, var(--ds-color-bg) 40%, transparent)
+  );
+}
+
+[data-theme="dark"] .ds-hero__overlay {
+  background: linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--ds-color-bg) 80%, transparent),
+    color-mix(in srgb, var(--ds-color-bg) 95%, transparent)
+  );
+}
+
+[data-theme="dark"] .ds-hero__overlay--subtle {
+  background: linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--ds-color-bg) 30%, transparent),
+    color-mix(in srgb, var(--ds-color-bg) 50%, transparent)
+  );
+}
+
+/* --- Content wrapper (above overlay) --- */
+.ds-hero__content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+}
+
+/* --- Frosted glass backdrop --- */
+.ds-hero__backdrop {
+  display: block;
+  padding: var(--ds-space-8);
+  border-radius: var(--ds-radius-2xl);
+  background: rgba(0, 0, 0, 0.35);
+  backdrop-filter: blur(32px) saturate(1.6);
+  -webkit-backdrop-filter: blur(32px) saturate(1.6);
+  max-width: 40rem;
+  margin-inline: auto;
+}
+
+/* --- Title & subtitle (theme-independent white for photo readability) --- */
+.ds-hero__title {
+  color: #fff;
+}
+
+.ds-hero__subtitle {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+/* ==========================================================================
+   Component: Admin Layout
+   Parent-driven sidebar + header + main content system for admin dashboards.
+
+   All width/offset decisions are controlled by a SINGLE class on .ds-admin:
+   - .ds-admin--expanded   → sidebar 16rem, offsets 16rem
+   - .ds-admin--collapsed  → sidebar 4rem, offsets 4rem
+
+   This guarantees sidebar, header, and main content transition in perfect sync.
+
+   Variants:
+     ds-admin--expanded     Sidebar open (16rem) — default on desktop
+     ds-admin--collapsed    Sidebar collapsed (4rem) — icons only
+
+   Usage:
+     <div class="ds-admin ds-admin--expanded">
+       <aside class="ds-admin__sidebar">
+         <div class="ds-admin__sidebar-header">Logo</div>
+         <nav class="ds-admin__nav">
+           <a class="ds-admin__nav-item ds-admin__nav-item--active">
+             <span class="ds-admin__nav-icon">...</span>
+             <span class="ds-admin__nav-label">Dashboard</span>
+           </a>
+           <div class="ds-admin__subnav">
+             <a class="ds-admin__subnav-item">Sub page</a>
+           </div>
+         </nav>
+         <div class="ds-admin__sidebar-footer">
+           <a class="ds-admin__footer-link">Settings</a>
+         </div>
+       </aside>
+       <header class="ds-admin__header">
+         <div class="ds-admin__header-inner">...</div>
+       </header>
+       <main class="ds-admin__main">
+         <div class="ds-admin__content">...</div>
+       </main>
+     </div>
+
+   Mobile: Sidebar is hidden. Use ds-drawer for mobile menu.
+   Toggle .ds-admin__overlay when mobile menu is open.
+
+   ARIA:
+     - <aside> should have role="navigation" or aria-label="Admin navigation"
+     - Active nav item: aria-current="page"
+     - Mobile toggle: aria-expanded, aria-controls
+   ========================================================================== */
+
+/* --- Layout Variables --- */
+.ds-admin {
+  --ds-admin-sidebar-w: 16rem;
+  --ds-admin-sidebar-w-collapsed: 4rem;
+  --ds-admin-header-h: var(--ds-size-4);
+}
+
+/* ==========================================================================
+   Sidebar
+   ========================================================================== */
+
+.ds-admin__sidebar {
+  display: none;
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--ds-z-dropdown);
+  height: 100dvh;
+  flex-direction: column;
+  border-inline-end: 1px solid var(--ds-color-border);
+  background-color: var(--ds-color-surface);
+  transition: width var(--ds-duration-normal) var(--ds-ease-default);
+  overflow: hidden;
+}
+
+@media (min-width: 1024px) {
+
+  .ds-admin__sidebar {
+    display: flex;
+  }
+
+  .ds-admin--expanded .ds-admin__sidebar {
+    width: var(--ds-admin-sidebar-w);
+  }
+
+  .ds-admin--collapsed .ds-admin__sidebar {
+    width: var(--ds-admin-sidebar-w-collapsed);
+  }
+
+  /* Centered items in collapsed state */
+  .ds-admin--collapsed .ds-admin__nav-item {
+    justify-content: center;
+  }
+
+  .ds-admin--collapsed .ds-admin__footer-link {
+    justify-content: center;
+  }
+
+  /* Hide labels in collapsed state */
+  .ds-admin--collapsed .ds-admin__nav-label,
+  .ds-admin--collapsed .ds-admin__sidebar-badge {
+    display: none;
+  }
+
+  /* Hide subnav in collapsed state */
+  .ds-admin--collapsed .ds-admin__subnav {
+    display: none;
+  }
+}
+
+
+/* --- Sidebar Header (logo area) --- */
+.ds-admin__sidebar-header {
+  display: flex;
+  min-height: var(--ds-admin-header-h);
+  align-items: center;
+  gap: var(--ds-space-2);
+  border-block-end: 1px solid var(--ds-color-border);
+  padding: var(--ds-space-4);
+}
+
+.ds-admin--collapsed .ds-admin__sidebar-header {
+  justify-content: center;
+}
+
+/* --- Sidebar Badge (env indicator, version, etc.) --- */
+.ds-admin__sidebar-badge {
+  border-radius: var(--ds-radius-md);
+  border: 1px solid var(--ds-color-border);
+  background-color: var(--ds-color-bg-elevated);
+  padding: var(--ds-space-0-5) var(--ds-space-1-5);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text-secondary);
+}
+
+/* --- Navigation Area --- */
+.ds-admin__nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--ds-space-6) var(--ds-space-3);
+}
+
+.ds-admin__nav > * + * {
+  margin-block-start: var(--ds-space-1);
+}
+
+/* --- Nav Item --- */
+.ds-admin__nav-item {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-3);
+  border-radius: var(--ds-radius-xl);
+  padding: var(--ds-space-2-5) var(--ds-space-3);
+  color: var(--ds-color-text-secondary);
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease-default),
+    color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-admin__nav-item:hover {
+  background-color: var(--ds-color-surface-hover);
+  color: var(--ds-color-text);
+}
+
+.ds-admin__nav-item--active {
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
+}
+
+/* --- Nav Icon (fixed size prevents reflow on collapse) --- */
+.ds-admin__nav-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+/* --- Nav Label --- */
+.ds-admin__nav-label {
+  white-space: nowrap;
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+}
+
+/* --- Sub-Navigation (nested under a parent item) --- */
+.ds-admin__subnav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-0-5);
+  margin-inline-start: 1.75rem;
+  padding-inline-start: var(--ds-space-3);
+  padding-block: var(--ds-space-1);
+  border-inline-start: 1px solid var(--ds-color-border);
+}
+
+.ds-admin__subnav-item {
+  display: block;
+  padding: var(--ds-space-1-5) var(--ds-space-3);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text-tertiary);
+  border-radius: var(--ds-radius-lg);
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease-default),
+    color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-admin__subnav-item:hover:not(.ds-admin__subnav-item--active) {
+  background-color: var(--ds-color-surface-hover);
+  color: var(--ds-color-text-secondary);
+}
+
+.ds-admin__subnav-item--active {
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
+}
+
+/* --- Sidebar Footer --- */
+.ds-admin__sidebar-footer {
+  border-block-start: 1px solid var(--ds-color-border);
+  padding: var(--ds-space-3);
+}
+
+.ds-admin__sidebar-footer > * + * {
+  margin-block-start: var(--ds-space-1);
+}
+
+/* --- Footer Link --- */
+.ds-admin__footer-link {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: var(--ds-space-3);
+  border-radius: var(--ds-radius-xl);
+  padding: var(--ds-space-2-5) var(--ds-space-3);
+  color: var(--ds-color-text-secondary);
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease-default),
+    color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-admin__footer-link:hover {
+  background-color: var(--ds-color-surface-hover);
+  color: var(--ds-color-text);
+}
+
+/* ==========================================================================
+   Header
+   ========================================================================== */
+
+.ds-admin__header {
+  position: fixed;
+  inset-inline: 0;
+  inset-block-start: 0;
+  z-index: 40;
+  height: var(--ds-admin-header-h);
+  border-block-end: 1px solid var(--ds-color-border);
+  background-color: var(--ds-color-nav-bg);
+  backdrop-filter: blur(20px) saturate(1.5);
+  -webkit-backdrop-filter: blur(20px) saturate(1.5);
+}
+
+.ds-admin__header-inner {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: var(--ds-space-6);
+  margin-inline-start: 0;
+  transition: margin-inline-start var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+/* Hide toggle on desktop */
+@media (min-width: 1024px) {
+
+  .ds-admin__header-toggle {
+    display: none;
+  }
+
+  .ds-admin--expanded .ds-admin__header-inner {
+    margin-inline-start: var(--ds-admin-sidebar-w);
+  }
+
+  .ds-admin--collapsed .ds-admin__header-inner {
+    margin-inline-start: var(--ds-admin-sidebar-w-collapsed);
+  }
+}
+
+
+/* ==========================================================================
+   Main Content
+   ========================================================================== */
+
+.ds-admin__main {
+  padding-block-start: var(--ds-admin-header-h);
+  margin-inline-start: 0;
+  transition: margin-inline-start var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+@media (min-width: 1024px) {
+
+  .ds-admin--expanded .ds-admin__main {
+    margin-inline-start: var(--ds-admin-sidebar-w);
+  }
+
+  .ds-admin--collapsed .ds-admin__main {
+    margin-inline-start: var(--ds-admin-sidebar-w-collapsed);
+  }
+}
+
+
+.ds-admin__content {
+  min-height: 100dvh;
+  padding: var(--ds-space-8) var(--ds-space-6);
+}
+
+@media (min-width: 768px) {
+
+  .ds-admin__content {
+    padding-inline: var(--ds-space-8);
+  }
+}
+
+
+@media (min-width: 1024px) {
+
+  .ds-admin__content {
+    padding-inline: var(--ds-space-12);
+  }
+}
+
+
+.ds-admin__container {
+  max-width: 80rem;
+  margin-inline: auto;
+}
+
+/* ==========================================================================
+   Mobile Overlay
+   ========================================================================== */
+
+.ds-admin__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ds-z-overlay);
+  background-color: var(--ds-color-overlay);
+}
+
+@media (min-width: 1024px) {
+
+  .ds-admin__overlay {
+    display: none;
+  }
+}
+
+
+/* ==========================================================================
+   Mobile Menu (fullscreen drawer, no animation — uses ds-drawer)
+   ========================================================================== */
+
+.ds-admin__mobile-menu {
+  transition: none;
+}
+
+.ds-admin__mobile-menu .ds-drawer__content {
+  width: 100vw;
+  max-width: 100vw;
+  transition: none;
+}
+
+.ds-admin__mobile-menu .ds-drawer__body {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (min-width: 1024px) {
+
+  .ds-admin__mobile-menu {
+    display: none !important;
+  }
+}
+
+
+
+/* === Content — Rich text and prose === */
+/* ==========================================================================
+   Component: Prose Block
+   Full markdown-rendered content styling. Use for CMS output, blog posts,
+   documentation, or any container with user-generated rich text.
+
+   Note: The lighter `.ds-prose` in base/typography.css handles simple
+   inline rich text (p + p spacing, links, lists). This component is for
+   comprehensive markdown rendering with headings, code blocks, blockquotes,
+   images, and horizontal rules.
+
+   Usage:
+     <div class="ds-prose-block">
+       <h2>Title</h2>
+       <p>Paragraph with <a href="#">link</a> and <code>code</code>.</p>
+       <pre><code>code block</code></pre>
+       <blockquote>Quote</blockquote>
+     </div>
+   ========================================================================== */
+
+.ds-prose-block {
+  line-height: var(--ds-leading-relaxed);
+}
+
+.ds-prose-block :is(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+  margin-block-start: 1.5em;
+  margin-block-end: 0.5em;
+}
+
+.ds-prose-block :is(h1, h2, h3, h4, h5, h6):first-child {
+  margin-block-start: 0;
+}
+
+.ds-prose-block p {
+  color: var(--ds-color-text-secondary);
+  margin-block-end: 1em;
+}
+
+.ds-prose-block p:last-child {
+  margin-block-end: 0;
+}
+
+.ds-prose-block a {
+  color: var(--ds-color-interactive);
+  text-decoration: none;
+}
+
+.ds-prose-block a:hover {
+  text-decoration: underline;
+}
+
+.ds-prose-block strong {
+  color: var(--ds-color-text);
+  font-weight: var(--ds-weight-semibold);
+}
+
+.ds-prose-block code {
+  font-family: var(--ds-font-mono);
+  font-size: var(--ds-text-sm);
+  background-color: var(--ds-color-bg-elevated);
+  padding: 0.125em 0.375em;
+  border-radius: var(--ds-radius-sm);
+}
+
+.ds-prose-block pre {
+  background-color: var(--ds-color-bg-elevated);
+  padding: var(--ds-space-4);
+  border-radius: var(--ds-radius-lg);
+  overflow-x: auto;
+  margin-block-end: 1em;
+}
+
+.ds-prose-block pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+}
+
+.ds-prose-block ul,
+.ds-prose-block ol {
+  padding-inline-start: 1.5em;
+  margin-block-end: 1em;
+  color: var(--ds-color-text-secondary);
+}
+
+.ds-prose-block li {
+  margin-block-end: 0.25em;
+}
+
+.ds-prose-block ul {
+  list-style-type: disc;
+}
+
+.ds-prose-block ol {
+  list-style-type: decimal;
+}
+
+.ds-prose-block blockquote {
+  border-inline-start: 3px solid var(--ds-color-border);
+  padding-inline-start: var(--ds-space-4);
+  color: var(--ds-color-text-secondary);
+  font-style: italic;
+  margin-block-end: 1em;
+}
+
+.ds-prose-block hr {
+  border: none;
+  border-block-start: 1px solid var(--ds-color-border);
+  margin-block: var(--ds-space-6);
+}
+
+.ds-prose-block img {
+  max-width: 100%;
+  border-radius: var(--ds-radius-lg);
+  margin-block-end: 1em;
+}
+
 
 /* === Action — Trigger operations and commands === */
 /* ==========================================================================
@@ -10710,6 +11332,33 @@ tr:hover .ds-sortable__handle,
 }
 
 
+/* --- Responsive: Flex (extended) --- */
+@media (min-width: 640px) {
+
+  .ds-sm\:flex-none { flex: none; }
+  .ds-sm\:items-center { align-items: center; }
+  .ds-sm\:justify-between { justify-content: space-between; }
+  .ds-sm\:gap-4 { gap: var(--ds-space-4); }
+  .ds-sm\:gap-8 { gap: var(--ds-space-8); }
+  .ds-sm\:inline { display: inline; }
+}
+
+
+@media (min-width: 768px) {
+
+  .ds-md\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
+}
+
+
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
+
+  .ds-lg\:flex-row { flex-direction: row; }
+  .ds-lg\:gap-4 { gap: var(--ds-space-4); }
+  .ds-lg\:gap-6 { gap: var(--ds-space-6); }
+  .ds-lg\:gap-8 { gap: var(--ds-space-8); }
+}
+
+
 /* --- Aspect Ratio --- */
 .ds-aspect-square { aspect-ratio: 1; }
 .ds-aspect-video { aspect-ratio: 16/9; }
@@ -10802,8 +11451,15 @@ tr:hover .ds-sortable__handle,
 
 .ds-mt-0\.5 { margin-block-start: var(--ds-space-0-5); }
 .ds-mt-3 { margin-block-start: var(--ds-space-3); }
+.ds-mt-10 { margin-block-start: var(--ds-space-10); }
+.ds-mt-12 { margin-block-start: var(--ds-space-12); }
+.ds-mt-16 { margin-block-start: var(--ds-space-16); }
 .ds-mb-0\.5 { margin-block-end: var(--ds-space-0-5); }
 .ds-mb-3 { margin-block-end: var(--ds-space-3); }
+.ds-mb-10 { margin-block-end: var(--ds-space-10); }
+.ds-mb-12 { margin-block-end: var(--ds-space-12); }
+.ds-mb-16 { margin-block-end: var(--ds-space-16); }
+.ds-mb-20 { margin-block-end: var(--ds-space-20); }
 
 /* --- Padding (granular) --- */
 .ds-p-0\.5 { padding: var(--ds-space-0-5); }
@@ -10840,7 +11496,21 @@ tr:hover .ds-sortable__handle,
 .ds-space-y-6 > * + * { margin-block-start: var(--ds-space-6); }
 .ds-space-y-8 > * + * { margin-block-start: var(--ds-space-8); }
 
+/* --- Space-Y (fractional) --- */
+.ds-space-y-1\.5 > * + * { margin-block-start: var(--ds-space-1-5); }
+
 /* --- Responsive: Padding --- */
+@media (min-width: 640px) {
+
+  .ds-sm\:p-6 { padding: var(--ds-space-6); }
+  .ds-sm\:px-0 { padding-inline: var(--ds-space-0); }
+  .ds-sm\:px-3 { padding-inline: var(--ds-space-3); }
+  .ds-sm\:px-4 { padding-inline: var(--ds-space-4); }
+  .ds-sm\:px-6 { padding-inline: var(--ds-space-6); }
+  .ds-sm\:py-3 { padding-block: var(--ds-space-3); }
+}
+
+
 @media (min-width: 768px) {
 
   .ds-md\:px-4 { padding-inline: var(--ds-space-4); }
@@ -10862,6 +11532,80 @@ tr:hover .ds-sortable__handle,
 }
 
 
+/* ==========================================================================
+   Utilities: Sizing
+   Width, height, min/max constraints.
+   Extends the base sizing in layout.css with the full spacing scale.
+   ========================================================================== */
+
+/* --- Width (values not already in layout.css) --- */
+.ds-w-0 { width: var(--ds-space-0); }
+.ds-w-1 { width: var(--ds-space-1); }
+.ds-w-1\.5 { width: var(--ds-space-1-5); }
+.ds-w-2 { width: var(--ds-space-2); }
+.ds-w-3\.5 { width: 0.875rem; }
+.ds-w-6 { width: var(--ds-space-6); }
+.ds-w-12 { width: var(--ds-space-12); }
+.ds-w-16 { width: var(--ds-space-16); }
+.ds-w-20 { width: var(--ds-space-20); }
+.ds-w-24 { width: var(--ds-space-24); }
+.ds-w-28 { width: 7rem; }
+.ds-w-32 { width: var(--ds-space-32); }
+.ds-w-48 { width: 12rem; }
+.ds-w-56 { width: 14rem; }
+.ds-w-64 { width: 16rem; }
+.ds-w-80 { width: 20rem; }
+.ds-w-96 { width: 24rem; }
+.ds-w-auto { width: auto; }
+.ds-w-screen { width: 100vw; }
+
+/* --- Height (values not already in layout.css) --- */
+.ds-h-0 { height: var(--ds-space-0); }
+.ds-h-0\.5 { height: var(--ds-space-0-5); }
+.ds-h-1 { height: var(--ds-space-1); }
+.ds-h-1\.5 { height: var(--ds-space-1-5); }
+.ds-h-2 { height: var(--ds-space-2); }
+.ds-h-3\.5 { height: 0.875rem; }
+.ds-h-6 { height: var(--ds-space-6); }
+.ds-h-12 { height: var(--ds-space-12); }
+.ds-h-14 { height: 3.5rem; }
+.ds-h-20 { height: var(--ds-space-20); }
+.ds-h-24 { height: var(--ds-space-24); }
+.ds-h-28 { height: 7rem; }
+.ds-h-32 { height: var(--ds-space-32); }
+.ds-h-48 { height: 12rem; }
+.ds-h-64 { height: 16rem; }
+.ds-h-96 { height: 24rem; }
+.ds-h-auto { height: auto; }
+.ds-h-px { height: 1px; }
+
+/* --- Max Width (extended) --- */
+.ds-max-w-4xl { max-width: 56rem; }
+.ds-max-w-5xl { max-width: 64rem; }
+.ds-max-w-6xl { max-width: 72rem; }
+.ds-max-w-7xl { max-width: 80rem; }
+.ds-max-w-full { max-width: 100%; }
+
+/* --- Max Height --- */
+.ds-max-h-64 { max-height: 16rem; }
+.ds-max-h-80 { max-height: 20rem; }
+.ds-max-h-96 { max-height: 24rem; }
+.ds-max-h-screen { max-height: 100dvh; }
+
+/* --- Responsive: Sizing --- */
+@media (min-width: 640px) {
+
+  .ds-sm\:w-12 { width: var(--ds-space-12); }
+  .ds-sm\:w-16 { width: var(--ds-space-16); }
+  .ds-sm\:w-32 { width: var(--ds-space-32); }
+  .ds-sm\:w-64 { width: 16rem; }
+  .ds-sm\:w-96 { width: 24rem; }
+  .ds-sm\:w-auto { width: auto; }
+  .ds-sm\:h-12 { height: var(--ds-space-12); }
+  .ds-sm\:h-32 { height: var(--ds-space-32); }
+}
+
+
 /* ==========================================================================
    Utilities: Text, Visual & style helpers
    ========================================================================== */
@@ -11021,6 +11765,13 @@ tr:hover .ds-sortable__handle,
   overflow: hidden;
 }
 
+.ds-line-clamp-1 {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 .ds-line-clamp-3 {
   display: -webkit-box;
   -webkit-line-clamp: 3;
@@ -11028,6 +11779,12 @@ tr:hover .ds-sortable__handle,
   overflow: hidden;
 }
 
+/* --- Text Extras --- */
+.ds-line-through { text-decoration: line-through; }
+.ds-break-all { word-break: break-all; }
+.ds-list-disc { list-style-type: disc; }
+.ds-list-inside { list-style-position: inside; }
+
 /* --- Font Family --- */
 .ds-font-mono { font-family: var(--ds-font-mono); }
 .ds-font-sans { font-family: var(--ds-font-sans); }
@@ -11038,6 +11795,7 @@ tr:hover .ds-sortable__handle,
 .ds-border-b { border-block-end: 1px solid var(--ds-color-border); }
 .ds-border-l { border-inline-start: 1px solid var(--ds-color-border); }
 .ds-border-r { border-inline-end: 1px solid var(--ds-color-border); }
+.ds-border-y { border-block-start: 1px solid var(--ds-color-border); border-block-end: 1px solid var(--ds-color-border); }
 .ds-border-none { border: none; }
 
 /* --- Border Color --- */
@@ -11058,8 +11816,15 @@ tr:hover .ds-sortable__handle,
 .ds-rounded-lg { border-radius: var(--ds-radius-lg); }
 .ds-rounded-xl { border-radius: var(--ds-radius-xl); }
 .ds-rounded-2xl { border-radius: var(--ds-radius-2xl); }
+.ds-rounded-3xl { border-radius: 1.5rem; }
 .ds-rounded-full { border-radius: var(--ds-radius-full); }
 
+/* --- Border Radius (directional) --- */
+.ds-rounded-t { border-start-start-radius: var(--ds-radius-md); border-start-end-radius: var(--ds-radius-md); }
+.ds-rounded-b { border-end-start-radius: var(--ds-radius-md); border-end-end-radius: var(--ds-radius-md); }
+.ds-rounded-t-2xl { border-start-start-radius: var(--ds-radius-2xl); border-start-end-radius: var(--ds-radius-2xl); }
+.ds-rounded-b-2xl { border-end-start-radius: var(--ds-radius-2xl); border-end-end-radius: var(--ds-radius-2xl); }
+
 /* --- Shadow --- */
 .ds-shadow-sm { box-shadow: var(--ds-shadow-sm); }
 .ds-shadow { box-shadow: var(--ds-shadow-md); }
@@ -11068,7 +11833,11 @@ tr:hover .ds-sortable__handle,
 
 /* --- Opacity --- */
 .ds-opacity-0 { opacity: 0; }
+.ds-opacity-25 { opacity: 0.25; }
 .ds-opacity-50 { opacity: 0.5; }
+.ds-opacity-60 { opacity: 0.6; }
+.ds-opacity-70 { opacity: 0.7; }
+.ds-opacity-75 { opacity: 0.75; }
 .ds-opacity-100 { opacity: 1; }
 
 /* --- Cursor --- */
@@ -11082,6 +11851,7 @@ tr:hover .ds-sortable__handle,
 .ds-pointer-events-none { pointer-events: none; }
 .ds-select-none { user-select: none; }
 .ds-whitespace-nowrap { white-space: nowrap; }
+.ds-whitespace-pre-wrap { white-space: pre-wrap; }
 
 /* --- Backdrop --- */
 .ds-backdrop-blur {
@@ -11089,6 +11859,14 @@ tr:hover .ds-sortable__handle,
   -webkit-backdrop-filter: blur(20px) saturate(1.5);
 }
 
+.ds-backdrop-blur-sm {
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+/* --- Outline --- */
+.ds-outline-none { outline: none; }
+
 /* --- Transform --- */
 .-ds-translate-y-1\/2 { transform: translateY(-50%); }
 .-ds-translate-x-1\/2 { transform: translateX(-50%); }
@@ -11119,6 +11897,17 @@ tr:hover .ds-sortable__handle,
   transition: transform var(--ds-duration-normal) var(--ds-ease-default);
 }
 
+/* --- Duration --- */
+.ds-duration-fast { transition-duration: var(--ds-duration-fast); }
+.ds-duration-normal { transition-duration: var(--ds-duration-normal); }
+.ds-duration-slow { transition-duration: var(--ds-duration-slow); }
+.ds-duration-slower { transition-duration: var(--ds-duration-slower); }
+
+/* --- Easing --- */
+.ds-ease-default { transition-timing-function: var(--ds-ease-default); }
+.ds-ease-out { transition-timing-function: var(--ds-ease-out); }
+.ds-ease-out-expo { transition-timing-function: var(--ds-ease-out-expo); }
+
 /* --- Animations --- */
 @keyframes ds-fade-in {
   from { opacity: 0; }
@@ -11310,6 +12099,81 @@ tr:hover .ds-sortable__handle,
   color: var(--ds-color-text);
 }
 
+/* ==========================================================================
+   Utilities: State Variants
+   Hover, focus, active, focus-within, placeholder, and group-hover
+   modifiers for DS utility classes.
+   ========================================================================== */
+
+/* --- Group Marker (enables group-hover on descendants) ---
+   Supports both .group and .ds-group for compatibility. */
+.ds-group { /* marker — no styles */ }
+
+/* --- 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-surface:hover { background-color: var(--ds-color-surface); }
+.hover\:ds-bg-inverted:hover { background-color: var(--ds-color-inverted); }
+.hover\:ds-bg-info:hover { background-color: var(--ds-color-info); }
+
+/* --- 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: Border --- */
+.hover\:ds-border-hover:hover { border-color: var(--ds-color-border-hover); }
+.hover\:ds-border-interactive:hover { border-color: var(--ds-color-interactive); }
+
+/* --- Hover: Decoration --- */
+.hover\:ds-underline:hover { text-decoration: underline; text-underline-offset: 2px; }
+
+/* --- 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-Within --- */
+.focus-within\:ds-border-interactive:focus-within { border-color: var(--ds-color-interactive); }
+
+/* --- Active --- */
+.active\:ds-bg-elevated:active { background-color: var(--ds-color-bg-elevated); }
+.active\:ds-text-secondary:active { color: var(--ds-color-text-secondary); }
+
+/* --- Placeholder --- */
+.placeholder\:ds-text-tertiary::placeholder { color: var(--ds-color-text-tertiary); }
+
+/* --- 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 > .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);
+}
+
+.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-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;
+}
+
 /* ==========================================================================
    Utilities: Accessibility
    Screen-reader helpers, skip links, focus utilities, and motion control.