@triptease/design-system-mcp 1.2.2 → 1.2.3

package/dist/index.js

@@ -23302,7 +23302,7 @@ var StdioServerTransport = class {
 // package.json
 var package_default = {
   name: "@triptease/design-system-mcp",
-  version: "1.2.2",
+  version: "1.2.3",
   description: "MCP server for Triptease design system documentation",
   type: "module",
   main: "dist/index.js",
@@ -25368,13 +25368,16 @@ var paginator_default = {
     element: "tt-paginator",
     usageGuidance: {
       whenToUse: [
-        "Tables, lists, or grids with more than 25 items",
+        "Lists, grids, or tables with more than 25 items",
         "When the consumer controls data fetching and needs to know which page to display"
       ],
       avoid: [
-        "Datasets with 25 or fewer items \u2014 display them all on a single page instead",
+        "Datasets with 25 or fewer items \u2014 display them all on a single page instead. The paginator hides itself automatically when all items fit on a single page, so no extra visibility logic is needed. The default page-size is 25, so you can omit the attribute if that fits your use case.",
         "Infinite scroll or load more patterns"
       ],
+      bestPractices: [
+        "Place the paginator immediately after the content it controls \u2014 no extra spacing or positioning needed. The component handles its own top margin and alignment."
+      ],
       accessibility: [
         'The component uses role="navigation" with aria-label="Pagination"',
         'Page buttons include aria-label="Go to page N" and aria-current="page" for the active page',
@@ -25405,7 +25408,7 @@ var paginator_default = {
       },
       "page-size": {
         type: "number",
-        default: "10",
+        default: "25",
         description: "Number of rows per page."
       }
     },
@@ -25419,20 +25422,40 @@ var paginator_default = {
     examples: [
       {
         title: "Basic usage",
-        description: "Paginator for 100 items with a page size of 25. Listen for the page-change event to display the correct slice of data.",
-        code: `<tt-paginator total-rows="100" page-size="25"></tt-paginator>
+        code: `<div>
+  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-scale-3);">
+    <div class="card" style="padding: 0; overflow: hidden;">
+      <div style="background: var(--color-primary-200); padding: var(--space-scale-3);">
+        <p class="small">Book Direct &amp; Save</p>
+        <p class="strong">Best rate guaranteed</p>
+        <p class="small">Book directly with us and get our lowest available rate \u2014 no booking fees, no middlemen.</p>
+      </div>
+      <div style="display: flex; justify-content: space-between; align-items: center; padding: 0 var(--space-scale-3) var(--space-scale-3);">
+        <span class="badge" data-theme="info">Onsite</span>
+        <button data-theme="secondary">Use template</button>
+      </div>
+    </div>
+    <div class="card" style="padding: 0; overflow: hidden;">
+      <div style="background: var(--color-primary-200); padding: var(--space-scale-3);">
+        <p class="small">Members Only Rate</p>
+        <p class="strong">Exclusive rate for members</p>
+        <p class="small">Sign in to unlock a loyalty rate available only to members. Up to 15% off.</p>
+      </div>
+      <div style="display: flex; justify-content: space-between; align-items: center; padding: 0 var(--space-scale-3) var(--space-scale-3);">
+        <span class="badge" data-theme="info">Onsite</span>
+        <button data-theme="secondary">Use template</button>
+      </div>
+    </div>
+  </div>
+  <tt-paginator total-rows="12" page-size="6"></tt-paginator>
+</div>
 
 <script>
   document.querySelector('tt-paginator')
     .addEventListener('page-change', (e) => {
-      console.log('Page:', e.detail.page);
+      // fetch or slice items for e.detail.page and re-render the grid
     });
 </script>`
-      },
-      {
-        title: "Auto-hides when all items fit on one page",
-        description: "When total-rows is less than or equal to page-size, the paginator hides itself automatically.",
-        code: `<tt-paginator total-rows="10" page-size="25"></tt-paginator>`
       }
     ]
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triptease/design-system-mcp",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "MCP server for Triptease design system documentation",
   "type": "module",
   "main": "dist/index.js",