@ulu/frontend 0.6.8 → 0.6.9

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

@@ -0,0 +1,47 @@
+<!-- @ulu-demo
+  title: Basic 12-Column Grid
+  description: A standard 12-column grid layout using the `data-grid` and `data-grid-item` attributes.
+-->
+<div data-grid="columns: 12">
+  <div data-grid-item="width: 6">
+    <div style="background: #eee; padding: 1rem;">6 Columns (50%)</div>
+  </div>
+  <div data-grid-item="width: 6">
+    <div style="background: #eee; padding: 1rem;">6 Columns (50%)</div>
+  </div>
+  <div data-grid-item="width: 4">
+    <div style="background: #ddd; padding: 1rem;">4 Columns</div>
+  </div>
+  <div data-grid-item="width: 4">
+    <div style="background: #ddd; padding: 1rem;">4 Columns</div>
+  </div>
+  <div data-grid-item="width: 4">
+    <div style="background: #ddd; padding: 1rem;">4 Columns</div>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Grid with Offsets
+  description: Using the `offset` property to create gaps in the grid layout.
+-->
+<div data-grid="columns: 12">
+  <div data-grid-item="width: 4">
+    <div style="background: #eee; padding: 1rem;">Width: 4</div>
+  </div>
+  <div data-grid-item="width: 4, offset: 4">
+    <div style="background: #eee; padding: 1rem;">Width: 4, Offset: 4</div>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Responsive Column Widths
+  description: Defining different widths for different breakpoints (e.g., `width` for mobile, `width-large` for desktop).
+-->
+<div data-grid="columns: 12">
+  <div data-grid-item="width: 12, width-large: 8">
+    <div style="background: #eee; padding: 1rem;">8 Columns on Desktop, Full Width on Mobile</div>
+  </div>
+  <div data-grid-item="width: 12, width-large: 4">
+    <div style="background: #eee; padding: 1rem;">4 Columns on Desktop, Full Width on Mobile</div>
+  </div>
+</div>

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

@@ -0,0 +1,67 @@
+<!-- @ulu-demo
+  title: Basic Data List
+  description: A standard list layout for simple items.
+-->
+<ul class="data-list">
+  <li class="data-list__item">
+    <div class="data-list__column">
+      <strong>Item One Title</strong>
+    </div>
+  </li>
+  <li class="data-list__item">
+    <div class="data-list__column">
+      <strong>Item Two Title</strong>
+    </div>
+  </li>
+</ul>
+
+<!-- @ulu-demo
+  title: Flanked Layout (Prefixed + Suffixed)
+  description: Automatically aligns an icon at the start and an action at the end.
+-->
+<ul class="data-list data-list--prefixed data-list--suffixed">
+  <li class="data-list__item">
+    <div class="data-list__column" aria-hidden="true">📄</div>
+    <div class="data-list__column"><strong>Report_Q1.pdf</strong></div>
+    <div class="data-list__column"><button class="button button--small">Download</button></div>
+  </li>
+  <li class="data-list__item">
+    <div class="data-list__column" aria-hidden="true">📊</div>
+    <div class="data-list__column"><strong>Analytics_Data.xlsx</strong></div>
+    <div class="data-list__column"><button class="button button--small">Download</button></div>
+  </li>
+</ul>
+
+<!-- @ulu-demo
+  title: Interactive Clickable Rows
+  description: Entire rows are interactive, using proxy-click logic to route to a primary link.
+-->
+<ul class="data-list data-list--clickable">
+  <li class="data-list__item" data-ulu-proxy-click>
+    <div class="data-list__column">
+      <a href="#" data-ulu-proxy-click-source><strong>Important Update: New Security Features</strong></a>
+    </div>
+    <div class="data-list__column type-small">2 hours ago</div>
+  </li>
+  <li class="data-list__item" data-ulu-proxy-click>
+    <div class="data-list__column">
+      <a href="#" data-ulu-proxy-click-source><strong>Your Weekly Activity Summary</strong></a>
+    </div>
+    <div class="data-list__column type-small">Yesterday</div>
+  </li>
+</ul>
+
+<!-- @ulu-demo
+  title: Custom Grid with Spanning
+  description: Advanced usage using inline variables and column spanning.
+-->
+<ul class="data-list" style="--ulu-data-list-columns: auto 1fr auto auto;">
+  <li class="data-list__item">
+    <div class="data-list__column">ID: 101</div>
+    <div class="data-list__column data-list__column--span-2">
+      <strong>Product Name A</strong>
+      <span class="type-small">In Stock</span>
+    </div>
+    <div class="data-list__column">$19.99</div>
+  </li>
+</ul>

package/lib/scss/components/_data-table.demo.html

@@ -0,0 +1,91 @@
+<!-- @ulu-demo
+  title: Standard Data Table
+  description: A native HTML table styled for data display, including headers, footers, and a caption.
+-->
+<table class="data-table">
+  <caption>Quarterly Performance Summary</caption>
+  <thead>
+    <tr>
+      <th>Category</th>
+      <th>Previous Q</th>
+      <th>Current Q</th>
+      <th>Change</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Product Sales</td>
+      <td>$45,000</td>
+      <td>$52,000</td>
+      <td style="color: green;">+15%</td>
+    </tr>
+    <tr>
+      <td>Service Fees</td>
+      <td>$12,000</td>
+      <td>$11,500</td>
+      <td style="color: red;">-4%</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <td>Total</td>
+      <td>$57,000</td>
+      <td>$63,500</td>
+      <td>+11%</td>
+    </tr>
+  </tfoot>
+</table>
+
+<!-- @ulu-demo
+  title: Striped Table
+  description: Using the `data-table--striped` modifier to alternate background colors for rows.
+-->
+<table class="data-table data-table--striped">
+  <thead>
+    <tr>
+      <th>Employee Name</th>
+      <th>Department</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Jane Doe</td>
+      <td>Engineering</td>
+      <td>Active</td>
+    </tr>
+    <tr>
+      <td>John Smith</td>
+      <td>Marketing</td>
+      <td>On Leave</td>
+    </tr>
+    <tr>
+      <td>Alice Johnson</td>
+      <td>Product</td>
+      <td>Active</td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- @ulu-demo
+  title: Large First Column
+  description: The `data-table--large-first` modifier ensures the first column has a larger minimum width, useful for row labels.
+-->
+<table class="data-table data-table--large-first">
+  <thead>
+    <tr>
+      <th>Specification Feature Description</th>
+      <th>Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Memory (RAM)</td>
+      <td>32GB DDR5</td>
+    </tr>
+    <tr>
+      <td>Processor (CPU)</td>
+      <td>8-Core 4.2GHz</td>
+    </tr>
+  </tbody>
+</table>

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

@@ -0,0 +1,59 @@
+<!-- @ulu-demo
+  title: Basic Stacked Layout
+  description: The default layout, which stacks terms and their definitions vertically.
+-->
+<dl class="definition-list">
+  <div>
+    <dt>Application Version</dt>
+    <dd>v2.4.5 (Stable)</dd>
+  </div>
+  <div>
+    <dt>Release Date</dt>
+    <dd>October 12, 2024</dd>
+  </div>
+</dl>
+
+<!-- @ulu-demo
+  title: Table Layout
+  description: Using the `definition-list--table` modifier to create a two-column grid on larger screens.
+-->
+<dl class="definition-list definition-list--table">
+  <div>
+    <dt>Project Owner</dt>
+    <dd>Jane Doe</dd>
+  </div>
+  <div>
+    <dt>Primary Language</dt>
+    <dd>TypeScript (with Sass for styling)</dd>
+  </div>
+</dl>
+
+<!-- @ulu-demo
+  title: Inline-All Layout
+  description: Using the `definition-list--inline-all` modifier to place terms and definitions on the same line.
+-->
+<dl class="definition-list definition-list--inline-all">
+  <div>
+    <dt>Status</dt>
+    <dd>Connected</dd>
+  </div>
+  <div>
+    <dt>Uptime</dt>
+    <dd>99.9%</dd>
+  </div>
+</dl>
+
+<!-- @ulu-demo
+  title: Separated Layout
+  description: Using the `definition-list--separated` and `definition-list--separated-first` modifiers to add borders between items.
+-->
+<dl class="definition-list definition-list--separated definition-list--separated-first">
+  <div>
+    <dt>Support Tier</dt>
+    <dd>Premium (24/7)</dd>
+  </div>
+  <div>
+    <dt>Service SLA</dt>
+    <dd>99.99% Availability Guaranteed</dd>
+  </div>
+</dl>

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

@@ -0,0 +1,40 @@
+<!-- @ulu-demo
+  title: Basic Flipcard
+  description: A text-only flipcard that reveals more information when clicked.
+-->
+<div class="flipcard" data-ulu-flipcard>
+  <div class="flipcard__front">
+    <div class="flipcard__front-content">
+      <h3 class="h4">Technical Strategy</h3>
+      <span class="flipcard__icon" aria-hidden="true">+</span>
+    </div>
+  </div>
+  <div class="flipcard__back">
+    <div class="flipcard__back-content">
+      <p>Our technical strategy focuses on modularity, performance, and accessibility across all platforms.</p>
+      <button class="button button--small" data-ulu-flipcard-close>Close</button>
+    </div>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Flipcard with Image
+  description: A flipcard using the `flipcard--w-image` modifier to include a background image on the front.
+-->
+<div class="flipcard flipcard--w-image" data-ulu-flipcard>
+  <div class="flipcard__front">
+    <div class="flipcard__front-image">
+      <img src="https://picsum.photos/id/1025/400/400" alt="Front Image">
+    </div>
+    <div class="flipcard__front-content">
+      <h3 class="h4">Project Alpha</h3>
+      <span class="flipcard__icon" aria-hidden="true">+</span>
+    </div>
+  </div>
+  <div class="flipcard__back">
+    <div class="flipcard__back-content">
+      <p>Project Alpha is our flagship initiative to redefine the user experience for complex data dashboards.</p>
+      <button class="button button--small" data-ulu-flipcard-close>Close</button>
+    </div>
+  </div>
+</div>

package/lib/scss/components/_headline-label.demo.html

@@ -0,0 +1,9 @@
+<!-- @ulu-demo
+  title: Basic Headline Label
+  description: A small, bold label placed above a headline to categorize content.
+-->
+<h2 class="h2">
+  <span class="headline-label">Case Study<span class="hidden-visually">:</span></span>
+  Modernizing Legacy Infrastructure
+</h2>
+<p>This case study explores the challenges and successes of a multi-year digital transformation project.</p>

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

@@ -0,0 +1,40 @@
+<!-- @ulu-demo
+  title: Split Hero (Graphic Left)
+  description: A hero section where the graphic and content are split side-by-side.
+-->
+<section class="hero hero--split hero--left">
+  <div class="hero__graphic">
+    <img src="https://picsum.photos/id/102/1200/800" class="hero__graphic-media" alt="Hero Background">
+  </div>
+  <div class="hero__content">
+    <div class="hero__content-container container">
+      <div class="hero__content-inner">
+        <h1 class="h1">Innovate Your Workflow</h1>
+        <p class="type-large">Discover the tools and strategies that drive modern software development.</p>
+        <div class="button-group">
+          <a href="#" class="button">Get Started</a>
+          <a href="#" class="button button--outline">Learn More</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- @ulu-demo
+  title: Overlay Hero
+  description: A hero section with the content overlaid on a full-width background graphic.
+-->
+<section class="hero hero--overlay">
+  <div class="hero__graphic">
+    <img src="https://picsum.photos/id/103/1200/800" class="hero__graphic-media" alt="Hero Background">
+  </div>
+  <div class="hero__content">
+    <div class="hero__content-container container">
+      <div class="hero__content-inner" style="background: rgba(255,255,255,0.8); padding: 2rem; border-radius: 8px;">
+        <h1 class="h1">Full Screen Impact</h1>
+        <p class="type-large">Create a bold first impression with a full-width immersive experience.</p>
+        <a href="#" class="button">Call to Action</a>
+      </div>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,24 @@
+<!-- @ulu-demo
+  title: Basic Image Grid
+  description: A flex-based grid for displaying a collection of images that automatically reflows.
+-->
+<ul class="image-grid">
+  <li class="image-grid__item">
+    <img src="https://picsum.photos/id/10/400/300" alt="Image 1">
+  </li>
+  <li class="image-grid__item">
+    <img src="https://picsum.photos/id/11/400/300" alt="Image 2">
+  </li>
+  <li class="image-grid__item">
+    <img src="https://picsum.photos/id/12/400/300" alt="Image 3">
+  </li>
+  <li class="image-grid__item">
+    <img src="https://picsum.photos/id/13/400/300" alt="Image 4">
+  </li>
+  <li class="image-grid__item">
+    <img src="https://picsum.photos/id/14/400/300" alt="Image 5">
+  </li>
+  <li class="image-grid__item">
+    <img src="https://picsum.photos/id/15/400/300" alt="Image 6">
+  </li>
+</ul>

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

@@ -0,0 +1,42 @@
+<!-- @ulu-demo
+  title: Search Input (Joined)
+  description: A search bar where the input and button are visually connected with shared borders.
+-->
+<div class="form-theme">
+  <div class="input-group input-group--joined">
+    <div class="input-group__item input-group__item--field">
+      <input type="text" class="input-group__input" placeholder="Search...">
+    </div>
+    <div class="input-group__item">
+      <button class="button input-group__button">Search</button>
+    </div>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Input with Currency Cue
+  description: Using a cue item to provide context, like a currency symbol.
+-->
+<div class="form-theme">
+  <div class="input-group input-group--joined">
+    <div class="input-group__item input-group__item--cue">$</div>
+    <div class="input-group__item input-group__item--field">
+      <input type="number" class="input-group__input" placeholder="0.00">
+    </div>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Gapped Layout
+  description: The default layout with a small gap between the input and the action button.
+-->
+<div class="form-theme">
+  <div class="input-group">
+    <div class="input-group__item input-group__item--field">
+      <input type="text" class="input-group__input" placeholder="Enter coupon code">
+    </div>
+    <div class="input-group__item">
+      <button class="button button--outline input-group__button">Apply</button>
+    </div>
+  </div>
+</div>

package/lib/scss/components/_list-inline.demo.html

@@ -0,0 +1,20 @@
+<!-- @ulu-demo
+  title: Basic Inline List
+  description: A pipe-separated list of items displayed in a single line.
+-->
+<ul class="list-inline">
+  <li>Privacy Policy</li>
+  <li>Terms of Service</li>
+  <li>Contact Us</li>
+  <li>Support</li>
+</ul>
+
+<!-- @ulu-demo
+  title: Large Gap Inline List
+  description: Using the `list-inline--large-gap` modifier for increased spacing between items.
+-->
+<ul class="list-inline list-inline--large-gap">
+  <li>Project Alpha</li>
+  <li>Project Beta</li>
+  <li>Project Gamma</li>
+</ul>

package/lib/scss/components/_list-lines.demo.html

@@ -0,0 +1,19 @@
+<!-- @ulu-demo
+  title: Basic List Lines
+  description: A list with horizontal rules between each item.
+-->
+<ul class="list-lines">
+  <li>First item in the list</li>
+  <li>Second item with more content</li>
+  <li>Third item</li>
+</ul>
+
+<!-- @ulu-demo
+  title: Dense List Lines
+  description: Using the `list-lines--dense` modifier for tighter vertical spacing.
+-->
+<ul class="list-lines list-lines--dense">
+  <li>Compact item one</li>
+  <li>Compact item two</li>
+  <li>Compact item three</li>
+</ul>

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

@@ -0,0 +1,69 @@
+<!-- @ulu-demo
+  title: Basic Navigation Menu
+  description: A standard vertical list of links, often used for sidebars or secondary navigation.
+-->
+<nav class="menu-stack">
+  <h3 class="menu-stack__label">Main Navigation</h3>
+  <ul class="menu-stack__list">
+    <li class="menu-stack__item">
+      <a href="#" class="menu-stack__link is-active">Dashboard</a>
+    </li>
+    <li class="menu-stack__item">
+      <a href="#" class="menu-stack__link">Projects</a>
+    </li>
+    <li class="menu-stack__item">
+      <a href="#" class="menu-stack__link">Tasks</a>
+    </li>
+  </ul>
+</nav>
+
+<!-- @ulu-demo
+  title: Collapsible Sub-Menu
+  description: Using `details` to create a collapsible group within the menu stack.
+-->
+<div class="menu-stack">
+  <ul class="menu-stack__list">
+    <li class="menu-stack__item">
+      <details class="menu-stack__collapsible">
+        <summary class="menu-stack__toggle">
+          <span class="menu-stack__link-text">Organization</span>
+          <span class="menu-stack__toggle-icon css-icon css-icon--angle-down-to-up" aria-hidden="true"></span>
+        </summary>
+        <div class="menu-stack__collapsible-content">
+          <ul class="menu-stack__list">
+            <li class="menu-stack__item"><a class="menu-stack__link" href="#">Team Members</a></li>
+            <li class="menu-stack__item"><a class="menu-stack__link" href="#">Permissions</a></li>
+          </ul>
+        </div>
+      </details>
+    </li>
+  </ul>
+</div>
+
+<!-- @ulu-demo
+  title: Selectable (Checkbox) Menu
+  description: A menu containing checkboxes, useful for filtering or selection lists.
+-->
+<div class="menu-stack form-theme">
+  <h3 class="menu-stack__label">Filter by Status</h3>
+  <ul class="menu-stack__list">
+    <li class="menu-stack__item">
+      <div class="menu-stack__selectable">
+        <input type="checkbox" id="status-1" checked>
+        <label for="status-1">Active</label>
+      </div>
+    </li>
+    <li class="menu-stack__item">
+      <div class="menu-stack__selectable">
+        <input type="checkbox" id="status-2">
+        <label for="status-2">Pending</label>
+      </div>
+    </li>
+    <li class="menu-stack__item">
+      <div class="menu-stack__selectable">
+        <input type="checkbox" id="status-3">
+        <label for="status-3">Completed</label>
+      </div>
+    </li>
+  </ul>
+</div>

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

@@ -0,0 +1,49 @@
+<!-- @ulu-demo
+  title: Basic Centered Modal
+  description: The default centered modal configuration, triggered by a button.
+-->
+<button class="button" data-ulu-dialog-trigger="modal-example-center">Open Modal</button>
+
+<div id="modal-example-center" 
+     data-ulu-modal-builder='{ "title": "Information" }' 
+     hidden>
+  <p>This is a standard centered modal window. It can contain any HTML content, including text, images, or forms.</p>
+  <div class="button-group">
+    <button class="button" data-ulu-dialog-close>Confirm</button>
+    <button class="button button--outline" data-ulu-dialog-close>Cancel</button>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Right Sidebar Modal
+  description: "Using the position: 'right' option to create a sidebar-style modal."
+-->
+<button class="button" data-ulu-dialog-trigger="modal-example-sidebar">Open Sidebar</button>
+
+<div id="modal-example-sidebar" 
+     data-ulu-modal-builder='{ "title": "Settings", "position": "right" }' 
+     hidden>
+  <div class="menu-stack">
+    <ul class="menu-stack__list">
+      <li class="menu-stack__item"><a href="#" class="menu-stack__link">Notification Settings</a></li>
+      <li class="menu-stack__item"><a href="#" class="menu-stack__link">Security Options</a></li>
+      <li class="menu-stack__item"><a href="#" class="menu-stack__link">Account Data</a></li>
+    </ul>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Fullscreen Modal
+  description: A modal that fills the entire viewport, useful for immersive content or complex tasks.
+-->
+<button class="button" data-ulu-dialog-trigger="modal-example-fullscreen">View Fullscreen</button>
+
+<div id="modal-example-fullscreen" 
+     data-ulu-modal-builder='{ "title": "Editor Mode", "size": "fullscreen" }' 
+     hidden>
+  <div class="container">
+    <h2 class="h2">Comprehensive Overview</h2>
+    <p>This view allows for focused interaction with complex data or large media assets without the distraction of the underlying page.</p>
+    <button class="button" data-ulu-dialog-close>Exit Fullscreen</button>
+  </div>
+</div>

package/lib/scss/components/_nav-strip.demo.html

@@ -0,0 +1,36 @@
+<!-- @ulu-demo
+  title: Basic Nav Strip
+  description: A simple horizontal list of navigation links with an active state underline.
+-->
+<nav class="nav-strip">
+  <ul class="nav-strip__list">
+    <li class="nav-strip__item"><a href="#" class="nav-strip__link">Overview</a></li>
+    <li class="nav-strip__item"><a href="#" class="nav-strip__link is-active">Features</a></li>
+    <li class="nav-strip__item"><a href="#" class="nav-strip__link">Pricing</a></li>
+    <li class="nav-strip__item"><a href="#" class="nav-strip__link">Support</a></li>
+  </ul>
+</nav>
+
+<!-- @ulu-demo
+  title: Nav Strip with Base Rule
+  description: Using the `nav-strip--rule` modifier to add a continuous horizontal line beneath the navigation items.
+-->
+<nav class="nav-strip nav-strip--rule">
+  <ul class="nav-strip__list">
+    <li class="nav-strip__item"><a href="#" class="nav-strip__link is-active">Dashboard</a></li>
+    <li class="nav-strip__item"><a href="#" class="nav-strip__link">Settings</a></li>
+    <li class="nav-strip__item"><a href="#" class="nav-strip__link">Analytics</a></li>
+  </ul>
+</nav>
+
+<!-- @ulu-demo
+  title: Automatic (Markup Only) Nav Strip
+  description: The `nav-strip--auto` modifier applies styling to standard `ul/li/a` tags without requiring component-specific classes on every element.
+-->
+<div class="nav-strip nav-strip--auto">
+  <ul>
+    <li><a href="#" class="is-active">Recent</a></li>
+    <li><a href="#">Popular</a></li>
+    <li><a href="#">Trending</a></li>
+  </ul>
+</div>

package/lib/scss/components/_overlay-section.demo.html

@@ -0,0 +1,29 @@
+<!-- @ulu-demo
+  title: Basic Overlay Section
+  description: A section with a full-bleed background and centered content box.
+-->
+<section class="overlay-section">
+  <div class="overlay-section__background">
+    <img src="https://picsum.photos/id/101/1200/800" alt="Background Image">
+  </div>
+  <div class="overlay-section__content">
+    <h2 class="h2">Centered Content</h2>
+    <p>This content box is centered over the background image, providing a clear focal point for messaging.</p>
+    <a href="#" class="button">Explore More</a>
+  </div>
+</section>
+
+<!-- @ulu-demo
+  title: Right-Aligned Overlay
+  description: Using the `overlay-section--right` modifier to position the content box on the right side of the section.
+-->
+<section class="overlay-section overlay-section--right">
+  <div class="overlay-section__background">
+    <img src="https://picsum.photos/id/104/1200/800" alt="Background Image">
+  </div>
+  <div class="overlay-section__content">
+    <h2 class="h2">Side Aligned</h2>
+    <p>Positioning content to the side can help prevent obscuring important details in the background image.</p>
+    <a href="#" class="button">Contact Us</a>
+  </div>
+</section>