@ulu/frontend 0.6.7 → 0.6.9

package/lib/scss/base/_themes.demo.html

@@ -0,0 +1,25 @@
+<!-- @ulu-demo
+  title: Theme Switching
+  description: Using the `theme-light` and `theme-dark` classes to change the visual context of a section.
+-->
+<div>
+  <button class="button" data-ulu-theme-toggle='{ "target": "#theme-demo-box" }'>Toggle Theme</button>
+  
+  <div id="theme-demo-box" class="demo-theme-box theme-light padding">
+    <h3 class="h3">Themed Content</h3>
+    <p>This section changes its colors based on the applied theme class.</p>
+    <button class="button">Themed Button</button>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Theme Inversion
+  description: The `theme-inverse` utility automatically applies the opposite theme (e.g., dark inside light) based on the current context.
+-->
+<div class="demo-theme-box theme-light">
+  <h3 class="h3">Light Context</h3>
+  <div class="demo-theme-box theme-inverse padding margin-top">
+    <p>This box is automatically inverted to the dark theme because its parent is light.</p>
+    <button class="button">Inverted Button</button>
+  </div>
+</div>

package/lib/scss/components/_accordion.demo.html

@@ -0,0 +1,89 @@
+<!-- @ulu-demo
+  title: Basic Accordion
+  description: A standard accordion stack with plus-to-minus icons and one-at-a-time behavior.
+-->
+<div data-ulu-details-group='{ "onlyOneOpen": true }'>
+  <details class="accordion">
+    <summary class="accordion__summary">
+      What is your return policy?
+      <span class="accordion__icon" aria-hidden="true">
+        <span class="css-icon css-icon--plus-to-minus"></span>
+      </span>
+    </summary>
+    <div class="accordion__content">
+      <p>You can return any unused item within 30 days of purchase for a full refund.</p>
+    </div>
+  </details>
+  <details class="accordion">
+    <summary class="accordion__summary">
+      Do you offer customer support?
+      <span class="accordion__icon" aria-hidden="true">
+        <span class="css-icon css-icon--plus-to-minus"></span>
+      </span>
+    </summary>
+    <div class="accordion__content">
+      <p>Yes, our customer support team is available 24/7 via email, live chat, or phone.</p>
+    </div>
+  </details>
+</div>
+
+<!-- @ulu-demo
+  title: Transparent Variant
+  description: The `accordion--transparent` modifier blends the component into the background.
+-->
+<div data-ulu-details-group='{ "onlyOneOpen": true }'>
+  <details class="accordion accordion--transparent">
+    <summary class="accordion__summary">
+      Product Features
+      <span class="accordion__icon" aria-hidden="true">
+        <span class="css-icon css-icon--angle-right-to-down"></span>
+      </span>
+    </summary>
+    <div class="accordion__content">
+      <ul>
+        <li>Water-resistant design</li>
+        <li>24-hour battery life</li>
+      </ul>
+    </div>
+  </details>
+  <details class="accordion accordion--transparent">
+    <summary class="accordion__summary">
+      Warranty Information
+      <span class="accordion__icon" aria-hidden="true">
+        <span class="css-icon css-icon--angle-right-to-down"></span>
+      </span>
+    </summary>
+    <div class="accordion__content">
+      <p>This product comes with a one-year limited warranty covering manufacturer defects.</p>
+    </div>
+  </details>
+</div>
+
+<!-- @ulu-demo
+  title: Borderless Variant
+  description: The `accordion--borderless` modifier removes external borders for an inline look.
+-->
+<div data-ulu-details-group='{ "onlyOneOpen": true }'>
+  <details class="accordion accordion--borderless">
+    <summary class="accordion__summary">
+      Privacy Settings
+      <span class="accordion__icon" aria-hidden="true">
+        <span class="css-icon css-icon--angle-down-to-up"></span>
+      </span>
+    </summary>
+    <div class="accordion__content">
+      <p>Manage who can see your profile and activity status.</p>
+    </div>
+  </details>
+  <details class="accordion accordion--borderless">
+    <summary class="accordion__summary">
+      Cookie Policy
+      <span class="accordion__icon" aria-hidden="true">
+        <span class="css-icon css-icon--angle-down-to-up"></span>
+      </span>
+    </summary>
+    <div class="accordion__content">
+      <p>We use cookies to improve your browsing experience.</p>
+    </div>
+  </details>
+</div>

package/lib/scss/components/_accordion.scss

@@ -1,6 +1,6 @@
 ////
 /// @group accordion
-/// Outputs accordion component stylesheet, which can be used with <details> or custom disclosure components
+/// Outputs accordion component stylesheet, which can be used with html details element or custom disclosure components.
 ////
 
 @use "sass:map";

package/lib/scss/components/_badge-stack.demo.html

@@ -0,0 +1,54 @@
+<!-- @ulu-demo
+  title: Basic Badge Stack
+  description: Overlapping text-based badges.
+-->
+<ul class="badge-stack">
+  <li class="badge-stack__item">
+    <span class="badge badge--small">
+      <span class="badge__inner"><span>JD</span></span>
+    </span>
+  </li>
+  <li class="badge-stack__item">
+    <span class="badge badge--small">
+      <span class="badge__inner"><span>MS</span></span>
+    </span>
+  </li>
+  <li class="badge-stack__item">
+    <span class="badge badge--small">
+      <span class="badge__inner"><span>AJ</span></span>
+    </span>
+  </li>
+  <li class="badge-stack__item">
+    <span class="badge badge--small">
+      <span class="badge__inner"><span>+3</span></span>
+    </span>
+  </li>
+</ul>
+
+<!-- @ulu-demo
+  title: Clickable Image Stack
+  description: A stack of clickable user profiles with images.
+-->
+<ul class="badge-stack">
+  <li class="badge-stack__item">
+    <a href="#" class="badge badge--small badge--clickable">
+      <div class="badge__inner">
+        <img src="https://picsum.photos/id/64/100/100" alt="User 1">
+      </div>
+    </a>
+  </li>
+  <li class="badge-stack__item">
+    <a href="#" class="badge badge--small badge--clickable">
+      <div class="badge__inner">
+        <img src="https://picsum.photos/id/65/100/100" alt="User 2">
+      </div>
+    </a>
+  </li>
+  <li class="badge-stack__item">
+    <a href="#" class="badge badge--small badge--clickable">
+      <div class="badge__inner">
+        <img src="https://picsum.photos/id/66/100/100" alt="User 3">
+      </div>
+    </a>
+  </li>
+</ul>

package/lib/scss/components/_badge.demo.html

@@ -0,0 +1,41 @@
+<!-- @ulu-demo
+  title: Basic Badge
+  description: A standard badge with text.
+-->
+<div class="badge">
+  <div class="badge__inner">
+    <span>JS</span>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Badge Sizes
+  description: Demonstrating small, default, and large badge variants.
+-->
+<div style="display: flex; gap: 1rem; align-items: center;">
+  <div class="badge badge--small">
+    <div class="badge__inner">
+      <span>SM</span>
+    </div>
+  </div>
+  <div class="badge">
+    <div class="badge__inner">
+      <span>MD</span>
+    </div>
+  </div>
+  <div class="badge badge--large">
+    <div class="badge__inner">
+      <span>LG</span>
+    </div>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Clickable Badge with Image
+  description: A badge containing an image that scales on hover.
+-->
+<a href="#" class="badge">
+  <div class="badge__inner">
+    <img src="https://picsum.photos/id/64/300/300" alt="Profile Image">
+  </div>
+</a>

package/lib/scss/components/_basic-hero.demo.html

@@ -0,0 +1,33 @@
+<!-- @ulu-demo
+  title: Basic Hero
+  description: A hero section with content and media side-by-side on larger screens.
+  fullscreen: true
+-->
+<div class="basic-hero">
+  <div class="basic-hero__content container">
+    <div class="basic-hero__content-main">
+      <h1 class="h1">Hero Title with Supporting Text</h1>
+      <p class="type-large">This is a description that provides more context about the page or section.</p>
+    </div>
+    <div class="basic-hero__content-media">
+      <img src="https://picsum.photos/id/10/400/300" alt="Hero Media">
+    </div>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Centered Hero
+  description: A centered layout for the hero section.
+  fullscreen: true
+-->
+<div class="basic-hero basic-hero--center">
+  <div class="basic-hero__content container">
+    <div class="basic-hero__content-main">
+      <h1 class="h1">Centered Hero Title</h1>
+      <p class="type-large">A brief and compelling reason to explore further.</p>
+    </div>
+    <div class="basic-hero__content-media">
+      <img src="https://picsum.photos/id/20/400/300" alt="Hero Media">
+    </div>
+  </div>
+</div>

package/lib/scss/components/_breadcrumb.demo.html

@@ -0,0 +1,39 @@
+<!-- @ulu-demo
+  title: Standard Breadcrumb
+  description: A typical breadcrumb trail for navigation.
+-->
+<nav class="breadcrumb" aria-label="Breadcrumb">
+  <ol class="breadcrumb__list">
+    <li class="breadcrumb__item">
+      <a href="#" class="breadcrumb__link">Home</a>
+      <span class="breadcrumb__separator" aria-hidden="true">/</span>
+    </li>
+    <li class="breadcrumb__item">
+      <a href="#" class="breadcrumb__link">Products</a>
+      <span class="breadcrumb__separator" aria-hidden="true">/</span>
+    </li>
+    <li class="breadcrumb__item" aria-current="page">
+      <span class="breadcrumb__current">Electronic Gadgets</span>
+    </li>
+  </ol>
+</nav>
+
+<!-- @ulu-demo
+  title: Truncated Breadcrumb
+  description: Items automatically truncate with an ellipsis if they exceed the `item-max-width`.
+-->
+<nav class="breadcrumb" aria-label="Breadcrumb">
+  <ol class="breadcrumb__list">
+    <li class="breadcrumb__item">
+      <a href="#" class="breadcrumb__link">Home</a>
+      <span class="breadcrumb__separator" aria-hidden="true">/</span>
+    </li>
+    <li class="breadcrumb__item">
+      <a href="#" class="breadcrumb__link">This is an extremely long page title that will be truncated by the breadcrumb component</a>
+      <span class="breadcrumb__separator" aria-hidden="true">/</span>
+    </li>
+    <li class="breadcrumb__item" aria-current="page">
+      <span class="breadcrumb__current">Current Page</span>
+    </li>
+  </ol>
+</nav>

package/lib/scss/components/_button-group.demo.html

@@ -0,0 +1,19 @@
+<!-- @ulu-demo
+  title: Standard Button Group
+  description: A group of buttons with a standard gap between them.
+-->
+<div class="button-group">
+  <button class="button">Action 1</button>
+  <button class="button">Action 2</button>
+  <button class="button">Action 3</button>
+</div>
+
+<!-- @ulu-demo
+  title: Joined Button Group
+  description: Buttons in this group are visually connected, with rounded corners only on the outer edges.
+-->
+<div class="button-group button-group--joined">
+  <button class="button">Left</button>
+  <button class="button is-active">Middle</button>
+  <button class="button">Right</button>
+</div>

package/lib/scss/components/_button-verbose.demo.html

@@ -0,0 +1,23 @@
+<!-- @ulu-demo
+  title: Standard Verbose Button
+  description: A button that includes a title and body text, often used for important links or pagination.
+-->
+<a href="#" class="button-verbose">
+  <strong class="button-verbose__title">Primary Action Title</strong>
+  <span class="button-verbose__body">Additional descriptive text that explains the consequence of this action.</span>
+  <span class="button-verbose__icon" aria-hidden="true">
+    <span class="css-icon css-icon--angle-right"></span>
+  </span>
+</a>
+
+<!-- @ulu-demo
+  title: Full Width Verbose Button
+  description: The `button-verbose--full-width` modifier makes the button span the entire width of its container.
+-->
+<a href="#" class="button-verbose button-verbose--full-width">
+  <strong class="button-verbose__title">Next Chapter</strong>
+  <span class="button-verbose__body">Continue reading about the architecture of the system.</span>
+  <span class="button-verbose__icon" aria-hidden="true">
+    <span class="css-icon css-icon--angle-right"></span>
+  </span>
+</a>

package/lib/scss/components/_button.demo.html

@@ -0,0 +1,24 @@
+<!-- @ulu-demo
+  title: Primary Button
+  description: The default button style for main actions.
+  wrapperClass: demo-theme-box demo-width-small 
+-->
+<button class="button">Primary Button</button>
+
+<!-- @ulu-demo
+  title: Secondary Button
+  description: An alternative style for less important actions.
+-->
+<button class="button button--secondary">Secondary Button</button>
+
+<!-- @ulu-demo
+  title: Small Button
+  description: A smaller button variant.
+-->
+<button class="button button--small">Small Button</button>
+
+<!-- @ulu-demo
+  title: Large Button
+  description: A larger button variant.
+-->
+<button class="button button--large">Large Button</button>

package/lib/scss/components/_button.scss

@@ -62,12 +62,15 @@ $config: (
   #{ $prefix } {
     @include button.default();
   }
+  #{ $prefix }--fit {
+    min-width: 0;
+  }
   #{ $prefix }__icon {
-    &:first-child {
-      margin-right: get("icon-margin");
+    &:not(:first-child) { 
+      margin-inline-start: get("icon-margin"); 
     }
-    &:last-child {
-      margin-left: get("icon-margin");
+    &:not(:last-child) { 
+      margin-inline-end: get("icon-margin"); 
     }
   }
   
@@ -97,13 +100,8 @@ $config: (
     padding: 0 !important;
 
     #{ $prefix }__icon {
-      transform: translatey(get("icon-centered-vertical-offset"));
-      &:first-child {
-        margin-right: 0;
-      }
-      &:last-child {
-        margin-left: 0;
-      }
+      transform: translateY(get("icon-centered-vertical-offset"));
+      margin: 0;
     }
   }
 

package/lib/scss/components/_callout.demo.html

@@ -0,0 +1,32 @@
+<!-- @ulu-demo
+  title: Basic Callout
+  description: A simple container to highlight content.
+-->
+<div class="callout">
+  <p>This is a default callout. It provides a subtle background to distinguish this section from the rest of the content.</p>
+</div>
+
+<!-- @ulu-demo
+  title: Status Callouts
+  description: Modifiers for different semantic states.
+-->
+<div class="callout callout--info">
+  <p><strong>Info:</strong> Use this for helpful tips or additional context.</p>
+</div>
+<div class="callout callout--success">
+  <p><strong>Success:</strong> Use this to confirm a positive action or state.</p>
+</div>
+<div class="callout callout--warning">
+  <p><strong>Warning:</strong> Use this to alert the user about potential issues.</p>
+</div>
+<div class="callout callout--danger">
+  <p><strong>Danger:</strong> Use this for critical errors or irreversible actions.</p>
+</div>
+
+<!-- @ulu-demo
+  title: Outline Callout
+  description: A variant with no background color.
+-->
+<div class="callout callout--outline">
+  <p>This is an outline callout. It uses a border without a background fill.</p>
+</div>

package/lib/scss/components/_captioned-figure.demo.html

@@ -0,0 +1,32 @@
+<!-- @ulu-demo
+  title: Traditional Layout
+  description: A traditional figure layout with the caption appearing below the image.
+-->
+<figure class="captioned-figure captioned-figure--traditional">
+  <img src="https://picsum.photos/id/1018/600/400" alt="Landscape photo">
+  <figcaption class="captioned-figure__caption">
+    A beautiful landscape captured during sunset.
+  </figcaption>
+</figure>
+
+<!-- @ulu-demo
+  title: Bottom-Right Overlay
+  description: The caption is overlaid on the bottom-right of the image using absolute positioning.
+-->
+<figure class="captioned-figure captioned-figure--bottom captioned-figure--right">
+  <img src="https://picsum.photos/id/1015/600/400" alt="Landscape photo">
+  <figcaption class="captioned-figure__caption">
+    Overlay Caption
+  </figcaption>
+</figure>
+
+<!-- @ulu-demo
+  title: Bottom-Center Overlay
+  description: The caption is centered at the bottom of the image.
+-->
+<figure class="captioned-figure captioned-figure--bottom captioned-figure--center">
+  <img src="https://picsum.photos/id/1016/600/400" alt="Landscape photo">
+  <figcaption class="captioned-figure__caption">
+    Centered Overlay
+  </figcaption>
+</figure>

package/lib/scss/components/_card-grid.demo.html

@@ -0,0 +1,34 @@
+<!-- @ulu-demo
+  title: Standard Card Grid
+  description: A responsive grid that automatically fills rows with cards.
+-->
+<div class="card-grid">
+  <article class="card">
+    <div class="card__body"><div class="card__main"><h3 class="card__title">Card 1</h3><p>Content for the first card.</p></div></div>
+  </article>
+  <article class="card">
+    <div class="card__body"><div class="card__main"><h3 class="card__title">Card 2</h3><p>Content for the second card.</p></div></div>
+  </article>
+  <article class="card">
+    <div class="card__body"><div class="card__main"><h3 class="card__title">Card 3</h3><p>Content for the third card.</p></div></div>
+  </article>
+</div>
+
+<!-- @ulu-demo
+  title: Compact Card Grid
+  description: A grid with smaller minimum column widths and tighter gaps.
+-->
+<div class="card-grid card-grid--compact">
+  <article class="card">
+    <div class="card__body"><div class="card__main"><h3 class="card__title">Compact 1</h3></div></div>
+  </article>
+  <article class="card">
+    <div class="card__body"><div class="card__main"><h3 class="card__title">Compact 2</h3></div></div>
+  </article>
+  <article class="card">
+    <div class="card__body"><div class="card__main"><h3 class="card__title">Compact 3</h3></div></div>
+  </article>
+  <article class="card">
+    <div class="card__body"><div class="card__main"><h3 class="card__title">Compact 4</h3></div></div>
+  </article>
+</div>

package/lib/scss/components/_card.demo.html

@@ -0,0 +1,49 @@
+<!-- @ulu-demo
+  title: Basic Card
+  description: A standard card with a title, body content, and a footer.
+-->
+<article class="card">
+  <div class="card__body">
+    <div class="card__main">
+      <h3 class="card__title">Card Title</h3>
+      <p>This is the main content of the card. It provides a brief summary or introduction to a more detailed resource.</p>
+    </div>
+  </div>
+  <div class="card__footer">
+    <a href="#" class="button button--small">Read More</a>
+  </div>
+</article>
+
+<!-- @ulu-demo
+  title: Card with Image
+  description: A card that includes a featured image at the top.
+-->
+<article class="card">
+  <div class="card__image">
+    <img src="https://picsum.photos/id/1035/600/400" alt="Card Image">
+  </div>
+  <div class="card__body">
+    <div class="card__main">
+      <h3 class="card__title">Featured Resource</h3>
+      <p>Discover interesting insights and helpful tips in our latest featured article.</p>
+    </div>
+  </div>
+</article>
+
+<!-- @ulu-demo
+  title: Clickable Card (Proxy Click)
+  description: A card where the entire area is clickable, using a proxy click pattern for accessibility.
+-->
+<article class="card" data-ulu-proxy-click>
+  <div class="card__image">
+    <img src="https://picsum.photos/id/1019/600/400" alt="Card Image">
+  </div>
+  <div class="card__body">
+    <div class="card__main">
+      <h3 class="card__title">
+        <a href="#" class="card__title-link" data-ulu-proxy-click-source>Entire Card is Clickable</a>
+      </h3>
+      <p>This pattern allows the whole card to act as a link while maintaining a single, accessible anchor point.</p>
+    </div>
+  </div>
+</article>

package/lib/scss/components/_card.scss

@@ -551,21 +551,31 @@ $config: (
   $prefix: selector.class("card");
 
   grid-template-columns: get("horizontal-image-width") 1fr;
-  grid-template-rows: 1fr auto; // Footer is native height first row fills
+  // Fix: Use minmax(0, ...) to allow the row to shrink smaller than the image's height
+  grid-template-rows: minmax(0, 1fr) auto; // Footer is native height, first row fills
   min-height: get("horizontal-min-height");
   max-width: get("horizontal-max-width");
 
   // When no footer remove extra row
   &:not(:has(> #{ $prefix }__footer)) {
-    grid-template-rows: auto;
+    grid-template-rows: minmax(0, 1fr);
   }
   #{ $prefix }__image {
     grid-column: 1 / 2;
     grid-row: 1 / -1;
     aspect-ratio: auto;
+    // Fix: Force the container to ignore the image's intrinsic height (height: 0)
+    // and instead stretch to fill the grid area (min-height: 100%).
+    height: 0;
+    min-height: 100%;
     border-top-right-radius: 0;
     border-bottom-left-radius: get("border-radius");
   }
+  #{ $prefix }__image img,
+  #{ $prefix}__image-media {
+    // Fix: Ensure the image itself doesn't have a minimum size requirement
+    min-height: 0;
+  }
   #{ $prefix }__body,
   #{ $prefix }__footer {
     grid-column: 2 / 3;
@@ -611,10 +621,10 @@ $config: (
   $prefix: selector.class("card");
 
   grid-template-columns: get("horizontal-image-width") 1fr auto;
-  grid-template-rows: 1fr; // Footer is native height first row fills
+  // Fix: Use minmax(0, ...) to allow the row to shrink smaller than the image's height
+  grid-template-rows: minmax(0, 1fr); 
   #{ $prefix }__footer {
     grid-column: 3;
-    
   }
 }
 

package/lib/scss/components/_counter-list.demo.html

@@ -0,0 +1,28 @@
+<!-- @ulu-demo
+  title: Numeric Counter List
+  description: A standard ordered list styled with custom counters.
+-->
+<ol class="counter-list">
+  <li>First item in the list.</li>
+  <li>Second item with more content to demonstrate how the counter stays aligned.</li>
+  <li>Third item.</li>
+</ol>
+
+<!-- @ulu-demo
+  title: Alphabetical Counter List
+  description: Using the `counter-list--alphabetical` modifier to use letters instead of numbers.
+-->
+<ol class="counter-list counter-list--alphabetical">
+  <li>Analyze the requirements.</li>
+  <li>Design the solution.</li>
+  <li>Implement the features.</li>
+</ol>
+
+<!-- @ulu-demo
+  title: Non-List Counter Elements
+  description: You can also use the `counter-list__item` class on non-list elements (like divs).
+-->
+<div class="counter-list">
+  <div class="counter-list__item">This is a div acting as a counter item.</div>
+  <div class="counter-list__item">Another div in the counter flow.</div>
+</div>