@triptease/design-system-mcp 1.2.1 → 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.1",
+  version: "1.2.3",
   description: "MCP server for Triptease design system documentation",
   type: "module",
   main: "dist/index.js",
@@ -23409,7 +23409,74 @@ var button_default = {
     examples: [
       {
         title: "Basic usage",
-        code: `<button>Click Me</button>`
+        code: `<button>Save Changes</button>`
+      },
+      {
+        title: "Primary",
+        description: "Use the primary theme for the single most important action on the page.",
+        code: `<button data-theme="primary">Save Changes</button>`
+      },
+      {
+        title: "Secondary",
+        description: "Use the secondary theme for supporting actions that sit alongside a primary action.",
+        code: `<button data-theme="secondary">Save Changes</button>`
+      },
+      {
+        title: "Tertiary",
+        description: "Use the tertiary theme for low-emphasis actions that should not compete with primary or secondary buttons.",
+        code: `<button data-theme="tertiary">Save Changes</button>`
+      },
+      {
+        title: "Destructive primary",
+        description: "Use the destructive primary theme for irreversible actions such as deleting a booking or removing a channel.",
+        code: `<button data-theme="destructive-primary">Save Changes</button>`
+      },
+      {
+        title: "Destructive secondary",
+        description: "Use the destructive secondary theme for a less prominent destructive action alongside other actions.",
+        code: `<button data-theme="destructive-secondary">Save Changes</button>`
+      },
+      {
+        title: "Destructive tertiary",
+        description: "Use the destructive tertiary theme for a low-emphasis destructive action that should not draw immediate attention.",
+        code: `<button data-theme="destructive-tertiary">Save Changes</button>`
+      },
+      {
+        title: "Inline",
+        description: "Use the inline theme for actions embedded within body text or constrained layout areas.",
+        code: `<button data-theme="inline">Save Changes</button>`
+      },
+      {
+        title: "Suggestion",
+        description: "Use the suggestion theme for recommended or auto-generated actions that users can accept or dismiss.",
+        code: `<button data-theme="suggestion">Save Changes</button>`
+      },
+      {
+        title: "Small",
+        description: "Use the small size for buttons in compact layouts such as table rows or dense toolbars.",
+        code: `<button data-theme="primary" class="small">Save Changes</button>`
+      },
+      {
+        title: "Large",
+        description: "Use the large size for high-prominence call-to-action areas where the action needs to stand out, such as a campaign setup or onboarding step.",
+        code: `<button data-theme="primary" class="large">Save Changes</button>`
+      },
+      {
+        title: "Loading",
+        description: "Use the loading state while an action is in progress, such as submitting a booking or saving rate changes.",
+        code: `<button data-theme="primary" data-loading aria-busy>Save Changes</button>`
+      },
+      {
+        title: "Disabled",
+        description: "Use the disabled state when an action is temporarily unavailable, such as when required form fields are incomplete. If a user will never be able to perform this action based on their role or permissions, hide it entirely rather than showing it as disabled.",
+        code: `<button data-theme="primary" disabled aria-disabled>Save Changes</button>`
+      },
+      {
+        title: "Icon button",
+        description: "Use buttons with icons to provide visual context. If you do not provide a size to tt-icon, it will inherit the size of the button.",
+        code: `<button data-theme="primary">
+  <tt-icon name="download"></tt-icon> Download
+</button>`
       }
     ]
   }
@@ -23459,11 +23526,22 @@ var textinput_default = {
 <input id="hotel-name" />`
       },
       {
-        title: "Error state",
-        description: "Use aria-invalid with aria-describedby to associate error messages for screen readers",
-        code: `<label for="email">Email</label>
-<input id="email" type="email" aria-invalid aria-describedby="email-error" />
-<span id="email-error" class="text-error">Please enter a valid email address</span>`
+        title: "Disabled",
+        description: "Use the disabled state when the field is temporarily not editable in the current context, such as a read-only booking reference. If the field will never be editable for this user based on their role or permissions, hide it entirely rather than showing it as disabled.",
+        code: `<label for="booking-ref">Booking Reference</label>
+<input id="booking-ref" value="TT-2025-04821" disabled />`
+      },
+      {
+        title: "Placeholder",
+        description: "Use placeholder text to provide a short example of the expected input format \u2014 do not use it as a substitute for a label.",
+        code: `<label for="hotel-name">Hotel Name</label>
+<input id="hotel-name" placeholder="Triptease" />`
+      },
+      {
+        title: "Invalid",
+        description: "Use the invalid state when the field value fails validation, such as a missing required hotel name.",
+        code: `<label for="hotel-name">Hotel Name</label>
+<input id="hotel-name" aria-invalid />`
       }
     ]
   }
@@ -23524,11 +23602,22 @@ var numberinput_default = {
 <input id="hotel-count" type="number" />`
       },
       {
-        title: "Error state",
-        description: "Use aria-invalid with aria-describedby to associate error messages for screen readers",
-        code: `<label for="quantity">Quantity</label>
-<input id="quantity" type="number" min="1" max="10" aria-invalid aria-describedby="quantity-error" />
-<span id="quantity-error" class="text-error">Please enter a number between 1 and 10</span>`
+        title: "Disabled",
+        description: "Use the disabled state when the field is temporarily not editable, such as a locked room count during an active booking period. If the field will never be editable for this user based on their role or permissions, hide it entirely rather than showing it as disabled.",
+        code: `<label for="room-count">Room Count</label>
+<input id="room-count" type="number" value="42" disabled />`
+      },
+      {
+        title: "Placeholder",
+        description: "Use placeholder text to show an example of the expected value format \u2014 do not use it as a substitute for a label.",
+        code: `<label for="hotel-count">Number of Hotels</label>
+<input id="hotel-count" type="number" placeholder="1234" />`
+      },
+      {
+        title: "Invalid",
+        description: "Use the invalid state when the entered value is out of an acceptable range or otherwise fails validation.",
+        code: `<label for="hotel-count">Number of Hotels</label>
+<input id="hotel-count" type="number" aria-invalid />`
       }
     ]
   }
@@ -23579,11 +23668,22 @@ var textarea_default = {
 <textarea id="about" rows="4"></textarea>`
       },
       {
-        title: "Error state",
-        description: "Use aria-invalid with aria-describedby to associate error messages for screen readers",
-        code: `<label for="description">Description</label>
-<textarea id="description" rows="4" aria-invalid aria-describedby="description-error"></textarea>
-<span id="description-error" class="text-error">Description is required</span>`
+        title: "Disabled",
+        description: "Use the disabled state when the field is temporarily not editable in the current context, such as a locked guest notes field. If the field will never be editable for this user based on their role or permissions, hide it entirely rather than showing it as disabled.",
+        code: `<label for="guest-notes">Guest Notes</label>
+<textarea id="guest-notes" rows="4" disabled></textarea>`
+      },
+      {
+        title: "Placeholder",
+        description: "Use placeholder text to hint at the expected content format \u2014 do not use it as a substitute for a label.",
+        code: `<label for="about">About</label>
+<textarea id="about" rows="4" placeholder="My hotel is the best hotel in the world!"></textarea>`
+      },
+      {
+        title: "Invalid",
+        description: "Use the invalid state when the field value fails validation, such as a required description that has been left empty.",
+        code: `<label for="about">About</label>
+<textarea id="about" rows="4" aria-invalid></textarea>`
       }
     ]
   }
@@ -23601,9 +23701,9 @@ var select_default = {
     },
     examples: [
       {
-        title: "Basic select",
+        title: "Basic usage",
         code: `<label for="reports">Select report frequency</label>
-<select name="reports">
+<select id="reports" name="reports">
   <option value="daily">Daily Report</option>
   <option value="weekly">Weekly Report</option>
   <option value="monthly">Monthly Report</option>
@@ -23648,30 +23748,55 @@ var checkbox_default = {
     },
     examples: [
       {
-        title: "Checkbox group",
-        description: "Use fieldset and legend for grouped checkboxes",
+        title: "Basic usage",
+        code: `<fieldset>
+  <legend>Select notification types:</legend>
+  <input type="checkbox" id="checkbox-booking" name="notification" value="booking-confirmations" />
+  <label for="checkbox-booking">Booking Confirmations</label>
+  <input type="checkbox" id="checkbox-price" name="notification" value="price-alerts" />
+  <label for="checkbox-price">Price Alerts</label>
+  <input type="checkbox" id="checkbox-occupancy" name="notification" value="occupancy-reports" />
+  <label for="checkbox-occupancy">Occupancy Reports</label>
+</fieldset>`
+      },
+      {
+        title: "Disabled all",
+        description: "Use the disabled fieldset when the entire group of options is temporarily unavailable for selection. If the options will never be available to this user based on their role or permissions, hide the group entirely rather than showing it as disabled.",
+        code: `<fieldset disabled>
+  <legend>Select notification types:</legend>
+  <input type="checkbox" id="checkbox-booking" name="notification" value="booking-confirmations" />
+  <label for="checkbox-booking">Booking Confirmations</label>
+  <input type="checkbox" id="checkbox-price" name="notification" value="price-alerts" />
+  <label for="checkbox-price">Price Alerts</label>
+  <input type="checkbox" id="checkbox-occupancy" name="notification" value="occupancy-reports" />
+  <label for="checkbox-occupancy">Occupancy Reports</label>
+</fieldset>`
+      },
+      {
+        title: "Disabled single",
+        description: "Use a disabled individual checkbox when a specific option is temporarily unavailable while the rest of the group remains selectable. If the option will never be available to this user based on their role or permissions, hide it entirely rather than showing it as disabled.",
         code: `<fieldset>
-  <legend>Choose colors:</legend>
-  <input type="checkbox" id="checkbox-red" name="color" value="red" />
-  <label for="checkbox-red">Red</label>
-  <input type="checkbox" id="checkbox-green" name="color" value="green" />
-  <label for="checkbox-green">Green</label>
-  <input type="checkbox" id="checkbox-blue" name="color" value="blue" />
-  <label for="checkbox-blue">Blue</label>
+  <legend>Select notification types:</legend>
+  <input type="checkbox" id="checkbox-booking" name="notification" value="booking-confirmations" disabled />
+  <label for="checkbox-booking">Booking Confirmations</label>
+  <input type="checkbox" id="checkbox-price" name="notification" value="price-alerts" />
+  <label for="checkbox-price">Price Alerts</label>
+  <input type="checkbox" id="checkbox-occupancy" name="notification" value="occupancy-reports" />
+  <label for="checkbox-occupancy">Occupancy Reports</label>
 </fieldset>`
       },
       {
         title: "Error state",
-        description: "Use aria-invalid with aria-describedby to associate error messages. Apply to all checkboxes in the group and provide a single error message.",
+        description: "Use the error state when required checkboxes are not selected, such as when a user submits a form without making a selection. Always pair error indicators with a visible, descriptive error message.",
         code: `<fieldset>
-  <legend>Choose colors:</legend>
-  <input type="checkbox" id="checkbox-red" name="color" value="red" aria-invalid aria-describedby="choose-color-error-message" />
-  <label for="checkbox-red">Red</label>
-  <input type="checkbox" id="checkbox-green" name="color" value="green" aria-invalid aria-describedby="choose-color-error-message" />
-  <label for="checkbox-green">Green</label>
-  <input type="checkbox" id="checkbox-blue" name="color" value="blue" aria-invalid aria-describedby="choose-color-error-message" />
-  <label for="checkbox-blue">Blue</label>
-  <p id="choose-color-error-message" class="text-error">Please select at least one color</p>
+  <legend>Select notification types:</legend>
+  <input type="checkbox" id="checkbox-booking" name="notification" value="booking-confirmations" aria-invalid aria-describedby="notification-error-message" />
+  <label for="checkbox-booking">Booking Confirmations</label>
+  <input type="checkbox" id="checkbox-price" name="notification" value="price-alerts" aria-invalid aria-describedby="notification-error-message" />
+  <label for="checkbox-price">Price Alerts</label>
+  <input type="checkbox" id="checkbox-occupancy" name="notification" value="occupancy-reports" aria-invalid aria-describedby="notification-error-message" />
+  <label for="checkbox-occupancy">Occupancy Reports</label>
+  <p id="notification-error-message" class="text-error">Required</p>
 </fieldset>`
       }
     ]
@@ -23713,16 +23838,41 @@ var radio_default = {
     },
     examples: [
       {
-        title: "Radio group",
-        description: "Use fieldset and legend for grouped radio buttons. All radios must share the same name attribute.",
+        title: "Basic usage",
+        code: `<fieldset>
+  <legend>Select rate plan:</legend>
+  <input type="radio" id="radio-bar" name="rate-plan" value="best-available-rate" />
+  <label for="radio-bar">Best Available Rate</label>
+  <input type="radio" id="radio-non-refundable" name="rate-plan" value="non-refundable-rate" />
+  <label for="radio-non-refundable">Non-refundable Rate</label>
+  <input type="radio" id="radio-member" name="rate-plan" value="member-rate" />
+  <label for="radio-member">Member Rate</label>
+</fieldset>`
+      },
+      {
+        title: "Disabled all",
+        description: "Use the disabled fieldset when the entire selection group is temporarily unavailable for interaction. If the options will never be available to this user based on their role or permissions, hide the group entirely rather than showing it as disabled.",
+        code: `<fieldset disabled>
+  <legend>Select rate plan:</legend>
+  <input type="radio" id="radio-bar" name="rate-plan" value="best-available-rate" />
+  <label for="radio-bar">Best Available Rate</label>
+  <input type="radio" id="radio-non-refundable" name="rate-plan" value="non-refundable-rate" />
+  <label for="radio-non-refundable">Non-refundable Rate</label>
+  <input type="radio" id="radio-member" name="rate-plan" value="member-rate" />
+  <label for="radio-member">Member Rate</label>
+</fieldset>`
+      },
+      {
+        title: "Disabled single",
+        description: "Use a disabled individual radio option when a specific choice is temporarily unavailable while the rest of the group remains selectable. If the option will never be available to this user based on their role or permissions, hide it entirely rather than showing it as disabled.",
         code: `<fieldset>
-  <legend>Choose a color:</legend>
-  <input type="radio" id="radio-red" name="color" value="red" />
-  <label for="radio-red">Red</label>
-  <input type="radio" id="radio-green" name="color" value="green" />
-  <label for="radio-green">Green</label>
-  <input type="radio" id="radio-blue" name="color" value="blue" />
-  <label for="radio-blue">Blue</label>
+  <legend>Select rate plan:</legend>
+  <input type="radio" id="radio-bar" name="rate-plan" value="best-available-rate" disabled />
+  <label for="radio-bar">Best Available Rate</label>
+  <input type="radio" id="radio-non-refundable" name="rate-plan" value="non-refundable-rate" />
+  <label for="radio-non-refundable">Non-refundable Rate</label>
+  <input type="radio" id="radio-member" name="rate-plan" value="member-rate" />
+  <label for="radio-member">Member Rate</label>
 </fieldset>`
       }
     ]
@@ -23752,7 +23902,7 @@ var toggle_default = {
     },
     examples: [
       {
-        title: "Toggle switch",
+        title: "Basic usage",
         code: `<input type="checkbox" id="weekly-parity-report" data-theme="toggle" />
 <label for="weekly-parity-report">Weekly Parity Report</label>`
       }
@@ -23791,14 +23941,38 @@ var badge_default = {
     },
     examples: [
       {
-        title: "Status badges",
-        description: "Use semantic themes to indicate status or state",
-        code: `<div>
-  <span class="badge" data-theme="success">Active</span>
-  <span class="badge" data-theme="danger">Failed</span>
-  <span class="badge" data-theme="warning">Pending</span>
-  <span class="badge" data-theme="info">Draft</span>
-</div>`
+        title: "Basic usage",
+        code: `<span class="badge">New</span>`
+      },
+      {
+        title: "Subtle",
+        description: "Use the subtle theme for low-priority labels that need to be visible without drawing strong attention.",
+        code: `<span class="badge" data-theme="subtle">Draft</span>`
+      },
+      {
+        title: "Danger",
+        description: "Use the danger theme to signal a critical issue or error state, such as a booking failure or rate parity alert.",
+        code: `<span class="badge" data-theme="danger">Failed</span>`
+      },
+      {
+        title: "Success",
+        description: "Use the success theme to confirm a positive outcome, such as a completed booking or a healthy occupancy rate.",
+        code: `<span class="badge" data-theme="success">Active</span>`
+      },
+      {
+        title: "Warning",
+        description: "Use the warning theme to flag a condition that may need attention, such as low room availability or a pending review.",
+        code: `<span class="badge" data-theme="warning">Pending</span>`
+      },
+      {
+        title: "Info",
+        description: "Use the info theme for neutral informational labels, such as a channel name or a rate plan type.",
+        code: `<span class="badge" data-theme="info">Metasearch</span>`
+      },
+      {
+        title: "Primary",
+        description: "Use the primary theme to draw attention to a key label, such as a promoted rate or a featured channel.",
+        code: `<span class="badge" data-theme="primary">Featured</span>`
       }
     ]
   }
@@ -23829,18 +24003,11 @@ var card_default = {
     },
     examples: [
       {
-        title: "Basic card",
+        title: "Basic usage",
         code: `<div class="card">
-  <h3>Card Title</h3>
-  <p>Card content goes here...</p>
-</div>`
-      },
-      {
-        title: "Card with custom padding",
-        description: "Customize using --card-padding or --card-vertical-spacing CSS variables",
-        code: `<div class="card" style="--card-padding: var(--space-scale-4)">
-  <h3>Card with more padding</h3>
-  <p>Customized via CSS variable instead of writing custom CSS</p>
+  <h3>Boost low-occupancy dates</h3>
+  <p>Drive bookings when you need them most</p>
+  <button data-theme="secondary">Boost some dates</button>
 </div>`
       }
     ]
@@ -24059,7 +24226,7 @@ var typography_default = {
         "Use semantic elements (h1-h4, strong, a) for document structure and accessibility",
         "Use utility classes (.heading-1 through .heading-4, .display, .body, .small, .strong, .text-error) when visual styling must differ from semantic meaning",
         "Follow heading hierarchy - don't skip levels (h1 \u2192 h2 \u2192 h3, not h1 \u2192 h3)",
-        "Use <strong> for semantic importance, .strong for visual styling only"
+        "Use strong for semantic importance, .strong for visual styling only"
       ],
       avoid: [
         "Using heading classes for document structure (use semantic h1-h4 elements)",
@@ -24077,7 +24244,33 @@ var typography_default = {
       strong: "Bold text styling without semantic importance",
       small: "Smaller text for captions, helper text, fine print",
       "text-error": "Error text color for validation messages"
-    }
+    },
+    examples: [
+      {
+        title: "Semantic elements",
+        description: "Use semantic heading elements for document structure, screen reader navigation, and SEO \u2014 independent of how they look visually.",
+        code: `<h1>Page title</h1>
+<h2>Section heading</h2>
+<h3>Subsection heading</h3>
+<h4>Detail heading</h4>
+<p>Body text</p>
+<strong>Important text</strong>
+<a href="#">Link text</a>`
+      },
+      {
+        title: "Class-based typography",
+        description: "Use class-based typography when the visual style needs to differ from the semantic heading level \u2014 for example, a visually large label on a section that is not a document heading.",
+        code: `<p class="display">Display</p>
+<p class="heading-1">Heading 1</p>
+<p class="heading-2">Heading 2</p>
+<p class="heading-3">Heading 3</p>
+<p class="heading-4">Heading 4</p>
+<p class="body">Body</p>
+<p class="strong">Strong</p>
+<p class="small">Small</p>
+<p class="text-error">Error text</p>`
+      }
+    ]
   }
 };
 
@@ -24136,7 +24329,7 @@ var dialog_default = {
       },
       {
         title: "With CSS custom properties",
-        description: "Use CSS custom properties to customize dialog positioning:\n\n- `--dialog-left-distance`: Control the horizontal position of the dialog.",
+        description: "Use CSS custom properties to customize dialog positioning. --dialog-left-distance controls the horizontal position of the dialog.",
         code: `<button data-theme="primary" onclick="document.querySelector('#positioned-dialog').show()">
   Open Dialog
 </button>
@@ -24217,113 +24410,93 @@ var combobox_default = {
     },
     examples: [
       {
-        title: "React - Single select",
-        code: `import { Combobox } from '@triptease/react/combobox';
-
-<label htmlFor="country">Country</label>
-<Combobox id="country">
-  <option value="us" slot="option">United States</option>
-  <option value="uk" slot="option">United Kingdom</option>
-  <option value="ca" slot="option">Canada</option>
-</Combobox>`
-      },
-      {
-        title: "React - Multi select",
-        description: 'Use multiselect and displaySelectAll props for multi-select with "Select All" option. Set value prop with array for default selections.',
-        code: `import { Combobox } from '@triptease/react/combobox';
-
-<label htmlFor="frameworks">Frameworks</label>
-<Combobox id="frameworks" multiselect displaySelectAll>
-  <option value="react" slot="option">React</option>
-  <option value="vue" slot="option">Vue.js</option>
-  <option value="angular" slot="option">Angular</option>
-</Combobox>`
+        title: "Basic usage",
+        code: `<label for="channel-single">Booking Channel</label>
+<tt-combobox id="channel-single">
+  <option value="corporate-travel-agency" slot="option">Corporate Travel Agency</option>
+  <option value="direct-booking" slot="option">Direct Booking</option>
+  <option value="metasearch" slot="option">Metasearch</option>
+  <option value="ota-partner" slot="option">OTA Partner</option>
+  <option value="wholesale" slot="option">Wholesale</option>
+</tt-combobox>`
       },
       {
-        title: "Web Component - Single select",
-        description: "Basic single-select allows typing to filter options. Set value with .value property. Use disabled attribute on options to prevent selection while keeping them visible. Use placeholder attribute for guidance text.",
-        code: `import '@triptease/tt-combobox';
-
-<label for="country">Country</label>
-<tt-combobox id="country">
-  <option value="us" slot="option">United States</option>
-  <option value="uk" slot="option">United Kingdom</option>
-  <option value="ca" slot="option">Canada</option>
+        title: "Disabled option",
+        description: "Use disabled options to keep temporarily unavailable choices visible in the list while preventing their selection. If an option will never be available to this user based on their role or permissions, hide it entirely rather than showing it as disabled.",
+        code: `<label for="channel-option-disabled">Booking Channel</label>
+<tt-combobox id="channel-option-disabled">
+  <option value="direct-booking" slot="option">Direct Booking</option>
+  <option value="metasearch" slot="option" disabled>Metasearch (Unavailable)</option>
+  <option value="ota-partner" slot="option">OTA Partner</option>
+  <option value="wholesale" slot="option">Wholesale</option>
 </tt-combobox>`
       },
       {
-        title: "Web Component - With icon slot",
-        description: "Use icon slot to add leading icon for visual context.",
-        code: `import '@triptease/tt-combobox';
-
-<label for="search-country">Search country</label>
-<tt-combobox id="search-country" placeholder="Type to search">
-  <span slot="icon">\u{1F50D}</span>
-  <option value="us" slot="option">United States</option>
-  <option value="uk" slot="option">United Kingdom</option>
-  <option value="ca" slot="option">Canada</option>
+        title: "Disabled",
+        description: "Use the disabled state when the field is temporarily unavailable, such as when channel selection is locked during an active campaign. If the field will never be available to this user based on their role or permissions, hide it entirely rather than showing it as disabled.",
+        code: `<label for="channel-disabled">Booking Channel</label>
+<tt-combobox id="channel-disabled" disabled>
+  <option value="direct-booking" slot="option">Direct Booking</option>
+  <option value="metasearch" slot="option">Metasearch</option>
+  <option value="ota-partner" slot="option">OTA Partner</option>
 </tt-combobox>`
       },
       {
-        title: "Web Component - With error slot",
-        description: "Use invalid attribute with error slot to display validation errors.",
-        code: `import '@triptease/tt-combobox';
-
-<label for="country">Country</label>
-<tt-combobox id="country" invalid>
-  <option value="us" slot="option">United States</option>
-  <option value="uk" slot="option">United Kingdom</option>
-  <option value="ca" slot="option">Canada</option>
-  <span slot="error">Please select a valid country</span>
+        title: "Error",
+        description: "Use the error state when a selection is required but missing, or when the current value is invalid. Always include a visible error message.",
+        code: `<label for="channel-error">Booking Channel</label>
+<tt-combobox id="channel-error" invalid>
+  <option value="direct-booking" slot="option">Direct Booking</option>
+  <option value="metasearch" slot="option">Metasearch</option>
+  <option value="ota-partner" slot="option">OTA Partner</option>
+  <span slot="error">Please select a booking channel</span>
 </tt-combobox>`
       },
       {
-        title: "Web Component - In form",
-        description: `Use with HTML forms via name attribute. Form value is JSON string (e.g., ["united-states"]). Add required for validation. Listen to change event for real-time updates.`,
-        code: `import '@triptease/tt-combobox';
-
-<form onsubmit="handleSubmit(event)">
-  <label for="country">Country</label>
-  <tt-combobox id="country" name="country" required>
-    <option value="us" slot="option">United States</option>
-    <option value="uk" slot="option">United Kingdom</option>
-    <option value="ca" slot="option">Canada</option>
+        title: "In form",
+        description: "Use the name attribute to include the combobox value in HTML form submissions.",
+        code: `<form>
+  <label for="channel-form">Booking Channel</label>
+  <tt-combobox id="channel-form" name="channel" required>
+    <option value="direct-booking" slot="option">Direct Booking</option>
+    <option value="metasearch" slot="option">Metasearch</option>
+    <option value="ota-partner" slot="option">OTA Partner</option>
   </tt-combobox>
-  <button type="submit">Submit</button>
+  <button type="submit">Submit Form</button>
 </form>`
       },
       {
-        title: "Web Component - Multi select with select all",
-        description: "Use multiselect and display-select-all attributes for multi-select. Set value with array. Use hidden attribute on options to hide from list.",
-        code: `import '@triptease/tt-combobox';
-
-<label for="frameworks">Frameworks</label>
-<tt-combobox id="frameworks" multiselect display-select-all>
-  <option value="react" slot="option">React</option>
-  <option value="vue" slot="option">Vue.js</option>
-  <option value="angular" slot="option">Angular</option>
-  <option value="svelte" slot="option">Svelte</option>
+        title: "Multi-select",
+        description: "Use the multi-select combobox when users need to select more than one option from a list.",
+        code: `<label for="channels-multi">Marketing Channels</label>
+<tt-combobox id="channels-multi" multiselect>
+  <option value="paid-search" slot="option">Paid Search</option>
+  <option value="metasearch" slot="option">Metasearch</option>
+  <option value="onsite-messages" slot="option">Onsite Messages</option>
+  <option value="email-remarketing" slot="option">Email Remarketing</option>
+  <option value="push-notifications" slot="option">Push Notifications</option>
 </tt-combobox>`
       },
       {
-        title: "Web Component - CSS customization",
-        description: `Use CSS custom properties to customize appearance: --tt-combobox-min-width / --tt-combobox-max-width, --tt-combobox-background-color, --tt-combobox-border-color / --tt-combobox-border-width, --tt-combobox-placeholder-color, --tt-combobox-hover-background-color, --tt-combobox-option-background-color-hover, --tt-combobox-option-color-hover.`,
-        code: `import '@triptease/tt-combobox';
-
-<label for="country">Country</label>
-<tt-combobox
-  id="country"
-  placeholder="Select..."
-  style="
-    --tt-combobox-min-width: 150px;
-    --tt-combobox-max-width: 150px;
-    --tt-combobox-background-color: var(--color-surface-600);
-    --tt-combobox-border-color: var(--color-primary-500);
-    --tt-combobox-border-width: 2px;
-  ">
-  <option value="us" slot="option">United States</option>
-  <option value="uk" slot="option">United Kingdom</option>
-  <option value="ca" slot="option">Canada</option>
+        title: "Multi-select with select all",
+        description: "Use Select All when users commonly need to select most or all options in the list.",
+        code: `<label for="channels-select-all">Marketing Channels</label>
+<tt-combobox id="channels-select-all" multiselect display-select-all>
+  <option value="paid-search" slot="option">Paid Search</option>
+  <option value="metasearch" slot="option">Metasearch</option>
+  <option value="onsite-messages" slot="option">Onsite Messages</option>
+  <option value="email-remarketing" slot="option">Email Remarketing</option>
+  <option value="push-notifications" slot="option">Push Notifications</option>
+</tt-combobox>`
+      },
+      {
+        title: "Open upward",
+        description: "Use the upward-opening dropdown when the combobox is positioned near the bottom of the viewport.",
+        code: `<label for="channel-upward">Booking Channel</label>
+<tt-combobox id="channel-upward" open-upward>
+  <option value="direct-booking" slot="option">Direct Booking</option>
+  <option value="metasearch" slot="option">Metasearch</option>
+  <option value="ota-partner" slot="option">OTA Partner</option>
 </tt-combobox>`
       }
     ]
@@ -24364,34 +24537,49 @@ var datePicker_default = {
     },
     examples: [
       {
-        title: "React - Basic",
-        description: "Uncontrolled date picker. Value is in ISO format (YYYY-MM-DD). Use minDate and maxDate props to restrict selectable dates. Use disabled prop to disable. Use openLeft prop for pickers near right edge.",
-        code: `import { DatePicker } from '@triptease/react/date-picker';
-
-<label htmlFor="date">Select a date</label>
-<DatePicker id="date" />`
+        title: "Basic usage",
+        description: "Date picker for selecting a single date. Value is in ISO format (YYYY-MM-DD). Use mindate and maxdate attributes to restrict selectable dates.",
+        code: `<label for="date-basic">Select a date</label>
+<tt-date-picker id="date-basic"></tt-date-picker>`
       },
       {
-        title: "React - Controlled",
-        description: "Use controlled component with React state for dynamic behavior. Value prop and onChange handler manage the selection.",
-        code: `import { DatePicker } from '@triptease/react/date-picker';
-
-const [selectedDate, setSelectedDate] = useState('');
-
-<label htmlFor="date">Event date</label>
-<DatePicker
-  id="date"
-  value={selectedDate}
-  onChange={(e) => setSelectedDate(e.target.value)}
-/>`
+        title: "With default value",
+        description: "Use the value attribute with ISO date format (YYYY-MM-DD) to pre-select a default date.",
+        code: `<label for="date-default">Departure date</label>
+<tt-date-picker id="date-default" value="2025-06-15"></tt-date-picker>`
       },
       {
-        title: "Web Component - Basic",
-        description: "Web component date picker. Value is in ISO format (YYYY-MM-DD). Use mindate and maxdate attributes to restrict dates. Use disabled attribute to disable. Use open-left attribute for pickers near right edge.",
-        code: `import '@triptease/tt-date-picker';
-
-<label for="date">Select a date</label>
-<tt-date-picker id="date"></tt-date-picker>`
+        title: "With min date",
+        description: "Use the mindate attribute to restrict selectable dates. Dates before the minimum will be disabled in the calendar.",
+        code: `<label for="date-min">Check-in date</label>
+<tt-date-picker id="date-min" mindate="2025-01-01"></tt-date-picker>`
+      },
+      {
+        title: "With max date",
+        description: "Use the maxdate attribute to restrict selectable dates. Dates after the maximum will be disabled in the calendar.",
+        code: `<label for="date-max">Booking date</label>
+<tt-date-picker id="date-max" maxdate="2025-12-31"></tt-date-picker>`
+      },
+      {
+        title: "Disabled",
+        description: "Use the disabled state when the date picker is temporarily unavailable, such as when a check-in date has already been confirmed and cannot be changed. If the field will never be available to this user based on their role or permissions, hide it entirely rather than showing it as disabled.",
+        code: `<label for="date-disabled">Event date</label>
+<tt-date-picker id="date-disabled" value="2025-06-15" disabled></tt-date-picker>`
+      },
+      {
+        title: "Open left",
+        description: "Use the open-left attribute to make the calendar open to the left. Useful for date pickers near the right edge of the viewport.",
+        code: `<label for="date-open-left">Select date</label>
+<tt-date-picker id="date-open-left" open-left></tt-date-picker>`
+      },
+      {
+        title: "In form",
+        description: "Use the name attribute to include the date picker value in HTML form submissions.",
+        code: `<form>
+  <label for="booking-date">Booking date</label>
+  <tt-date-picker id="booking-date" name="booking-date"></tt-date-picker>
+  <button type="submit">Submit Form</button>
+</form>`
       }
     ]
   }
@@ -24434,69 +24622,55 @@ var dateRangePicker_default = {
     },
     examples: [
       {
-        title: "React - Basic",
-        description: "Uncontrolled date range picker. Dates are in ISO format (YYYY-MM-DD). Use start and end props for default values. Use minDate and maxDate props to restrict dates. Use disabled prop to disable. Use openLeft prop for pickers near right edge.",
-        code: `import { DateRangePicker } from '@triptease/react/date-range-picker';
-
-<label htmlFor="daterange">Select date range</label>
-<DateRangePicker id="daterange" />`
+        title: "Basic usage",
+        description: "Date range picker for selecting start and end dates. Dates are in ISO format (YYYY-MM-DD). Use start and end attributes for default values. Use mindate and maxdate attributes to restrict dates.",
+        code: `<label for="daterange-basic">Select date range</label>
+<tt-date-range-picker id="daterange-basic"></tt-date-range-picker>`
       },
       {
-        title: "React - Controlled",
-        description: "Use controlled component with React state for dynamic behavior. Access picker.start and picker.end from onChange event.",
-        code: `import { DateRangePicker } from '@triptease/react/date-range-picker';
-
-const [startDate, setStartDate] = useState('');
-const [endDate, setEndDate] = useState('');
-
-const handleChange = (e) => {
-  const picker = e.target;
-  setStartDate(picker.start || '');
-  setEndDate(picker.end || '');
-};
-
-<label htmlFor="daterange">Booking dates</label>
-<DateRangePicker id="daterange" start={startDate} end={endDate} onChange={handleChange} />`
+        title: "With default value",
+        description: "Use the start and end attributes with ISO date format (YYYY-MM-DD) to pre-select a date range.",
+        code: `<label for="daterange-default">Travel dates</label>
+<tt-date-range-picker id="daterange-default" start="2025-06-15" end="2025-06-22"></tt-date-range-picker>`
       },
       {
-        title: "React - With presets",
-        description: 'Use PresetButton component for quick date range selection. Pass Preset enum values for common ranges. PresetButton must be child of DateRangePicker with slot="preset".',
-        code: `import { DateRangePicker, PresetButton, Preset } from '@triptease/react/date-range-picker';
-
-<label htmlFor="daterange">Travel dates</label>
-<DateRangePicker id="daterange">
-  <PresetButton slot="preset" preset={Preset.ThisWeek}>This Week</PresetButton>
-  <PresetButton slot="preset" preset={Preset.ThisMonth}>This Month</PresetButton>
-  <PresetButton slot="preset" preset={Preset.Next1Month}>Next Month</PresetButton>
-</DateRangePicker>`
+        title: "With min date",
+        description: "Use the mindate attribute to prevent selecting dates before a certain date.",
+        code: `<label for="daterange-min">Booking dates</label>
+<tt-date-range-picker id="daterange-min" mindate="2025-01-01"></tt-date-range-picker>`
       },
       {
-        title: "Web Component - Basic",
-        description: "Web component date range picker. Dates are in ISO format (YYYY-MM-DD). Use start and end attributes for default values. Use mindate and maxdate attributes to restrict dates. Use disabled attribute to disable. Use open-left attribute for pickers near right edge.",
-        code: `import '@triptease/tt-date-range-picker';
-
-<label for="daterange">Select date range</label>
-<tt-date-range-picker id="daterange"></tt-date-range-picker>`
+        title: "With max date",
+        description: "Use the maxdate attribute to prevent selecting dates after a certain date.",
+        code: `<label for="daterange-max">Booking dates</label>
+<tt-date-range-picker id="daterange-max" maxdate="2025-12-31"></tt-date-range-picker>`
       },
       {
-        title: "Web Component - In form",
-        description: `Use with HTML forms via name attribute. Form value is JSON string: {"startDate": "2025-01-01", "endDate": "2025-01-10"}. Parse JSON to access dates.`,
-        code: `import '@triptease/tt-date-range-picker';
-
-<form onsubmit="handleSubmit(event)">
+        title: "Disabled",
+        description: "Use the disabled state when the date range picker is temporarily unavailable, such as when a booking window has been locked pending confirmation. If the field will never be available to this user based on their role or permissions, hide it entirely rather than showing it as disabled.",
+        code: `<label for="daterange-disabled">Event dates</label>
+<tt-date-range-picker id="daterange-disabled" start="2025-06-15" end="2025-06-22" disabled></tt-date-range-picker>`
+      },
+      {
+        title: "Open left",
+        description: "Use the open-left attribute to make the calendar open to the left. Useful for pickers near the right edge of the viewport.",
+        code: `<label for="daterange-openleft">Select dates</label>
+<tt-date-range-picker id="daterange-openleft" open-left></tt-date-range-picker>`
+      },
+      {
+        title: "In form",
+        description: "Use the name attribute to include the date range value in HTML form submissions. The form value is a JSON string with startDate and endDate keys.",
+        code: `<form>
   <label for="booking-dates">Booking dates</label>
   <tt-date-range-picker id="booking-dates" name="booking-dates"></tt-date-range-picker>
   <button type="submit">Submit</button>
 </form>`
       },
       {
-        title: "Web Component - With presets",
-        description: `Use tt-preset-button for quick date range selection. Place inside tt-date-range-picker with slot="preset". Set preset attribute to range type: "this-week", "next-week", "this-month", "next-month", etc.`,
-        code: `import '@triptease/tt-date-range-picker';
-import '@triptease/tt-preset-button';
-
-<label for="daterange">Travel dates</label>
-<tt-date-range-picker id="daterange">
+        title: "With presets",
+        description: 'Use tt-preset-button elements for quick date range selection. Place them inside tt-date-range-picker with slot="preset".',
+        code: `<label for="daterange-presets">Travel dates</label>
+<tt-date-range-picker id="daterange-presets">
   <tt-preset-button slot="preset" preset="this-week">This Week</tt-preset-button>
   <tt-preset-button slot="preset" preset="next-week">Next Week</tt-preset-button>
   <tt-preset-button slot="preset" preset="this-month">This Month</tt-preset-button>
@@ -24603,32 +24777,128 @@ var barChart_default = {
     },
     examples: [
       {
-        title: "Basic bar chart",
-        code: `import '@triptease/tt-bar-chart';
-import '@triptease/tt-dataset';
-import '@triptease/tt-data-point';
-
-<tt-bar-chart id="basic-chart">
+        title: "Basic usage",
+        code: `<tt-bar-chart id="basic-bar-chart">
+  <tt-dataset label="2024">
+    <tt-data-point label="Total Opens" value="2600"></tt-data-point>
+    <tt-data-point label="Total Clicks" value="355"></tt-data-point>
+    <tt-data-point label="Bookings" value="76"></tt-data-point>
+  </tt-dataset>
+</tt-bar-chart>`
+      },
+      {
+        title: "Custom size",
+        description: "Use when the chart needs a fixed size rather than filling its container. Both width and height accept any valid CSS measurement. If neither is provided, the chart defaults to 100% and fills its container.",
+        code: `<tt-bar-chart id="custom-size-bar-chart" width="30rem" height="10rem">
+  <tt-dataset label="2024">
+    <tt-data-point label="Total Opens" value="2600"></tt-data-point>
+    <tt-data-point label="Total Clicks" value="355"></tt-data-point>
+    <tt-data-point label="Bookings" value="76"></tt-data-point>
+  </tt-dataset>
+</tt-bar-chart>`
+      },
+      {
+        title: "Axis titles",
+        description: "Use axis titles to clarify what the chart displays, particularly units of measurement. Keep titles concise to avoid cluttering the chart. Avoid duplicating information that is already visible elsewhere on the page.",
+        code: `<tt-bar-chart id="axis-titles-bar-chart" x-axis-title="Count" y-axis-title="Interaction Type" height="20rem">
+  <tt-dataset label="2024">
+    <tt-data-point label="Total Opens" value="2600"></tt-data-point>
+    <tt-data-point label="Total Clicks" value="355"></tt-data-point>
+    <tt-data-point label="Bookings" value="76"></tt-data-point>
+  </tt-dataset>
+</tt-bar-chart>`
+      },
+      {
+        title: "Vertical",
+        description: "Use vertical bar charts for time series data. Do not use when the intended purpose is to visualize long, continuous trends \u2014 use a line or area chart instead.",
+        code: `<tt-bar-chart id="vertical-bar-chart" direction="vertical" height="20rem">
+  <tt-dataset label="2024">
+    <tt-data-point label="Monday" value="3424"></tt-data-point>
+    <tt-data-point label="Tuesday" value="3401"></tt-data-point>
+    <tt-data-point label="Wednesday" value="7201"></tt-data-point>
+    <tt-data-point label="Thursday" value="5301"></tt-data-point>
+    <tt-data-point label="Friday" value="492"></tt-data-point>
+    <tt-data-point label="Saturday" value="235"></tt-data-point>
+    <tt-data-point label="Sunday" value="3941"></tt-data-point>
+  </tt-dataset>
+</tt-bar-chart>`
+      },
+      {
+        title: "Value prefix",
+        description: "Use a value prefix when the unit of measurement appears before the number, such as a currency symbol.",
+        code: `<tt-bar-chart id="value-prefix-bar-chart" height="20rem" value-prefix="\xA3">
+  <tt-dataset label="2024">
+    <tt-data-point label="Monday" value="3424"></tt-data-point>
+    <tt-data-point label="Tuesday" value="3401"></tt-data-point>
+    <tt-data-point label="Wednesday" value="7201"></tt-data-point>
+    <tt-data-point label="Thursday" value="5301"></tt-data-point>
+    <tt-data-point label="Friday" value="492"></tt-data-point>
+    <tt-data-point label="Saturday" value="235"></tt-data-point>
+    <tt-data-point label="Sunday" value="3941"></tt-data-point>
+  </tt-dataset>
+</tt-bar-chart>`
+      },
+      {
+        title: "Value suffix",
+        description: "Use a value suffix when the unit of measurement appears after the number, such as a percentage, a distance, or any other labelled unit.",
+        code: `<tt-bar-chart id="value-suffix-bar-chart" height="20rem" value-suffix="%">
   <tt-dataset label="2024">
-    <tt-data-point label="Total Opens" value={2600}></tt-data-point>
-    <tt-data-point label="Total Clicks" value={355}></tt-data-point>
-    <tt-data-point label="Bookings" value={76}></tt-data-point>
+    <tt-data-point label="Monday" value="31"></tt-data-point>
+    <tt-data-point label="Tuesday" value="85"></tt-data-point>
+    <tt-data-point label="Wednesday" value="10"></tt-data-point>
+    <tt-data-point label="Thursday" value="3"></tt-data-point>
+    <tt-data-point label="Friday" value="15"></tt-data-point>
+    <tt-data-point label="Saturday" value="47"></tt-data-point>
+    <tt-data-point label="Sunday" value="62"></tt-data-point>
+  </tt-dataset>
+</tt-bar-chart>`
+      },
+      {
+        title: "Stacked",
+        description: "Use stacked bar charts when displaying datasets whose values contribute to a meaningful total. Limit datasets to a maximum of 6, as more datasets make the chart difficult to read and compare. Avoid using stacked bar charts when one segment is significantly larger than the others, as users will struggle to identify and compare smaller segments. Keep in mind that comparing segments in the middle of the bar is difficult because they do not start at zero.",
+        code: `<tt-bar-chart id="stacked-bar-chart" direction="vertical" y-axis-title="Total Bookings" stacked height="30rem">
+  <tt-dataset label="Messages">
+    <tt-data-point label="January" value="7"></tt-data-point>
+    <tt-data-point label="February" value="4"></tt-data-point>
+    <tt-data-point label="March" value="2"></tt-data-point>
+  </tt-dataset>
+  <tt-dataset label="Metasearch">
+    <tt-data-point label="January" value="2"></tt-data-point>
+    <tt-data-point label="February" value="3"></tt-data-point>
+    <tt-data-point label="March" value="8"></tt-data-point>
+  </tt-dataset>
+  <tt-dataset label="Paid Search">
+    <tt-data-point label="January" value="3"></tt-data-point>
+    <tt-data-point label="February" value="2"></tt-data-point>
+    <tt-data-point label="March" value="4"></tt-data-point>
   </tt-dataset>
 </tt-bar-chart>`
       },
       {
         title: "Multiple datasets",
         description: "Use multiple datasets to compare the same categories across different groups or time periods. Limit datasets to a maximum of 6, as more datasets make the chart difficult to read and compare.",
-        code: `<tt-bar-chart id="multiple-datasets-chart" height="30rem">
+        code: `<tt-bar-chart id="multiple-datasets-bar-chart" height="30rem">
   <tt-dataset label="2024">
-    <tt-data-point label="Total Bookings" value={7}></tt-data-point>
-    <tt-data-point label="Total Clicks" value={4}></tt-data-point>
+    <tt-data-point label="Total Bookings" value="7"></tt-data-point>
+    <tt-data-point label="Total Clicks" value="4"></tt-data-point>
+    <tt-data-point label="Total Opens" value="2"></tt-data-point>
   </tt-dataset>
   <tt-dataset label="2025">
-    <tt-data-point label="Total Bookings" value={2}></tt-data-point>
-    <tt-data-point label="Total Clicks" value={3}></tt-data-point>
+    <tt-data-point label="Total Bookings" value="2"></tt-data-point>
+    <tt-data-point label="Total Clicks" value="3"></tt-data-point>
+    <tt-data-point label="Total Opens" value="8"></tt-data-point>
+  </tt-dataset>
+  <tt-dataset label="2026">
+    <tt-data-point label="Total Bookings" value="3"></tt-data-point>
+    <tt-data-point label="Total Clicks" value="2"></tt-data-point>
+    <tt-data-point label="Total Opens" value="4"></tt-data-point>
   </tt-dataset>
 </tt-bar-chart>`
+      },
+      {
+        title: "Loading",
+        description: "Use the loading state while chart data is being fetched or processed. Do not manually set aria-busy, as the component handles this automatically. The loading state automatically reflects the chart direction attribute.",
+        code: `<tt-bar-chart id="loading-bar-chart" loading></tt-bar-chart>`
       }
     ]
   }
@@ -24742,58 +25012,98 @@ var lineChart_default = {
     },
     examples: [
       {
-        title: "Basic line chart",
-        code: `import '@triptease/tt-line-chart';
-import '@triptease/tt-dataset';
-import '@triptease/tt-data-point';
-
-<tt-line-chart id="basic-chart">
+        title: "Basic usage",
+        code: `<tt-line-chart id="basic-line-chart">
   <tt-dataset label="2024">
-    <tt-data-point label="Jan 1" value={45}></tt-data-point>
-    <tt-data-point label="Jan 2" value={48}></tt-data-point>
-    <tt-data-point label="Jan 3" value={52}></tt-data-point>
+    <tt-data-point label="Jan 1" value="45"></tt-data-point>
+    <tt-data-point label="Jan 2" value="47"></tt-data-point>
+    <tt-data-point label="Jan 3" value="44"></tt-data-point>
+    <tt-data-point label="Jan 4" value="50"></tt-data-point>
+    <tt-data-point label="Jan 5" value="52"></tt-data-point>
+  </tt-dataset>
+</tt-line-chart>`
+      },
+      {
+        title: "Custom size",
+        description: "Use when the chart needs a fixed size rather than filling its container. Both width and height accept any valid CSS measurement. If neither is provided, the chart defaults to 100% and fills its container.",
+        code: `<tt-line-chart id="custom-size-line-chart" width="30rem" height="10rem">
+  <tt-dataset label="2024">
+    <tt-data-point label="Jan 1" value="45"></tt-data-point>
+    <tt-data-point label="Jan 2" value="47"></tt-data-point>
+    <tt-data-point label="Jan 3" value="44"></tt-data-point>
+  </tt-dataset>
+</tt-line-chart>`
+      },
+      {
+        title: "Loading",
+        description: "Use the loading state while chart data is being fetched or processed. Do not manually set aria-busy, as the component handles this automatically.",
+        code: `<tt-line-chart id="loading-line-chart" loading height="20rem"></tt-line-chart>`
+      },
+      {
+        title: "Axis titles",
+        description: "Use axis titles to clarify what the chart displays, particularly units of measurement. Keep titles concise to avoid cluttering the chart. Avoid duplicating information that is already visible elsewhere on the page.",
+        code: `<tt-line-chart id="axis-titles-line-chart" x-axis-title="Date" y-axis-title="Number of Sessions" height="20rem">
+  <tt-dataset label="2024">
+    <tt-data-point label="Jan 1" value="45"></tt-data-point>
+    <tt-data-point label="Jan 2" value="47"></tt-data-point>
+    <tt-data-point label="Jan 3" value="44"></tt-data-point>
   </tt-dataset>
 </tt-line-chart>`
       },
       {
         title: "Multiple datasets",
         description: "Use multiple datasets to compare trends of the same measure for different groups. Limit datasets to a maximum of 4, as more datasets make the chart difficult to read and compare. The component automatically uses symbols to help identify each dataset without relying on color.",
-        code: `<tt-line-chart id="multiple-datasets" height="20rem">
+        code: `<tt-line-chart id="multiple-datasets-line-chart" y-axis-title="Number of Sessions" height="20rem">
   <tt-dataset label="2025">
-    <tt-data-point label="Jan 1" value={45}></tt-data-point>
-    <tt-data-point label="Jan 2" value={48}></tt-data-point>
+    <tt-data-point label="Jan 1" value="52"></tt-data-point>
+    <tt-data-point label="Jan 2" value="54"></tt-data-point>
+    <tt-data-point label="Jan 3" value="51"></tt-data-point>
   </tt-dataset>
   <tt-dataset label="2024">
-    <tt-data-point label="Jan 1" value={42}></tt-data-point>
-    <tt-data-point label="Jan 2" value={44}></tt-data-point>
+    <tt-data-point label="Jan 1" value="45"></tt-data-point>
+    <tt-data-point label="Jan 2" value="47"></tt-data-point>
+    <tt-data-point label="Jan 3" value="44"></tt-data-point>
   </tt-dataset>
 </tt-line-chart>`
       },
       {
-        title: "With highlighted regions",
+        title: "Highlighted regions",
         description: "Use highlighted regions to draw attention to and label significant intervals. Only use when something significant occurs that may have affected the data. Use sparingly and highlight only the most important intervals to avoid clutter. Avoid overlapping regions as this can make it difficult to see where each interval starts and ends. Do not use when displaying multiple datasets if the highlight applies to only one dataset, as users may assume it applies to all.",
-        code: `import '@triptease/tt-highlight';
-
-<tt-line-chart id="highlighted-chart" height="20rem">
+        code: `<tt-line-chart id="highlighted-line-chart" height="20rem">
   <tt-dataset label="2025">
-    <tt-data-point label="Jan 1" value={45}></tt-data-point>
-    <tt-data-point label="Jan 2" value={48}></tt-data-point>
+    <tt-data-point label="Jan 1" value="45"></tt-data-point>
+    <tt-data-point label="Apr 1" value="68"></tt-data-point>
+    <tt-data-point label="Aug 1" value="72"></tt-data-point>
+    <tt-data-point label="Dec 31" value="58"></tt-data-point>
   </tt-dataset>
   <tt-highlight label="Easter Boost" from="15 Mar" to="5 Apr"></tt-highlight>
-</tt-line-chart>;`
+  <tt-highlight label="Summer Boost" from="1 Jul" to="31 Aug"></tt-highlight>
+</tt-line-chart>`
       },
       {
-        title: "With milestones",
-        description: "Use milestones to draw attention to and label significant points in time on a chart. Only use when something significant occurred that may have affected the data, or to mark an important point in time (e.g. today, start, finish). Use sparingly and highlight only the most important events to avoid clutter. Avoid positioning milestones too close together as labels may overlap and become difficult to read. Do not use when displaying multiple datasets if the milestone applies to only one dataset, as users may assume it applies to all.",
-        code: `import '@triptease/tt-milestone';
-
-<tt-line-chart id="highlighted-chart" height="20rem">
+        title: "Hide numbers",
+        description: "Hide numbers when they obscure the overall trend or could lead users to misunderstand the purpose of the chart. Use sparingly, as numbers generally help users understand the scale of the data. This option removes y-axis numbers, disables tooltips, and disables automatic ARIA label generation. Provide a description of the general trend so non-visual users can understand the chart.",
+        code: `<tt-line-chart id="hide-numbers-line-chart" hide-numbers height="20rem">
   <tt-dataset label="2025">
-    <tt-data-point label="Jan 1" value={45}></tt-data-point>
-    <tt-data-point label="Jan 2" value={48}></tt-data-point>
+    <tt-data-point label="Jan 1" value="45"></tt-data-point>
+    <tt-data-point label="Jan 2" value="47"></tt-data-point>
+    <tt-data-point label="Jan 3" value="44"></tt-data-point>
   </tt-dataset>
-  <tt-milestone label="Todayt" value="Jan 2"></tt-milestone>
-</tt-line-chart>;`
+</tt-line-chart>`
+      },
+      {
+        title: "Milestones",
+        description: "Use milestones to draw attention to and label significant points in time on a chart. Only use when something significant occurred that may have affected the data, or to mark an important point in time such as today, start, or finish. Use sparingly and highlight only the most important events to avoid clutter. Avoid positioning milestones too close together as labels may overlap and become difficult to read. Do not use when displaying multiple datasets if the milestone applies to only one dataset, as users may assume it applies to all.",
+        code: `<tt-line-chart id="milestones-line-chart" height="20rem">
+  <tt-dataset label="2025">
+    <tt-data-point label="Jan 1" value="45"></tt-data-point>
+    <tt-data-point label="Feb 18" value="52"></tt-data-point>
+    <tt-data-point label="Aug 5" value="61"></tt-data-point>
+    <tt-data-point label="Dec 31" value="58"></tt-data-point>
+  </tt-dataset>
+  <tt-milestone label="Today" value="Feb 18"></tt-milestone>
+  <tt-milestone label="Campaign Start" value="Aug 5"></tt-milestone>
+</tt-line-chart>`
       }
     ]
   }
@@ -24803,7 +25113,7 @@ import '@triptease/tt-data-point';
 var statistic_default = {
   statistic: {
     name: "Statistic",
-    description: "A consistent, structured layout for displaying a statistic or a few statistics.",
+    description: "Surfaces key metrics as a labelled value, optionally paired with a status indicator or contextual note.",
     element: "div",
     usageGuidance: {
       whenToUse: [
@@ -24820,7 +25130,7 @@ var statistic_default = {
     },
     examples: [
       {
-        title: "Basic statistic",
+        title: "Basic usage",
         code: `
         <div class="card">
           <div class="statistic">
@@ -24884,7 +25194,7 @@ var banner_default = {
         "To display non-important information that does not require the users' immediate attention.",
         "To advertise new features, services or updates.",
         "To display form validation errors (place an error message beneath, or as close as is possible to, the input instead).",
-        "To display lengthy information (consider a dialog or put the information on a separate page and use a banner to draw the users' attention to it instead).'"
+        "To display lengthy information (consider a dialog or put the information on a separate page and use a banner to draw the users' attention to it instead)."
       ]
     },
     dataAttributes: {
@@ -24897,42 +25207,41 @@ var banner_default = {
     examples: [
       {
         title: "Basic usage",
-        code: `
-    <div class="banner">
-      <p class="banner--body">Content inside banner</p>
-    </div>`
+        code: `<div class="banner">
+  <p class="banner--body">Your metasearch bids have been updated successfully.</p>
+</div>`
       },
       {
         title: "With title",
-        code: `
-    <div class="banner">
-      <p class="banner--title">Banner title</p>
-      <p class="banner--body">Content inside banner</p>
-    </div>`
+        description: "Use a title to give the banner a clear heading when the message benefits from a short summary line.",
+        code: `<div class="banner">
+  <p class="banner--title">Rate parity issue detected</p>
+  <p class="banner--body">One or more OTA channels are undercutting your direct rate.</p>
+</div>`
       },
       {
-        title: "With Action",
-        code: `
-    <div class="banner">
-      <p class="banner--body">Content inside banner</p>
-      <button class="banner--action small" data-theme="tertiary">
-        Action
-      </button>
-    </div>`
+        title: "With action",
+        description: "Use an action to give users a clear next step \u2014 for example, a close button to dismiss the banner, a link to a relevant page, or a button to open a dialog.",
+        code: `<div class="banner">
+  <p class="banner--body">Your metasearch bids have been updated successfully.</p>
+  <button class="banner--action small" data-theme="tertiary">
+    <tt-icon name="close" label="Close"></tt-icon>
+  </button>
+</div>`
       },
       {
         title: "Warning",
-        code: `
-    <div class="banner" data-theme="warning">
-      <p class="banner--body">Content inside banner</p>
-    </div>`
+        description: "Use the warning theme for situations that may require attention but are not yet critical, such as low occupancy in the next 14 days.",
+        code: `<div class="banner" data-theme="warning">
+  <p class="banner--body">Occupancy for the next 14 days is below 40%.</p>
+</div>`
       },
       {
         title: "Alert",
-        code: `
-    <div class="banner" data-theme="alert">
-      <p class="banner--body">Content inside banner</p>
-    </div>`
+        description: "Use the alert theme for urgent messages that require immediate action, such as a channel connectivity failure.",
+        code: `<div class="banner" data-theme="alert">
+  <p class="banner--body">Channel connection lost. Rates are not being distributed.</p>
+</div>`
       }
     ]
   }
@@ -24998,9 +25307,7 @@ var tabs_default = {
     examples: [
       {
         title: "Basic usage",
-        code: `import '@triptease/tt-tabs';
-
-<tt-tabs>
+        code: `<tt-tabs>
   <tt-tab-pane name="Tab One">
     <p>Tab one content.</p>
   </tt-tab-pane>
@@ -25061,24 +25368,21 @@ var paginator_default = {
     element: "tt-paginator",
     usageGuidance: {
       whenToUse: [
-        "Navigating through large datasets split into pages",
-        "Providing page controls below tables or lists",
-        "When the total number of items is known upfront"
+        "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. 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: [
-        "Set total-rows and page-size attributes to control pagination",
-        "Listen for the page-change event to fetch or display the correct page of data",
-        "The component auto-hides when there is only one page or fewer"
+        "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: [
-        "Keyboard navigation: ArrowRight/ArrowLeft for next/previous, Home/End for first/last",
-        'Uses role="navigation" with aria-label="Pagination"',
-        'Active page is marked with aria-current="page"'
-      ],
-      avoid: [
-        "When the dataset is small enough to display without pagination",
-        "For infinite scroll patterns (use intersection observers instead)",
-        "Prefer tt-table-wrapper when paginating a table, as it embeds tt-paginator automatically"
+        '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',
+        "Keyboard navigation: Arrow keys move between buttons, Home/End jump to first/last",
+        "First/Previous/Next/Last buttons are disabled (not hidden) when at boundaries"
       ]
     },
     installationOptions: {
@@ -25104,7 +25408,7 @@ var paginator_default = {
       },
       "page-size": {
         type: "number",
-        default: "10",
+        default: "25",
         description: "Number of rows per page."
       }
     },
@@ -25118,12 +25422,38 @@ var paginator_default = {
     examples: [
       {
         title: "Basic usage",
-        code: `<tt-paginator total-rows="100" page-size="10"></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>`
       }