@digiko-npm/designsystem 0.8.3 → 0.9.0

package/dist/designsystem.css

@@ -1,4 +1,4 @@
-/* @ds/designsystem v0.8.3 */
+/* @ds/designsystem v0.9.0 */
 /* ==========================================================================
    @digiko-npm/designsystem
 
@@ -9479,6 +9479,244 @@ 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);
+}
+
+
+/* === 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 +10948,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 +11067,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 +11112,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 +11148,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 +11381,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 +11395,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 +11411,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 +11432,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 +11449,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 +11467,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 +11475,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 +11513,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 +11715,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.