@abraracs/better-shopify-wc-mcp 1.0.0

package/docs/heading.md

@@ -0,0 +1,201 @@
+---
+title: Heading
+description: >-
+  Renders hierarchical titles to communicate the structure and organization of
+  page content. Heading levels adjust automatically based on nesting within
+  parent Section components, ensuring a meaningful and accessible page outline.
+api_name: app-home
+source_url:
+  html: >-
+    https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/heading
+  md: >-
+    https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/heading.md
+---
+
+# Heading
+
+Renders hierarchical titles to communicate the structure and organization of page content. Heading levels adjust automatically based on nesting within parent Section components, ensuring a meaningful and accessible page outline.
+
+## Properties
+
+* accessibilityRole
+
+  "none" | "presentation" | "heading"
+
+  Default: 'heading'
+
+  Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.
+
+  * `heading`: defines the element as a heading to a page or section.
+  * `presentation`: the heading level will be stripped, and will prevent the element’s implicit ARIA semantics from being exposed to the accessibility tree.
+  * `none`: a synonym for the `presentation` role.
+
+* accessibilityVisibility
+
+  "visible" | "hidden" | "exclusive"
+
+  Default: 'visible'
+
+  Changes the visibility of the element.
+
+  * `visible`: the element is visible to all users.
+  * `hidden`: the element is removed from the accessibility tree but remains visible.
+  * `exclusive`: the element is visually hidden but remains in the accessibility tree.
+
+* lineClamp
+
+  number
+
+  Default: Infinity - no truncation is applied
+
+  Truncates the text content to the specified number of lines.
+
+## Slots
+
+* children
+
+  HTMLElement
+
+  The content of the Heading.
+
+Examples
+
+### Examples
+
+* #### Code
+
+  ##### jsx
+
+  ```jsx
+  <s-heading>Online store dashboard</s-heading>
+  ```
+
+  ##### html
+
+  ```html
+  <s-heading>Online store dashboard</s-heading>
+  ```
+
+* #### Basic heading
+
+  ##### Description
+
+  Standard heading for section titles and page content organization that creates a simple, clean title for a content section.
+
+  ##### jsx
+
+  ```jsx
+  <s-heading>Product details</s-heading>
+  ```
+
+  ##### html
+
+  ```html
+  <s-heading>Product details</s-heading>
+  ```
+
+* #### Heading with line clamping
+
+  ##### Description
+
+  Truncated heading that limits text to a specified number of lines, using ellipsis to indicate additional content for long product names or constrained layouts.
+
+  ##### jsx
+
+  ```jsx
+  <s-box inlineSize="200px">
+    <s-heading lineClamp={2}>
+      Premium organic cotton t-shirt with sustainable manufacturing practices
+    </s-heading>
+  </s-box>
+  ```
+
+  ##### html
+
+  ```html
+  <s-box inlineSize="200px">
+    <s-heading lineClamp="2">
+      Premium organic cotton t-shirt with sustainable manufacturing practices
+    </s-heading>
+  </s-box>
+  ```
+
+* #### Heading with custom accessibility
+
+  ##### Description
+
+  Heading configured with custom ARIA roles and visibility settings to meet specific accessibility requirements or design constraints.
+
+  ##### jsx
+
+  ```jsx
+  <s-heading accessibilityRole="presentation" accessibilityVisibility="hidden">
+    Sale badge
+  </s-heading>
+  ```
+
+  ##### html
+
+  ```html
+  <s-heading accessibilityRole="presentation" accessibilityVisibility="hidden">
+    Sale badge
+  </s-heading>
+  ```
+
+* #### Heading within section hierarchy
+
+  ##### Description
+
+  Demonstrates nested heading structure that automatically adjusts heading levels (h2, h3, h4) based on the current section depth, ensuring proper semantic document structure.
+
+  ##### jsx
+
+  ```jsx
+  <s-section>
+    <s-heading>Order information</s-heading>
+    {/* Renders as h2 */}
+    <s-section>
+      <s-heading>Shipping details</s-heading>
+      {/* Renders as h3 */}
+      <s-section>
+        <s-heading>Tracking updates</s-heading>
+        {/* Renders as h4 */}
+      </s-section>
+    </s-section>
+  </s-section>
+  ```
+
+  ##### html
+
+  ```html
+  <s-section>
+    <s-heading>Order information</s-heading>
+    <!-- Renders as h2 -->
+    <s-section>
+      <s-heading>Shipping details</s-heading>
+      <!-- Renders as h3 -->
+      <s-section>
+        <s-heading>Tracking updates</s-heading>
+        <!-- Renders as h4 -->
+      </s-section>
+    </s-section>
+  </s-section>
+  ```
+
+## Useful for
+
+* Creating titles and subtitles for your content that are consistent across your app.
+* Helping users with visual impairments navigate through content effectively using assistive technologies like screen readers.
+
+## Considerations
+
+* The level of the heading is automatically determined by how deeply it's nested inside other components, starting from h2.
+* Default to using the `heading` property in `s-section`. The `s-heading` component should only be used if you need to implement a custom layout for your heading in the UI.
+
+## Best practices
+
+* Use short headings to make your content scannable.
+* Use plain and clear terms.
+* Don't use jargon or technical language.
+* Don't use different terms to describe the same thing.
+* Don't duplicate content.

package/docs/icon.md

@@ -0,0 +1,295 @@
+---
+title: Icon
+description: >-
+  Renders a graphic symbol to visually communicate core parts of the product and
+  available actions. Icons can act as wayfinding tools to help users quickly
+  understand their location within the interface and common interaction
+  patterns.
+api_name: app-home
+source_url:
+  html: 'https://shopify.dev/docs/api/app-home/polaris-web-components/media/icon'
+  md: 'https://shopify.dev/docs/api/app-home/polaris-web-components/media/icon.md'
+---
+
+# Icon
+
+Renders a graphic symbol to visually communicate core parts of the product and available actions. Icons can act as wayfinding tools to help users quickly understand their location within the interface and common interaction patterns.
+
+## Properties
+
+* color
+
+  "base" | "subdued"
+
+  Default: 'base'
+
+  Modify the color to be more or less intense.
+
+* interestFor
+
+  string
+
+  ID of a component that should respond to interest (e.g. hover and focus) on this component.
+
+* size
+
+  "small" | "base"
+
+  Default: 'base'
+
+  Adjusts the size of the icon.
+
+* tone
+
+  "info" | "success" | "warning" | "critical" | "auto" | "neutral" | "caution"
+
+  Default: 'auto'
+
+  Sets the tone of the icon, based on the intention of the information being conveyed.
+
+* type
+
+  "" | "replace" | "search" | "split" | "link" | "edit" | "product" | "variant" | "collection" | "select" | "info" | "incomplete" | "complete" | "color" | "money" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" | "alert-location" | "alert-octagon" | "alert-octagon-filled" | "alert-triangle" | "alert-triangle-filled" | "app-extension" | "apps" | "archive" | "arrow-down" | "arrow-down-circle" | "arrow-down-right" | "arrow-left" | "arrow-left-circle" | "arrow-right" | "arrow-right-circle" | "arrow-up" | "arrow-up-circle" | "arrow-up-right" | "arrows-in-horizontal" | "arrows-out-horizontal" | "asterisk" | "attachment" | "automation" | "backspace" | "bag" | "bank" | "barcode" | "battery-low" | "bill" | "blank" | "blog" | "bolt" | "bolt-filled" | "book" | "book-open" | "bug" | "bullet" | "business-entity" | "button" | "button-press" | "calculator" | "calendar" | "calendar-check" | "calendar-compare" | "calendar-list" | "calendar-time" | "camera" | "camera-flip" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "cart" | "cart-abandoned" | "cart-discount" | "cart-down" | "cart-filled" | "cart-sale" | "cart-send" | "cart-up" | "cash-dollar" | "cash-euro" | "cash-pound" | "cash-rupee" | "cash-yen" | "catalog-product" | "categories" | "channels" | "chart-cohort" | "chart-donut" | "chart-funnel" | "chart-histogram-first" | "chart-histogram-first-last" | "chart-histogram-flat" | "chart-histogram-full" | "chart-histogram-growth" | "chart-histogram-last" | "chart-histogram-second-last" | "chart-horizontal" | "chart-line" | "chart-popular" | "chart-stacked" | "chart-vertical" | "chat" | "chat-new" | "chat-referral" | "check" | "check-circle" | "check-circle-filled" | "checkbox" | "chevron-down" | "chevron-down-circle" | "chevron-left" | "chevron-left-circle" | "chevron-right" | "chevron-right-circle" | "chevron-up" | "chevron-up-circle" | "circle" | "circle-dashed" | "clipboard" | "clipboard-check" | "clipboard-checklist" | "clock" | "clock-list" | "clock-revert" | "code" | "code-add" | "collection-featured" | "collection-list" | "collection-reference" | "color-none" | "compass" | "compose" | "confetti" | "connect" | "content" | "contract" | "corner-pill" | "corner-round" | "corner-square" | "credit-card" | "credit-card-cancel" | "credit-card-percent" | "credit-card-reader" | "credit-card-reader-chip" | "credit-card-reader-tap" | "credit-card-secure" | "credit-card-tap-chip" | "crop" | "currency-convert" | "cursor" | "cursor-banner" | "cursor-option" | "data-presentation" | "data-table" | "database" | "database-add" | "database-connect" | "delete" | "delivered" | "delivery" | "desktop" | "disabled" | "disabled-filled" | "discount" | "discount-add" | "discount-automatic" | "discount-code" | "discount-remove" | "dns-settings" | "dock-floating" | "dock-side" | "domain" | "domain-landing-page" | "domain-new" | "domain-redirect" | "download" | "drag-drop" | "drag-handle" | "drawer" | "duplicate" | "email" | "email-follow-up" | "email-newsletter" | "empty" | "enabled" | "enter" | "envelope" | "envelope-soft-pack" | "eraser" | "exchange" | "exit" | "export" | "external" | "eye-check-mark" | "eye-dropper" | "eye-dropper-list" | "eye-first" | "eyeglasses" | "fav" | "favicon" | "file" | "file-list" | "filter" | "filter-active" | "flag" | "flip-horizontal" | "flip-vertical" | "flower" | "folder" | "folder-add" | "folder-down" | "folder-remove" | "folder-up" | "food" | "foreground" | "forklift" | "forms" | "games" | "gauge" | "geolocation" | "gift" | "gift-card" | "git-branch" | "git-commit" | "git-repository" | "globe" | "globe-asia" | "globe-europe" | "globe-lines" | "globe-list" | "graduation-hat" | "grid" | "hashtag" | "hashtag-decimal" | "hashtag-list" | "heart" | "hide" | "hide-filled" | "home" | "home-filled" | "icons" | "identity-card" | "image" | "image-add" | "image-alt" | "image-explore" | "image-magic" | "image-none" | "image-with-text-overlay" | "images" | "import" | "in-progress" | "incentive" | "incoming" | "info-filled" | "inheritance" | "inventory" | "inventory-edit" | "inventory-list" | "inventory-transfer" | "inventory-updated" | "iq" | "key" | "keyboard" | "keyboard-filled" | "keyboard-hide" | "keypad" | "label-printer" | "language" | "language-translate" | "layout-block" | "layout-buy-button" | "layout-buy-button-horizontal" | "layout-buy-button-vertical" | "layout-column-1" | "layout-columns-2" | "layout-columns-3" | "layout-footer" | "layout-header" | "layout-logo-block" | "layout-popup" | "layout-rows-2" | "layout-section" | "layout-sidebar-left" | "layout-sidebar-right" | "lightbulb" | "link-list" | "list-bulleted" | "list-bulleted-filled" | "list-numbered" | "live" | "live-critical" | "live-none" | "location" | "location-none" | "lock" | "map" | "markets" | "markets-euro" | "markets-rupee" | "markets-yen" | "maximize" | "measurement-size" | "measurement-size-list" | "measurement-volume" | "measurement-volume-list" | "measurement-weight" | "measurement-weight-list" | "media-receiver" | "megaphone" | "mention" | "menu" | "menu-filled" | "menu-horizontal" | "menu-vertical" | "merge" | "metafields" | "metaobject" | "metaobject-list" | "metaobject-reference" | "microphone" | "microphone-muted" | "minimize" | "minus" | "minus-circle" | "mobile" | "money-none" | "money-split" | "moon" | "nature" | "note" | "note-add" | "notification" | "number-one" | "order" | "order-batches" | "order-draft" | "order-filled" | "order-first" | "order-fulfilled" | "order-repeat" | "order-unfulfilled" | "orders-status" | "organization" | "outdent" | "outgoing" | "package" | "package-cancel" | "package-fulfilled" | "package-on-hold" | "package-reassign" | "package-returned" | "page" | "page-add" | "page-attachment" | "page-clock" | "page-down" | "page-heart" | "page-list" | "page-reference" | "page-remove" | "page-report" | "page-up" | "pagination-end" | "pagination-start" | "paint-brush-flat" | "paint-brush-round" | "paper-check" | "partially-complete" | "passkey" | "paste" | "pause-circle" | "payment" | "payment-capture" | "payout" | "payout-dollar" | "payout-euro" | "payout-pound" | "payout-rupee" | "payout-yen" | "person" | "person-add" | "person-exit" | "person-filled" | "person-list" | "person-lock" | "person-remove" | "person-segment" | "personalized-text" | "phablet" | "phone" | "phone-down" | "phone-down-filled" | "phone-in" | "phone-out" | "pin" | "pin-remove" | "plan" | "play" | "play-circle" | "plus" | "plus-circle" | "plus-circle-down" | "plus-circle-filled" | "plus-circle-up" | "point-of-sale" | "point-of-sale-register" | "price-list" | "print" | "product-add" | "product-cost" | "product-filled" | "product-list" | "product-reference" | "product-remove" | "product-return" | "product-unavailable" | "profile" | "profile-filled" | "question-circle" | "question-circle-filled" | "radio-control" | "receipt" | "receipt-dollar" | "receipt-euro" | "receipt-folded" | "receipt-paid" | "receipt-pound" | "receipt-refund" | "receipt-rupee" | "receipt-yen" | "receivables" | "redo" | "referral-code" | "refresh" | "remove-background" | "reorder" | "replay" | "reset" | "return" | "reward" | "rocket" | "rotate-left" | "rotate-right" | "sandbox" | "save" | "savings" | "scan-qr-code" | "search-add" | "search-list" | "search-recent" | "search-resource" | "send" | "settings" | "share" | "shield-check-mark" | "shield-none" | "shield-pending" | "shield-person" | "shipping-label" | "shipping-label-cancel" | "shopcodes" | "slideshow" | "smiley-happy" | "smiley-joy" | "smiley-neutral" | "smiley-sad" | "social-ad" | "social-post" | "sort" | "sort-ascending" | "sort-descending" | "sound" | "sports" | "star" | "star-circle" | "star-filled" | "star-half" | "star-list" | "status" | "status-active" | "stop-circle" | "store" | "store-import" | "store-managed" | "store-online" | "sun" | "table" | "table-masonry" | "tablet" | "target" | "tax" | "team" | "text" | "text-align-center" | "text-align-left" | "text-align-right" | "text-block" | "text-bold" | "text-color" | "text-font" | "text-font-list" | "text-grammar" | "text-in-columns" | "text-in-rows" | "text-indent" | "text-indent-remove" | "text-italic" | "text-quote" | "text-title" | "text-underline" | "text-with-image" | "theme" | "theme-edit" | "theme-store" | "theme-template" | "three-d-environment" | "thumbs-down" | "thumbs-up" | "tip-jar" | "toggle-off" | "toggle-on" | "transaction" | "transaction-fee-add" | "transaction-fee-dollar" | "transaction-fee-euro" | "transaction-fee-pound" | "transaction-fee-rupee" | "transaction-fee-yen" | "transfer" | "transfer-in" | "transfer-internal" | "transfer-out" | "truck" | "undo" | "unknown-device" | "unlock" | "upload" | "variant-list" | "video" | "video-list" | "view" | "viewport-narrow" | "viewport-short" | "viewport-tall" | "viewport-wide" | "wallet" | "wand" | "watch" | "wifi" | "work" | "work-list" | "wrench" | "x" | "x-circle" | "x-circle-filled"
+
+  Specifies the type of icon that will be displayed.
+
+Examples
+
+### Examples
+
+* #### Code
+
+  ##### jsx
+
+  ```jsx
+  <s-stack direction="inline" gap="base">
+    <s-icon type="home" />
+    <s-icon type="order" />
+    <s-icon type="product" />
+    <s-icon type="settings" />
+  </s-stack>
+  ```
+
+  ##### html
+
+  ```html
+  <s-stack direction="inline" gap="base">
+    <s-icon type="home"></s-icon>
+    <s-icon type="order"></s-icon>
+    <s-icon type="product"></s-icon>
+    <s-icon type="settings"></s-icon>
+  </s-stack>
+  ```
+
+* #### Basic usage
+
+  ##### Description
+
+  Standard icons for common merchant interface actions and navigation. Demonstrates rendering multiple icons in an inline stack, showing different types of icons used for navigation and actions.
+
+  ##### jsx
+
+  ```jsx
+  <s-stack direction="inline" gap="base">
+    <s-icon type="home" />
+    <s-icon type="edit" />
+    <s-icon type="duplicate" />
+    <s-icon type="save" />
+    <s-icon type="export" />
+  </s-stack>
+  ```
+
+  ##### html
+
+  ```html
+  <s-stack direction="inline" gap="base">
+    <s-icon type="home"></s-icon>
+    <s-icon type="edit"></s-icon>
+    <s-icon type="duplicate"></s-icon>
+    <s-icon type="save"></s-icon>
+    <s-icon type="export"></s-icon>
+  </s-stack>
+  ```
+
+* #### With semantic tone
+
+  ##### Description
+
+  Icons with color-coded tones to convey status and semantic meaning.
+
+  ##### jsx
+
+  ```jsx
+  <s-stack direction="inline" gap="base">
+    <s-icon type="alert-circle" tone="warning" />
+    <s-icon type="check-circle" tone="success" />
+    <s-icon type="info" tone="info" />
+    <s-icon type="alert-triangle" tone="caution" />
+  </s-stack>
+  ```
+
+  ##### html
+
+  ```html
+  <s-stack direction="inline" gap="base">
+    <s-icon type="alert-circle" tone="warning"></s-icon>
+    <s-icon type="check-circle" tone="success"></s-icon>
+    <s-icon type="info" tone="info"></s-icon>
+    <s-icon type="alert-triangle" tone="caution"></s-icon>
+  </s-stack>
+  ```
+
+* #### Small size
+
+  ##### Description
+
+  Compact icon sizing for space-constrained interfaces and inline usage. Shows how to render a small-sized icon that takes up minimal space while maintaining clarity.
+
+  ##### jsx
+
+  ```jsx
+  <s-icon type="search" size="small" />
+  ```
+
+  ##### html
+
+  ```html
+  <s-icon type="search" size="small"></s-icon>
+  ```
+
+* #### Subdued color
+
+  ##### Description
+
+  Lower contrast icon for secondary actions and supporting information.
+
+  ##### jsx
+
+  ```jsx
+  <s-icon type="question-circle" color="subdued" />
+  ```
+
+  ##### html
+
+  ```html
+  <s-icon type="question-circle" color="subdued"></s-icon>
+  ```
+
+* #### With id property
+
+  ##### Description
+
+  Icon with unique identifier for JavaScript targeting and styling. Demonstrates adding a specific ID to an icon, which can be used for JavaScript interactions, CSS styling, or accessibility purposes.
+
+  ##### jsx
+
+  ```jsx
+  <s-icon type="settings" id="settings-icon" />
+  ```
+
+  ##### html
+
+  ```html
+  <s-icon type="settings" id="settings-icon"></s-icon>
+  ```
+
+* #### With interest relationship
+
+  ##### Description
+
+  Icon associated with interactive elements for enhanced accessibility context.
+
+  ##### jsx
+
+  ```jsx
+  <>
+    <s-tooltip id="info-tooltip">
+      SKU must be unique across all products and cannot be changed after creation
+    </s-tooltip>
+    <s-icon type="info" tone="info" interestFor="info-tooltip" />
+  </>
+  ```
+
+  ##### html
+
+  ```html
+  <s-tooltip id="info-tooltip">
+    SKU must be unique across all products and cannot be changed after creation
+  </s-tooltip>
+  <s-icon type="info" tone="info" interestFor="info-tooltip" />
+  ```
+
+* #### In button components
+
+  ##### Description
+
+  Icons integrated within button components for clear action identification. Shows how icons can be added to buttons to visually reinforce the button's action, using both positive (add) and negative (delete) tones.
+
+  ##### jsx
+
+  ```jsx
+  <s-button-group>
+    <s-button slot="secondary-actions" icon="plus">
+      Add product
+    </s-button>
+    <s-button slot="secondary-actions" icon="delete" tone="critical">
+      Delete
+    </s-button>
+  </s-button-group>
+  ```
+
+  ##### html
+
+  ```html
+  <s-button-group>
+    <s-button slot="secondary-actions" icon="plus">Add product</s-button>
+    <s-button slot="secondary-actions" icon="delete" tone="critical">
+      Delete
+    </s-button>
+  </s-button-group>
+  ```
+
+* #### In badge components
+
+  ##### Description
+
+  Icons combined with badges to enhance status communication and visual hierarchy. Demonstrates using icons with badges to provide visual status indicators, using success and warning tones to convey different states.
+
+  ##### jsx
+
+  ```jsx
+  <s-stack direction="inline" gap="base">
+    <s-badge tone="success" icon="check-circle">
+      Active
+    </s-badge>
+    <s-badge tone="warning" icon="alert-triangle">
+      Pending
+    </s-badge>
+  </s-stack>
+  ```
+
+  ##### html
+
+  ```html
+  <s-stack direction="inline" gap="base">
+    <s-badge tone="success" icon="check-circle">Active</s-badge>
+    <s-badge tone="warning" icon="alert-triangle">Pending</s-badge>
+  </s-stack>
+  ```
+
+## Available icons
+
+Search and filter across all the available icons:
+
+## Useful for
+
+* Orienting themselves and understanding available actions
+* Quickly identifying information and recognizing patterns
+
+## Best practices
+
+Icons should:
+
+* Use the same icon consistently for the same meaning
+* Appear next to related text labels
+* Only be used when their meaning is clear