@ulu/frontend 0.6.8 → 0.6.9

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

@@ -0,0 +1,31 @@
+<!-- @ulu-demo
+  title: Standard Panel
+  description: A structured container with a distinct header, body, and footer.
+-->
+<div class="panel">
+  <div class="panel__row panel__row--header">
+    <h3 class="h4">Account Overview</h3>
+  </div>
+  <div class="panel__row">
+    <p>Your subscription is active and will renew on November 15th. You have 3 active projects and 12 collaborators.</p>
+  </div>
+  <div class="panel__row panel__row--footer">
+    <a href="#" class="button button--small">Manage Subscription</a>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Transparent Panel with Separators
+  description: Using the `panel--transparent` modifier for a seamless look, with `panel__row--separator-top` for visual division.
+-->
+<div class="panel panel--transparent">
+  <div class="panel__row panel__row--header">
+    <h3 class="h4">System Status</h3>
+  </div>
+  <div class="panel__row">
+    <p>All systems are operational. No active incidents reported in the last 24 hours.</p>
+  </div>
+  <div class="panel__row panel__row--separator-top">
+    <p class="type-small">Last checked: 5 minutes ago</p>
+  </div>
+</div>

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

@@ -0,0 +1,48 @@
+<!-- @ulu-demo
+  title: Basic Popover
+  description: A standard popover that appears near a trigger element, including a pointer arrow.
+-->
+<div style="padding: 4rem 0;">
+  <button class="button" data-ulu-popover-trigger>Toggle Popover</button>
+  <div class="popover" data-ulu-popover-content>
+    <div class="popover__inner">
+      <p>This is the content of the popover. It can contain text, links, or other small UI elements.</p>
+    </div>
+    <span class="popover__arrow" data-ulu-popover-arrow></span>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Popover with Footer
+  description: Using the `popover__footer` element to add actions or metadata at the bottom.
+-->
+<div style="padding: 4rem 0;">
+  <button class="button" data-ulu-popover-trigger>Open Menu</button>
+  <div class="popover" data-ulu-popover-content>
+    <div class="popover__header">Options</div>
+    <div class="popover__inner">
+      <ul class="list-lines list-lines--dense">
+        <li>Notification Settings</li>
+        <li>Privacy Controls</li>
+      </ul>
+    </div>
+    <div class="popover__footer">
+      <a href="#" class="type-small">Learn More</a>
+    </div>
+    <span class="popover__arrow" data-ulu-popover-arrow></span>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Tooltip Modifier
+  description: The `popover--tooltip` modifier creates a smaller, non-interactive overlay typically used for labels.
+-->
+<div style="padding: 2rem 0;">
+  <button class="button" data-ulu-popover-trigger='{ "floating": { "placement": "top" }, "trigger": "hover" }'>Hover Me</button>
+  <div class="popover popover--tooltip" data-ulu-popover-content>
+    <div class="popover__inner">
+      Helpful hint about this action
+    </div>
+    <span class="popover__arrow" data-ulu-popover-arrow></span>
+  </div>
+</div>

package/lib/scss/components/_progress-bar.demo.html

@@ -0,0 +1,40 @@
+<!-- @ulu-demo
+  title: Basic Progress Bar
+  description: A standard progress bar with a label and percentage value.
+-->
+<div class="progress-bar">
+  <div class="progress-bar__header">
+    <strong class="progress-bar__label">System Update</strong>
+    <span class="progress-bar__value">65%</span>
+  </div>
+  <div class="progress-bar__track">
+    <div class="progress-bar__bar" style="width: 65%;"></div>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Indeterminate Loader
+  description: An animated bar for states where progress is unknown, using the `progress-bar--indeterminate` modifier.
+-->
+<div class="progress-bar progress-bar--loader progress-bar--indeterminate">
+  <div class="progress-bar__track">
+    <div class="progress-bar__bar"></div>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Semantic Status Bars
+  description: Using status modifiers like `progress-bar--success` and `progress-bar--danger`.
+-->
+<div class="progress-bar progress-bar--success">
+  <div class="progress-bar__header"><strong class="progress-bar__label">Setup Complete</strong></div>
+  <div class="progress-bar__track">
+    <div class="progress-bar__bar" style="width: 100%;"></div>
+  </div>
+</div>
+<div class="progress-bar progress-bar--danger">
+  <div class="progress-bar__header"><strong class="progress-bar__label">Storage Low</strong></div>
+  <div class="progress-bar__track">
+    <div class="progress-bar__bar" style="width: 92%;"></div>
+  </div>
+</div>

package/lib/scss/components/_progress-circle.demo.html

@@ -0,0 +1,44 @@
+<!-- @ulu-demo
+  title: Basic Donut Chart
+  description: A circular progress indicator using an SVG donut chart structure.
+-->
+<div class="progress-circle">
+  <div class="progress-circle__chart">
+    <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
+      <circle class="progress-circle__chart-track" cx="16" cy="16" r="11"></circle>
+      <circle class="progress-circle__chart-pie" cx="16" cy="16" r="11" style="stroke-dasharray: 65 100;"></circle>
+      <circle class="progress-circle__chart-mask" cx="16" cy="16"></circle>
+    </svg>
+    <strong class="progress-circle__chart-value">65%</strong>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Pie Chart Variant
+  description: Using the `progress-circle--pie` modifier to create a solid circular progress indicator.
+-->
+<div class="progress-circle progress-circle--pie">
+  <div class="progress-circle__chart">
+    <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
+      <circle class="progress-circle__chart-track" cx="16" cy="16" r="16"></circle>
+      <circle class="progress-circle__chart-pie" cx="16" cy="16" r="16" style="stroke-dasharray: 40 100;"></circle>
+      <circle class="progress-circle__chart-mask" cx="16" cy="16" r="16"></circle>
+    </svg>
+    <strong class="progress-circle__chart-value" style="color: white;">40%</strong>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Small Progress Circle
+  description: Using the `progress-circle--small` modifier for space-constrained layouts.
+-->
+<div class="progress-circle progress-circle--small">
+  <div class="progress-circle__chart">
+    <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
+      <circle class="progress-circle__chart-track" cx="16" cy="16" r="9.5"></circle>
+      <circle class="progress-circle__chart-pie" cx="16" cy="16" r="9.5" style="stroke-dasharray: 85 100;"></circle>
+      <circle class="progress-circle__chart-mask" cx="16" cy="16"></circle>
+    </svg>
+  </div>
+  <div class="progress-circle__value">85% Complete</div>
+</div>

package/lib/scss/components/_pull-quote.demo.html

@@ -0,0 +1,20 @@
+<!-- @ulu-demo
+  title: Standard Pull Quote
+  description: A centered pull quote with an optional author image, name, and title.
+-->
+<figure class="pull-quote">
+  <blockquote class="pull-quote__body type-large-x">
+    <p>The best way to predict the future is to create it. Design systems provide the foundation for that creation.</p>
+  </blockquote>
+  <figcaption class="pull-quote__author">
+    <div class="pull-quote__author-image">
+      <div class="badge badge--small">
+        <div class="badge__inner">
+          <img src="https://picsum.photos/id/64/100/100" alt="Jane Doe">
+        </div>
+      </div>
+    </div>
+    <strong class="pull-quote__author-name">Jane Doe</strong>
+    <span class="pull-quote__author-title">Principal Design Architect</span>
+  </figcaption>
+</figure>

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

@@ -0,0 +1,41 @@
+<!-- @ulu-demo
+  title: Basic Rail
+  description: A flexible horizontal container with the last item pushed to the right using `rail__item--pull`.
+-->
+<div class="rail">
+  <div class="rail__item">
+    <h3 class="h4 no-margin">Section Title</h3>
+  </div>
+  <div class="rail__item"><span class="tag">Active</span></div>
+  <div class="rail__item rail__item--pull">
+    <button class="button button--small">Action</button>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Justified Toolbar
+  description: Using the `rail--justified` modifier to space items out across the full width.
+-->
+<div class="rail rail--justified">
+  <div class="rail__item">
+    <strong>Showing 1-10 of 124 results</strong>
+  </div>
+  <div class="rail__item">
+    <div class="button-group">
+      <button class="button button--small button--outline">Previous</button>
+      <button class="button button--small button--outline">Next</button>
+    </div>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Rail with Separator
+  description: Using the `rail__item--separator` modifier to add a vertical divider before an item.
+-->
+<div class="rail">
+  <div class="rail__item">Account Settings</div>
+  <div class="rail__item">Security</div>
+  <div class="rail__item rail__item--separator">
+    <a href="#" class="color-danger">Log Out</a>
+  </div>
+</div>

package/lib/scss/components/_ratio-box.demo.html

@@ -0,0 +1,15 @@
+<!-- @ulu-demo
+  title: Default Ratio (4/3)
+  description: A standard 4/3 aspect ratio box, useful for traditional photography or balanced content.
+-->
+<div class="ratio-box" style="max-width: 400px;">
+  <img src="https://picsum.photos/id/1011/400/300" class="ratio-box__content" alt="4/3 Image">
+</div>
+
+<!-- @ulu-demo
+  title: Widescreen Ratio (16/9)
+  description: Using the `ratio-box--16x9` modifier for video content or wide banners.
+-->
+<div class="ratio-box ratio-box--16x9" style="max-width: 600px;">
+  <img src="https://picsum.photos/id/1015/600/337" class="ratio-box__content" alt="16/9 Image">
+</div>

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

@@ -0,0 +1,22 @@
+<!-- @ulu-demo
+  title: Basic Horizontal Rule
+  description: A standard horizontal line used to separate sections of content.
+-->
+<p>Content above the rule.</p>
+<hr class="rule">
+<p>Content below the rule.</p>
+
+<!-- @ulu-demo
+  title: Short Accent Rule
+  description: Using the `rule--short` modifier to create a small, decorative line often used under headings.
+-->
+<h3 class="h3">Section Title</h3>
+<div class="rule rule--short"></div>
+<p>A brief introduction to the section follows the decorative short rule.</p>
+
+<!-- @ulu-demo
+  title: Large Margin Rule
+  description: A rule with increased vertical spacing using the `rule--margin-large` modifier.
+-->
+<div class="rule rule--margin-large"></div>
+<p>This rule creates significant visual separation between major content blocks.</p>

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

@@ -0,0 +1,39 @@
+<!-- @ulu-demo
+  title: Skeleton Text
+  description: Placeholder lines for text content during loading.
+-->
+<div style="max-width: 400px;">
+  <div class="skeleton skeleton--text skeleton--width-large"></div>
+  <div class="skeleton skeleton--text"></div>
+  <div class="skeleton skeleton--text"></div>
+  <div class="skeleton skeleton--text skeleton--width-small"></div>
+</div>
+
+<!-- @ulu-demo
+  title: Skeleton Media
+  description: A placeholder for images or video assets.
+-->
+<div style="max-width: 300px;">
+  <div class="skeleton skeleton--media">
+    <span aria-hidden="true">🖼️</span>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Composite Skeleton (Card)
+  description: Combining different skeleton elements to represent a complex UI component.
+-->
+<article class="card" style="max-width: 300px;">
+  <div class="card__image">
+    <div class="skeleton skeleton--block" style="aspect-ratio: 16/9;"></div>
+  </div>
+  <div class="card__body">
+    <div class="card__title">
+      <div class="skeleton skeleton--text skeleton--width-large"></div>
+    </div>
+    <div class="card__main">
+      <div class="skeleton skeleton--text"></div>
+      <div class="skeleton skeleton--text skeleton--width-small"></div>
+    </div>
+  </div>
+</article>

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

@@ -0,0 +1,28 @@
+<!-- @ulu-demo
+  title: Image Slider
+  description: A standard carousel for cycling through images.
+-->
+<div class="slider" data-ulu-slider>
+  <div class="slider__control-context">
+    <ul class="slider__track" data-ulu-slider-track>
+      <li class="slider__slide" data-ulu-slider-slide>
+        <img src="https://picsum.photos/id/10/800/400" alt="Slide 1">
+      </li>
+      <li class="slider__slide" data-ulu-slider-slide>
+        <img src="https://picsum.photos/id/11/800/400" alt="Slide 2">
+      </li>
+      <li class="slider__slide" data-ulu-slider-slide>
+        <img src="https://picsum.photos/id/12/800/400" alt="Slide 3">
+      </li>
+    </ul>
+    <div class="Slider__controls">
+      <button class="button button--icon Slider__control-button Slider__control-button--previous" data-ulu-slider-previous aria-label="Previous Slide">
+        <span class="css-icon css-icon--angle-left"></span>
+      </button>
+      <button class="button button--icon Slider__control-button Slider__control-button--next" data-ulu-slider-next aria-label="Next Slide">
+        <span class="css-icon css-icon--angle-right"></span>
+      </button>
+    </div>
+  </div>
+  <div class="Slider__nav" data-ulu-slider-nav></div>
+</div>

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

@@ -0,0 +1,25 @@
+<!-- @ulu-demo
+  title: Sticky Header List
+  description: A list where the header stays sticky as the user scrolls through the individual items.
+-->
+<div class="sticky-list">
+  <h3 class="sticky-list__title">Process Steps</h3>
+  <ul class="sticky-list__list">
+    <li class="sticky-list__item">
+      <h4 class="h4">1. Discovery</h4>
+      <p>Researching current market trends and user needs to identify core challenges and opportunities.</p>
+    </li>
+    <li class="sticky-list__item">
+      <h4 class="h4">2. Definition</h4>
+      <p>Establishing clear project goals, technical requirements, and functional specifications.</p>
+    </li>
+    <li class="sticky-list__item">
+      <h4 class="h4">3. Design</h4>
+      <p>Creating comprehensive architectural plans, UI/UX designs, and detailed system workflows.</p>
+    </li>
+    <li class="sticky-list__item">
+      <h4 class="h4">4. Development</h4>
+      <p>Iterative implementation of features, rigorous testing, and continuous integration of components.</p>
+    </li>
+  </ul>
+</div>

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

@@ -0,0 +1,41 @@
+<!-- @ulu-demo
+  title: Horizontal Tabs
+  description: A standard tabbed interface with labels positioned horizontally above the content.
+-->
+<div class="tabs">
+  <div role="tablist" data-ulu-tablist='{ "equalHeights": true }'>
+    <button role="tab" id="tab-1" aria-selected="true" aria-controls="panel-1">General Info</button>
+    <button role="tab" id="tab-2" aria-selected="false" aria-controls="panel-2">Specifications</button>
+    <button role="tab" id="tab-3" aria-selected="false" aria-controls="panel-3">Reviews</button>
+  </div>
+  <div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
+    <p>This is the general information about the product or service. It covers the core value propositions and high-level features.</p>
+  </div>
+  <div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
+    <p>Technical specifications and detailed measurements are listed here for professional review.</p>
+  </div>
+  <div role="tabpanel" id="panel-3" aria-labelledby="tab-3" hidden>
+    <p>Customer feedback and ratings provide real-world insights from our community of users.</p>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Vertical Tabs
+  description: Using the `tabs--vertical` modifier to place tab labels in a sidebar layout on larger screens.
+-->
+<div class="tabs tabs--vertical">
+  <div role="tablist" data-ulu-tablist='{ "vertical": true, "equalHeights": true }'>
+    <button role="tab" id="v-tab-1" aria-selected="true" aria-controls="v-panel-1">Account Profile</button>
+    <button role="tab" id="v-tab-2" aria-selected="false" aria-controls="v-panel-2">Privacy Settings</button>
+    <button role="tab" id="v-tab-3" aria-selected="false" aria-controls="v-panel-3">Notification Preferences</button>
+  </div>
+  <div role="tabpanel" id="v-panel-1" aria-labelledby="v-tab-1">
+    <p>Manage your personal information, profile picture, and contact details.</p>
+  </div>
+  <div role="tabpanel" id="v-panel-2" aria-labelledby="v-tab-2" hidden>
+    <p>Control who can see your activity and how your data is used across the platform.</p>
+  </div>
+  <div role="tabpanel" id="v-panel-3" aria-labelledby="v-tab-3" hidden>
+    <p>Customize which alerts you receive via email, push notification, or SMS.</p>
+  </div>
+</div>

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

@@ -0,0 +1,20 @@
+<!-- @ulu-demo
+  title: Basic Tag
+  description: A small label for categorization or status identification.
+-->
+<span class="tag">Standard Tag</span>
+<span class="tag tag--outline">Outline Tag</span>
+
+<!-- @ulu-demo
+  title: Semantic Status Tags
+  description: Using status modifiers like `tag--success` and `tag--danger`.
+-->
+<span class="tag tag--success">Verified</span>
+<span class="tag tag--danger">Action Required</span>
+
+<!-- @ulu-demo
+  title: Counter Tag
+  description: Using the `tag--counter` modifier to display numerical values, often for notifications or counts.
+-->
+<span class="tag tag--counter">5</span>
+<span class="tag tag--small tag--counter">124</span>

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

@@ -0,0 +1,17 @@
+<!-- @ulu-demo
+  title: Tagged Icon Button
+  description: Positioning a notification counter tag over an icon button.
+-->
+<button class="button button--icon tagged">
+  <span class="button__icon" aria-hidden="true">🔔</span>
+  <span class="tagged__tag tag tag--danger tag--small tag--counter">3</span>
+</button>
+
+<!-- @ulu-demo
+  title: Tagged Text Button
+  description: Positioning a tag over a standard text-based button.
+-->
+<button class="button tagged">
+  <span>Messages</span>
+  <span class="tagged__tag tag tag--danger tag--small tag--counter">12</span>
+</button>

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

@@ -0,0 +1,22 @@
+<!-- @ulu-demo
+  title: Basic Tile Grid (Reflowable)
+  description: A grid of tiles that automatically reflows to fit as many items as possible based on a preferred minimum width.
+-->
+<div class="tile-grid">
+  <div class="tile-grid__item" style="background: #eee; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center;">Tile 1</div>
+  <div class="tile-grid__item" style="background: #eee; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center;">Tile 2</div>
+  <div class="tile-grid__item" style="background: #eee; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center;">Tile 3</div>
+  <div class="tile-grid__item" style="background: #eee; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center;">Tile 4</div>
+  <div class="tile-grid__item" style="background: #eee; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center;">Tile 5</div>
+</div>
+
+<!-- @ulu-demo
+  title: Static Column Grid
+  description: Using the `tile-grid--static` modifier to enforce a specific number of columns that adapt per breakpoint (e.g., 2 on small, 3 on medium).
+-->
+<div class="tile-grid tile-grid--static">
+  <div class="tile-grid__item" style="background: #ddd; border: 1px solid #bbb; display: flex; align-items: center; justify-content: center;">Static 1</div>
+  <div class="tile-grid__item" style="background: #ddd; border: 1px solid #bbb; display: flex; align-items: center; justify-content: center;">Static 2</div>
+  <div class="tile-grid__item" style="background: #ddd; border: 1px solid #bbb; display: flex; align-items: center; justify-content: center;">Static 3</div>
+  <div class="tile-grid__item" style="background: #ddd; border: 1px solid #bbb; display: flex; align-items: center; justify-content: center;">Static 4</div>
+</div>

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

@@ -0,0 +1,14 @@
+<!-- @ulu-demo
+  title: WYSIWYG Content
+  description: Automatically applies standard styling to raw HTML elements (headings, lists, links) within a container.
+-->
+<div class="wysiwyg">
+  <h2>Main Topic</h2>
+  <p>This is a paragraph with a <a href="#">link inside it</a>. The styling is automatically handled by the `.wysiwyg` class.</p>
+  <ul>
+    <li>Unordered list item one</li>
+    <li>Unordered list item two</li>
+  </ul>
+  <h3>Sub-section</h3>
+  <p>Headings are also automatically sized according to the typography configuration.</p>
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.6.8",
+  "version": "0.6.9",
   "description": "A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules optimized for traditional websites and content management systems.",
   "type": "module",
   "files": [
@@ -12,6 +12,7 @@
   "types": "./dist/es/index.d.ts",
   "exports": {
     ".": {
+      "sass" : "./lib/scss/index.scss",
       "types": "./dist/es/index.d.ts",
       "import": "./dist/es/index.js",
       "require": "./dist/umd/ulu-frontend.umd.js"
@@ -23,7 +24,8 @@
     "./js/*": {
       "import": "./dist/es/*",
       "types": "./dist/es/*"
-    }
+    },
+    "./ulu-mcp-provider": "./dist/mcp-data.json"
   },
   "sideEffects": [
     "dist/es/core/events.js",
@@ -38,7 +40,9 @@
     "dev:host": "vite --config site/vite.config.js --host",
     "dev:nogen": "NO_DOC_GEN=true vite --config site/vite.config.js",
     "docs:build": "vite build --config site/vite.config.js",
-    "deploy": "npm run build && npm run docs:build"
+    "build:mcp-data": "BUILD_MCP=true vite build --config site/vite.config.js && node site/mcp/build-provider.js",
+    "mcp": "node mcp-server/sandbox.js",
+    "deploy": "npm run build && npm run docs:build && npm run build:mcp-data"
   },
   "repository": {
     "type": "git",
@@ -119,6 +123,7 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-image-optimizer": "^2.0.3"
+    "vite-plugin-image-optimizer": "^2.0.3",
+    "yaml": "^2.8.4"
   }
 }