@digiko-npm/designsystem 0.8.2 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digiko-npm/designsystem",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description": "Design system — installable, extensible, indestructible.",
   "main": "dist/designsystem.css",
   "style": "dist/designsystem.css",
@@ -35,6 +35,7 @@
     "./components/empty-state": "./src/components/empty-state.css",
     "./components/field": "./src/components/field.css",
     "./components/gallery": "./src/components/gallery.css",
+    "./components/hero": "./src/components/hero.css",
     "./components/icon-btn": "./src/components/icon-btn.css",
     "./components/input": "./src/components/input.css",
     "./components/kbd": "./src/components/kbd.css",
@@ -45,6 +46,7 @@
     "./components/pin-input": "./src/components/pin-input.css",
     "./components/popover": "./src/components/popover.css",
     "./components/progress": "./src/components/progress.css",
+    "./components/prose": "./src/components/prose.css",
     "./components/result": "./src/components/result.css",
     "./components/scroll-area": "./src/components/scroll-area.css",
     "./components/search": "./src/components/search.css",

package/src/components/combobox.css

@@ -81,7 +81,7 @@
 }
 
 /* Stand-alone input (no input-area wrapper) */
-input.ds-combobox__input {
+.ds-combobox > .ds-combobox__input {
   width: 100%;
   min-height: var(--ds-size-3);
   padding: 0 var(--ds-space-3);
@@ -93,11 +93,11 @@ input.ds-combobox__input {
     box-shadow var(--ds-duration-fast) var(--ds-ease-default);
 }
 
-input.ds-combobox__input:hover {
+.ds-combobox > .ds-combobox__input:hover {
   border-color: var(--ds-color-border-hover);
 }
 
-input.ds-combobox__input:focus {
+.ds-combobox > .ds-combobox__input:focus {
   border-color: var(--ds-color-border-active);
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
@@ -355,39 +355,36 @@ input.ds-combobox__input:focus {
 
 /* XS */
 .ds-combobox--xs .ds-combobox__input-area,
-.ds-combobox--xs input.ds-combobox__input {
+.ds-combobox--xs > .ds-combobox__input {
   min-height: var(--ds-size-1);
   padding: 0 var(--ds-space-2);
   border-radius: var(--ds-radius-md);
 }
 
-.ds-combobox--xs .ds-combobox__input,
-.ds-combobox--xs input.ds-combobox__input {
+.ds-combobox--xs .ds-combobox__input {
   font-size: var(--ds-text-xs);
 }
 
 /* SM */
 .ds-combobox--sm .ds-combobox__input-area,
-.ds-combobox--sm input.ds-combobox__input {
+.ds-combobox--sm > .ds-combobox__input {
   min-height: var(--ds-size-2);
   padding: 0 var(--ds-space-2-5);
   border-radius: var(--ds-radius-md);
 }
 
-.ds-combobox--sm .ds-combobox__input,
-.ds-combobox--sm input.ds-combobox__input {
+.ds-combobox--sm .ds-combobox__input {
   font-size: var(--ds-text-sm);
 }
 
 /* LG */
 .ds-combobox--lg .ds-combobox__input-area,
-.ds-combobox--lg input.ds-combobox__input {
+.ds-combobox--lg > .ds-combobox__input {
   min-height: var(--ds-size-4);
   padding: 0 var(--ds-space-4);
 }
 
-.ds-combobox--lg .ds-combobox__input,
-.ds-combobox--lg input.ds-combobox__input {
+.ds-combobox--lg .ds-combobox__input {
   font-size: var(--ds-text-lg);
 }
 
@@ -396,12 +393,12 @@ input.ds-combobox__input:focus {
    ========================================================================== */
 
 .ds-combobox--error .ds-combobox__input-area,
-.ds-combobox--error input.ds-combobox__input {
+.ds-combobox--error > .ds-combobox__input {
   border-color: var(--ds-color-error);
 }
 
 .ds-combobox--error .ds-combobox__input-area:focus-within,
-.ds-combobox--error input.ds-combobox__input:focus {
+.ds-combobox--error > .ds-combobox__input:focus {
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-color-error);
 }
 

package/src/components/hero.css

@@ -0,0 +1,113 @@
+/* ==========================================================================
+   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);
+}

package/src/components/index.css

@@ -1,61 +1,71 @@
-/* === Core === */
-@import './button.css';
-@import './card.css';
-@import './stat-card.css';
+/* === Form — Inputs, selectors, and form controls === */
 @import './input.css';
 @import './field.css';
-@import './badge.css';
-@import './nav.css';
-@import './modal.css';
-@import './toast.css';
-@import './table.css';
-@import './icon-btn.css';
+@import './toggle.css';
+@import './custom-select.css';
 @import './combobox.css';
+@import './number-input.css';
+@import './pin-input.css';
+@import './datepicker.css';
+@import './color-picker.css';
+@import './slider.css';
+@import './drop-zone.css';
+@import './star-rating.css';
 
-/* === Tier 1 — Essential === */
-@import './tabs.css';
-@import './alert.css';
-@import './divider.css';
-@import './dropdown.css';
-@import './tooltip.css';
+/* === Data Display — Present information and status === */
+@import './badge.css';
+@import './tag.css';
+@import './chip.css';
 @import './avatar.css';
+@import './stat-card.css';
+@import './table.css';
+@import './description-list.css';
+@import './timeline.css';
+@import './progress.css';
 @import './skeleton.css';
-@import './empty-state.css';
-@import './search.css';
-@import './spinner.css';
-@import './segmented-control.css';
+@import './result.css';
+@import './truncated-text.css';
 
-/* === Tier 2 — Common === */
-@import './datepicker.css';
-@import './toggle.css';
+/* === Navigation — Wayfinding and page structure === */
+@import './nav.css';
 @import './breadcrumb.css';
+@import './tabs.css';
 @import './pagination.css';
-@import './tag.css';
-@import './accordion.css';
+@import './segmented-control.css';
+@import './bottom-nav.css';
+@import './toolbar.css';
+
+/* === Feedback — Communicate status and system messages === */
+@import './alert.css';
+@import './toast.css';
+@import './spinner.css';
+@import './empty-state.css';
+@import './tooltip.css';
+
+/* === Overlay — Floating panels and dialogs === */
+@import './modal.css';
 @import './drawer.css';
-@import './progress.css';
-@import './drop-zone.css';
-@import './custom-select.css';
+@import './dropdown.css';
+@import './popover.css';
+@import './bottom-sheet.css';
+@import './command.css';
+
+/* === Layout — Structure and organize content === */
+@import './card.css';
+@import './divider.css';
+@import './accordion.css';
 @import './collapsible.css';
-@import './description-list.css';
-@import './result.css';
-@import './sortable.css';
-@import './number-input.css';
-@import './pin-input.css';
-@import './copy-button.css';
 @import './scroll-area.css';
-@import './truncated-text.css';
-@import './color-picker.css';
-@import './star-rating.css';
 @import './gallery.css';
-@import './bottom-sheet.css';
+@import './hero.css';
 
-/* === Tier 3 — Advanced === */
-@import './popover.css';
-@import './slider.css';
-@import './timeline.css';
+/* === Content — Rich text and prose === */
+@import './prose.css';
+
+/* === Action — Trigger operations and commands === */
+@import './button.css';
+@import './icon-btn.css';
+@import './copy-button.css';
 @import './kbd.css';
-@import './command.css';
-@import './toolbar.css';
-@import './chip.css';
-@import './bottom-nav.css';
+@import './search.css';
+@import './sortable.css';

package/src/components/prose.css

@@ -0,0 +1,119 @@
+/* ==========================================================================
+   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;
+}

package/src/components/stat-card.css

@@ -4,6 +4,9 @@
    ========================================================================== */
 
 .ds-stat-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-1);
   background-color: var(--ds-color-surface);
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-xl);

package/src/utilities/index.css

@@ -1,5 +1,7 @@
 @import './layout.css';
 @import './spacing.css';
+@import './sizing.css';
 @import './text.css';
 @import './interactive.css';
+@import './states.css';
 @import './a11y.css';

package/src/utilities/layout.css

@@ -246,6 +246,27 @@
   .ds-xl\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
 }
 
+/* --- 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; }

package/src/utilities/sizing.css

@@ -0,0 +1,71 @@
+/* ==========================================================================
+   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); }
+}

package/src/utilities/spacing.css

@@ -85,8 +85,15 @@
 
 .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); }
@@ -123,7 +130,19 @@
 .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); }
   .ds-md\:px-6 { padding-inline: var(--ds-space-6); }

package/src/utilities/states.css

@@ -0,0 +1,74 @@
+/* ==========================================================================
+   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;
+}