mlola-ui 1.0.10 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mlola-ui",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Source-copy CLI that writes framework-free Mlola UI items into your project",
   "type": "module",
   "bin": {

package/registry/agents.json

@@ -255,6 +255,10 @@
       "name": "ml-chart-heading",
       "note": ""
     },
+    {
+      "name": "ml-check-list",
+      "note": "A list of benefits, each after a check. Pricing tiers and feature rows share it."
+    },
     {
       "name": "ml-cluster",
       "note": ""
@@ -337,7 +341,7 @@
     },
     {
       "name": "ml-page-shell",
-      "note": "A full page: header, main and footer stacked on the page background."
+      "note": "The navigation, main and footer are grid items; they may be narrower than their widest content (a table that scrolls), so the page never does."
     },
     {
       "name": "ml-person",
@@ -361,7 +365,7 @@
     },
     {
       "name": "ml-section",
-      "note": ""
+      "note": "A section a link jumps to clears the sticky navigation bar."
     },
     {
       "name": "ml-section-description",

package/registry/agents.md

@@ -127,10 +127,12 @@ Compose pages from these before writing layout CSS: sections, stacks,
 clusters, grids, headings, forms, stats. They read the same tokens as every
 component, so a page built from them themes with the rest.
 
-`.ml-actions` `.ml-brand` `.ml-brand-mark` `.ml-brand-name` `.ml-chart` `.ml-chart-bar` `.ml-chart-bars` `.ml-chart-heading` `.ml-cluster` `.ml-definition-list` `.ml-display` `.ml-divider` `.ml-empty-state` `.ml-eyebrow` `.ml-filter-chip` `.ml-filter-group` `.ml-fine-print` `.ml-form` `.ml-form-message` `.ml-form-options` `.ml-grid` `.ml-heading` `.ml-icon-chip` `.ml-inline-form` `.ml-inline-form-field` `.ml-label` `.ml-lede` `.ml-link` `.ml-page-shell` `.ml-person` `.ml-person-copy` `.ml-positive` `.ml-price` `.ml-required-mark` `.ml-section` `.ml-section-description` `.ml-section-header` `.ml-section-header-centered` `.ml-section-muted` `.ml-section-shell` `.ml-stack` `.ml-stat` `.ml-stat-card` `.ml-stat-grid` `.ml-stat-list` `.ml-stat-meta` `.ml-stat-value` `.ml-text-primary` `.ml-value`
+`.ml-actions` `.ml-brand` `.ml-brand-mark` `.ml-brand-name` `.ml-chart` `.ml-chart-bar` `.ml-chart-bars` `.ml-chart-heading` `.ml-check-list` `.ml-cluster` `.ml-definition-list` `.ml-display` `.ml-divider` `.ml-empty-state` `.ml-eyebrow` `.ml-filter-chip` `.ml-filter-group` `.ml-fine-print` `.ml-form` `.ml-form-message` `.ml-form-options` `.ml-grid` `.ml-heading` `.ml-icon-chip` `.ml-inline-form` `.ml-inline-form-field` `.ml-label` `.ml-lede` `.ml-link` `.ml-page-shell` `.ml-person` `.ml-person-copy` `.ml-positive` `.ml-price` `.ml-required-mark` `.ml-section` `.ml-section-description` `.ml-section-header` `.ml-section-header-centered` `.ml-section-muted` `.ml-section-shell` `.ml-stack` `.ml-stat` `.ml-stat-card` `.ml-stat-grid` `.ml-stat-list` `.ml-stat-meta` `.ml-stat-value` `.ml-text-primary` `.ml-value`
 
+- `.ml-check-list` — A list of benefits, each after a check. Pricing tiers and feature rows share it.
 - `.ml-link` — A glyph inside a link flows with the text instead of breaking the line.
-- `.ml-page-shell` — A full page: header, main and footer stacked on the page background.
+- `.ml-page-shell` — The navigation, main and footer are grid items; they may be narrower than their widest content (a table that scrolls), so the page never does.
+- `.ml-section` — A section a link jumps to clears the sticky navigation bar.
 
 ## Elements and their attributes
 
@@ -166,6 +168,7 @@ correct. This table is read out of the stylesheet, so it is never stale.
 | `.ml-calendar-day` | `data-unreachable` | _presence only_ |
 | `.ml-card` | `data-interactive` | _presence only_ |
 | `.ml-card` | `data-variant` | `elevated`, `glass`, `specular` |
+| `.ml-carousel` | `data-arrows` | _presence only_ |
 | `.ml-carousel` | `data-playing` | _presence only_ |
 | `.ml-carousel-arrow` | `data-side` | `next`, `previous` |
 | `.ml-carousel-dot` | `aria-current` | `true` |

package/registry/assets.json

@@ -433,14 +433,14 @@
         {
           "path": "empty-cart.svg",
           "role": "source",
-          "bytes": 4968,
-          "integrity": "sha256-D0zyZvimuFagUT0ChqyBNp2hsCjAZ4Pv7RW6cJ37gcE="
+          "bytes": 4982,
+          "integrity": "sha256-8m4Z0HWSI7KRjDc6MSHRrCI1HwbiyynBmoxgCyo2DDw="
         },
         {
           "path": "empty-cart.tsx",
           "role": "react",
-          "bytes": 5920,
-          "integrity": "sha256-fapGlGqTLVX54EYazXYKN+vxVbbYN9RP3t4qDLnN1/g="
+          "bytes": 5934,
+          "integrity": "sha256-CFip8M6D6RJdYVGIwQ6H3HwWek/dHTq9ON98SeHjS4Q="
         }
       ]
     },
@@ -604,7 +604,7 @@
       "id": "inventory",
       "kind": "2d",
       "title": "Inventory",
-      "summary": "Shelved parcels with labels, counted slots and an active stock marker.",
+      "summary": "An open shelf of labeled parcels, one empty slot and a tag marking the stock that is ready.",
       "tags": [
         "inventory",
         "warehouse",
@@ -615,14 +615,14 @@
         {
           "path": "inventory.svg",
           "role": "source",
-          "bytes": 4558,
-          "integrity": "sha256-lpe+xybY6if62AE7jyrc531zeQuQiZWvB6bZ8LNSAuE="
+          "bytes": 9461,
+          "integrity": "sha256-PrHqQsxeEtVKhftidsFZpr2XMIWx2oMgKhsd0dGKXSQ="
         },
         {
           "path": "inventory.tsx",
           "role": "react",
-          "bytes": 5532,
-          "integrity": "sha256-si0HLYrwRJ07wZH2lNuvUhxhhNGFtihT8S21fClz4sY="
+          "bytes": 10590,
+          "integrity": "sha256-WH+stRnsQsNF8bWuVpZAoqkjthF3JNM/FEQ3aw2G6Lg="
         }
       ]
     },
@@ -838,7 +838,7 @@
       "id": "offline",
       "kind": "2d",
       "title": "Offline",
-      "summary": "A small wireless router and a disconnected cable. Connection paused, ready to reconnect.",
+      "summary": "A wireless router that has lost its signal and a disconnected cable. Connection paused, ready to reconnect.",
       "tags": [
         "error",
         "network",
@@ -849,14 +849,14 @@
         {
           "path": "offline.svg",
           "role": "source",
-          "bytes": 4202,
-          "integrity": "sha256-2sWn+8fJD4xEyp/D+Po2wAIUJVufv9EGmu4cQYmFCRg="
+          "bytes": 4560,
+          "integrity": "sha256-q0ZZ4EKo8a+56sIAtcGyjni7yVhxyD6yMYwSlDaWqRQ="
         },
         {
           "path": "offline.tsx",
           "role": "react",
-          "bytes": 5132,
-          "integrity": "sha256-4fui9gRQW3U+pMsibh1vg8b3jmHvnpxQRXqmAiSNA04="
+          "bytes": 5517,
+          "integrity": "sha256-G1ys9dW4cJg6CjD3Gj1aJ2InQus4zYClR45jExmITSg="
         }
       ]
     },
@@ -1707,14 +1707,14 @@
         {
           "path": "measuring-tape.glb",
           "role": "source",
-          "bytes": 592628,
-          "integrity": "sha256-gjp8OVIjpEbmo0zeegc7p9W+gkYGeNqwETxuBfE43Js="
+          "bytes": 445392,
+          "integrity": "sha256-VsiwX1rsnRBGeE28vd1LuoqIZSF5OVqvDjy9fgwbLNk="
         },
         {
           "path": "measuring-tape-poster.webp",
           "role": "poster",
-          "bytes": 16086,
-          "integrity": "sha256-Ygzmwy/ttH5//dWsBUTsR+4XGQlD/YpodjI6y9caXuo="
+          "bytes": 18308,
+          "integrity": "sha256-Nmmtp3upafknGSg3V57I1GEBf+yMRCBVBmIsSGXKlks="
         }
       ]
     },
@@ -1941,14 +1941,14 @@
         {
           "path": "task-lamp.glb",
           "role": "source",
-          "bytes": 283168,
-          "integrity": "sha256-hAolZPXrmhkMW0DjUx/aB4iXTEBm3YFDnoTzOqsMtMc="
+          "bytes": 283120,
+          "integrity": "sha256-mQVMpISa78gjVjYSbzsY9IOzZjTQVwl2n/YrCCdVOf0="
         },
         {
           "path": "task-lamp-poster.webp",
           "role": "poster",
-          "bytes": 16676,
-          "integrity": "sha256-KczARj6DGDO6U9YrYZ5LLTKCHK922mbXLvJtcmeMEfQ="
+          "bytes": 17958,
+          "integrity": "sha256-IQot+k4DZEqTkOknca5ZxH4dqPjpE4xyeJWxGANl6yM="
         }
       ]
     },

package/registry/catalog.json

@@ -70,7 +70,17 @@
     "stats-band",
     "testimonials",
     "thread-sidebar",
-    "voice-session"
+    "voice-session",
+    "logo-cloud",
+    "comparison-table",
+    "feature-rows",
+    "process-steps",
+    "contact-form",
+    "changelog",
+    "onboarding-checklist",
+    "activity-feed",
+    "settings-panel",
+    "error-state"
   ],
   "pages": [
     "auth",
@@ -78,7 +88,11 @@
     "chat-app",
     "dashboard",
     "landing",
-    "pricing"
+    "pricing",
+    "features",
+    "contact",
+    "welcome",
+    "release-notes"
   ],
   "templates": [
     "code-agent",
@@ -92,7 +106,9 @@
     "crm",
     "mail",
     "scheduling",
-    "support"
+    "support",
+    "marketing-site",
+    "docs-site"
   ],
   "items": [
     {
@@ -510,12 +526,11 @@
       "name": "block-editor",
       "type": "registry:ui",
       "title": "Block Editor",
-      "description": "A Notion-style block editor: slash commands, Markdown shortcuts, to-dos, callouts, drag to reorder, a selection bubble and AI that streams into the page",
+      "description": "A block editor: slash commands, Markdown shortcuts, to-dos, callouts, drag to reorder, a selection bubble and AI that streams into the page",
       "category": "editor",
       "tags": [
         "editor",
         "blocks",
-        "notion",
         "slash",
         "markdown",
         "ai"
@@ -1008,6 +1023,127 @@
         "call"
       ]
     },
+    {
+      "name": "logo-cloud",
+      "type": "registry:block",
+      "title": "Logo Cloud",
+      "description": "Customer wordmarks under a line of proof, as framed tiles or one quiet row",
+      "category": "marketing",
+      "tags": [
+        "block",
+        "section",
+        "social-proof"
+      ]
+    },
+    {
+      "name": "comparison-table",
+      "type": "registry:block",
+      "title": "Comparison Table",
+      "description": "Every plan side by side, feature by feature, in groups, with the recommended plan marked",
+      "category": "marketing",
+      "tags": [
+        "block",
+        "section",
+        "pricing"
+      ]
+    },
+    {
+      "name": "feature-rows",
+      "type": "registry:block",
+      "title": "Feature Rows",
+      "description": "Features told one at a time, text beside a visual, alternating down the page",
+      "category": "marketing",
+      "tags": [
+        "block",
+        "section",
+        "features"
+      ]
+    },
+    {
+      "name": "process-steps",
+      "type": "registry:block",
+      "title": "Process Steps",
+      "description": "A short numbered path from signing up to value, across a row or down a rail beside the heading",
+      "category": "marketing",
+      "tags": [
+        "block",
+        "section",
+        "onboarding"
+      ]
+    },
+    {
+      "name": "contact-form",
+      "type": "registry:block",
+      "title": "Contact Form",
+      "description": "Ways to reach the team beside a validated message form with topics, a success state and focus that follows it",
+      "category": "marketing",
+      "tags": [
+        "block",
+        "section",
+        "form"
+      ]
+    },
+    {
+      "name": "changelog",
+      "type": "registry:block",
+      "title": "Changelog",
+      "description": "Releases newest first, each change tagged new, improved or fixed, with a filter by kind",
+      "category": "marketing",
+      "tags": [
+        "block",
+        "section",
+        "content"
+      ]
+    },
+    {
+      "name": "onboarding-checklist",
+      "type": "registry:block",
+      "title": "Onboarding Checklist",
+      "description": "A getting-started list with progress, the next step called out, and a finished state",
+      "category": "application",
+      "tags": [
+        "block",
+        "panel",
+        "onboarding"
+      ]
+    },
+    {
+      "name": "activity-feed",
+      "type": "registry:block",
+      "title": "Activity Feed",
+      "description": "What happened in a workspace, newest first, grouped by day and filterable by kind",
+      "category": "application",
+      "tags": [
+        "block",
+        "panel",
+        "activity"
+      ]
+    },
+    {
+      "name": "settings-panel",
+      "type": "registry:block",
+      "title": "Settings Panel",
+      "description": "Settings sections and rows with a save bar that validates, discards and reports unsaved changes",
+      "category": "account",
+      "tags": [
+        "block",
+        "panel",
+        "settings",
+        "form"
+      ]
+    },
+    {
+      "name": "error-state",
+      "type": "registry:block",
+      "title": "Error State",
+      "description": "Not-found, server error, maintenance and offline screens with search, next steps and a reference",
+      "category": "application",
+      "tags": [
+        "block",
+        "section",
+        "errors"
+      ]
+    },
     {
       "name": "auth",
       "type": "registry:page",
@@ -1081,6 +1217,54 @@
         "saas"
       ]
     },
+    {
+      "name": "features",
+      "type": "registry:page",
+      "title": "Features",
+      "description": "A product tour: centered hero, customer row, features told one at a time, getting started, essentials and reviews",
+      "category": "marketing",
+      "tags": [
+        "page",
+        "marketing",
+        "saas"
+      ]
+    },
+    {
+      "name": "contact",
+      "type": "registry:page",
+      "title": "Contact",
+      "description": "Contact channels, a validated message form and the questions people ask before writing",
+      "category": "marketing",
+      "tags": [
+        "page",
+        "marketing",
+        "form"
+      ]
+    },
+    {
+      "name": "welcome",
+      "type": "registry:page",
+      "title": "Welcome",
+      "description": "A new member's home: workspace navigation, this week in numbers, the setup checklist and recent activity",
+      "category": "application",
+      "tags": [
+        "page",
+        "application",
+        "onboarding"
+      ]
+    },
+    {
+      "name": "release-notes",
+      "type": "registry:page",
+      "title": "Release Notes",
+      "description": "A public changelog with filterable releases and a monthly email signup",
+      "category": "marketing",
+      "tags": [
+        "page",
+        "marketing",
+        "content"
+      ]
+    },
     {
       "name": "code-agent",
       "type": "registry:template",
@@ -1112,7 +1296,7 @@
       "name": "canvas-studio",
       "type": "registry:template",
       "title": "Canvas Studio",
-      "description": "A Miro-style canvas studio: whiteboards with collaborators and AI that adds ideas to the view, and an agent workflow builder with a step palette, inspector and live test runs",
+      "description": "A canvas studio: whiteboards with collaborators and AI that adds ideas to the view, and an agent workflow builder with a step palette, inspector and live test runs",
       "category": "ai",
       "tags": [
         "template",
@@ -1128,7 +1312,7 @@
       "name": "notebook",
       "type": "registry:template",
       "title": "Notebook",
-      "description": "A Notion-style notebook: a page tree with favorites and search, pages with covers, icons and properties, a block editor, and an assistant that summarizes, rewrites with tracked changes and gathers open to-dos",
+      "description": "A notebook: a page tree with favorites and search, pages with covers, icons and properties, a block editor, and an assistant that summarizes, rewrites with tracked changes and gathers open to-dos",
       "category": "productivity",
       "tags": [
         "template",
@@ -1136,7 +1320,6 @@
         "docs",
         "wiki",
         "editor",
-        "notion",
         "ai",
         "premium"
       ]
@@ -1145,7 +1328,7 @@
       "name": "tracker",
       "type": "registry:template",
       "title": "Tracker",
-      "description": "An issue tracker in the manner of Linear: an inbox the assistant triages, teams with a keyboard-first list and a board with swimlanes, saved views, cycles with burndown, a roadmap, issue pages with history, and an AI agent that takes work",
+      "description": "An issue tracker: an inbox the assistant triages, teams with a keyboard-first list and a board with swimlanes, saved views, cycles with burndown, a roadmap, issue pages with history, and an AI agent that takes work",
       "category": "productivity",
       "tags": [
         "template",
@@ -1215,7 +1398,7 @@
       "name": "crm",
       "type": "registry:template",
       "title": "CRM",
-      "description": "A CRM in the manner of Attio: companies and people as editable grids, a deal pipeline with weighted totals, and record pages with an activity timeline, an account brief the assistant writes and next steps it drafts for review",
+      "description": "A CRM: companies and people as editable grids, a deal pipeline with weighted totals, and record pages with an activity timeline, an account brief the assistant writes and next steps it drafts for review",
       "category": "productivity",
       "tags": [
         "template",
@@ -1232,7 +1415,7 @@
       "name": "mail",
       "type": "registry:template",
       "title": "Mail",
-      "description": "A mail client in the manner of Superhuman: a split inbox with the assistant's triage, summaries, first drafts and edits to your own reply you accept change by change, done, snooze and star with a key, and a command menu",
+      "description": "A keyboard-first mail client: a split inbox with the assistant's triage, summaries, first drafts and edits to your own reply you accept change by change, done, snooze and star with a key, and a command menu",
       "category": "productivity",
       "tags": [
         "template",
@@ -1249,7 +1432,7 @@
       "name": "scheduling",
       "type": "registry:template",
       "title": "Scheduling",
-      "description": "Scheduling in the manner of Cal.com: a public booking page with open times from weekly hours, buffers and existing bookings in the visitor's time zone, a confirmation with a calendar file, and the host's bookings, team calendar, event types, hours and days off",
+      "description": "Scheduling: a public booking page with open times from weekly hours, buffers and existing bookings in the visitor's time zone, a confirmation with a calendar file, and the host's bookings, team calendar, event types, hours and days off",
       "category": "productivity",
       "tags": [
         "template",
@@ -1266,7 +1449,7 @@
       "name": "support",
       "type": "registry:template",
       "title": "Support Desk",
-      "description": "A support desk in the manner of Intercom: an inbox sorted by live response targets, replies and internal notes with macros, a suggested answer the assistant writes from the help center with citations and confidence, the customer beside it, and the questions that still need an article",
+      "description": "A support desk: an inbox sorted by live response targets, replies and internal notes with macros, a suggested answer the assistant writes from the help center with citations and confidence, the customer beside it, and the questions that still need an article",
       "category": "ai",
       "tags": [
         "template",
@@ -1279,6 +1462,31 @@
         "knowledge base",
         "premium"
       ]
+    },
+    {
+      "name": "marketing-site",
+      "type": "registry:template",
+      "title": "Marketing Site",
+      "description": "A complete product site: home, features, pricing with a full comparison, changelog, contact, sign-in and a not-found page, with one navigation that marks where the reader is",
+      "category": "marketing",
+      "tags": [
+        "template",
+        "marketing",
+        "saas",
+        "multi-page"
+      ]
+    },
+    {
+      "name": "docs-site",
+      "type": "registry:template",
+      "title": "Docs Site",
+      "description": "A documentation site: grouped articles in a sidebar, search over every page and section, a table of contents that follows the reader, code with copy, notes, previous and next, and feedback on every page",
+      "category": "productivity",
+      "tags": [
+        "template",
+        "documentation",
+        "multi-page"
+      ]
     }
   ]
 }

package/registry/contract.json

@@ -42,6 +42,7 @@
     "ml-brand-name",
     "ml-breadcrumb",
     "ml-breadcrumb-ellipsis",
+    "ml-breadcrumb-icon",
     "ml-breadcrumb-item",
     "ml-breadcrumb-link",
     "ml-breadcrumb-list",
@@ -79,6 +80,7 @@
     "ml-chart-bar",
     "ml-chart-bars",
     "ml-chart-heading",
+    "ml-check-list",
     "ml-checkbox-control",
     "ml-checkbox-copy",
     "ml-checkbox-description",
@@ -579,6 +581,7 @@
       ]
     },
     "ml-carousel": {
+      "data-arrows": [],
       "data-playing": []
     },
     "ml-carousel-arrow": {

package/registry/examples.json

@@ -232,6 +232,10 @@
         "class": "ml-breadcrumb-page",
         "attributes": {}
       },
+      {
+        "class": "ml-breadcrumb-icon",
+        "attributes": {}
+      },
       {
         "class": "ml-breadcrumb-separator",
         "attributes": {}
@@ -362,11 +366,12 @@
   "carousel": {
     "needs": "script",
     "react": "import { Carousel } from \"@/components/ui/carousel\";\n\nconst slides = [\"Plan\", \"Build\", \"Ship\"].map((title) => (\n  <div key={title} className=\"ml-card\" data-variant=\"elevated\">\n    <div className=\"ml-card-content\">{title}</div>\n  </div>\n));\n\nexport default function Example() {\n  return <Carousel label=\"Release stages\" items={slides} itemLabels={[\"Plan\", \"Build\", \"Ship\"]} />;\n}",
-    "html": "<div class=\"ml-carousel\" role=\"group\" aria-roledescription=\"carousel\" aria-label=\"Release stages\" style=\"--ml-carousel-per-view:1;--ml-carousel-peek:0px;--ml-carousel-min:0px;--ml-carousel-autoplay:0ms\">\n  <div class=\"ml-carousel-viewport\">\n    <div class=\"ml-carousel-track\" tabindex=\"0\" aria-label=\"Release stages, use the arrow keys\">\n      <div class=\"ml-carousel-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 3: Plan\" data-current=\"true\">\n        <div class=\"ml-card\" data-variant=\"elevated\"><div class=\"ml-card-content\">Plan</div></div>\n      </div>\n      <div class=\"ml-carousel-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 of 3: Build\">\n        <div class=\"ml-card\" data-variant=\"elevated\"><div class=\"ml-card-content\">Build</div></div>\n      </div>\n      <div class=\"ml-carousel-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 of 3: Ship\">\n        <div class=\"ml-card\" data-variant=\"elevated\"><div class=\"ml-card-content\">Ship</div></div>\n      </div>\n    </div>\n    <button class=\"ml-carousel-arrow\" type=\"button\" data-side=\"previous\" aria-label=\"Previous slide\"><svg class=\"mlola-glyph\" width=\"1.1em\" height=\"1.1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"m15 18-6-6 6-6\" pathLength=\"1\"></path></svg></button>\n    <button class=\"ml-carousel-arrow\" type=\"button\" data-side=\"next\" aria-label=\"Next slide\"><svg class=\"mlola-glyph\" width=\"1.1em\" height=\"1.1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"m9 18 6-6-6-6\" pathLength=\"1\"></path></svg></button>\n  </div>\n  <div class=\"ml-carousel-dots\" role=\"group\" aria-label=\"Choose release stages\">\n    <button class=\"ml-carousel-dot\" type=\"button\" data-hit=\"expand\" aria-current=\"true\" aria-label=\"Plan\" tabindex=\"0\"></button>\n    <button class=\"ml-carousel-dot\" type=\"button\" data-hit=\"expand\" aria-label=\"Build\" tabindex=\"-1\"></button>\n    <button class=\"ml-carousel-dot\" type=\"button\" data-hit=\"expand\" aria-label=\"Ship\" tabindex=\"-1\"></button>\n  </div>\n</div>",
+    "html": "<div class=\"ml-carousel\" role=\"group\" aria-roledescription=\"carousel\" aria-label=\"Release stages\" data-arrows=\"true\" style=\"--ml-carousel-per-view:1;--ml-carousel-peek:0px;--ml-carousel-min:0px;--ml-carousel-autoplay:0ms\">\n  <div class=\"ml-carousel-viewport\">\n    <div class=\"ml-carousel-track\" tabindex=\"0\" aria-label=\"Release stages, use the arrow keys\">\n      <div class=\"ml-carousel-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 3: Plan\" data-current=\"true\">\n        <div class=\"ml-card\" data-variant=\"elevated\"><div class=\"ml-card-content\">Plan</div></div>\n      </div>\n      <div class=\"ml-carousel-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 of 3: Build\">\n        <div class=\"ml-card\" data-variant=\"elevated\"><div class=\"ml-card-content\">Build</div></div>\n      </div>\n      <div class=\"ml-carousel-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 of 3: Ship\">\n        <div class=\"ml-card\" data-variant=\"elevated\"><div class=\"ml-card-content\">Ship</div></div>\n      </div>\n    </div>\n    <button class=\"ml-carousel-arrow\" type=\"button\" data-side=\"previous\" aria-label=\"Previous slide\"><svg class=\"mlola-glyph\" width=\"1.1em\" height=\"1.1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"m15 18-6-6 6-6\" pathLength=\"1\"></path></svg></button>\n    <button class=\"ml-carousel-arrow\" type=\"button\" data-side=\"next\" aria-label=\"Next slide\"><svg class=\"mlola-glyph\" width=\"1.1em\" height=\"1.1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\" aria-hidden=\"true\" data-optical-size=\"default\" style=\"color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center\"><path d=\"m9 18 6-6-6-6\" pathLength=\"1\"></path></svg></button>\n  </div>\n  <div class=\"ml-carousel-dots\" role=\"group\" aria-label=\"Choose release stages\">\n    <button class=\"ml-carousel-dot\" type=\"button\" data-hit=\"expand\" aria-current=\"true\" aria-label=\"Plan\" tabindex=\"0\"></button>\n    <button class=\"ml-carousel-dot\" type=\"button\" data-hit=\"expand\" aria-label=\"Build\" tabindex=\"-1\"></button>\n    <button class=\"ml-carousel-dot\" type=\"button\" data-hit=\"expand\" aria-label=\"Ship\" tabindex=\"-1\"></button>\n  </div>\n</div>",
     "elements": [
       {
         "class": "ml-carousel",
         "attributes": {
+          "data-arrows": [],
           "data-playing": []
         }
       },

package/registry/index.json

@@ -2,7 +2,7 @@
   "$schema": "./schema/registry-index.schema.json",
   "schemaVersion": 2,
   "name": "mlola-ui",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "homepage": "https://ui.mlola.com",
   "themeContract": {
     "attribute": "data-theme",
@@ -177,8 +177,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.10",
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/behavior": "^1.0.12",
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [
         {
@@ -239,7 +239,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [
         {
@@ -393,7 +393,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [
         {
@@ -485,7 +485,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [],
       "variants": [],
@@ -501,7 +501,7 @@
           "path": "packages/components/breadcrumb/breadcrumb.tsx",
           "target": "{{aliases.components}}/breadcrumb.tsx",
           "type": "registry:ui",
-          "integrity": "sha256-Mt9mvmwwDgdp5/+mj5byIrh8+hicsp7R6UcvUlK0yog="
+          "integrity": "sha256-mxQpach2kFayT8H1vMt5252LQLxVV+sohdVXDhPuKoU="
         }
       ],
       "themeContract": {
@@ -538,7 +538,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/motion": "^1.0.10"
+        "@mlola-ui/motion": "^1.0.12"
       },
       "options": [
         {
@@ -693,8 +693,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.10",
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/behavior": "^1.0.12",
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [
         {
@@ -721,7 +721,7 @@
           "path": "packages/components/carousel/carousel.tsx",
           "target": "{{aliases.components}}/carousel.tsx",
           "type": "registry:ui",
-          "integrity": "sha256-pamugpB6Ujt9Ylxd37jNF/ZwSb8iRkW/MoYe12nY3i4="
+          "integrity": "sha256-Gsw0LhQsOuvdQN/F2KDGVC/gJq53+ifLs19u95RWCoU="
         }
       ],
       "themeContract": {
@@ -756,7 +756,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [],
       "variants": [],
@@ -811,7 +811,7 @@
         "modal"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [],
       "variants": [],
@@ -821,7 +821,7 @@
           "path": "packages/components/_internal/match.ts",
           "target": "{{aliases.components}}/_internal/match.ts",
           "type": "registry:ui",
-          "integrity": "sha256-nKBpKWeow5ubAHUhOW8yOjlrKs0lqYdjbaYYfE8VoII="
+          "integrity": "sha256-3tUYob6xmD2nLerh634E3R5iPbzMeNBzdDynsDFjj28="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -874,8 +874,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.10",
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/behavior": "^1.0.12",
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [
         {
@@ -939,7 +939,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [],
       "variants": [],
@@ -1163,8 +1163,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.10",
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/behavior": "^1.0.12",
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [
         {
@@ -1302,7 +1302,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [],
       "variants": [],
@@ -1353,7 +1353,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.10"
+        "@mlola-ui/behavior": "^1.0.12"
       },
       "options": [
         {
@@ -1722,7 +1722,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.10"
+        "@mlola-ui/behavior": "^1.0.12"
       },
       "options": [],
       "variants": [],
@@ -1773,8 +1773,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.10",
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/behavior": "^1.0.12",
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [
         {
@@ -1851,8 +1851,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.10",
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/behavior": "^1.0.12",
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [
         {
@@ -1984,7 +1984,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.10"
+        "@mlola-ui/behavior": "^1.0.12"
       },
       "options": [
         {
@@ -2129,7 +2129,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.10"
+        "@mlola-ui/behavior": "^1.0.12"
       },
       "options": [
         {
@@ -2255,7 +2255,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [
         {
@@ -2341,7 +2341,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [
         {
@@ -2615,7 +2615,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [
         {
@@ -2687,7 +2687,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [
         {
@@ -2757,7 +2757,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [],
       "variants": [],
@@ -2955,7 +2955,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [
         {
@@ -2974,7 +2974,7 @@
           "path": "packages/components/_internal/match.ts",
           "target": "{{aliases.components}}/_internal/match.ts",
           "type": "registry:ui",
-          "integrity": "sha256-nKBpKWeow5ubAHUhOW8yOjlrKs0lqYdjbaYYfE8VoII="
+          "integrity": "sha256-3tUYob6xmD2nLerh634E3R5iPbzMeNBzdDynsDFjj28="
         },
         {
           "path": "packages/components/_internal/react.ts",
@@ -3032,7 +3032,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [],
       "variants": [],
@@ -3087,7 +3087,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [],
       "variants": [],
@@ -3150,7 +3150,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [
         {
@@ -3220,7 +3220,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [
         {
@@ -3339,8 +3339,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.10",
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/behavior": "^1.0.12",
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [],
       "variants": [],
@@ -3404,7 +3404,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.10"
+        "@mlola-ui/behavior": "^1.0.12"
       },
       "options": [
         {
@@ -3491,8 +3491,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.10",
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/behavior": "^1.0.12",
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [],
       "variants": [],
@@ -3560,7 +3560,7 @@
         "sheet"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [],
       "variants": [],
@@ -3677,7 +3677,7 @@
         "button"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [
         {
@@ -3772,8 +3772,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.10",
-        "@mlola-ui/icons": "^1.0.10"
+        "@mlola-ui/behavior": "^1.0.12",
+        "@mlola-ui/icons": "^1.0.12"
       },
       "options": [
         {

package/registry/source/packages/components/_internal/match.ts

@@ -22,6 +22,14 @@ export function matchCommand(label: string, query: string, keywords: string[] =
   if (inside >= 0) return { score: 60 - inside * 0.5, positions: range(inside) };
   if (keywords.some((keyword) => keyword.toLowerCase().includes(needle))) return { score: 45, positions: [] };
 
+  // Several words, each starting a word somewhere in the label or keywords ("rate limit head" → "Limit headers" under "Rate limits").
+  const words = needle.split(/\s+/);
+  if (words.length > 1) {
+    const haystack = [text, ...keywords.map((keyword) => keyword.toLowerCase())].join(" ");
+    const startsWord = (word: string) => new RegExp(`\\b${word.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`).test(haystack);
+    if (words.every(startsWord)) return { score: 40, positions: [] };
+  }
+
   // Letters in order, preferring word starts and runs.
   const positions: number[] = [];
   let from = 0;

package/registry/source/packages/components/breadcrumb/breadcrumb.tsx

@@ -4,7 +4,15 @@ import * as React from "react";
 import { cx } from "../_internal/react";
 import { IconChevronRight } from "@mlola-ui/icons";
 
-export type BreadcrumbItemType = { label: string; href?: string };
+export type BreadcrumbItemType = {
+  label: string;
+  /** A link to the page. */
+  href?: string;
+  /** In-app navigation without a URL; the item becomes a button. */
+  onSelect?: () => void;
+  /** A decorative mark before the label, such as a page's icon. */
+  icon?: React.ReactNode;
+};
 type BreadcrumbProps = { items: BreadcrumbItemType[]; separator?: React.ReactNode; className?: string };
 
 const BreadcrumbList = React.forwardRef<HTMLOListElement, React.OlHTMLAttributes<HTMLOListElement>>(
@@ -29,6 +37,8 @@ function BreadcrumbEllipsis({ className }: { className?: string }) {
   return <span aria-hidden="true" className={cx("ml-breadcrumb-ellipsis", className)}>…</span>;
 }
 
+const icon = (item: BreadcrumbItemType) => (item.icon ? <span aria-hidden="true" className="ml-breadcrumb-icon">{item.icon}</span> : null);
+
 export function Breadcrumb({ items, separator, className }: BreadcrumbProps) {
   const last = items.length - 1;
   const collapse = items.length > 3;
@@ -46,9 +56,13 @@ export function Breadcrumb({ items, separator, className }: BreadcrumbProps) {
                 </BreadcrumbItem>
               ) : null}
               <BreadcrumbItem data-collapsible={middle && collapse ? "" : undefined}>
-                {current || !item.href
-                  ? <BreadcrumbPage>{item.label}</BreadcrumbPage>
-                  : <BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>}
+                {current || (!item.href && !item.onSelect) ? (
+                  <BreadcrumbPage>{icon(item)}{item.label}</BreadcrumbPage>
+                ) : item.href ? (
+                  <BreadcrumbLink href={item.href}>{icon(item)}{item.label}</BreadcrumbLink>
+                ) : (
+                  <button type="button" className="ml-breadcrumb-link" data-hit="expand" onClick={item.onSelect}>{icon(item)}{item.label}</button>
+                )}
                 {!current ? <BreadcrumbSeparator>{separator}</BreadcrumbSeparator> : null}
               </BreadcrumbItem>
             </React.Fragment>

package/registry/source/packages/components/carousel/carousel.tsx

@@ -180,6 +180,7 @@ export function Carousel({
       aria-roledescription="carousel"
       aria-label={label}
       data-playing={playing || undefined}
+      data-arrows={(arrows && positions > 1) || undefined}
       style={{ ...style, "--ml-carousel-per-view": view, "--ml-carousel-peek": peek ?? "0px", "--ml-carousel-min": minSlideWidth ?? "0px", "--ml-carousel-autoplay": `${autoplay ?? 0}ms` } as React.CSSProperties}
       onPointerEnter={() => setPaused(true)}
       onPointerLeave={() => setPaused(false)}

package/registry/source-manifest.json

@@ -3,7 +3,7 @@
   "packages/components/_internal/clipboard.ts": "sha256-0y5p88CTXWuOrUYlC5J4XP1VCrOwkx9jYWVHmD2LouQ=",
   "packages/components/_internal/dialog.ts": "sha256-796y3oNOVWarLvICTdi+d0/2axqSrzLVJiyBeh9X7bU=",
   "packages/components/_internal/floating.ts": "sha256-+WxgC4CtAlSr2qA1EkoDTgto535XLIPsvtOfdOK6CHk=",
-  "packages/components/_internal/match.ts": "sha256-nKBpKWeow5ubAHUhOW8yOjlrKs0lqYdjbaYYfE8VoII=",
+  "packages/components/_internal/match.ts": "sha256-3tUYob6xmD2nLerh634E3R5iPbzMeNBzdDynsDFjj28=",
   "packages/components/_internal/react.ts": "sha256-SH63/haiB4Q93uFjMIMe5xZbaxENu3VI+GcidV8HELM=",
   "packages/components/_internal/scroll.ts": "sha256-/YxhPPJa6Iax4q5eEs8dmpQp634TbvB+421MphEyscQ=",
   "packages/components/accordion/accordion.tsx": "sha256-0ALaLJd1fvj8Vbx86HLBKm3qUItrtwbrGJTykVfNSMg=",
@@ -13,12 +13,12 @@
   "packages/components/app-shell/app-shell.tsx": "sha256-XAq82XOTH3ZR+hxTkYFu8P7Ih2aI6ERy/TpXc2VMUwM=",
   "packages/components/avatar/avatar.tsx": "sha256-EjqC8ytKqRtsTVdK6vncaDfhO/i7ICe+jwaYCg5bjIw=",
   "packages/components/badge/badge.tsx": "sha256-flEH8S2jZ/64n3Y/ROhC9+9rvF7wXaN0xLcMMwqNOVQ=",
-  "packages/components/breadcrumb/breadcrumb.tsx": "sha256-Mt9mvmwwDgdp5/+mj5byIrh8+hicsp7R6UcvUlK0yog=",
+  "packages/components/breadcrumb/breadcrumb.tsx": "sha256-mxQpach2kFayT8H1vMt5252LQLxVV+sohdVXDhPuKoU=",
   "packages/components/button/button.tsx": "sha256-sXVANbGeFSYPHpiWuPvHHqMoPjG0zl0HSsKEdTgl5ME=",
   "packages/components/calendar/calendar.tsx": "sha256-rWiS4YAueZfVoo6j5Fi3uN7A+yApe5U6HMm1woTVjys=",
   "packages/components/calendar/dates.ts": "sha256-mygYkoC70av2ZQ0vkxf885trwW97Wd10I4dptYQe+4A=",
   "packages/components/card/card.tsx": "sha256-aMKbv5DWYYWq7GZAFR9O1fuYE0H61WCjkvEbRMOd894=",
-  "packages/components/carousel/carousel.tsx": "sha256-pamugpB6Ujt9Ylxd37jNF/ZwSb8iRkW/MoYe12nY3i4=",
+  "packages/components/carousel/carousel.tsx": "sha256-Gsw0LhQsOuvdQN/F2KDGVC/gJq53+ifLs19u95RWCoU=",
   "packages/components/checkbox/checkbox.tsx": "sha256-hz4YbGwOxv/aJpJHrLXR4MKSWJGyjzoJEIGvdhyML9M=",
   "packages/components/color-picker/color-picker.tsx": "sha256-E+QB6MbSxg+3AZX3A7bOkst4arxgpmFL2ZmochoWCl8=",
   "packages/components/color-picker/color.ts": "sha256-YqSgYjzn7XfPWAHuyzbwOhbg/ScaSfB7V73e9w+OjJs=",