{ "schemaVersion": "2.1.0", "readme": "Polaris Web Components - Custom Elements Manifest", "modules": [ { "kind": "javascript-module", "path": "dist/components/Avatar/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the avatar component.", "name": "Avatar", "members": [ { "kind": "field", "name": "size", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\"" }, "description": "The size of the avatar image. - `small-200`: Extra small avatar, suitable for compact displays or lists with many items. - `small-100`: Alias of `small`. - `small`: Small avatar, good for secondary contexts or tight layouts. - `base`: Default size that works well in most contexts. - `large`: Large avatar for emphasis or when the avatar is a focal point. - `large-100`: Alias of `large`. - `large-200`: Extra large avatar for prominent display." }, { "kind": "field", "name": "alt", "type": { "text": "string" }, "description": "Alternative text that describes the avatar for accessibility. Provides a text description of the avatar for users with assistive technology and serves as a fallback when the avatar fails to load. A well-written description enables people with visual impairments to understand non-text content. When a screen reader encounters an avatar, it reads this description aloud. When an avatar fails to load, this text displays on screen, helping all users understand what content was intended. Learn more about [writing effective alt text](https://www.shopify.com/ca/blog/image-alt-text#4) and the [alt attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt)." }, { "kind": "field", "name": "src", "type": { "text": "string" }, "description": "The URL or path to the avatar image. When provided, the image takes priority over `initials`. If the image fails to load or loads slowly, `initials` will be rendered as a fallback." }, { "kind": "field", "name": "initials", "type": { "text": "string" }, "description": "The initials to display in the avatar when no image is provided or fails to load. Typically one or two characters representing a person's first and last name initials, such as \"JD\" for John Doe." } ], "events": [ { "name": "load", "type": { "text": "Event" }, "description": "A callback fired when the avatar image loads successfully." }, { "name": "error", "type": { "text": "Event" }, "description": "A callback fired when the avatar image fails to load." } ], "attributes": [ { "name": "size", "fieldName": "size", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\"" }, "description": "The size of the avatar image. - `small-200`: Extra small avatar, suitable for compact displays or lists with many items. - `small-100`: Alias of `small`. - `small`: Small avatar, good for secondary contexts or tight layouts. - `base`: Default size that works well in most contexts. - `large`: Large avatar for emphasis or when the avatar is a focal point. - `large-100`: Alias of `large`. - `large-200`: Extra large avatar for prominent display." }, { "name": "alt", "fieldName": "alt", "type": { "text": "string" }, "description": "Alternative text that describes the avatar for accessibility. Provides a text description of the avatar for users with assistive technology and serves as a fallback when the avatar fails to load. A well-written description enables people with visual impairments to understand non-text content. When a screen reader encounters an avatar, it reads this description aloud. When an avatar fails to load, this text displays on screen, helping all users understand what content was intended. Learn more about [writing effective alt text](https://www.shopify.com/ca/blog/image-alt-text#4) and the [alt attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt)." }, { "name": "src", "fieldName": "src", "type": { "text": "string" }, "description": "The URL or path to the avatar image. When provided, the image takes priority over `initials`. If the image fails to load or loads slowly, `initials` will be rendered as a fallback." }, { "name": "initials", "fieldName": "initials", "type": { "text": "string" }, "description": "The initials to display in the avatar when no image is provided or fails to load. Typically one or two characters representing a person's first and last name initials, such as \"JD\" for John Doe." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-avatar" } ] }, { "kind": "javascript-module", "path": "dist/components/Badge/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the badge component.", "name": "Badge", "slots": [ { "name": "", "description": "The text label displayed within the badge component, typically a short status indicator or category label." } ], "members": [ { "kind": "field", "name": "color", "type": { "text": "\"base\" | \"strong\"" }, "default": "'base'", "description": "Controls the visual weight and emphasis of the badge. - `base`: Standard weight with moderate emphasis, suitable for most use cases. - `strong`: Increased visual weight for higher emphasis and prominence." }, { "kind": "field", "name": "icon", "type": { "text": "\"color\" | \"info\" | \"status\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"align-horizontal-centers\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"arrows-out-horizontal-filled\" | \"asterisk\" | \"attachment\" | \"automation\" | \"automation-filled\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"bill\" | \"bill-filled\" | \"blank\" | \"blank-filled\" | \"blog\" | \"blog-filled\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"brain\" | \"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-abandoned-filled\" | \"cart-discount\" | \"cart-down\" | \"cart-down-filled\" | \"cart-sale\" | \"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\" | \"collection-featured\" | \"collection-filled\" | \"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\" | \"delivery\" | \"desktop\" | \"disabled\" | \"discount\" | \"discount-add\" | \"discount-code\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"duplicate\" | \"edit\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"favicon\" | \"file\" | \"file-filled\" | \"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\" | \"gauge-filled\" | \"generated-app\" | \"generated-app-filled\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-asia-filled\" | \"globe-europe\" | \"globe-europe-filled\" | \"globe-filled\" | \"globe-lines\" | \"globe-list\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"icons\" | \"identity-card\" | \"identity-card-filled\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"incomplete\" | \"inheritance\" | \"inventory\" | \"inventory-filled\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layer\" | \"layout-block\" | \"layout-block-ai\" | \"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\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-filled\" | \"location\" | \"location-none\" | \"lock\" | \"logo-apple-tap-to-pay-filled\" | \"magic\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-euro-filled\" | \"markets-rupee\" | \"markets-rupee-filled\" | \"markets-yen\" | \"markets-yen-filled\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"megaphone-filled\" | \"mention\" | \"menu\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-filled\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money\" | \"money-filled\" | \"money-none\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order\" | \"order-batches\" | \"order-draft\" | \"order-draft-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-fulfilled\" | \"package-on-hold\" | \"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\" | \"passkey\" | \"passkey-filled\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-filled\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"price-list\" | \"price-list-filled\" | \"print\" | \"product\" | \"product-add\" | \"product-cost\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"rank-bottom\" | \"rank-top\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-euro-filled\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-pound-filled\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-rupee-filled\" | \"receipt-yen\" | \"receipt-yen-filled\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"replace\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"search\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"select\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-network\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-filled\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"split\" | \"sports\" | \"star\" | \"star-filled\" | \"star-list\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-ai\" | \"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-in-rows-filled\" | \"text-indent\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-cart\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wallet-filled\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-filled\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"empty\"" }, "default": "''", "description": "An icon displayed inside the badge to provide additional visual context or reinforce the badge's meaning. Accepts any icon name from the icon library or a custom string identifier." }, { "kind": "field", "name": "size", "type": { "text": "\"base\" | \"large\" | \"large-100\"" }, "description": "The size of the badge. - `base`: Default size suitable for most badge use cases. - `large`: Larger badge for increased visibility and prominence. - `large-100`: Extra large badge for maximum visibility in emphasized contexts." }, { "kind": "field", "name": "tone", "type": { "text": "\"auto\" | \"neutral\" | \"info\" | \"success\" | \"caution\" | \"warning\" | \"critical\"" }, "default": "'auto'", "description": "The semantic meaning and color treatment of the component. - `info`: Informational content or helpful tips. - `success`: Positive outcomes or successful states. - `warning`: Important warnings about potential issues. - `critical`: Urgent problems or destructive actions. - `auto`: Automatically determined based on context. - `neutral`: General information without specific intent. - `caution`: Advisory notices that need attention." } ], "attributes": [ { "name": "color", "fieldName": "color", "type": { "text": "\"base\" | \"strong\"" }, "default": "'base'", "description": "Controls the visual weight and emphasis of the badge. - `base`: Standard weight with moderate emphasis, suitable for most use cases. - `strong`: Increased visual weight for higher emphasis and prominence." }, { "name": "icon", "fieldName": "icon", "type": { "text": "\"color\" | \"info\" | \"status\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"align-horizontal-centers\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"arrows-out-horizontal-filled\" | \"asterisk\" | \"attachment\" | \"automation\" | \"automation-filled\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"bill\" | \"bill-filled\" | \"blank\" | \"blank-filled\" | \"blog\" | \"blog-filled\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"brain\" | \"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-abandoned-filled\" | \"cart-discount\" | \"cart-down\" | \"cart-down-filled\" | \"cart-sale\" | \"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\" | \"collection-featured\" | \"collection-filled\" | \"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\" | \"delivery\" | \"desktop\" | \"disabled\" | \"discount\" | \"discount-add\" | \"discount-code\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"duplicate\" | \"edit\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"favicon\" | \"file\" | \"file-filled\" | \"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\" | \"gauge-filled\" | \"generated-app\" | \"generated-app-filled\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-asia-filled\" | \"globe-europe\" | \"globe-europe-filled\" | \"globe-filled\" | \"globe-lines\" | \"globe-list\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"icons\" | \"identity-card\" | \"identity-card-filled\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"incomplete\" | \"inheritance\" | \"inventory\" | \"inventory-filled\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layer\" | \"layout-block\" | \"layout-block-ai\" | \"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\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-filled\" | \"location\" | \"location-none\" | \"lock\" | \"logo-apple-tap-to-pay-filled\" | \"magic\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-euro-filled\" | \"markets-rupee\" | \"markets-rupee-filled\" | \"markets-yen\" | \"markets-yen-filled\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"megaphone-filled\" | \"mention\" | \"menu\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-filled\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money\" | \"money-filled\" | \"money-none\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order\" | \"order-batches\" | \"order-draft\" | \"order-draft-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-fulfilled\" | \"package-on-hold\" | \"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\" | \"passkey\" | \"passkey-filled\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-filled\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"price-list\" | \"price-list-filled\" | \"print\" | \"product\" | \"product-add\" | \"product-cost\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"rank-bottom\" | \"rank-top\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-euro-filled\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-pound-filled\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-rupee-filled\" | \"receipt-yen\" | \"receipt-yen-filled\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"replace\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"search\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"select\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-network\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-filled\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"split\" | \"sports\" | \"star\" | \"star-filled\" | \"star-list\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-ai\" | \"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-in-rows-filled\" | \"text-indent\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-cart\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wallet-filled\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-filled\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"empty\"" }, "default": "''", "description": "An icon displayed inside the badge to provide additional visual context or reinforce the badge's meaning. Accepts any icon name from the icon library or a custom string identifier." }, { "name": "size", "fieldName": "size", "type": { "text": "\"base\" | \"large\" | \"large-100\"" }, "description": "The size of the badge. - `base`: Default size suitable for most badge use cases. - `large`: Larger badge for increased visibility and prominence. - `large-100`: Extra large badge for maximum visibility in emphasized contexts." }, { "name": "tone", "fieldName": "tone", "type": { "text": "\"auto\" | \"neutral\" | \"info\" | \"success\" | \"caution\" | \"warning\" | \"critical\"" }, "default": "'auto'", "description": "The semantic meaning and color treatment of the component. - `info`: Informational content or helpful tips. - `success`: Positive outcomes or successful states. - `warning`: Important warnings about potential issues. - `critical`: Urgent problems or destructive actions. - `auto`: Automatically determined based on context. - `neutral`: General information without specific intent. - `caution`: Advisory notices that need attention." } ], "superclass": { "name": "BadgeBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/Badge/BadgeBase" }, "customElement": true, "tagName": "s-badge" } ] }, { "kind": "javascript-module", "path": "dist/components/Banner/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the banner component.", "name": "Banner", "slots": [ { "name": "", "description": "The main message content displayed within the banner component, providing important information or guidance to users." }, { "name": "secondary-actions", "description": "Action buttons displayed at the bottom of the banner that let users respond to the message. Accepts up to two button components with `variant=\"secondary\"` or `variant=\"auto\"`." } ], "members": [ { "kind": "field", "name": "tone", "type": { "text": "\"auto\" | \"info\" | \"success\" | \"warning\" | \"critical\"" }, "default": "'auto'", "description": "The semantic meaning and color treatment of the component. - `info`: Informational content or helpful tips. - `success`: Positive outcomes or successful states. - `warning`: Important warnings about potential issues. - `critical`: Urgent problems or destructive actions. - `auto`: Automatically determined based on context." }, { "kind": "field", "name": "heading", "type": { "text": "string" }, "default": "''", "description": "The heading text displayed at the top of the banner." }, { "kind": "field", "name": "dismissible", "type": { "text": "boolean" }, "default": "false", "description": "Whether the banner displays a close button that allows users to dismiss it. When the close button is pressed, the `dismiss` event fires, then `hidden` is set to `true`, any animation completes, and the `afterhide` event fires." }, { "kind": "field", "name": "hidden", "type": { "text": "boolean" }, "default": "false", "description": "Controls whether the banner is visible or hidden. When using a controlled component pattern and the banner is `dismissible`, update this property to `true` when the `dismiss` event fires. You can hide the banner programmatically by setting this to `true` even if it's not `dismissible`." } ], "events": [ { "name": "dismiss", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user dismisses the banner by clicking the close button. Use this to update your app state and control the banner's visibility." }, { "name": "afterhide", "type": { "text": "CustomEvent" }, "description": "A callback fired when the banner is completely hidden, after any hide animations have completed. Use this to perform cleanup or trigger subsequent actions after the banner is no longer visible." } ], "attributes": [ { "name": "tone", "fieldName": "tone", "type": { "text": "\"auto\" | \"info\" | \"success\" | \"warning\" | \"critical\"" }, "default": "'auto'", "description": "The semantic meaning and color treatment of the component. - `info`: Informational content or helpful tips. - `success`: Positive outcomes or successful states. - `warning`: Important warnings about potential issues. - `critical`: Urgent problems or destructive actions. - `auto`: Automatically determined based on context." }, { "name": "heading", "fieldName": "heading", "type": { "text": "string" }, "default": "''", "description": "The heading text displayed at the top of the banner." }, { "name": "dismissible", "fieldName": "dismissible", "type": { "text": "boolean" }, "default": "false", "description": "Whether the banner displays a close button that allows users to dismiss it. When the close button is pressed, the `dismiss` event fires, then `hidden` is set to `true`, any animation completes, and the `afterhide` event fires." }, { "name": "hidden", "fieldName": "hidden", "type": { "text": "boolean" }, "default": "false", "description": "Controls whether the banner is visible or hidden. When using a controlled component pattern and the banner is `dismissible`, update this property to `true` when the `dismiss` event fires. You can hide the banner programmatically by setting this to `true` even if it's not `dismissible`." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-banner" } ] }, { "kind": "javascript-module", "path": "dist/components/Box/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the box component.", "name": "Box", "slots": [ { "name": "", "description": "The content displayed within the box component, which serves as a flexible container for organizing and styling other components." } ], "members": [ { "kind": "field", "name": "background", "type": { "text": "\"subdued\" | \"base\" | \"strong\" | \"transparent\"" }, "default": "'transparent'", "description": "The background color of the component." }, { "kind": "field", "name": "border", "type": { "text": "BorderShorthand" }, "default": "'none'", "description": "A border applied using shorthand syntax to specify width, color, and style in a single property." }, { "kind": "field", "name": "borderWidth", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty<\"base\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"none\">" }, "default": "'' - meaning no override", "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different widths per side." }, { "kind": "field", "name": "borderStyle", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty" }, "default": "'' - meaning no override", "description": "The visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different styles per side." }, { "kind": "field", "name": "borderColor", "type": { "text": "\"subdued\" | \"base\" | \"strong\"" }, "default": "'' - meaning no override", "description": "The color of the border using the design system's color scale. When set, this overrides the color value specified in the `border` property. Choose from `subdued`, `base`, or `strong` to match the visual emphasis needed." }, { "kind": "field", "name": "borderRadius", "type": { "text": "MaybeAllValuesShorthandProperty" }, "default": "'none'", "description": "The roundedness of the element's corners using the design system's radius scale. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different radii per corner. Use this to create rounded corners or fully rounded elements." }, { "kind": "field", "name": "padding", "type": { "text": "MaybeResponsive>" }, "default": "'none'", "description": "The padding applied to all edges of the component. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values: - 1 value applies to all sides - 2 values apply to block (top/bottom) and inline (left/right) - 3 values apply to block-start (top), inline (left/right), and block-end (bottom) - 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) *Examples:** `base`, `large none`, `base large-100 base small` Use `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingBlock", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The block-direction padding (top and bottom in horizontal writing modes). Accepts a single value for both sides or two space-separated values for block-start and block-end. *Example:** `large none` applies `large` to the top and `none` to the bottom. Overrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingBlockStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-start padding (top in horizontal writing modes). Overrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingBlockEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingInline", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The inline-direction padding (left and right in horizontal writing modes). Accepts a single value for both sides or two space-separated values for inline-start and inline-end. *Example:** `large none` applies `large` to the left and `none` to the right. Overrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingInlineStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingInlineEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "display", "type": { "text": "\"auto\" | \"none\"" }, "default": "'auto'", "description": "The outer [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) type of the component. The outer type sets a component's participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout). - `auto` the component's initial value. The actual value depends on the component and context. - `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers." }, { "kind": "field", "name": "blockSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes). Block size adjusts based on the writing direction: in horizontal layouts, it controls the height; in vertical layouts, it controls the width. This ensures consistent behavior across different text directions. Learn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size)." }, { "kind": "field", "name": "minBlockSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size)." }, { "kind": "field", "name": "maxBlockSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size)." }, { "kind": "field", "name": "inlineSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The width in horizontal writing modes, or height in vertical writing modes. Use this for flow-relative sizing that adapts to text direction. Learn more about [inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size)." }, { "kind": "field", "name": "minInlineSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size)." }, { "kind": "field", "name": "maxInlineSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size)." }, { "kind": "field", "name": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "kind": "field", "name": "accessibilityRole", "type": { "text": "\"generic\" | \"main\" | \"header\" | \"footer\" | \"section\" | \"region\" | \"aside\" | \"navigation\" | \"ordered-list\" | \"list-item\" | \"list-item-separator\" | \"unordered-list\" | \"separator\" | \"status\" | \"alert\" | \"presentation\" | \"none\"" }, "default": "'generic'", "description": "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." }, { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. Only use this when the element's content is not enough context for users using assistive technologies." }, { "kind": "field", "name": "overflow", "type": { "text": "\"visible\" | \"hidden\"" }, "default": "'visible'", "description": "Sets the overflow behavior of the element. - `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse. - `visible`: the content that extends beyond the element’s container is visible." } ], "attributes": [ { "name": "background", "fieldName": "background", "type": { "text": "\"subdued\" | \"base\" | \"strong\" | \"transparent\"" }, "default": "'transparent'", "description": "The background color of the component." }, { "name": "border", "fieldName": "border", "type": { "text": "BorderShorthand" }, "default": "'none'", "description": "A border applied using shorthand syntax to specify width, color, and style in a single property." }, { "name": "borderwidth", "fieldName": "borderWidth", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty<\"base\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"none\">" }, "default": "'' - meaning no override", "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different widths per side." }, { "name": "borderstyle", "fieldName": "borderStyle", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty" }, "default": "'' - meaning no override", "description": "The visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different styles per side." }, { "name": "bordercolor", "fieldName": "borderColor", "type": { "text": "\"subdued\" | \"base\" | \"strong\"" }, "default": "'' - meaning no override", "description": "The color of the border using the design system's color scale. When set, this overrides the color value specified in the `border` property. Choose from `subdued`, `base`, or `strong` to match the visual emphasis needed." }, { "name": "borderradius", "fieldName": "borderRadius", "type": { "text": "MaybeAllValuesShorthandProperty" }, "default": "'none'", "description": "The roundedness of the element's corners using the design system's radius scale. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different radii per corner. Use this to create rounded corners or fully rounded elements." }, { "name": "padding", "fieldName": "padding", "type": { "text": "MaybeResponsive>" }, "default": "'none'", "description": "The padding applied to all edges of the component. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values: - 1 value applies to all sides - 2 values apply to block (top/bottom) and inline (left/right) - 3 values apply to block-start (top), inline (left/right), and block-end (bottom) - 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) *Examples:** `base`, `large none`, `base large-100 base small` Use `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddingblock", "fieldName": "paddingBlock", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The block-direction padding (top and bottom in horizontal writing modes). Accepts a single value for both sides or two space-separated values for block-start and block-end. *Example:** `large none` applies `large` to the top and `none` to the bottom. Overrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddingblockstart", "fieldName": "paddingBlockStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-start padding (top in horizontal writing modes). Overrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddingblockend", "fieldName": "paddingBlockEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddinginline", "fieldName": "paddingInline", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The inline-direction padding (left and right in horizontal writing modes). Accepts a single value for both sides or two space-separated values for inline-start and inline-end. *Example:** `large none` applies `large` to the left and `none` to the right. Overrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddinginlinestart", "fieldName": "paddingInlineStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddinginlineend", "fieldName": "paddingInlineEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "display", "fieldName": "display", "type": { "text": "\"auto\" | \"none\"" }, "default": "'auto'", "description": "The outer [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) type of the component. The outer type sets a component's participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout). - `auto` the component's initial value. The actual value depends on the component and context. - `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers." }, { "name": "blocksize", "fieldName": "blockSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes). Block size adjusts based on the writing direction: in horizontal layouts, it controls the height; in vertical layouts, it controls the width. This ensures consistent behavior across different text directions. Learn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size)." }, { "name": "minblocksize", "fieldName": "minBlockSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size)." }, { "name": "maxblocksize", "fieldName": "maxBlockSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size)." }, { "name": "inlinesize", "fieldName": "inlineSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The width in horizontal writing modes, or height in vertical writing modes. Use this for flow-relative sizing that adapts to text direction. Learn more about [inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size)." }, { "name": "mininlinesize", "fieldName": "minInlineSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size)." }, { "name": "maxinlinesize", "fieldName": "maxInlineSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size)." }, { "name": "accessibilityvisibility", "fieldName": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "name": "accessibilityrole", "fieldName": "accessibilityRole", "type": { "text": "\"generic\" | \"main\" | \"header\" | \"footer\" | \"section\" | \"region\" | \"aside\" | \"navigation\" | \"ordered-list\" | \"list-item\" | \"list-item-separator\" | \"unordered-list\" | \"separator\" | \"status\" | \"alert\" | \"presentation\" | \"none\"" }, "default": "'generic'", "description": "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." }, { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. Only use this when the element's content is not enough context for users using assistive technologies." }, { "name": "overflow", "fieldName": "overflow", "type": { "text": "\"visible\" | \"hidden\"" }, "default": "'visible'", "description": "Sets the overflow behavior of the element. - `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse. - `visible`: the content that extends beyond the element’s container is visible." } ], "superclass": { "name": "BoxElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/BoxElement" }, "customElement": true, "tagName": "s-box" } ] }, { "kind": "javascript-module", "path": "dist/components/Button/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the button component.", "name": "Button", "slots": [ { "name": "", "description": "The label text or elements displayed inside the button component, describing the action that will be performed when clicked." } ], "members": [ { "kind": "field", "name": "tone", "type": { "text": "\"auto\" | \"neutral\" | \"critical\"" }, "default": "'auto'", "description": "The semantic meaning and color treatment of the component. - `critical`: Urgent problems or destructive actions. - `auto`: Automatically determined based on context. - `neutral`: General information without specific intent." }, { "kind": "field", "name": "icon", "type": { "text": "\"color\" | \"info\" | \"status\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"align-horizontal-centers\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"arrows-out-horizontal-filled\" | \"asterisk\" | \"attachment\" | \"automation\" | \"automation-filled\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"bill\" | \"bill-filled\" | \"blank\" | \"blank-filled\" | \"blog\" | \"blog-filled\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"brain\" | \"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-abandoned-filled\" | \"cart-discount\" | \"cart-down\" | \"cart-down-filled\" | \"cart-sale\" | \"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\" | \"collection-featured\" | \"collection-filled\" | \"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\" | \"delivery\" | \"desktop\" | \"disabled\" | \"discount\" | \"discount-add\" | \"discount-code\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"duplicate\" | \"edit\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"favicon\" | \"file\" | \"file-filled\" | \"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\" | \"gauge-filled\" | \"generated-app\" | \"generated-app-filled\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-asia-filled\" | \"globe-europe\" | \"globe-europe-filled\" | \"globe-filled\" | \"globe-lines\" | \"globe-list\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"icons\" | \"identity-card\" | \"identity-card-filled\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"incomplete\" | \"inheritance\" | \"inventory\" | \"inventory-filled\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layer\" | \"layout-block\" | \"layout-block-ai\" | \"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\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-filled\" | \"location\" | \"location-none\" | \"lock\" | \"logo-apple-tap-to-pay-filled\" | \"magic\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-euro-filled\" | \"markets-rupee\" | \"markets-rupee-filled\" | \"markets-yen\" | \"markets-yen-filled\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"megaphone-filled\" | \"mention\" | \"menu\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-filled\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money\" | \"money-filled\" | \"money-none\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order\" | \"order-batches\" | \"order-draft\" | \"order-draft-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-fulfilled\" | \"package-on-hold\" | \"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\" | \"passkey\" | \"passkey-filled\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-filled\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"price-list\" | \"price-list-filled\" | \"print\" | \"product\" | \"product-add\" | \"product-cost\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"rank-bottom\" | \"rank-top\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-euro-filled\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-pound-filled\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-rupee-filled\" | \"receipt-yen\" | \"receipt-yen-filled\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"replace\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"search\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"select\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-network\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-filled\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"split\" | \"sports\" | \"star\" | \"star-filled\" | \"star-list\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-ai\" | \"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-in-rows-filled\" | \"text-indent\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-cart\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wallet-filled\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-filled\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"empty\"" }, "default": "''", "description": "An icon displayed inside the button, typically positioned before the button text. Use icons to help users quickly identify the button's action or to improve scannability. Accepts any icon name from the icon library or a custom string identifier." }, { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose." }, { "kind": "field", "name": "variant", "type": { "text": "\"auto\" | \"primary\" | \"secondary\" | \"tertiary\"" }, "default": "'auto'", "description": "The visual appearance of the button component. - `auto`: The variant is automatically determined by the button component's context. - `primary`: High emphasis button for the primary action on the page. Should be used sparingly. - `secondary`: Medium emphasis button for secondary actions. - `tertiary`: Low emphasis button for less important actions." }, { "kind": "field", "name": "lang", "type": { "text": "string" }, "description": "The language of the text content. Use this when the text is in a different language than the rest of the page, allowing assistive technologies such as screen readers to invoke the correct pronunciation. The value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)." }, { "kind": "field", "name": "type", "type": { "text": "\"button\" | \"reset\" | \"submit\"" }, "default": "'button'", "description": "The behavior of the Button. - `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form. - `button`: Used to indicate the component acts as a button, meaning it has no default action. - `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values). This property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set." }, { "kind": "field", "name": "interestFor", "type": { "text": "string" }, "description": "ID of a component that should respond to interest (e.g. hover and focus) on this component." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the Button meaning it cannot be clicked or receive focus." }, { "kind": "field", "name": "download", "type": { "text": "string" }, "description": "Causes the browser to treat the linked URL as a download with the string being the file name. Download only works for same-origin URLs or the `blob:` and `data:` schemes." }, { "kind": "field", "name": "target", "type": { "text": "\"auto\" | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"" }, "default": "'auto'", "description": "Specifies where to display the linked URL." }, { "kind": "field", "name": "inlineSize", "type": { "text": "\"auto\" | \"fill\" | \"fit-content\"" }, "default": "'auto'", "description": "The displayed inline width of the Button. - `auto`: the size of the button depends on the surface and context. - `fill`: the button will takes up 100% of the available inline size. - `fit-content`: the button will take up the minimum inline-size required to fit its content." }, { "kind": "field", "name": "commandFor", "type": { "text": "string" }, "description": "ID of a component that should respond to activations (e.g. clicks) on this component. See `command` for how to control the behavior of the target." }, { "kind": "field", "name": "command", "type": { "text": "\"--auto\" | \"--show\" | \"--hide\" | \"--toggle\" | \"--copy\"" }, "default": "'--auto'", "description": "Sets the action the `commandFor` should take when this clickable is activated. See the documentation of particular components for the actions they support. - `--auto`: a default action for the target component. - `--show`: shows the target component. - `--hide`: hides the target component. - `--toggle`: toggles the target component. - `--copy`: copies the target ClipboardItem." }, { "kind": "field", "name": "loading", "type": { "text": "boolean" }, "default": "false", "description": "Replaces content with a loading indicator while a background action is being performed. This also disables the Button." }, { "kind": "field", "name": "href", "type": { "text": "string" }, "description": "The URL to link to. - If set, it will navigate to the location specified by `href` after executing the `click` event. - If a `commandFor` is set, the `command` will be executed instead of the navigation." } ], "events": [ { "name": "click", "type": { "text": "CustomEvent" }, "description": "A callback fired when the button is clicked." }, { "name": "focus", "type": { "text": "CustomEvent" }, "description": "A callback fired when the button receives focus." }, { "name": "blur", "type": { "text": "CustomEvent" }, "description": "A callback fired when the button loses focus." } ], "attributes": [ { "name": "tone", "fieldName": "tone", "type": { "text": "\"auto\" | \"neutral\" | \"critical\"" }, "default": "'auto'", "description": "The semantic meaning and color treatment of the component. - `critical`: Urgent problems or destructive actions. - `auto`: Automatically determined based on context. - `neutral`: General information without specific intent." }, { "name": "icon", "fieldName": "icon", "type": { "text": "\"color\" | \"info\" | \"status\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"align-horizontal-centers\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"arrows-out-horizontal-filled\" | \"asterisk\" | \"attachment\" | \"automation\" | \"automation-filled\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"bill\" | \"bill-filled\" | \"blank\" | \"blank-filled\" | \"blog\" | \"blog-filled\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"brain\" | \"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-abandoned-filled\" | \"cart-discount\" | \"cart-down\" | \"cart-down-filled\" | \"cart-sale\" | \"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\" | \"collection-featured\" | \"collection-filled\" | \"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\" | \"delivery\" | \"desktop\" | \"disabled\" | \"discount\" | \"discount-add\" | \"discount-code\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"duplicate\" | \"edit\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"favicon\" | \"file\" | \"file-filled\" | \"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\" | \"gauge-filled\" | \"generated-app\" | \"generated-app-filled\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-asia-filled\" | \"globe-europe\" | \"globe-europe-filled\" | \"globe-filled\" | \"globe-lines\" | \"globe-list\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"icons\" | \"identity-card\" | \"identity-card-filled\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"incomplete\" | \"inheritance\" | \"inventory\" | \"inventory-filled\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layer\" | \"layout-block\" | \"layout-block-ai\" | \"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\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-filled\" | \"location\" | \"location-none\" | \"lock\" | \"logo-apple-tap-to-pay-filled\" | \"magic\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-euro-filled\" | \"markets-rupee\" | \"markets-rupee-filled\" | \"markets-yen\" | \"markets-yen-filled\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"megaphone-filled\" | \"mention\" | \"menu\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-filled\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money\" | \"money-filled\" | \"money-none\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order\" | \"order-batches\" | \"order-draft\" | \"order-draft-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-fulfilled\" | \"package-on-hold\" | \"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\" | \"passkey\" | \"passkey-filled\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-filled\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"price-list\" | \"price-list-filled\" | \"print\" | \"product\" | \"product-add\" | \"product-cost\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"rank-bottom\" | \"rank-top\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-euro-filled\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-pound-filled\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-rupee-filled\" | \"receipt-yen\" | \"receipt-yen-filled\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"replace\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"search\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"select\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-network\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-filled\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"split\" | \"sports\" | \"star\" | \"star-filled\" | \"star-list\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-ai\" | \"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-in-rows-filled\" | \"text-indent\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-cart\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wallet-filled\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-filled\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"empty\"" }, "default": "''", "description": "An icon displayed inside the button, typically positioned before the button text. Use icons to help users quickly identify the button's action or to improve scannability. Accepts any icon name from the icon library or a custom string identifier." }, { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose." }, { "name": "variant", "fieldName": "variant", "type": { "text": "\"auto\" | \"primary\" | \"secondary\" | \"tertiary\"" }, "default": "'auto'", "description": "The visual appearance of the button component. - `auto`: The variant is automatically determined by the button component's context. - `primary`: High emphasis button for the primary action on the page. Should be used sparingly. - `secondary`: Medium emphasis button for secondary actions. - `tertiary`: Low emphasis button for less important actions." }, { "name": "lang", "fieldName": "lang", "type": { "text": "string" }, "description": "The language of the text content. Use this when the text is in a different language than the rest of the page, allowing assistive technologies such as screen readers to invoke the correct pronunciation. The value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)." }, { "name": "type", "fieldName": "type", "type": { "text": "\"button\" | \"reset\" | \"submit\"" }, "default": "'button'", "description": "The behavior of the Button. - `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form. - `button`: Used to indicate the component acts as a button, meaning it has no default action. - `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values). This property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set." }, { "name": "interestfor", "fieldName": "interestFor", "type": { "text": "string" }, "description": "ID of a component that should respond to interest (e.g. hover and focus) on this component." }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the Button meaning it cannot be clicked or receive focus." }, { "name": "download", "fieldName": "download", "type": { "text": "string" }, "description": "Causes the browser to treat the linked URL as a download with the string being the file name. Download only works for same-origin URLs or the `blob:` and `data:` schemes." }, { "name": "target", "fieldName": "target", "type": { "text": "\"auto\" | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"" }, "default": "'auto'", "description": "Specifies where to display the linked URL." }, { "name": "inlinesize", "fieldName": "inlineSize", "type": { "text": "\"auto\" | \"fill\" | \"fit-content\"" }, "default": "'auto'", "description": "The displayed inline width of the Button. - `auto`: the size of the button depends on the surface and context. - `fill`: the button will takes up 100% of the available inline size. - `fit-content`: the button will take up the minimum inline-size required to fit its content." }, { "name": "commandfor", "fieldName": "commandFor", "type": { "text": "string" }, "description": "ID of a component that should respond to activations (e.g. clicks) on this component. See `command` for how to control the behavior of the target." }, { "name": "command", "fieldName": "command", "type": { "text": "\"--auto\" | \"--show\" | \"--hide\" | \"--toggle\" | \"--copy\"" }, "default": "'--auto'", "description": "Sets the action the `commandFor` should take when this clickable is activated. See the documentation of particular components for the actions they support. - `--auto`: a default action for the target component. - `--show`: shows the target component. - `--hide`: hides the target component. - `--toggle`: toggles the target component. - `--copy`: copies the target ClipboardItem." }, { "name": "loading", "fieldName": "loading", "type": { "text": "boolean" }, "default": "false", "description": "Replaces content with a loading indicator while a background action is being performed. This also disables the Button." }, { "name": "href", "fieldName": "href", "type": { "text": "string" }, "description": "The URL to link to. - If set, it will navigate to the location specified by `href` after executing the `click` event. - If a `commandFor` is set, the `command` will be executed instead of the navigation." } ], "superclass": { "name": "ButtonBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/Button/ButtonBase" }, "customElement": true, "tagName": "s-button" } ] }, { "kind": "javascript-module", "path": "dist/components/ButtonGroup/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the button group component.", "name": "ButtonGroup", "slots": [ { "name": "", "description": "The buttons displayed within the button group component, which are arranged together as a cohesive set of related actions." }, { "name": "primary-action", "description": "The main action for this group, displayed with high visual emphasis. Accepts a single button with `variant=\"primary\"`. Use this for the primary action you want users to take. This can't be used when `gap=\"none\"`." }, { "name": "secondary-actions", "description": "Supporting actions displayed with less emphasis than the primary action. Accepts one or more button components with `variant=\"secondary\"` or `variant=\"auto\"`. Use these for alternative or less critical actions." } ], "members": [ { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose." }, { "kind": "field", "name": "gap", "type": { "text": "\"base\" | \"none\"" }, "default": "'base'", "description": "The spacing between buttons in the group. - `base`: Standard spacing that provides clear visual separation between buttons. - `none`: No spacing, creating a connected button group." } ], "attributes": [ { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose." }, { "name": "gap", "fieldName": "gap", "type": { "text": "\"base\" | \"none\"" }, "default": "'base'", "description": "The spacing between buttons in the group. - `base`: Standard spacing that provides clear visual separation between buttons. - `none`: No spacing, creating a connected button group." } ], "superclass": { "name": "ButtonGroupBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/ButtonGroup/ButtonGroupBase" }, "customElement": true, "tagName": "s-button-group" } ] }, { "kind": "javascript-module", "path": "dist/components/Checkbox/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the checkbox component.", "name": "Checkbox", "slots": [ { "name": "error" }, { "name": "details" } ], "members": [ { "kind": "field", "name": "indeterminate", "type": { "text": "boolean" }, "description": "Whether the checkbox displays in an indeterminate state (neither checked nor unchecked), typically used to indicate partial selection in hierarchical lists. This visual state takes priority over the `checked` prop in appearance only. The form submission value is still determined by the `checked` prop. If `indeterminate` has not been explicitly set and hasn't been modified by user interaction, it returns the value of `defaultIndeterminate`." }, { "kind": "field", "name": "defaultIndeterminate", "type": { "text": "boolean" }, "default": "false", "description": "The initial indeterminate state for uncontrolled components. Use this when you want the checkbox to start in an indeterminate state but don't need to control it afterward. This value applies until `indeterminate` is explicitly set or the user changes the checkbox state by clicking." }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "kind": "field", "name": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "The value used in form data when the control is checked." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the control, disallowing any interaction." }, { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label used for users using assistive technologies like screen readers. When set, any children or `label` supplied will not be announced. This can also be used to display a control without a visual label, while still providing context to users using screen readers." }, { "kind": "field", "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Whether the control is active." }, { "kind": "field", "name": "defaultChecked", "type": { "text": "boolean" }, "default": "false", "description": "Whether the control is active by default." }, { "kind": "field", "name": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "kind": "field", "name": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "kind": "field", "name": "label", "type": { "text": "any" }, "description": "Visual content to use as the control label." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "An identifier for the control that is unique within the nearest containing `Form` component." } ], "events": [ { "name": "change", "type": { "text": "CustomEvent" }, "description": "A callback fired when the checkbox state changes and the user has finished interacting with it." }, { "name": "input", "type": { "text": "CustomEvent" }, "description": "A callback fired when the checkbox state changes, including intermediate states during user interaction." }, { "name": "blur", "type": { "text": "CustomEvent" } } ], "attributes": [ { "name": "indeterminate", "fieldName": "indeterminate", "type": { "text": "boolean" }, "description": "Whether the checkbox displays in an indeterminate state (neither checked nor unchecked), typically used to indicate partial selection in hierarchical lists. This visual state takes priority over the `checked` prop in appearance only. The form submission value is still determined by the `checked` prop. If `indeterminate` has not been explicitly set and hasn't been modified by user interaction, it returns the value of `defaultIndeterminate`." }, { "name": "indeterminate", "fieldName": "defaultIndeterminate", "type": { "text": "boolean" }, "default": "false", "description": "The initial indeterminate state for uncontrolled components. Use this when you want the checkbox to start in an indeterminate state but don't need to control it afterward. This value applies until `indeterminate` is explicitly set or the user changes the checkbox state by clicking." }, { "name": "required", "fieldName": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "name": "labelaccessibilityvisibility", "fieldName": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "name": "value", "fieldName": "value", "type": { "text": "string" }, "description": "The value used in form data when the control is checked." }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the control, disallowing any interaction." }, { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label used for users using assistive technologies like screen readers. When set, any children or `label` supplied will not be announced. This can also be used to display a control without a visual label, while still providing context to users using screen readers." }, { "name": "checked", "fieldName": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Whether the control is active." }, { "name": "checked", "fieldName": "defaultChecked", "type": { "text": "boolean" }, "default": "false", "description": "Whether the control is active by default." }, { "name": "details", "fieldName": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "name": "error", "fieldName": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "name": "label", "fieldName": "label", "type": { "text": "any" }, "description": "Visual content to use as the control label." }, { "name": "name", "fieldName": "name", "type": { "text": "string" }, "description": "An identifier for the control that is unique within the nearest containing `Form` component." } ], "superclass": { "name": "CheckboxBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/Checkbox/CheckboxBase" }, "customElement": true, "tagName": "s-checkbox" } ] }, { "kind": "javascript-module", "path": "dist/components/Chip/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the chip component.", "name": "Chip", "slots": [ { "name": "", "description": "The text label displayed within the chip component, typically representing a selected filter, tag, or removable item." }, { "name": "graphic", "description": "An optional icon to display at the start of the chip. Accepts only icon components." } ], "members": [ { "kind": "field", "name": "color", "type": { "text": "\"subdued\" | \"base\" | \"strong\"" }, "default": "'base'", "description": "The color emphasis level that controls visual intensity." }, { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose." }, { "kind": "field", "name": "removable", "type": { "text": "boolean" }, "default": "false", "description": "Whether the chip is removable." } ], "events": [ { "name": "remove", "type": { "text": "CustomEvent" } } ], "attributes": [ { "name": "color", "fieldName": "color", "type": { "text": "\"subdued\" | \"base\" | \"strong\"" }, "default": "'base'", "description": "The color emphasis level that controls visual intensity." }, { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose." }, { "name": "removable", "fieldName": "removable", "type": { "text": "boolean" }, "default": "false", "description": "Whether the chip is removable." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-chip" } ] }, { "kind": "javascript-module", "path": "dist/components/Choice/index.js", "declarations": [ { "kind": "class", "description": "The choice component creates individual selectable options within a choice list. Use choice to define each option that merchants can select, supporting both single selection (radio buttons) and multiple selection (checkboxes) modes. Choice components support labels, help text, and custom content through slots, providing flexible option presentation within choice lists.", "name": "Choice", "slots": [ { "name": "", "description": "The label that identifies this selectable choice option to users. The label is produced by extracting and concatenating the text nodes from the provided content; any markup or element structure is ignored." }, { "name": "details", "description": "Additional text to provide context or guidance for the input. This text is displayed along with the input and its label to offer more information or instructions to the user." }, { "name": "secondary-content", "description": "Additional content to display below the choice label. Can include rich content like TextFields, Buttons, or other interactive components. Event handlers on React components are preserved." } ], "members": [ { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the control, disallowing any interaction." }, { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label used for users using assistive technologies like screen readers. When set, any children or `label` supplied will not be announced. This can also be used to display a control without a visual label, while still providing context to users using screen readers." }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "The value used in form data when the control is checked." }, { "kind": "field", "name": "selected", "type": { "text": "boolean" }, "default": "false", "description": "Whether the control is active." }, { "kind": "field", "name": "defaultSelected", "type": { "text": "boolean" }, "default": "false", "description": "Whether the control is active by default." } ], "attributes": [ { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the control, disallowing any interaction." }, { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label used for users using assistive technologies like screen readers. When set, any children or `label` supplied will not be announced. This can also be used to display a control without a visual label, while still providing context to users using screen readers." }, { "name": "value", "fieldName": "value", "type": { "text": "string" }, "description": "The value used in form data when the control is checked." }, { "name": "selected", "fieldName": "selected", "type": { "text": "boolean" }, "default": "false", "description": "Whether the control is active." }, { "name": "selected", "fieldName": "defaultSelected", "type": { "text": "boolean" }, "default": "false", "description": "Whether the control is active by default." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-choice" } ] }, { "kind": "javascript-module", "path": "dist/components/ChoiceList/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the choice list component.", "name": "ChoiceList", "slots": [ { "name": "", "description": "The choices a user can select from. Accepts choice components." } ], "members": [ { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field is disabled, preventing any user interaction. When `true`, the `disabled` property on any child choices is ignored." }, { "kind": "field", "name": "multiple", "type": { "text": "boolean" }, "default": "false", "description": "Whether multiple choices can be selected." }, { "kind": "field", "name": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "kind": "field", "name": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "kind": "field", "name": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "kind": "field", "name": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "kind": "field", "name": "values", "type": { "text": "string[]" }, "description": "An array of the `value`s of the selected options. This is a convenience prop for setting the `selected` prop on child options." }, { "kind": "field", "name": "formAssociated", "type": { "text": "boolean" }, "static": true, "default": "true", "inheritedFrom": { "name": "BaseClass", "module": "/app/libraries/javascript/polaris/admin-ui-components/src/components/ChoiceList/index.ts" } }, { "kind": "field", "name": "[internals]", "type": { "text": "ElementInternals" }, "privacy": "private", "inheritedFrom": { "name": "BaseClass", "module": "/app/libraries/javascript/polaris/admin-ui-components/src/components/ChoiceList/index.ts" } }, { "kind": "field", "inheritedFrom": { "name": "BaseClass", "module": "/app/libraries/javascript/polaris/admin-ui-components/src/components/ChoiceList/index.ts" } } ], "events": [ { "name": "change", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user has finished changing the value." }, { "name": "input", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user makes any changes to the value." } ], "attributes": [ { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field is disabled, preventing any user interaction. When `true`, the `disabled` property on any child choices is ignored." }, { "name": "multiple", "fieldName": "multiple", "type": { "text": "boolean" }, "default": "false", "description": "Whether multiple choices can be selected." }, { "name": "details", "fieldName": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "name": "error", "fieldName": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "name": "label", "fieldName": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "name": "name", "fieldName": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "name": "labelaccessibilityvisibility", "fieldName": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "name": "values", "fieldName": "values", "type": { "text": "string[]" }, "description": "An array of the `value`s of the selected options. This is a convenience prop for setting the `selected` prop on child options." } ], "superclass": { "name": "BaseClass", "module": "/app/libraries/javascript/polaris/admin-ui-components/src/components/ChoiceList/index.ts" }, "customElement": true, "tagName": "s-choice-list" } ] }, { "kind": "javascript-module", "path": "dist/components/Clickable/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the clickable component.", "name": "Clickable", "slots": [ { "name": "", "description": "The content displayed within the clickable component, which makes any content interactive and clickable without the semantic meaning of a button or link." } ], "members": [ { "kind": "field", "name": "loading", "type": { "text": "boolean" }, "description": "Whether the component is in a loading state, which indicates to assistive technology that an action is in progress and prevents interaction." }, { "kind": "field", "name": "lang", "type": { "text": "string" }, "default": "''", "description": "The language of the text content. Use this when the text is in a different language than the rest of the page, allowing assistive technologies such as screen readers to invoke the correct pronunciation. The value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "description": "Whether the component is disabled, preventing clicks and focus. When disabled, the `click` event won't fire and click events from child elements stop propagating immediately. Interactive child elements can still receive focus and be interacted with. This doesn't apply visual styling by default. You should apply disabled styling as needed." }, { "kind": "field", "name": "background", "type": { "text": "\"subdued\" | \"base\" | \"strong\" | \"transparent\"" }, "default": "'transparent'", "description": "The background color of the component." }, { "kind": "field", "name": "border", "type": { "text": "BorderShorthand" }, "default": "'none'", "description": "A border applied using shorthand syntax to specify width, color, and style in a single property." }, { "kind": "field", "name": "borderWidth", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty<\"base\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"none\">" }, "default": "'' - meaning no override", "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different widths per side." }, { "kind": "field", "name": "borderStyle", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty" }, "default": "'' - meaning no override", "description": "The visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different styles per side." }, { "kind": "field", "name": "borderColor", "type": { "text": "\"subdued\" | \"base\" | \"strong\"" }, "default": "'' - meaning no override", "description": "The color of the border using the design system's color scale. When set, this overrides the color value specified in the `border` property. Choose from `subdued`, `base`, or `strong` to match the visual emphasis needed." }, { "kind": "field", "name": "borderRadius", "type": { "text": "MaybeAllValuesShorthandProperty" }, "default": "'none'", "description": "The roundedness of the element's corners using the design system's radius scale. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different radii per corner. Use this to create rounded corners or fully rounded elements." }, { "kind": "field", "name": "padding", "type": { "text": "MaybeResponsive>" }, "default": "'none'", "description": "The padding applied to all edges of the component. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values: - 1 value applies to all sides - 2 values apply to block (top/bottom) and inline (left/right) - 3 values apply to block-start (top), inline (left/right), and block-end (bottom) - 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) *Examples:** `base`, `large none`, `base large-100 base small` Use `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingBlock", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The block-direction padding (top and bottom in horizontal writing modes). Accepts a single value for both sides or two space-separated values for block-start and block-end. *Example:** `large none` applies `large` to the top and `none` to the bottom. Overrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingBlockStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-start padding (top in horizontal writing modes). Overrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingBlockEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingInline", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The inline-direction padding (left and right in horizontal writing modes). Accepts a single value for both sides or two space-separated values for inline-start and inline-end. *Example:** `large none` applies `large` to the left and `none` to the right. Overrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingInlineStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingInlineEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "display", "type": { "text": "\"auto\" | \"none\"" }, "default": "'auto'", "description": "The outer [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) type of the component. The outer type sets a component's participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout). - `auto` the component's initial value. The actual value depends on the component and context. - `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers." }, { "kind": "field", "name": "blockSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes). Block size adjusts based on the writing direction: in horizontal layouts, it controls the height; in vertical layouts, it controls the width. This ensures consistent behavior across different text directions. Learn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size)." }, { "kind": "field", "name": "minBlockSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size)." }, { "kind": "field", "name": "maxBlockSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size)." }, { "kind": "field", "name": "inlineSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The width in horizontal writing modes, or height in vertical writing modes. Use this for flow-relative sizing that adapts to text direction. Learn more about [inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size)." }, { "kind": "field", "name": "minInlineSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size)." }, { "kind": "field", "name": "maxInlineSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size)." }, { "kind": "field", "name": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "kind": "field", "name": "accessibilityRole", "type": { "text": "\"generic\" | \"main\" | \"header\" | \"footer\" | \"section\" | \"region\" | \"aside\" | \"navigation\" | \"ordered-list\" | \"list-item\" | \"list-item-separator\" | \"unordered-list\" | \"separator\" | \"status\" | \"alert\" | \"presentation\" | \"none\"" }, "default": "'generic'", "description": "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." }, { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. Only use this when the element's content is not enough context for users using assistive technologies." }, { "kind": "field", "name": "overflow", "type": { "text": "\"visible\" | \"hidden\"" }, "default": "'visible'", "description": "Sets the overflow behavior of the element. - `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse. - `visible`: the content that extends beyond the element’s container is visible." }, { "kind": "field", "name": "type", "type": { "text": "\"button\" | \"reset\" | \"submit\"" }, "default": "'button'", "description": "The behavior of the Button. - `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form. - `button`: Used to indicate the component acts as a button, meaning it has no default action. - `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values). This property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set." }, { "kind": "field", "name": "interestFor", "type": { "text": "string" }, "description": "ID of a component that should respond to interest (e.g. hover and focus) on this component." }, { "kind": "field", "name": "download", "type": { "text": "string" }, "description": "Causes the browser to treat the linked URL as a download with the string being the file name. Download only works for same-origin URLs or the `blob:` and `data:` schemes." }, { "kind": "field", "name": "target", "type": { "text": "\"auto\" | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"" }, "default": "'auto'", "description": "Specifies where to display the linked URL." }, { "kind": "field", "name": "commandFor", "type": { "text": "string" }, "description": "ID of a component that should respond to activations (e.g. clicks) on this component. See `command` for how to control the behavior of the target." }, { "kind": "field", "name": "command", "type": { "text": "\"--auto\" | \"--show\" | \"--hide\" | \"--toggle\" | \"--copy\"" }, "default": "'--auto'", "description": "Sets the action the `commandFor` should take when this clickable is activated. See the documentation of particular components for the actions they support. - `--auto`: a default action for the target component. - `--show`: shows the target component. - `--hide`: hides the target component. - `--toggle`: toggles the target component. - `--copy`: copies the target ClipboardItem." }, { "kind": "field", "name": "href", "type": { "text": "string" }, "description": "The URL to link to. - If set, it will navigate to the location specified by `href` after executing the `click` event. - If a `commandFor` is set, the `command` will be executed instead of the navigation." } ], "events": [ { "name": "click", "type": { "text": "CustomEvent" }, "description": "A callback fired when the chip is clicked." }, { "name": "focus", "type": { "text": "CustomEvent" }, "description": "A callback fired when the chip receives focus." }, { "name": "blur", "type": { "text": "CustomEvent" }, "description": "A callback fired when the chip loses focus." } ], "attributes": [ { "name": "loading", "fieldName": "loading", "type": { "text": "boolean" }, "description": "Whether the component is in a loading state, which indicates to assistive technology that an action is in progress and prevents interaction." }, { "name": "lang", "fieldName": "lang", "type": { "text": "string" }, "default": "''", "description": "The language of the text content. Use this when the text is in a different language than the rest of the page, allowing assistive technologies such as screen readers to invoke the correct pronunciation. The value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)." }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "description": "Whether the component is disabled, preventing clicks and focus. When disabled, the `click` event won't fire and click events from child elements stop propagating immediately. Interactive child elements can still receive focus and be interacted with. This doesn't apply visual styling by default. You should apply disabled styling as needed." }, { "name": "background", "fieldName": "background", "type": { "text": "\"subdued\" | \"base\" | \"strong\" | \"transparent\"" }, "default": "'transparent'", "description": "The background color of the component." }, { "name": "border", "fieldName": "border", "type": { "text": "BorderShorthand" }, "default": "'none'", "description": "A border applied using shorthand syntax to specify width, color, and style in a single property." }, { "name": "borderwidth", "fieldName": "borderWidth", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty<\"base\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"none\">" }, "default": "'' - meaning no override", "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different widths per side." }, { "name": "borderstyle", "fieldName": "borderStyle", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty" }, "default": "'' - meaning no override", "description": "The visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different styles per side." }, { "name": "bordercolor", "fieldName": "borderColor", "type": { "text": "\"subdued\" | \"base\" | \"strong\"" }, "default": "'' - meaning no override", "description": "The color of the border using the design system's color scale. When set, this overrides the color value specified in the `border` property. Choose from `subdued`, `base`, or `strong` to match the visual emphasis needed." }, { "name": "borderradius", "fieldName": "borderRadius", "type": { "text": "MaybeAllValuesShorthandProperty" }, "default": "'none'", "description": "The roundedness of the element's corners using the design system's radius scale. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different radii per corner. Use this to create rounded corners or fully rounded elements." }, { "name": "padding", "fieldName": "padding", "type": { "text": "MaybeResponsive>" }, "default": "'none'", "description": "The padding applied to all edges of the component. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values: - 1 value applies to all sides - 2 values apply to block (top/bottom) and inline (left/right) - 3 values apply to block-start (top), inline (left/right), and block-end (bottom) - 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) *Examples:** `base`, `large none`, `base large-100 base small` Use `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddingblock", "fieldName": "paddingBlock", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The block-direction padding (top and bottom in horizontal writing modes). Accepts a single value for both sides or two space-separated values for block-start and block-end. *Example:** `large none` applies `large` to the top and `none` to the bottom. Overrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddingblockstart", "fieldName": "paddingBlockStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-start padding (top in horizontal writing modes). Overrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddingblockend", "fieldName": "paddingBlockEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddinginline", "fieldName": "paddingInline", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The inline-direction padding (left and right in horizontal writing modes). Accepts a single value for both sides or two space-separated values for inline-start and inline-end. *Example:** `large none` applies `large` to the left and `none` to the right. Overrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddinginlinestart", "fieldName": "paddingInlineStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddinginlineend", "fieldName": "paddingInlineEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "display", "fieldName": "display", "type": { "text": "\"auto\" | \"none\"" }, "default": "'auto'", "description": "The outer [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) type of the component. The outer type sets a component's participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout). - `auto` the component's initial value. The actual value depends on the component and context. - `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers." }, { "name": "blocksize", "fieldName": "blockSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes). Block size adjusts based on the writing direction: in horizontal layouts, it controls the height; in vertical layouts, it controls the width. This ensures consistent behavior across different text directions. Learn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size)." }, { "name": "minblocksize", "fieldName": "minBlockSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size)." }, { "name": "maxblocksize", "fieldName": "maxBlockSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size)." }, { "name": "inlinesize", "fieldName": "inlineSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The width in horizontal writing modes, or height in vertical writing modes. Use this for flow-relative sizing that adapts to text direction. Learn more about [inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size)." }, { "name": "mininlinesize", "fieldName": "minInlineSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size)." }, { "name": "maxinlinesize", "fieldName": "maxInlineSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size)." }, { "name": "accessibilityvisibility", "fieldName": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "name": "accessibilityrole", "fieldName": "accessibilityRole", "type": { "text": "\"generic\" | \"main\" | \"header\" | \"footer\" | \"section\" | \"region\" | \"aside\" | \"navigation\" | \"ordered-list\" | \"list-item\" | \"list-item-separator\" | \"unordered-list\" | \"separator\" | \"status\" | \"alert\" | \"presentation\" | \"none\"" }, "default": "'generic'", "description": "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." }, { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. Only use this when the element's content is not enough context for users using assistive technologies." }, { "name": "overflow", "fieldName": "overflow", "type": { "text": "\"visible\" | \"hidden\"" }, "default": "'visible'", "description": "Sets the overflow behavior of the element. - `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse. - `visible`: the content that extends beyond the element’s container is visible." }, { "name": "type", "fieldName": "type", "type": { "text": "\"button\" | \"reset\" | \"submit\"" }, "default": "'button'", "description": "The behavior of the Button. - `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form. - `button`: Used to indicate the component acts as a button, meaning it has no default action. - `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values). This property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set." }, { "name": "interestfor", "fieldName": "interestFor", "type": { "text": "string" }, "description": "ID of a component that should respond to interest (e.g. hover and focus) on this component." }, { "name": "download", "fieldName": "download", "type": { "text": "string" }, "description": "Causes the browser to treat the linked URL as a download with the string being the file name. Download only works for same-origin URLs or the `blob:` and `data:` schemes." }, { "name": "target", "fieldName": "target", "type": { "text": "\"auto\" | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"" }, "default": "'auto'", "description": "Specifies where to display the linked URL." }, { "name": "commandfor", "fieldName": "commandFor", "type": { "text": "string" }, "description": "ID of a component that should respond to activations (e.g. clicks) on this component. See `command` for how to control the behavior of the target." }, { "name": "command", "fieldName": "command", "type": { "text": "\"--auto\" | \"--show\" | \"--hide\" | \"--toggle\" | \"--copy\"" }, "default": "'--auto'", "description": "Sets the action the `commandFor` should take when this clickable is activated. See the documentation of particular components for the actions they support. - `--auto`: a default action for the target component. - `--show`: shows the target component. - `--hide`: hides the target component. - `--toggle`: toggles the target component. - `--copy`: copies the target ClipboardItem." }, { "name": "href", "fieldName": "href", "type": { "text": "string" }, "description": "The URL to link to. - If set, it will navigate to the location specified by `href` after executing the `click` event. - If a `commandFor` is set, the `command` will be executed instead of the navigation." } ], "mixins": [ { "name": "PreactOverlayControl", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/mixins/PreactOverlayControl" } ], "superclass": { "name": "BoxElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/BoxElement" }, "customElement": true, "tagName": "s-clickable" } ] }, { "kind": "javascript-module", "path": "dist/components/ClickableChip/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the clickable chip component.", "name": "ClickableChip", "slots": [ { "name": "", "description": "The text label displayed within the chip, which represents an interactive filter, tag, or selectable item." }, { "name": "graphic", "description": "An optional icon to display at the start of the chip. Accepts only icon components." } ], "members": [ { "kind": "field", "name": "hidden", "type": { "text": "boolean" }, "default": "false", "description": "Whether the chip is hidden from view. When using controlled component pattern with `removable` chips, update this property when the `remove` event fires. For non-removable chips, manually toggle this property to show or hide the chip." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Whether the chip is disabled, preventing any user interaction." }, { "kind": "field", "name": "href", "type": { "text": "string" }, "description": "The URL to navigate to when clicked. The `click` event fires first, then navigation occurs. If `commandFor` is also set, the command executes instead of navigation." }, { "kind": "field", "name": "removable", "type": { "text": "boolean" }, "default": "false", "description": "Whether the chip displays a remove button for dismissal. When clicked, the `remove` callback fires." }, { "kind": "field", "name": "color", "type": { "text": "\"subdued\" | \"base\" | \"strong\"" }, "default": "'base'", "description": "Modify the color to be more or less intense." }, { "kind": "field", "name": "interestFor", "type": { "text": "string" }, "description": "ID of a component that should respond to interest (e.g. hover and focus) on this component." }, { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or contents of the Chip. It will be read to users using assistive technologies such as screen readers." }, { "kind": "field", "name": "commandFor", "type": { "text": "string" }, "description": "ID of a component that should respond to activations (e.g. clicks) on this component. See `command` for how to control the behavior of the target." }, { "kind": "field", "name": "command", "type": { "text": "\"--auto\" | \"--show\" | \"--hide\" | \"--toggle\" | \"--copy\"" }, "default": "'--auto'", "description": "Sets the action the `commandFor` should take when this clickable is activated. See the documentation of particular components for the actions they support. - `--auto`: a default action for the target component. - `--show`: shows the target component. - `--hide`: hides the target component. - `--toggle`: toggles the target component. - `--copy`: copies the target ClipboardItem." } ], "events": [ { "name": "click", "type": { "text": "CustomEvent" }, "description": "A callback fired when the chip is clicked." }, { "name": "remove", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user clicks the remove button on the chip." }, { "name": "afterhide", "type": { "text": "CustomEvent" }, "description": "A callback fired when the chip is completely hidden, after any hide animations have completed." } ], "attributes": [ { "name": "hidden", "fieldName": "hidden", "type": { "text": "boolean" }, "default": "false", "description": "Whether the chip is hidden from view. When using controlled component pattern with `removable` chips, update this property when the `remove` event fires. For non-removable chips, manually toggle this property to show or hide the chip." }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Whether the chip is disabled, preventing any user interaction." }, { "name": "href", "fieldName": "href", "type": { "text": "string" }, "description": "The URL to navigate to when clicked. The `click` event fires first, then navigation occurs. If `commandFor` is also set, the command executes instead of navigation." }, { "name": "removable", "fieldName": "removable", "type": { "text": "boolean" }, "default": "false", "description": "Whether the chip displays a remove button for dismissal. When clicked, the `remove` callback fires." }, { "name": "color", "fieldName": "color", "type": { "text": "\"subdued\" | \"base\" | \"strong\"" }, "default": "'base'", "description": "Modify the color to be more or less intense." }, { "name": "interestfor", "fieldName": "interestFor", "type": { "text": "string" }, "description": "ID of a component that should respond to interest (e.g. hover and focus) on this component." }, { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or contents of the Chip. It will be read to users using assistive technologies such as screen readers." }, { "name": "commandfor", "fieldName": "commandFor", "type": { "text": "string" }, "description": "ID of a component that should respond to activations (e.g. clicks) on this component. See `command` for how to control the behavior of the target." }, { "name": "command", "fieldName": "command", "type": { "text": "\"--auto\" | \"--show\" | \"--hide\" | \"--toggle\" | \"--copy\"" }, "default": "'--auto'", "description": "Sets the action the `commandFor` should take when this clickable is activated. See the documentation of particular components for the actions they support. - `--auto`: a default action for the target component. - `--show`: shows the target component. - `--hide`: hides the target component. - `--toggle`: toggles the target component. - `--copy`: copies the target ClipboardItem." } ], "superclass": { "name": "ClickableChipBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/ClickableChip/ClickableChipBase" }, "customElement": true, "tagName": "s-clickable-chip" } ] }, { "kind": "javascript-module", "path": "dist/components/ColorField/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the color field component.", "name": "ColorField", "slots": [ { "name": "error" }, { "name": "details" } ], "members": [ { "kind": "field", "name": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "The current value for the field. If omitted, the field will be empty." }, { "kind": "field", "name": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "kind": "field", "name": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "kind": "field", "name": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "kind": "field", "name": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "kind": "field", "name": "defaultValue", "type": { "text": "string" }, "description": "The default value for the field." }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "kind": "field", "name": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "kind": "field", "name": "autocomplete", "type": { "text": "\"on\" | \"off\"" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "kind": "field", "name": "alpha", "type": { "text": "boolean" }, "default": "false", "description": "Allow user to select an alpha value." } ], "events": [ { "name": "input", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user makes changes to the field value. This fires before `onChange`." }, { "name": "change", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user has finished editing the field, such as when they blur the field." }, { "name": "focus", "type": { "text": "CustomEvent" }, "description": "A callback fired when the field receives focus." }, { "name": "blur", "type": { "text": "CustomEvent" }, "description": "A callback fired when the field loses focus." } ], "attributes": [ { "name": "id", "fieldName": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "name": "name", "fieldName": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "name": "value", "fieldName": "value", "type": { "text": "string" }, "description": "The current value for the field. If omitted, the field will be empty." }, { "name": "details", "fieldName": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "name": "error", "fieldName": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "name": "label", "fieldName": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "name": "required", "fieldName": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "name": "labelaccessibilityvisibility", "fieldName": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "name": "value", "fieldName": "defaultValue", "type": { "text": "string" }, "description": "The default value for the field." }, { "name": "placeholder", "fieldName": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "name": "readonly", "fieldName": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "name": "autocomplete", "fieldName": "autocomplete", "type": { "text": "\"on\" | \"off\"" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "name": "alpha", "fieldName": "alpha", "type": { "text": "boolean" }, "default": "false", "description": "Allow user to select an alpha value." } ], "superclass": { "name": "ColorFieldBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/ColorField/ColorFieldBase" }, "customElement": true, "tagName": "s-color-field" } ] }, { "kind": "javascript-module", "path": "dist/components/ColorPicker/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the color picker component.", "name": "ColorPicker", "members": [ { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "The currently selected color value. Accepts multiple input formats: - Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits) - RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated) - HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)` Returns an empty string if the value is invalid. The `change` event always emits values in hex format." }, { "kind": "field", "name": "defaultValue", "type": { "text": "string" }, "description": "The initial color value when the field first loads. Unlike `placeholder`, this is a real value that the user can edit and that gets submitted with the form. Once the user starts interacting, their input replaces it. Changing this property after the field has loaded has no effect. To update the field value at any time, use `value` instead." }, { "kind": "field", "name": "alpha", "type": { "text": "boolean" }, "default": "false", "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors." }, { "kind": "field", "name": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "kind": "field", "name": "formAssociated", "type": { "text": "boolean" }, "static": true, "default": "true", "inheritedFrom": { "name": "BaseClass", "module": "/app/libraries/javascript/polaris/admin-ui-components/src/components/ChoiceList/index.ts" } }, { "kind": "field", "name": "[internals]", "type": { "text": "ElementInternals" }, "privacy": "private", "inheritedFrom": { "name": "BaseClass", "module": "/app/libraries/javascript/polaris/admin-ui-components/src/components/ChoiceList/index.ts" } }, { "kind": "field", "inheritedFrom": { "name": "BaseClass", "module": "/app/libraries/javascript/polaris/admin-ui-components/src/components/ChoiceList/index.ts" } } ], "events": [ { "name": "input", "type": { "text": "CustomEvent" } }, { "name": "change", "type": { "text": "CustomEvent" } } ], "attributes": [ { "name": "value", "fieldName": "value", "type": { "text": "string" }, "description": "The currently selected color value. Accepts multiple input formats: - Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits) - RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated) - HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)` Returns an empty string if the value is invalid. The `change` event always emits values in hex format." }, { "name": "value", "fieldName": "defaultValue", "type": { "text": "string" }, "description": "The initial color value when the field first loads. Unlike `placeholder`, this is a real value that the user can edit and that gets submitted with the form. Once the user starts interacting, their input replaces it. Changing this property after the field has loaded has no effect. To update the field value at any time, use `value` instead." }, { "name": "alpha", "fieldName": "alpha", "type": { "text": "boolean" }, "default": "false", "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors." }, { "name": "id", "fieldName": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "name": "name", "fieldName": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." } ], "superclass": { "name": "BaseClass", "module": "/app/libraries/javascript/polaris/admin-ui-components/src/components/ColorPicker/index.ts" }, "customElement": true, "tagName": "s-color-picker" } ] }, { "kind": "javascript-module", "path": "dist/components/DateField/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the date field component.", "name": "DateField", "slots": [ { "name": "error" }, { "name": "details" } ], "members": [ { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "\"\"", "description": "The currently selected date in `YYYY-MM-DD` format. An empty string means no date is selected." }, { "kind": "field", "name": "defaultValue", "type": { "text": "string" }, "default": "\"\"", "description": "The initial date value when the field first renders, in `YYYY-MM-DD` format. An empty string means no date is initially selected." }, { "kind": "field", "name": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "kind": "field", "name": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "kind": "field", "name": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "kind": "field", "name": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "kind": "field", "name": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "kind": "field", "name": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "kind": "field", "name": "autocomplete", "type": { "text": "\"bday-day\" | \"bday-month\" | \"bday-year\" | \"bday\" | \"cc-expiry-month\" | \"cc-expiry-year\" | \"cc-expiry\"" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "kind": "field", "name": "view", "type": { "text": "string" }, "description": "Displayed month in `YYYY-MM` format. `onViewChange` is called when this value changes. Defaults to `defaultView`." }, { "kind": "field", "name": "defaultView", "type": { "text": "string" }, "description": "Default month to display in `YYYY-MM` format. This value is used until `view` is set, either directly or as a result of user interaction. Defaults to the current month in the user's locale." }, { "kind": "field", "name": "allow", "type": { "text": "string" }, "default": "\"\"", "description": "Dates that can be selected. A comma-separated list of dates, date ranges. Whitespace is allowed after commas. The default `''` allows all dates. - Dates in `YYYY-MM-DD` format allow a single date. - Dates in `YYYY-MM` format allow a whole month. - Dates in `YYYY` format allow a whole year. - Ranges are expressed as `start--end`. - Ranges are inclusive. - If either `start` or `end` is omitted, the range is unbounded in that direction. - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value. So `2024--` is equivalent to `2024-01-01--`. - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value. So `--2024` is equivalent to `--2024-12-31`. - Whitespace is allowed either side of `--`." }, { "kind": "field", "name": "disallow", "type": { "text": "string" }, "default": "\"\"", "description": "Dates that cannot be selected. These subtract from `allow`. A comma-separated list of dates, date ranges. Whitespace is allowed after commas. The default `''` has no effect on `allow`. - Dates in `YYYY-MM-DD` format disallow a single date. - Dates in `YYYY-MM` format disallow a whole month. - Dates in `YYYY` format disallow a whole year. - Ranges are expressed as `start--end`. - Ranges are inclusive. - If either `start` or `end` is omitted, the range is unbounded in that direction. - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value. So `2024--` is equivalent to `2024-01-01--`. - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value. So `--2024` is equivalent to `--2024-12-31`. - Whitespace is allowed either side of `--`." }, { "kind": "field", "name": "allowDays", "type": { "text": "string" }, "default": "\"\"", "description": "Days of the week that can be selected. These intersect with the result of `allow` and `disallow`. A comma-separated list of days. Whitespace is allowed after commas. The default `''` has no effect on the result of `allow` and `disallow`. Days are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`." }, { "kind": "field", "name": "disallowDays", "type": { "text": "string" }, "default": "\"\"", "description": "Days of the week that cannot be selected. This subtracts from `allowDays`, and intersects with the result of `allow` and `disallow`. A comma-separated list of days. Whitespace is allowed after commas. The default `''` has no effect on `allowDays`. Days are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`." } ], "events": [ { "name": "blur", "type": { "text": "CustomEvent" }, "description": "A callback fired when the date field loses focus." }, { "name": "change", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user has finished editing the date and the field value changes." }, { "name": "focus", "type": { "text": "CustomEvent" }, "description": "A callback fired when the date field receives focus." }, { "name": "input", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user makes any changes to the date value." }, { "name": "invalid", "type": { "text": "CustomEvent" }, "description": "A callback fired when the field contains an invalid date." }, { "name": "viewchange", "type": { "text": "CustomEvent" }, "description": "A callback fired when the calendar view changes, such as when navigating between months." } ], "attributes": [ { "name": "value", "fieldName": "value", "type": { "text": "string" }, "default": "\"\"", "description": "The currently selected date in `YYYY-MM-DD` format. An empty string means no date is selected." }, { "name": "value", "fieldName": "defaultValue", "type": { "text": "string" }, "default": "\"\"", "description": "The initial date value when the field first renders, in `YYYY-MM-DD` format. An empty string means no date is initially selected." }, { "name": "id", "fieldName": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "name": "name", "fieldName": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "name": "details", "fieldName": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "name": "error", "fieldName": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "name": "label", "fieldName": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "name": "required", "fieldName": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "name": "labelaccessibilityvisibility", "fieldName": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "name": "placeholder", "fieldName": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "name": "readonly", "fieldName": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "name": "autocomplete", "fieldName": "autocomplete", "type": { "text": "\"bday-day\" | \"bday-month\" | \"bday-year\" | \"bday\" | \"cc-expiry-month\" | \"cc-expiry-year\" | \"cc-expiry\"" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "name": "view", "fieldName": "view", "type": { "text": "string" }, "description": "Displayed month in `YYYY-MM` format. `onViewChange` is called when this value changes. Defaults to `defaultView`." }, { "name": "view", "fieldName": "defaultView", "type": { "text": "string" }, "description": "Default month to display in `YYYY-MM` format. This value is used until `view` is set, either directly or as a result of user interaction. Defaults to the current month in the user's locale." }, { "name": "allow", "fieldName": "allow", "type": { "text": "string" }, "default": "\"\"", "description": "Dates that can be selected. A comma-separated list of dates, date ranges. Whitespace is allowed after commas. The default `''` allows all dates. - Dates in `YYYY-MM-DD` format allow a single date. - Dates in `YYYY-MM` format allow a whole month. - Dates in `YYYY` format allow a whole year. - Ranges are expressed as `start--end`. - Ranges are inclusive. - If either `start` or `end` is omitted, the range is unbounded in that direction. - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value. So `2024--` is equivalent to `2024-01-01--`. - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value. So `--2024` is equivalent to `--2024-12-31`. - Whitespace is allowed either side of `--`." }, { "name": "disallow", "fieldName": "disallow", "type": { "text": "string" }, "default": "\"\"", "description": "Dates that cannot be selected. These subtract from `allow`. A comma-separated list of dates, date ranges. Whitespace is allowed after commas. The default `''` has no effect on `allow`. - Dates in `YYYY-MM-DD` format disallow a single date. - Dates in `YYYY-MM` format disallow a whole month. - Dates in `YYYY` format disallow a whole year. - Ranges are expressed as `start--end`. - Ranges are inclusive. - If either `start` or `end` is omitted, the range is unbounded in that direction. - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value. So `2024--` is equivalent to `2024-01-01--`. - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value. So `--2024` is equivalent to `--2024-12-31`. - Whitespace is allowed either side of `--`." }, { "name": "allowdays", "fieldName": "allowDays", "type": { "text": "string" }, "default": "\"\"", "description": "Days of the week that can be selected. These intersect with the result of `allow` and `disallow`. A comma-separated list of days. Whitespace is allowed after commas. The default `''` has no effect on the result of `allow` and `disallow`. Days are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`." }, { "name": "disallowdays", "fieldName": "disallowDays", "type": { "text": "string" }, "default": "\"\"", "description": "Days of the week that cannot be selected. This subtracts from `allowDays`, and intersects with the result of `allow` and `disallow`. A comma-separated list of days. Whitespace is allowed after commas. The default `''` has no effect on `allowDays`. Days are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`." } ], "superclass": { "name": "DateFieldBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/DateField/DateFieldBase" }, "customElement": true, "tagName": "s-date-field" } ] }, { "kind": "javascript-module", "path": "dist/components/DatePicker/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the date picker component.", "name": "DatePicker", "members": [ { "kind": "field", "name": "type", "type": { "text": "\"single\" | \"range\"" }, "default": "\"single\"", "description": "The type of date selection allowed. - `single`: Select a single date - `range`: Select a date range" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "\"\"", "description": "The currently selected date(s). An empty string means no date is selected. - Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"` - Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`" }, { "kind": "field", "name": "defaultValue", "type": { "text": "string" }, "default": "\"\"", "description": "The initially selected date(s) when the component first renders. An empty string means no date is initially selected. - Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"` - Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`" }, { "kind": "field", "name": "allow", "type": { "text": "string" }, "default": "\"\"", "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates. *Formats:** - `YYYY-MM-DD`: Single date - `YYYY-MM`: Whole month - `YYYY`: Whole year - `start--end`: Date range (inclusive, unbounded if start/end omitted) *Examples:** - `2024-02--2025`: February 2024 through end of 2025 - `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024" }, { "kind": "field", "name": "allowDays", "type": { "text": "string" }, "default": "\"\"", "description": "Specifies which days of the week can be selected as a comma-separated list. Further restricts dates from `allow` and `disallow`. An empty string (default) has no effect. *Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday` *Example:** `saturday, sunday` (only weekends)" }, { "kind": "field", "name": "disallow", "type": { "text": "string" }, "default": "\"\"", "description": "Specifies which dates can't be selected as a comma-separated list. These dates are excluded from those specified in `allow`. An empty string (default) has no effect. *Formats:** - `YYYY-MM-DD`: Single date - `YYYY-MM`: Whole month - `YYYY`: Whole year - `start--end`: Date range (inclusive, unbounded if start/end omitted) *Examples:** - `--2024-02`: All dates before February 2024 - `2024-05-09, 2024-05-11`: May 9th and 11th, 2024" }, { "kind": "field", "name": "disallowDays", "type": { "text": "string" }, "default": "\"\"", "description": "Specifies which days of the week can't be selected as a comma-separated list. Excludes days from `allowDays` and intersects with `allow` and `disallow`. An empty string (default) has no effect. *Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday` *Example:** `saturday, sunday` (no weekends)" }, { "kind": "field", "name": "view", "type": { "text": "string" }, "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." }, { "kind": "field", "name": "defaultView", "type": { "text": "string" }, "description": "The default month to display in `YYYY-MM` format. Used until the `view` callback is set by user interaction or programmatically. Defaults to the current month in the user's locale." }, { "kind": "field", "name": "visibleMonths", "type": { "text": "\"auto\" | \"1\" | \"2\"" }, "default": "'auto'", "description": "Controls how many months are displayed. - `'auto'`: Context-driven. Today this renders a single month, matching `'1'`. - `'1'`: Renders one month at a time. - `'2'`: Renders two consecutive months side-by-side." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." } ], "events": [ { "name": "viewchange", "type": { "text": "CustomEvent" }, "description": "A callback fired when the calendar view changes, such as when navigating between months." }, { "name": "focus", "type": { "text": "CustomEvent" }, "description": "A callback fired when the date picker receives focus." }, { "name": "blur", "type": { "text": "CustomEvent" }, "description": "A callback fired when the date picker loses focus." }, { "name": "input", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user makes any changes to the selected date." }, { "name": "change", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user has finished selecting a date and the value changes." } ], "attributes": [ { "name": "type", "fieldName": "type", "type": { "text": "\"single\" | \"range\"" }, "default": "\"single\"", "description": "The type of date selection allowed. - `single`: Select a single date - `range`: Select a date range" }, { "name": "value", "fieldName": "value", "type": { "text": "string" }, "default": "\"\"", "description": "The currently selected date(s). An empty string means no date is selected. - Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"` - Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`" }, { "name": "value", "fieldName": "defaultValue", "type": { "text": "string" }, "default": "\"\"", "description": "The initially selected date(s) when the component first renders. An empty string means no date is initially selected. - Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"` - Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`" }, { "name": "allow", "fieldName": "allow", "type": { "text": "string" }, "default": "\"\"", "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates. *Formats:** - `YYYY-MM-DD`: Single date - `YYYY-MM`: Whole month - `YYYY`: Whole year - `start--end`: Date range (inclusive, unbounded if start/end omitted) *Examples:** - `2024-02--2025`: February 2024 through end of 2025 - `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024" }, { "name": "allowdays", "fieldName": "allowDays", "type": { "text": "string" }, "default": "\"\"", "description": "Specifies which days of the week can be selected as a comma-separated list. Further restricts dates from `allow` and `disallow`. An empty string (default) has no effect. *Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday` *Example:** `saturday, sunday` (only weekends)" }, { "name": "disallow", "fieldName": "disallow", "type": { "text": "string" }, "default": "\"\"", "description": "Specifies which dates can't be selected as a comma-separated list. These dates are excluded from those specified in `allow`. An empty string (default) has no effect. *Formats:** - `YYYY-MM-DD`: Single date - `YYYY-MM`: Whole month - `YYYY`: Whole year - `start--end`: Date range (inclusive, unbounded if start/end omitted) *Examples:** - `--2024-02`: All dates before February 2024 - `2024-05-09, 2024-05-11`: May 9th and 11th, 2024" }, { "name": "disallowdays", "fieldName": "disallowDays", "type": { "text": "string" }, "default": "\"\"", "description": "Specifies which days of the week can't be selected as a comma-separated list. Excludes days from `allowDays` and intersects with `allow` and `disallow`. An empty string (default) has no effect. *Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday` *Example:** `saturday, sunday` (no weekends)" }, { "name": "view", "fieldName": "view", "type": { "text": "string" }, "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." }, { "name": "view", "fieldName": "defaultView", "type": { "text": "string" }, "description": "The default month to display in `YYYY-MM` format. Used until the `view` callback is set by user interaction or programmatically. Defaults to the current month in the user's locale." }, { "name": "visiblemonths", "fieldName": "visibleMonths", "type": { "text": "\"auto\" | \"1\" | \"2\"" }, "default": "'auto'", "description": "Controls how many months are displayed. - `'auto'`: Context-driven. Today this renders a single month, matching `'1'`. - `'1'`: Renders one month at a time. - `'2'`: Renders two consecutive months side-by-side." }, { "name": "name", "fieldName": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." } ], "superclass": { "name": "DatePickerBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/DatePicker/DatePickerBase" }, "customElement": true, "tagName": "s-date-picker" } ] }, { "kind": "javascript-module", "path": "dist/components/Divider/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the divider component.", "name": "Divider", "members": [ { "kind": "field", "name": "direction", "type": { "text": "\"block\" | \"inline\"" }, "default": "'inline'", "description": "The orientation of the divider line, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values). - `inline`: Horizontal divider for separating vertically stacked content - `block`: Vertical divider for separating horizontally arranged content" }, { "kind": "field", "name": "color", "type": { "text": "\"base\" | \"strong\"" }, "default": "'base'", "description": "The visual prominence of the divider line. - `base`: Standard divider for most separations (default) - `strong`: More prominent divider for major section breaks" } ], "attributes": [ { "name": "direction", "fieldName": "direction", "type": { "text": "\"block\" | \"inline\"" }, "default": "'inline'", "description": "The orientation of the divider line, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values). - `inline`: Horizontal divider for separating vertically stacked content - `block`: Vertical divider for separating horizontally arranged content" }, { "name": "color", "fieldName": "color", "type": { "text": "\"base\" | \"strong\"" }, "default": "'base'", "description": "The visual prominence of the divider line. - `base`: Standard divider for most separations (default) - `strong`: More prominent divider for major section breaks" } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-divider" } ] }, { "kind": "javascript-module", "path": "dist/components/DropZone/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the drop zone component.", "name": "DropZone", "slots": [ { "name": "", "description": "The content to include inside the drop zone container" } ], "members": [ { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or contents of the item. When set, it will be announced to buyers using assistive technologies and will provide them with more context." }, { "kind": "field", "name": "multiple", "type": { "text": "boolean" }, "default": "false", "description": "Whether multiple files can be selected or dropped at once." }, { "kind": "field", "name": "accept", "type": { "text": "string" }, "default": "''", "description": "A string representing the types of files that are accepted by the drop zone. This string is a comma-separated list of unique file type specifiers which can be one of the following: - A file extension starting with a period (\".\") character (e.g. .jpg, .pdf, .doc) - A valid MIME type string with no extensions If omitted, all file types are accepted." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "kind": "field", "name": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "kind": "field", "name": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "kind": "field", "name": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "''", "description": "A string that represents the path to the selected file(s). If no file is selected yet, the value is an empty string (\"\"). When the user selected multiple files, the value represents the first file in the list of files they selected. The value is always the file's name prefixed with \"C:\\fakepath\\\", which isn't the real path of the file." }, { "kind": "field", "name": "files", "type": { "text": "readonly File[]" }, "default": "[]", "description": "An array of File objects representing the files currently selected by the user. This property is read-only and cannot be directly modified. To clear the selected files, set the `value` prop to an empty string or null." } ], "events": [ { "name": "change", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user has finished selecting files and the value changes." }, { "name": "input", "type": { "text": "CustomEvent" }, "description": "A callback fired when files are selected or dropped." }, { "name": "droprejected", "type": { "text": "CustomEvent" }, "description": "A callback fired when a dropped file is rejected due to file type or size restrictions." } ], "attributes": [ { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or contents of the item. When set, it will be announced to buyers using assistive technologies and will provide them with more context." }, { "name": "multiple", "fieldName": "multiple", "type": { "text": "boolean" }, "default": "false", "description": "Whether multiple files can be selected or dropped at once." }, { "name": "accept", "fieldName": "accept", "type": { "text": "string" }, "default": "''", "description": "A string representing the types of files that are accepted by the drop zone. This string is a comma-separated list of unique file type specifiers which can be one of the following: - A file extension starting with a period (\".\") character (e.g. .jpg, .pdf, .doc) - A valid MIME type string with no extensions If omitted, all file types are accepted." }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "name": "error", "fieldName": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "name": "label", "fieldName": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "name": "required", "fieldName": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "name": "name", "fieldName": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "name": "labelaccessibilityvisibility", "fieldName": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "name": "value", "fieldName": "value", "type": { "text": "string" }, "default": "''", "description": "A string that represents the path to the selected file(s). If no file is selected yet, the value is an empty string (\"\"). When the user selected multiple files, the value represents the first file in the list of files they selected. The value is always the file's name prefixed with \"C:\\fakepath\\\", which isn't the real path of the file." }, { "name": "files", "fieldName": "files", "type": { "text": "readonly File[]" }, "default": "[]", "description": "An array of File objects representing the files currently selected by the user. This property is read-only and cannot be directly modified. To clear the selected files, set the `value` prop to an empty string or null." } ], "superclass": { "name": "DropZoneBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/DropZone/DropZoneBase" }, "customElement": true, "tagName": "s-drop-zone" } ] }, { "kind": "javascript-module", "path": "dist/components/EmailField/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the email field component.", "name": "EmailField", "slots": [ { "name": "error" }, { "name": "details" } ], "members": [ { "kind": "field", "name": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "The current value for the field. If omitted, the field will be empty." }, { "kind": "field", "name": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "kind": "field", "name": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "kind": "field", "name": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "kind": "field", "name": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "kind": "field", "name": "defaultValue", "type": { "text": "string" }, "description": "The default value for the field." }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "kind": "field", "name": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "kind": "field", "name": "autocomplete", "type": { "text": "\"email\" | \"home email\" | \"mobile email\" | \"fax email\" | \"pager email\" | \"on\" | \"off\" | \"shipping email\" | \"shipping home email\" | \"shipping mobile email\" | \"shipping fax email\" | \"shipping pager email\" | \"billing email\" | \"billing home email\" | \"billing mobile email\" | \"billing fax email\" | \"billing pager email\"" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "kind": "field", "name": "maxLength", "type": { "text": "number" }, "default": "Infinity", "description": "Specifies the maximum number of characters allowed." }, { "kind": "field", "name": "minLength", "type": { "text": "number" }, "default": "0", "description": "Specifies the min number of characters allowed." } ], "events": [ { "name": "input", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user makes changes to the field value. This fires before `onChange`." }, { "name": "change", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user has finished editing the field, such as when they blur the field." }, { "name": "focus", "type": { "text": "CustomEvent" }, "description": "A callback fired when the field receives focus." }, { "name": "blur", "type": { "text": "CustomEvent" }, "description": "A callback fired when the field loses focus." } ], "attributes": [ { "name": "id", "fieldName": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "name": "name", "fieldName": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "name": "value", "fieldName": "value", "type": { "text": "string" }, "description": "The current value for the field. If omitted, the field will be empty." }, { "name": "details", "fieldName": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "name": "error", "fieldName": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "name": "label", "fieldName": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "name": "required", "fieldName": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "name": "labelaccessibilityvisibility", "fieldName": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "name": "value", "fieldName": "defaultValue", "type": { "text": "string" }, "description": "The default value for the field." }, { "name": "placeholder", "fieldName": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "name": "readonly", "fieldName": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "name": "autocomplete", "fieldName": "autocomplete", "type": { "text": "\"email\" | \"home email\" | \"mobile email\" | \"fax email\" | \"pager email\" | \"on\" | \"off\" | \"shipping email\" | \"shipping home email\" | \"shipping mobile email\" | \"shipping fax email\" | \"shipping pager email\" | \"billing email\" | \"billing home email\" | \"billing mobile email\" | \"billing fax email\" | \"billing pager email\"" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "name": "maxlength", "fieldName": "maxLength", "type": { "text": "number" }, "default": "Infinity", "description": "Specifies the maximum number of characters allowed." }, { "name": "minlength", "fieldName": "minLength", "type": { "text": "number" }, "default": "0", "description": "Specifies the min number of characters allowed." } ], "superclass": { "name": "EmailFieldBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/EmailField/EmailFieldBase" }, "customElement": true, "tagName": "s-email-field" } ] }, { "kind": "javascript-module", "path": "dist/components/EmptyState/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the empty state component.", "name": "EmptyState", "slots": [ { "name": "primary-action", "description": "The main call to action, rendered below the text content. Accepts a single `Button` with a `variant` of `primary`; anything else is ignored with a development warning." }, { "name": "secondary-actions", "description": "An alternative action, rendered beside the primary one. Accepts a single `Button` with a `variant` of `secondary` or `auto` — despite the plural name, only one is rendered." }, { "name": "graphic", "description": "An illustration or symbol shown above the heading. Accepts a single `Image` or `Icon`, either directly or as the only child of a wrapping element." }, { "name": "subheading", "description": "Supporting text below the heading, explaining what's missing or what to do next. Accepts `Text` and `Link` components." } ], "members": [ { "kind": "field", "name": "heading", "type": { "text": "string" }, "description": "The heading of the EmptyState." } ], "attributes": [ { "name": "heading", "fieldName": "heading", "type": { "text": "string" }, "description": "The heading of the EmptyState." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-empty-state" } ] }, { "kind": "javascript-module", "path": "dist/components/Grid/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the grid component.", "name": "Grid", "slots": [ { "name": "", "description": "The child elements displayed within the grid component, which are arranged in a flexible grid layout with configurable columns, rows, and spacing." } ], "members": [ { "kind": "field", "name": "alignItems", "type": { "text": "\"normal\" | \"stretch\" | \"baseline\" | \"first baseline\" | \"last baseline\" | \"center\" | \"start\" | \"end\" | \"unsafe center\" | \"unsafe start\" | \"unsafe end\" | \"safe center\" | \"safe start\" | \"safe end\"" }, "default": "'' - meaning no override", "description": "Aligns the grid items along the block axis." }, { "kind": "field", "name": "justifyItems", "type": { "text": "\"normal\" | \"stretch\" | \"baseline\" | \"first baseline\" | \"last baseline\" | \"center\" | \"start\" | \"end\" | \"unsafe center\" | \"unsafe start\" | \"unsafe end\" | \"safe center\" | \"safe start\" | \"safe end\"" }, "default": "'' - meaning no override", "description": "Aligns the grid items along the inline axis." }, { "kind": "field", "name": "placeItems", "type": { "text": "AlignItemsKeyword | \"normal normal\" | \"normal stretch\" | \"normal baseline\" | \"normal first baseline\" | \"normal last baseline\" | \"normal center\" | \"normal start\" | ... 188 more ... | \"safe end safe end\"" }, "default": "'normal normal'", "description": "A shorthand property for `justify-items` and `align-items`." }, { "kind": "field", "name": "alignContent", "type": { "text": "\"normal\" | \"stretch\" | \"baseline\" | \"first baseline\" | \"last baseline\" | \"center\" | \"start\" | \"end\" | \"unsafe center\" | \"unsafe start\" | \"unsafe end\" | \"safe center\" | \"safe start\" | \"safe end\" | \"space-between\" | \"space-around\" | \"space-evenly\"" }, "default": "'' - meaning no override", "description": "Aligns the grid along the block axis. This overrides the block value of `placeContent`." }, { "kind": "field", "name": "justifyContent", "type": { "text": "\"normal\" | \"stretch\" | \"center\" | \"start\" | \"end\" | \"unsafe center\" | \"unsafe start\" | \"unsafe end\" | \"safe center\" | \"safe start\" | \"safe end\" | \"space-between\" | \"space-around\" | \"space-evenly\"" }, "default": "'' - meaning no override", "description": "Aligns the grid along the inline axis. This overrides the inline value of `placeContent`." }, { "kind": "field", "name": "placeContent", "type": { "text": "\"normal normal\" | \"normal stretch\" | \"normal center\" | \"normal start\" | \"normal end\" | \"normal unsafe center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal safe center\" | ... 229 more ... | \"space-evenly space-evenly\"" }, "default": "'normal normal'", "description": "A shorthand property for `justify-content` and `align-content`." }, { "kind": "field", "name": "gap", "type": { "text": "MaybeResponsive>" }, "default": "'none'", "description": "Adjusts spacing between elements. Accepts: - A single [`SpacingKeyword`](/docs/api/polaris/using-polaris-web-components#scale) value applied to both axes, such as `large-100` - A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively - A [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported SpacingKeyword as a query value" }, { "kind": "field", "name": "rowGap", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "Adjusts spacing between elements in the block axis. This overrides the row value of `gap`. Accepts: - A single [`SpacingKeyword`](/docs/api/polaris/using-polaris-web-components#scale) value, such as `large-100` - A [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported SpacingKeyword as a query value" }, { "kind": "field", "name": "columnGap", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`. Accepts: - A single [`SpacingKeyword`](/docs/api/polaris/using-polaris-web-components#scale) value, such as `large-100` - A [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported SpacingKeyword as a query value" }, { "kind": "field", "name": "gridTemplateColumns", "type": { "text": "string" }, "default": "'none'", "description": "The columns in the grid and their sizes. Accepts: - [Track sizing values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#fixed_and_flexible_track_sizes), such as `1fr auto` - A [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported track sizing values as a query value" }, { "kind": "field", "name": "gridTemplateRows", "type": { "text": "string" }, "default": "'none'", "description": "The rows in the grid and their sizes. Accepts: - [Track sizing values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#fixed_and_flexible_track_sizes), such as `1fr auto` - A [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported track sizing values as a query value" }, { "kind": "field", "name": "background", "type": { "text": "\"subdued\" | \"base\" | \"strong\" | \"transparent\"" }, "default": "'transparent'", "description": "The background color of the component." }, { "kind": "field", "name": "border", "type": { "text": "BorderShorthand" }, "default": "'none'", "description": "A border applied using shorthand syntax to specify width, color, and style in a single property." }, { "kind": "field", "name": "borderWidth", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty<\"base\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"none\">" }, "default": "'' - meaning no override", "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different widths per side." }, { "kind": "field", "name": "borderStyle", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty" }, "default": "'' - meaning no override", "description": "The visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different styles per side." }, { "kind": "field", "name": "borderColor", "type": { "text": "\"subdued\" | \"base\" | \"strong\"" }, "default": "'' - meaning no override", "description": "The color of the border using the design system's color scale. When set, this overrides the color value specified in the `border` property. Choose from `subdued`, `base`, or `strong` to match the visual emphasis needed." }, { "kind": "field", "name": "borderRadius", "type": { "text": "MaybeAllValuesShorthandProperty" }, "default": "'none'", "description": "The roundedness of the element's corners using the design system's radius scale. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different radii per corner. Use this to create rounded corners or fully rounded elements." }, { "kind": "field", "name": "padding", "type": { "text": "MaybeResponsive>" }, "default": "'none'", "description": "The padding applied to all edges of the component. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values: - 1 value applies to all sides - 2 values apply to block (top/bottom) and inline (left/right) - 3 values apply to block-start (top), inline (left/right), and block-end (bottom) - 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) *Examples:** `base`, `large none`, `base large-100 base small` Use `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingBlock", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The block-direction padding (top and bottom in horizontal writing modes). Accepts a single value for both sides or two space-separated values for block-start and block-end. *Example:** `large none` applies `large` to the top and `none` to the bottom. Overrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingBlockStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-start padding (top in horizontal writing modes). Overrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingBlockEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingInline", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The inline-direction padding (left and right in horizontal writing modes). Accepts a single value for both sides or two space-separated values for inline-start and inline-end. *Example:** `large none` applies `large` to the left and `none` to the right. Overrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingInlineStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingInlineEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "display", "type": { "text": "\"auto\" | \"none\"" }, "default": "'auto'", "description": "The outer [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) type of the component. The outer type sets a component's participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout). - `auto` the component's initial value. The actual value depends on the component and context. - `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers." }, { "kind": "field", "name": "blockSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes). Block size adjusts based on the writing direction: in horizontal layouts, it controls the height; in vertical layouts, it controls the width. This ensures consistent behavior across different text directions. Learn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size)." }, { "kind": "field", "name": "minBlockSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size)." }, { "kind": "field", "name": "maxBlockSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size)." }, { "kind": "field", "name": "inlineSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The width in horizontal writing modes, or height in vertical writing modes. Use this for flow-relative sizing that adapts to text direction. Learn more about [inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size)." }, { "kind": "field", "name": "minInlineSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size)." }, { "kind": "field", "name": "maxInlineSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size)." }, { "kind": "field", "name": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "kind": "field", "name": "accessibilityRole", "type": { "text": "\"generic\" | \"main\" | \"header\" | \"footer\" | \"section\" | \"region\" | \"aside\" | \"navigation\" | \"ordered-list\" | \"list-item\" | \"list-item-separator\" | \"unordered-list\" | \"separator\" | \"status\" | \"alert\" | \"presentation\" | \"none\"" }, "default": "'generic'", "description": "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." }, { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. Only use this when the element's content is not enough context for users using assistive technologies." }, { "kind": "field", "name": "overflow", "type": { "text": "\"visible\" | \"hidden\"" }, "default": "'visible'", "description": "Sets the overflow behavior of the element. - `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse. - `visible`: the content that extends beyond the element’s container is visible." } ], "attributes": [ { "name": "alignitems", "fieldName": "alignItems", "type": { "text": "\"normal\" | \"stretch\" | \"baseline\" | \"first baseline\" | \"last baseline\" | \"center\" | \"start\" | \"end\" | \"unsafe center\" | \"unsafe start\" | \"unsafe end\" | \"safe center\" | \"safe start\" | \"safe end\"" }, "default": "'' - meaning no override", "description": "Aligns the grid items along the block axis." }, { "name": "justifyitems", "fieldName": "justifyItems", "type": { "text": "\"normal\" | \"stretch\" | \"baseline\" | \"first baseline\" | \"last baseline\" | \"center\" | \"start\" | \"end\" | \"unsafe center\" | \"unsafe start\" | \"unsafe end\" | \"safe center\" | \"safe start\" | \"safe end\"" }, "default": "'' - meaning no override", "description": "Aligns the grid items along the inline axis." }, { "name": "placeitems", "fieldName": "placeItems", "type": { "text": "AlignItemsKeyword | \"normal normal\" | \"normal stretch\" | \"normal baseline\" | \"normal first baseline\" | \"normal last baseline\" | \"normal center\" | \"normal start\" | ... 188 more ... | \"safe end safe end\"" }, "default": "'normal normal'", "description": "A shorthand property for `justify-items` and `align-items`." }, { "name": "aligncontent", "fieldName": "alignContent", "type": { "text": "\"normal\" | \"stretch\" | \"baseline\" | \"first baseline\" | \"last baseline\" | \"center\" | \"start\" | \"end\" | \"unsafe center\" | \"unsafe start\" | \"unsafe end\" | \"safe center\" | \"safe start\" | \"safe end\" | \"space-between\" | \"space-around\" | \"space-evenly\"" }, "default": "'' - meaning no override", "description": "Aligns the grid along the block axis. This overrides the block value of `placeContent`." }, { "name": "justifycontent", "fieldName": "justifyContent", "type": { "text": "\"normal\" | \"stretch\" | \"center\" | \"start\" | \"end\" | \"unsafe center\" | \"unsafe start\" | \"unsafe end\" | \"safe center\" | \"safe start\" | \"safe end\" | \"space-between\" | \"space-around\" | \"space-evenly\"" }, "default": "'' - meaning no override", "description": "Aligns the grid along the inline axis. This overrides the inline value of `placeContent`." }, { "name": "placecontent", "fieldName": "placeContent", "type": { "text": "\"normal normal\" | \"normal stretch\" | \"normal center\" | \"normal start\" | \"normal end\" | \"normal unsafe center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal safe center\" | ... 229 more ... | \"space-evenly space-evenly\"" }, "default": "'normal normal'", "description": "A shorthand property for `justify-content` and `align-content`." }, { "name": "gap", "fieldName": "gap", "type": { "text": "MaybeResponsive>" }, "default": "'none'", "description": "Adjusts spacing between elements. Accepts: - A single [`SpacingKeyword`](/docs/api/polaris/using-polaris-web-components#scale) value applied to both axes, such as `large-100` - A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively - A [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported SpacingKeyword as a query value" }, { "name": "rowgap", "fieldName": "rowGap", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "Adjusts spacing between elements in the block axis. This overrides the row value of `gap`. Accepts: - A single [`SpacingKeyword`](/docs/api/polaris/using-polaris-web-components#scale) value, such as `large-100` - A [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported SpacingKeyword as a query value" }, { "name": "columngap", "fieldName": "columnGap", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`. Accepts: - A single [`SpacingKeyword`](/docs/api/polaris/using-polaris-web-components#scale) value, such as `large-100` - A [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported SpacingKeyword as a query value" }, { "name": "gridtemplatecolumns", "fieldName": "gridTemplateColumns", "type": { "text": "string" }, "default": "'none'", "description": "The columns in the grid and their sizes. Accepts: - [Track sizing values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#fixed_and_flexible_track_sizes), such as `1fr auto` - A [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported track sizing values as a query value" }, { "name": "gridtemplaterows", "fieldName": "gridTemplateRows", "type": { "text": "string" }, "default": "'none'", "description": "The rows in the grid and their sizes. Accepts: - [Track sizing values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#fixed_and_flexible_track_sizes), such as `1fr auto` - A [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported track sizing values as a query value" }, { "name": "background", "fieldName": "background", "type": { "text": "\"subdued\" | \"base\" | \"strong\" | \"transparent\"" }, "default": "'transparent'", "description": "The background color of the component." }, { "name": "border", "fieldName": "border", "type": { "text": "BorderShorthand" }, "default": "'none'", "description": "A border applied using shorthand syntax to specify width, color, and style in a single property." }, { "name": "borderwidth", "fieldName": "borderWidth", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty<\"base\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"none\">" }, "default": "'' - meaning no override", "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different widths per side." }, { "name": "borderstyle", "fieldName": "borderStyle", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty" }, "default": "'' - meaning no override", "description": "The visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different styles per side." }, { "name": "bordercolor", "fieldName": "borderColor", "type": { "text": "\"subdued\" | \"base\" | \"strong\"" }, "default": "'' - meaning no override", "description": "The color of the border using the design system's color scale. When set, this overrides the color value specified in the `border` property. Choose from `subdued`, `base`, or `strong` to match the visual emphasis needed." }, { "name": "borderradius", "fieldName": "borderRadius", "type": { "text": "MaybeAllValuesShorthandProperty" }, "default": "'none'", "description": "The roundedness of the element's corners using the design system's radius scale. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different radii per corner. Use this to create rounded corners or fully rounded elements." }, { "name": "padding", "fieldName": "padding", "type": { "text": "MaybeResponsive>" }, "default": "'none'", "description": "The padding applied to all edges of the component. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values: - 1 value applies to all sides - 2 values apply to block (top/bottom) and inline (left/right) - 3 values apply to block-start (top), inline (left/right), and block-end (bottom) - 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) *Examples:** `base`, `large none`, `base large-100 base small` Use `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddingblock", "fieldName": "paddingBlock", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The block-direction padding (top and bottom in horizontal writing modes). Accepts a single value for both sides or two space-separated values for block-start and block-end. *Example:** `large none` applies `large` to the top and `none` to the bottom. Overrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddingblockstart", "fieldName": "paddingBlockStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-start padding (top in horizontal writing modes). Overrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddingblockend", "fieldName": "paddingBlockEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddinginline", "fieldName": "paddingInline", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The inline-direction padding (left and right in horizontal writing modes). Accepts a single value for both sides or two space-separated values for inline-start and inline-end. *Example:** `large none` applies `large` to the left and `none` to the right. Overrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddinginlinestart", "fieldName": "paddingInlineStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddinginlineend", "fieldName": "paddingInlineEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "display", "fieldName": "display", "type": { "text": "\"auto\" | \"none\"" }, "default": "'auto'", "description": "The outer [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) type of the component. The outer type sets a component's participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout). - `auto` the component's initial value. The actual value depends on the component and context. - `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers." }, { "name": "blocksize", "fieldName": "blockSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes). Block size adjusts based on the writing direction: in horizontal layouts, it controls the height; in vertical layouts, it controls the width. This ensures consistent behavior across different text directions. Learn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size)." }, { "name": "minblocksize", "fieldName": "minBlockSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size)." }, { "name": "maxblocksize", "fieldName": "maxBlockSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size)." }, { "name": "inlinesize", "fieldName": "inlineSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The width in horizontal writing modes, or height in vertical writing modes. Use this for flow-relative sizing that adapts to text direction. Learn more about [inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size)." }, { "name": "mininlinesize", "fieldName": "minInlineSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size)." }, { "name": "maxinlinesize", "fieldName": "maxInlineSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size)." }, { "name": "accessibilityvisibility", "fieldName": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "name": "accessibilityrole", "fieldName": "accessibilityRole", "type": { "text": "\"generic\" | \"main\" | \"header\" | \"footer\" | \"section\" | \"region\" | \"aside\" | \"navigation\" | \"ordered-list\" | \"list-item\" | \"list-item-separator\" | \"unordered-list\" | \"separator\" | \"status\" | \"alert\" | \"presentation\" | \"none\"" }, "default": "'generic'", "description": "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." }, { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. Only use this when the element's content is not enough context for users using assistive technologies." }, { "name": "overflow", "fieldName": "overflow", "type": { "text": "\"visible\" | \"hidden\"" }, "default": "'visible'", "description": "Sets the overflow behavior of the element. - `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse. - `visible`: the content that extends beyond the element’s container is visible." } ], "superclass": { "name": "BoxElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/BoxElement" }, "customElement": true, "tagName": "s-grid" } ] }, { "kind": "javascript-module", "path": "dist/components/GridItem/index.js", "declarations": [ { "kind": "class", "description": "The grid item component represents a single cell within a grid layout, allowing you to control how content is positioned and sized within the grid. Use grid item as a child of grid to specify column span, row span, and positioning for individual content areas. Grid item supports precise placement control through column and row properties, enabling you to create complex layouts where different items occupy varying amounts of space or appear in specific grid positions.", "name": "GridItem", "slots": [ { "name": "", "description": "The content displayed within the grid item component, which represents a single cell in the grid layout and can span multiple columns or rows." } ], "members": [ { "kind": "field", "name": "gridColumn", "type": { "text": "\"auto\"" }, "default": "'auto'", "description": "The number of columns the item will span across. Learn more about the [grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)." }, { "kind": "field", "name": "gridRow", "type": { "text": "\"auto\"" }, "default": "'auto'", "description": "The number of rows the item will span across. Learn more about the [grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)." }, { "kind": "field", "name": "background", "type": { "text": "\"subdued\" | \"base\" | \"strong\" | \"transparent\"" }, "default": "'transparent'", "description": "The background color of the component." }, { "kind": "field", "name": "border", "type": { "text": "BorderShorthand" }, "default": "'none'", "description": "A border applied using shorthand syntax to specify width, color, and style in a single property." }, { "kind": "field", "name": "borderWidth", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty<\"base\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"none\">" }, "default": "'' - meaning no override", "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different widths per side." }, { "kind": "field", "name": "borderStyle", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty" }, "default": "'' - meaning no override", "description": "The visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different styles per side." }, { "kind": "field", "name": "borderColor", "type": { "text": "\"subdued\" | \"base\" | \"strong\"" }, "default": "'' - meaning no override", "description": "The color of the border using the design system's color scale. When set, this overrides the color value specified in the `border` property. Choose from `subdued`, `base`, or `strong` to match the visual emphasis needed." }, { "kind": "field", "name": "borderRadius", "type": { "text": "MaybeAllValuesShorthandProperty" }, "default": "'none'", "description": "The roundedness of the element's corners using the design system's radius scale. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different radii per corner. Use this to create rounded corners or fully rounded elements." }, { "kind": "field", "name": "padding", "type": { "text": "MaybeResponsive>" }, "default": "'none'", "description": "The padding applied to all edges of the component. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values: - 1 value applies to all sides - 2 values apply to block (top/bottom) and inline (left/right) - 3 values apply to block-start (top), inline (left/right), and block-end (bottom) - 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) *Examples:** `base`, `large none`, `base large-100 base small` Use `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingBlock", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The block-direction padding (top and bottom in horizontal writing modes). Accepts a single value for both sides or two space-separated values for block-start and block-end. *Example:** `large none` applies `large` to the top and `none` to the bottom. Overrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingBlockStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-start padding (top in horizontal writing modes). Overrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingBlockEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingInline", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The inline-direction padding (left and right in horizontal writing modes). Accepts a single value for both sides or two space-separated values for inline-start and inline-end. *Example:** `large none` applies `large` to the left and `none` to the right. Overrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingInlineStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingInlineEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "display", "type": { "text": "\"auto\" | \"none\"" }, "default": "'auto'", "description": "The outer [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) type of the component. The outer type sets a component's participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout). - `auto` the component's initial value. The actual value depends on the component and context. - `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers." }, { "kind": "field", "name": "blockSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes). Block size adjusts based on the writing direction: in horizontal layouts, it controls the height; in vertical layouts, it controls the width. This ensures consistent behavior across different text directions. Learn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size)." }, { "kind": "field", "name": "minBlockSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size)." }, { "kind": "field", "name": "maxBlockSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size)." }, { "kind": "field", "name": "inlineSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The width in horizontal writing modes, or height in vertical writing modes. Use this for flow-relative sizing that adapts to text direction. Learn more about [inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size)." }, { "kind": "field", "name": "minInlineSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size)." }, { "kind": "field", "name": "maxInlineSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size)." }, { "kind": "field", "name": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "kind": "field", "name": "accessibilityRole", "type": { "text": "\"generic\" | \"main\" | \"header\" | \"footer\" | \"section\" | \"region\" | \"aside\" | \"navigation\" | \"ordered-list\" | \"list-item\" | \"list-item-separator\" | \"unordered-list\" | \"separator\" | \"status\" | \"alert\" | \"presentation\" | \"none\"" }, "default": "'generic'", "description": "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." }, { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. Only use this when the element's content is not enough context for users using assistive technologies." }, { "kind": "field", "name": "overflow", "type": { "text": "\"visible\" | \"hidden\"" }, "default": "'visible'", "description": "Sets the overflow behavior of the element. - `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse. - `visible`: the content that extends beyond the element’s container is visible." } ], "attributes": [ { "name": "gridcolumn", "fieldName": "gridColumn", "type": { "text": "\"auto\"" }, "default": "'auto'", "description": "The number of columns the item will span across. Learn more about the [grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)." }, { "name": "gridrow", "fieldName": "gridRow", "type": { "text": "\"auto\"" }, "default": "'auto'", "description": "The number of rows the item will span across. Learn more about the [grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)." }, { "name": "background", "fieldName": "background", "type": { "text": "\"subdued\" | \"base\" | \"strong\" | \"transparent\"" }, "default": "'transparent'", "description": "The background color of the component." }, { "name": "border", "fieldName": "border", "type": { "text": "BorderShorthand" }, "default": "'none'", "description": "A border applied using shorthand syntax to specify width, color, and style in a single property." }, { "name": "borderwidth", "fieldName": "borderWidth", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty<\"base\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"none\">" }, "default": "'' - meaning no override", "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different widths per side." }, { "name": "borderstyle", "fieldName": "borderStyle", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty" }, "default": "'' - meaning no override", "description": "The visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different styles per side." }, { "name": "bordercolor", "fieldName": "borderColor", "type": { "text": "\"subdued\" | \"base\" | \"strong\"" }, "default": "'' - meaning no override", "description": "The color of the border using the design system's color scale. When set, this overrides the color value specified in the `border` property. Choose from `subdued`, `base`, or `strong` to match the visual emphasis needed." }, { "name": "borderradius", "fieldName": "borderRadius", "type": { "text": "MaybeAllValuesShorthandProperty" }, "default": "'none'", "description": "The roundedness of the element's corners using the design system's radius scale. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different radii per corner. Use this to create rounded corners or fully rounded elements." }, { "name": "padding", "fieldName": "padding", "type": { "text": "MaybeResponsive>" }, "default": "'none'", "description": "The padding applied to all edges of the component. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values: - 1 value applies to all sides - 2 values apply to block (top/bottom) and inline (left/right) - 3 values apply to block-start (top), inline (left/right), and block-end (bottom) - 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) *Examples:** `base`, `large none`, `base large-100 base small` Use `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddingblock", "fieldName": "paddingBlock", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The block-direction padding (top and bottom in horizontal writing modes). Accepts a single value for both sides or two space-separated values for block-start and block-end. *Example:** `large none` applies `large` to the top and `none` to the bottom. Overrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddingblockstart", "fieldName": "paddingBlockStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-start padding (top in horizontal writing modes). Overrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddingblockend", "fieldName": "paddingBlockEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddinginline", "fieldName": "paddingInline", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The inline-direction padding (left and right in horizontal writing modes). Accepts a single value for both sides or two space-separated values for inline-start and inline-end. *Example:** `large none` applies `large` to the left and `none` to the right. Overrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddinginlinestart", "fieldName": "paddingInlineStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddinginlineend", "fieldName": "paddingInlineEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "display", "fieldName": "display", "type": { "text": "\"auto\" | \"none\"" }, "default": "'auto'", "description": "The outer [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) type of the component. The outer type sets a component's participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout). - `auto` the component's initial value. The actual value depends on the component and context. - `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers." }, { "name": "blocksize", "fieldName": "blockSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes). Block size adjusts based on the writing direction: in horizontal layouts, it controls the height; in vertical layouts, it controls the width. This ensures consistent behavior across different text directions. Learn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size)." }, { "name": "minblocksize", "fieldName": "minBlockSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size)." }, { "name": "maxblocksize", "fieldName": "maxBlockSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size)." }, { "name": "inlinesize", "fieldName": "inlineSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The width in horizontal writing modes, or height in vertical writing modes. Use this for flow-relative sizing that adapts to text direction. Learn more about [inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size)." }, { "name": "mininlinesize", "fieldName": "minInlineSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size)." }, { "name": "maxinlinesize", "fieldName": "maxInlineSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size)." }, { "name": "accessibilityvisibility", "fieldName": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "name": "accessibilityrole", "fieldName": "accessibilityRole", "type": { "text": "\"generic\" | \"main\" | \"header\" | \"footer\" | \"section\" | \"region\" | \"aside\" | \"navigation\" | \"ordered-list\" | \"list-item\" | \"list-item-separator\" | \"unordered-list\" | \"separator\" | \"status\" | \"alert\" | \"presentation\" | \"none\"" }, "default": "'generic'", "description": "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." }, { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. Only use this when the element's content is not enough context for users using assistive technologies." }, { "name": "overflow", "fieldName": "overflow", "type": { "text": "\"visible\" | \"hidden\"" }, "default": "'visible'", "description": "Sets the overflow behavior of the element. - `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse. - `visible`: the content that extends beyond the element’s container is visible." } ], "superclass": { "name": "BoxElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/BoxElement" }, "customElement": true, "tagName": "s-grid-item" } ] }, { "kind": "javascript-module", "path": "dist/components/Heading/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the heading component.", "name": "Heading", "slots": [ { "name": "", "description": "The heading text displayed within the heading component, which provides a title or section header for content." } ], "members": [ { "kind": "field", "name": "fontSize", "type": { "text": "\"base\" | \"auto\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\"" }, "default": "'auto'", "description": "The font size of the heading. The named values also apply their matching line-height and letter-spacing: - 'small' maps to headingXs - 'base' maps to headingSm - 'large' / 'large-100' maps to headingMd - 'large-200' maps to headingLg - 'large-300' maps to headingXl - 'large-400' maps to heading2xl" }, { "kind": "field", "name": "accessibilityRole", "type": { "text": "\"heading\" | \"presentation\" | \"none\"" }, "default": "'heading'", "description": "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`: Identifies the element as a heading for assistive technologies. - `none`: Removes semantic meaning from the heading element. - `presentation`: Removes semantic meaning from the heading element." }, { "kind": "field", "name": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "kind": "field", "name": "lineClamp", "type": { "text": "number" }, "default": "Infinity - no truncation is applied", "description": "Truncates the text content to the specified number of lines." } ], "attributes": [ { "name": "fontsize", "fieldName": "fontSize", "type": { "text": "\"base\" | \"auto\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\"" }, "default": "'auto'", "description": "The font size of the heading. The named values also apply their matching line-height and letter-spacing: - 'small' maps to headingXs - 'base' maps to headingSm - 'large' / 'large-100' maps to headingMd - 'large-200' maps to headingLg - 'large-300' maps to headingXl - 'large-400' maps to heading2xl" }, { "name": "accessibilityrole", "fieldName": "accessibilityRole", "type": { "text": "\"heading\" | \"presentation\" | \"none\"" }, "default": "'heading'", "description": "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`: Identifies the element as a heading for assistive technologies. - `none`: Removes semantic meaning from the heading element. - `presentation`: Removes semantic meaning from the heading element." }, { "name": "accessibilityvisibility", "fieldName": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "name": "lineclamp", "fieldName": "lineClamp", "type": { "text": "number" }, "default": "Infinity - no truncation is applied", "description": "Truncates the text content to the specified number of lines." } ], "superclass": { "name": "HeadingBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/Heading/HeadingBase" }, "customElement": true, "tagName": "s-heading" } ] }, { "kind": "javascript-module", "path": "dist/components/Icon/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the icon component.", "name": "Icon", "members": [ { "kind": "field", "name": "type", "type": { "text": "\"color\" | \"info\" | \"status\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"align-horizontal-centers\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"arrows-out-horizontal-filled\" | \"asterisk\" | \"attachment\" | \"automation\" | \"automation-filled\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"bill\" | \"bill-filled\" | \"blank\" | \"blank-filled\" | \"blog\" | \"blog-filled\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"brain\" | \"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-abandoned-filled\" | \"cart-discount\" | \"cart-down\" | \"cart-down-filled\" | \"cart-sale\" | \"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\" | \"collection-featured\" | \"collection-filled\" | \"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\" | \"delivery\" | \"desktop\" | \"disabled\" | \"discount\" | \"discount-add\" | \"discount-code\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"duplicate\" | \"edit\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"favicon\" | \"file\" | \"file-filled\" | \"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\" | \"gauge-filled\" | \"generated-app\" | \"generated-app-filled\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-asia-filled\" | \"globe-europe\" | \"globe-europe-filled\" | \"globe-filled\" | \"globe-lines\" | \"globe-list\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"icons\" | \"identity-card\" | \"identity-card-filled\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"incomplete\" | \"inheritance\" | \"inventory\" | \"inventory-filled\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layer\" | \"layout-block\" | \"layout-block-ai\" | \"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\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-filled\" | \"location\" | \"location-none\" | \"lock\" | \"logo-apple-tap-to-pay-filled\" | \"magic\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-euro-filled\" | \"markets-rupee\" | \"markets-rupee-filled\" | \"markets-yen\" | \"markets-yen-filled\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"megaphone-filled\" | \"mention\" | \"menu\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-filled\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money\" | \"money-filled\" | \"money-none\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order\" | \"order-batches\" | \"order-draft\" | \"order-draft-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-fulfilled\" | \"package-on-hold\" | \"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\" | \"passkey\" | \"passkey-filled\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-filled\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"price-list\" | \"price-list-filled\" | \"print\" | \"product\" | \"product-add\" | \"product-cost\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"rank-bottom\" | \"rank-top\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-euro-filled\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-pound-filled\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-rupee-filled\" | \"receipt-yen\" | \"receipt-yen-filled\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"replace\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"search\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"select\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-network\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-filled\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"split\" | \"sports\" | \"star\" | \"star-filled\" | \"star-list\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-ai\" | \"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-in-rows-filled\" | \"text-indent\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-cart\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wallet-filled\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-filled\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"empty\"" }, "description": "The icon to display from the icon library. Set to a valid icon name to display that icon. To hide the icon completely, use an empty string `''`. To reserve the icon's space without displaying an icon, use `'empty'`." }, { "kind": "field", "name": "tone", "type": { "text": "\"auto\" | \"neutral\" | \"info\" | \"success\" | \"caution\" | \"warning\" | \"critical\"" }, "default": "'auto'", "description": "The semantic meaning and color treatment of the component. - `info`: Informational content or helpful tips. - `success`: Positive outcomes or successful states. - `warning`: Important warnings about potential issues. - `critical`: Urgent problems or destructive actions. - `auto`: Automatically determined based on context. - `neutral`: General information without specific intent. - `caution`: Advisory notices that need attention." }, { "kind": "field", "name": "color", "type": { "text": "\"subdued\" | \"base\"" }, "default": "'base'", "description": "The color emphasis level that controls visual intensity. - `base`: Primary color for body text, standard UI elements, and general content with good readability. - `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements." }, { "kind": "field", "name": "size", "type": { "text": "\"base\" | \"small\"" }, "description": "The size of the icon. - `small`: Smaller icon suitable for inline use within text or compact UI elements. - `base`: Default size that works well for standalone icons and standard use cases." }, { "kind": "field", "name": "interestFor", "type": { "text": "string" }, "description": "ID of a component that should respond to interest (e.g. hover and focus) on this component." } ], "attributes": [ { "name": "type", "fieldName": "type", "type": { "text": "\"color\" | \"info\" | \"status\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"align-horizontal-centers\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"arrows-out-horizontal-filled\" | \"asterisk\" | \"attachment\" | \"automation\" | \"automation-filled\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"bill\" | \"bill-filled\" | \"blank\" | \"blank-filled\" | \"blog\" | \"blog-filled\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"brain\" | \"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-abandoned-filled\" | \"cart-discount\" | \"cart-down\" | \"cart-down-filled\" | \"cart-sale\" | \"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\" | \"collection-featured\" | \"collection-filled\" | \"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\" | \"delivery\" | \"desktop\" | \"disabled\" | \"discount\" | \"discount-add\" | \"discount-code\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"duplicate\" | \"edit\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"favicon\" | \"file\" | \"file-filled\" | \"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\" | \"gauge-filled\" | \"generated-app\" | \"generated-app-filled\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-asia-filled\" | \"globe-europe\" | \"globe-europe-filled\" | \"globe-filled\" | \"globe-lines\" | \"globe-list\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"icons\" | \"identity-card\" | \"identity-card-filled\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"incomplete\" | \"inheritance\" | \"inventory\" | \"inventory-filled\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layer\" | \"layout-block\" | \"layout-block-ai\" | \"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\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-filled\" | \"location\" | \"location-none\" | \"lock\" | \"logo-apple-tap-to-pay-filled\" | \"magic\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-euro-filled\" | \"markets-rupee\" | \"markets-rupee-filled\" | \"markets-yen\" | \"markets-yen-filled\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"megaphone-filled\" | \"mention\" | \"menu\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-filled\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money\" | \"money-filled\" | \"money-none\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order\" | \"order-batches\" | \"order-draft\" | \"order-draft-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-fulfilled\" | \"package-on-hold\" | \"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\" | \"passkey\" | \"passkey-filled\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-filled\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"price-list\" | \"price-list-filled\" | \"print\" | \"product\" | \"product-add\" | \"product-cost\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"rank-bottom\" | \"rank-top\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-euro-filled\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-pound-filled\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-rupee-filled\" | \"receipt-yen\" | \"receipt-yen-filled\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"replace\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"search\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"select\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-network\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-filled\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"split\" | \"sports\" | \"star\" | \"star-filled\" | \"star-list\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-ai\" | \"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-in-rows-filled\" | \"text-indent\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-cart\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wallet-filled\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-filled\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"empty\"" }, "description": "The icon to display from the icon library. Set to a valid icon name to display that icon. To hide the icon completely, use an empty string `''`. To reserve the icon's space without displaying an icon, use `'empty'`." }, { "name": "tone", "fieldName": "tone", "type": { "text": "\"auto\" | \"neutral\" | \"info\" | \"success\" | \"caution\" | \"warning\" | \"critical\"" }, "default": "'auto'", "description": "The semantic meaning and color treatment of the component. - `info`: Informational content or helpful tips. - `success`: Positive outcomes or successful states. - `warning`: Important warnings about potential issues. - `critical`: Urgent problems or destructive actions. - `auto`: Automatically determined based on context. - `neutral`: General information without specific intent. - `caution`: Advisory notices that need attention." }, { "name": "color", "fieldName": "color", "type": { "text": "\"subdued\" | \"base\"" }, "default": "'base'", "description": "The color emphasis level that controls visual intensity. - `base`: Primary color for body text, standard UI elements, and general content with good readability. - `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements." }, { "name": "size", "fieldName": "size", "type": { "text": "\"base\" | \"small\"" }, "description": "The size of the icon. - `small`: Smaller icon suitable for inline use within text or compact UI elements. - `base`: Default size that works well for standalone icons and standard use cases." }, { "name": "interestfor", "fieldName": "interestFor", "type": { "text": "string" }, "description": "ID of a component that should respond to interest (e.g. hover and focus) on this component." } ], "superclass": { "name": "IconBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/Icon/IconBase" }, "customElement": true, "tagName": "s-icon" } ] }, { "kind": "javascript-module", "path": "dist/components/Image/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the image component.", "name": "Image", "members": [ { "kind": "field", "name": "loading", "type": { "text": "\"eager\" | \"lazy\"" }, "default": "'eager'", "description": "The loading strategy for the image. - `eager`: Immediately loads the image, irrespective of its position within the visible viewport. - `lazy`: Delays loading the image until it approaches a specified distance from the viewport. Learn more about the [loading attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading)." }, { "kind": "field", "name": "accessibilityRole", "type": { "text": "\"presentation\" | \"none\" | \"img\"" }, "default": "'img'", "description": "The semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page. - `none`: Completely hides the element and its content from assistive technologies - `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers. - `img`: Identifies the element as an image that conveys meaningful information to users." }, { "kind": "field", "name": "inlineSize", "type": { "text": "\"auto\" | \"fill\"" }, "default": "'fill'", "description": "The displayed inline width of the image. - `fill`: the image will take up 100% of the available inline size. - `auto`: the image will be displayed at its natural size. Learn more about the [width attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width)." }, { "kind": "field", "name": "aspectRatio", "type": { "text": "`${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}`" }, "default": "'1/1'", "description": "The aspect ratio of the image. The rendering of the image will depend on the `inlineSize` value: - `inlineSize=\"fill\"`: the aspect ratio will be respected and the image will take the necessary space. - `inlineSize=\"auto\"`: the image will not render until it has loaded and the aspect ratio will be ignored. For example, if the value is set as `50 / 100`, the getter returns `50 / 100`. If the value is set as `0.5`, the getter returns `0.5 / 1`. Learn more about the [aspect-ratio property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)." }, { "kind": "field", "name": "objectFit", "type": { "text": "\"contain\" | \"cover\"" }, "default": "'contain'", "description": "The image resizing behavior to fit within its container. - `contain`: Scales the image to fit within the container while maintaining its aspect ratio. The entire image is visible, but might leave empty space. - `cover`: Scales the image to fill the entire container while maintaining its aspect ratio. The image might be cropped to fit. The image is always positioned in the center of the container. Learn more about the [object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)." }, { "kind": "field", "name": "src", "type": { "text": "string" }, "description": "The image source (either a remote URL or a local file resource). When the image is loading or no `src` is provided, a placeholder will be rendered." }, { "kind": "field", "name": "alt", "type": { "text": "string" }, "default": "`''`", "description": "An alternative text description that describe the image for the reader to understand what it is about. It is extremely useful for both users using assistive technology and sighted users. A well written description provides people with visual impairments the ability to participate in consuming non-text content. When a screen readers encounters an `s-image`, the description is read and announced aloud. If an image fails to load, potentially due to a poor connection, the `alt` is displayed on screen instead. This has the benefit of letting a sighted buyer know an image was meant to load here, but as an alternative, they’re still able to consume the text content. Read [considerations when writing alternative text](https://www.shopify.com/ca/blog/image-alt-text#4) to learn more." }, { "kind": "field", "name": "srcSet", "type": { "text": "string" }, "description": "A set of image sources and their width or pixel density descriptors. This overrides the `src` property." }, { "kind": "field", "name": "sizes", "type": { "text": "string" }, "description": "A set of media conditions and their corresponding sizes." }, { "kind": "field", "name": "border", "type": { "text": "BorderShorthand" }, "default": "'none'", "description": "A border applied using shorthand syntax to specify width, color, and style in a single property." }, { "kind": "field", "name": "borderColor", "type": { "text": "\"subdued\" | \"base\" | \"strong\"" }, "default": "'' - meaning no override", "description": "The color of the border using the design system's color scale. When set, this overrides the color value specified in the `border` property. Choose from `subdued`, `base`, or `strong` to match the visual emphasis needed." }, { "kind": "field", "name": "borderRadius", "type": { "text": "MaybeAllValuesShorthandProperty" }, "default": "'none'", "description": "The roundedness of the element's corners using the design system's radius scale. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different radii per corner. Use this to create rounded corners or fully rounded elements." }, { "kind": "field", "name": "borderStyle", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty" }, "default": "'' - meaning no override", "description": "The visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different styles per side." }, { "kind": "field", "name": "borderWidth", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty<\"base\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"none\">" }, "default": "'' - meaning no override", "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different widths per side." } ], "events": [ { "name": "error", "type": { "text": "CustomEvent" }, "description": "A callback fired when the image fails to load." }, { "name": "load", "type": { "text": "CustomEvent" }, "description": "A callback fired when the image loads successfully." } ], "attributes": [ { "name": "loading", "fieldName": "loading", "type": { "text": "\"eager\" | \"lazy\"" }, "default": "'eager'", "description": "The loading strategy for the image. - `eager`: Immediately loads the image, irrespective of its position within the visible viewport. - `lazy`: Delays loading the image until it approaches a specified distance from the viewport. Learn more about the [loading attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading)." }, { "name": "accessibilityrole", "fieldName": "accessibilityRole", "type": { "text": "\"presentation\" | \"none\" | \"img\"" }, "default": "'img'", "description": "The semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page. - `none`: Completely hides the element and its content from assistive technologies - `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers. - `img`: Identifies the element as an image that conveys meaningful information to users." }, { "name": "inlinesize", "fieldName": "inlineSize", "type": { "text": "\"auto\" | \"fill\"" }, "default": "'fill'", "description": "The displayed inline width of the image. - `fill`: the image will take up 100% of the available inline size. - `auto`: the image will be displayed at its natural size. Learn more about the [width attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width)." }, { "name": "aspectratio", "fieldName": "aspectRatio", "type": { "text": "`${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}`" }, "default": "'1/1'", "description": "The aspect ratio of the image. The rendering of the image will depend on the `inlineSize` value: - `inlineSize=\"fill\"`: the aspect ratio will be respected and the image will take the necessary space. - `inlineSize=\"auto\"`: the image will not render until it has loaded and the aspect ratio will be ignored. For example, if the value is set as `50 / 100`, the getter returns `50 / 100`. If the value is set as `0.5`, the getter returns `0.5 / 1`. Learn more about the [aspect-ratio property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)." }, { "name": "objectfit", "fieldName": "objectFit", "type": { "text": "\"contain\" | \"cover\"" }, "default": "'contain'", "description": "The image resizing behavior to fit within its container. - `contain`: Scales the image to fit within the container while maintaining its aspect ratio. The entire image is visible, but might leave empty space. - `cover`: Scales the image to fill the entire container while maintaining its aspect ratio. The image might be cropped to fit. The image is always positioned in the center of the container. Learn more about the [object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)." }, { "name": "src", "fieldName": "src", "type": { "text": "string" }, "description": "The image source (either a remote URL or a local file resource). When the image is loading or no `src` is provided, a placeholder will be rendered." }, { "name": "alt", "fieldName": "alt", "type": { "text": "string" }, "default": "`''`", "description": "An alternative text description that describe the image for the reader to understand what it is about. It is extremely useful for both users using assistive technology and sighted users. A well written description provides people with visual impairments the ability to participate in consuming non-text content. When a screen readers encounters an `s-image`, the description is read and announced aloud. If an image fails to load, potentially due to a poor connection, the `alt` is displayed on screen instead. This has the benefit of letting a sighted buyer know an image was meant to load here, but as an alternative, they’re still able to consume the text content. Read [considerations when writing alternative text](https://www.shopify.com/ca/blog/image-alt-text#4) to learn more." }, { "name": "srcset", "fieldName": "srcSet", "type": { "text": "string" }, "description": "A set of image sources and their width or pixel density descriptors. This overrides the `src` property." }, { "name": "sizes", "fieldName": "sizes", "type": { "text": "string" }, "description": "A set of media conditions and their corresponding sizes." }, { "name": "border", "fieldName": "border", "type": { "text": "BorderShorthand" }, "default": "'none'", "description": "A border applied using shorthand syntax to specify width, color, and style in a single property." }, { "name": "bordercolor", "fieldName": "borderColor", "type": { "text": "\"subdued\" | \"base\" | \"strong\"" }, "default": "'' - meaning no override", "description": "The color of the border using the design system's color scale. When set, this overrides the color value specified in the `border` property. Choose from `subdued`, `base`, or `strong` to match the visual emphasis needed." }, { "name": "borderradius", "fieldName": "borderRadius", "type": { "text": "MaybeAllValuesShorthandProperty" }, "default": "'none'", "description": "The roundedness of the element's corners using the design system's radius scale. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different radii per corner. Use this to create rounded corners or fully rounded elements." }, { "name": "borderstyle", "fieldName": "borderStyle", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty" }, "default": "'' - meaning no override", "description": "The visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different styles per side." }, { "name": "borderwidth", "fieldName": "borderWidth", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty<\"base\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"none\">" }, "default": "'' - meaning no override", "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different widths per side." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-image" } ] }, { "kind": "javascript-module", "path": "dist/components/Link/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the link component.", "name": "Link", "slots": [ { "name": "", "description": "The text or elements displayed within the link component, which navigates users to a different location when activated." } ], "members": [ { "kind": "field", "name": "tone", "type": { "text": "\"auto\" | \"neutral\" | \"critical\"" }, "default": "'auto'", "description": "The semantic meaning and color treatment of the component. - `critical`: Urgent problems or destructive actions. - `auto`: Automatically determined based on context. - `neutral`: General information without specific intent." }, { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose." }, { "kind": "field", "name": "lang", "type": { "text": "string" }, "description": "The language of the text content. Use this when the text is in a different language than the rest of the page, allowing assistive technologies such as screen readers to invoke the correct pronunciation. The value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)." }, { "kind": "field", "name": "interestFor", "type": { "text": "string" }, "description": "ID of a component that should respond to interest (e.g. hover and focus) on this component." }, { "kind": "field", "name": "download", "type": { "text": "string" }, "description": "Causes the browser to treat the linked URL as a download with the string being the file name. Download only works for same-origin URLs or the `blob:` and `data:` schemes." }, { "kind": "field", "name": "target", "type": { "text": "\"auto\" | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"" }, "default": "'auto'", "description": "Specifies where to display the linked URL." }, { "kind": "field", "name": "commandFor", "type": { "text": "string" }, "description": "ID of a component that should respond to activations (e.g. clicks) on this component. See `command` for how to control the behavior of the target." }, { "kind": "field", "name": "command", "type": { "text": "\"--auto\" | \"--show\" | \"--hide\" | \"--toggle\" | \"--copy\"" }, "default": "'--auto'", "description": "Sets the action the `commandFor` should take when this clickable is activated. See the documentation of particular components for the actions they support. - `--auto`: a default action for the target component. - `--show`: shows the target component. - `--hide`: hides the target component. - `--toggle`: toggles the target component. - `--copy`: copies the target ClipboardItem." }, { "kind": "field", "name": "href", "type": { "text": "string" }, "description": "The URL to link to. - If set, it will navigate to the location specified by `href` after executing the `click` event. - If a `commandFor` is set, the `command` will be executed instead of the navigation." } ], "events": [ { "name": "click", "type": { "text": "CustomEvent" }, "description": "A callback fired when the link is clicked." } ], "attributes": [ { "name": "tone", "fieldName": "tone", "type": { "text": "\"auto\" | \"neutral\" | \"critical\"" }, "default": "'auto'", "description": "The semantic meaning and color treatment of the component. - `critical`: Urgent problems or destructive actions. - `auto`: Automatically determined based on context. - `neutral`: General information without specific intent." }, { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose." }, { "name": "lang", "fieldName": "lang", "type": { "text": "string" }, "description": "The language of the text content. Use this when the text is in a different language than the rest of the page, allowing assistive technologies such as screen readers to invoke the correct pronunciation. The value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)." }, { "name": "interestfor", "fieldName": "interestFor", "type": { "text": "string" }, "description": "ID of a component that should respond to interest (e.g. hover and focus) on this component." }, { "name": "download", "fieldName": "download", "type": { "text": "string" }, "description": "Causes the browser to treat the linked URL as a download with the string being the file name. Download only works for same-origin URLs or the `blob:` and `data:` schemes." }, { "name": "target", "fieldName": "target", "type": { "text": "\"auto\" | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"" }, "default": "'auto'", "description": "Specifies where to display the linked URL." }, { "name": "commandfor", "fieldName": "commandFor", "type": { "text": "string" }, "description": "ID of a component that should respond to activations (e.g. clicks) on this component. See `command` for how to control the behavior of the target." }, { "name": "command", "fieldName": "command", "type": { "text": "\"--auto\" | \"--show\" | \"--hide\" | \"--toggle\" | \"--copy\"" }, "default": "'--auto'", "description": "Sets the action the `commandFor` should take when this clickable is activated. See the documentation of particular components for the actions they support. - `--auto`: a default action for the target component. - `--show`: shows the target component. - `--hide`: hides the target component. - `--toggle`: toggles the target component. - `--copy`: copies the target ClipboardItem." }, { "name": "href", "fieldName": "href", "type": { "text": "string" }, "description": "The URL to link to. - If set, it will navigate to the location specified by `href` after executing the `click` event. - If a `commandFor` is set, the `command` will be executed instead of the navigation." } ], "superclass": { "name": "LinkBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/Link/LinkBase" }, "customElement": true, "tagName": "s-link" } ] }, { "kind": "javascript-module", "path": "dist/components/ListItem/index.js", "declarations": [ { "kind": "class", "description": "The list item component represents a single entry within an ordered list or unordered list. Use list item to structure individual points, steps, or items within a list, with each item automatically receiving appropriate list markers (bullets or numbers) from its parent list. List item must be used as a direct child of ordered list or unordered list components. Each list item can contain text, inline formatting, or other components to create rich list content.", "name": "ListItem", "slots": [ { "name": "", "description": "The content displayed within the list item, which represents a single entry in an ordered or unordered list." } ], "members": [ { "kind": "field", "name": "children", "type": { "text": "any" }, "description": "The content displayed within the list item, which represents a single entry in an ordered or unordered list." }, { "kind": "field", "name": "id", "type": { "text": "string | undefined" }, "description": "A unique identifier for the element." } ], "attributes": [ { "name": "children", "fieldName": "children", "type": { "text": "any" }, "description": "The content displayed within the list item, which represents a single entry in an ordered or unordered list." }, { "name": "id", "fieldName": "id", "type": { "text": "string | undefined" }, "description": "A unique identifier for the element." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-list-item" } ] }, { "kind": "javascript-module", "path": "dist/components/Menu/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the menu component.", "name": "Menu", "slots": [ { "name": "", "description": "The items displayed within the menu. Only accepts button and section components. Use button for individual menu actions and section to group related items." } ], "members": [ { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose." }, { "kind": "field", "name": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." } ], "attributes": [ { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose." }, { "name": "id", "fieldName": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." } ], "superclass": { "name": "PreactOverlayElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PreactOverlayElement" }, "customElement": true, "tagName": "s-menu" } ] }, { "kind": "javascript-module", "path": "dist/components/Modal/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the modal component.", "name": "Modal", "slots": [ { "name": "", "description": "The content displayed within the modal component, typically including form fields, information, or interactive elements." }, { "name": "primary-action", "description": "The main action button displayed in the modal footer, representing the primary action users should take. Only accepts a single button component with a `variant` of `primary`. This action should align with the modal's main purpose." }, { "name": "secondary-actions", "description": "Additional action buttons displayed in the modal footer, providing alternative or supporting actions. Only accepts button components with a `variant` of `secondary` or `auto`. These are visually de-emphasized to establish clear hierarchy." } ], "members": [ { "kind": "field", "name": "size", "type": { "text": "\"base\" | \"small-100\" | \"small\" | \"large\" | \"large-100\"" }, "description": "The size of the modal component, controlling its width and height. Larger sizes provide more space for content while smaller sizes are more compact." }, { "kind": "field", "name": "heading", "type": { "text": "string" }, "description": "A title that describes the content of the modal." }, { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose of the modal. When set, it will be announced to users using assistive technologies and will provide them with more context. This overrides the `heading` prop for screen readers." }, { "kind": "field", "name": "padding", "type": { "text": "\"base\" | \"none\"" }, "default": "'base'", "description": "Adjust the padding around the modal content. `base`: applies padding that is appropriate for the element. `none`: removes all padding from the element. This can be useful when elements inside the modal need to span to the edge of the modal. For example, a full-width image. In this case, rely on box with a padding of 'base' to bring back the desired padding for the rest of the content." }, { "kind": "field", "name": "hideOverlay", "type": { "text": "() => void" }, "description": "Method to hide an overlay." }, { "kind": "field", "name": "showOverlay", "type": { "text": "() => void" }, "description": "Method to show an overlay." }, { "kind": "field", "name": "toggleOverlay", "type": { "text": "() => void" }, "description": "Method to toggle the visiblity of an overlay." } ], "events": [ { "name": "hide", "type": { "text": "CustomEvent" }, "description": "A callback fired immediately when the modal starts to hide." }, { "name": "show", "type": { "text": "CustomEvent" }, "description": "A callback fired immediately when the modal starts to show." }, { "name": "afterhide", "type": { "text": "CustomEvent" }, "description": "A callback fired when the modal is completely hidden, after any hide animations have completed." }, { "name": "aftershow", "type": { "text": "CustomEvent" }, "description": "A callback fired when the modal is completely shown, after any show animations have completed." } ], "attributes": [ { "name": "size", "fieldName": "size", "type": { "text": "\"base\" | \"small-100\" | \"small\" | \"large\" | \"large-100\"" }, "description": "The size of the modal component, controlling its width and height. Larger sizes provide more space for content while smaller sizes are more compact." }, { "name": "heading", "fieldName": "heading", "type": { "text": "string" }, "description": "A title that describes the content of the modal." }, { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose of the modal. When set, it will be announced to users using assistive technologies and will provide them with more context. This overrides the `heading` prop for screen readers." }, { "name": "padding", "fieldName": "padding", "type": { "text": "\"base\" | \"none\"" }, "default": "'base'", "description": "Adjust the padding around the modal content. `base`: applies padding that is appropriate for the element. `none`: removes all padding from the element. This can be useful when elements inside the modal need to span to the edge of the modal. For example, a full-width image. In this case, rely on box with a padding of 'base' to bring back the desired padding for the rest of the content." }, { "name": "hideoverlay", "fieldName": "hideOverlay", "type": { "text": "() => void" }, "description": "Method to hide an overlay." }, { "name": "showoverlay", "fieldName": "showOverlay", "type": { "text": "() => void" }, "description": "Method to show an overlay." }, { "name": "toggleoverlay", "fieldName": "toggleOverlay", "type": { "text": "() => void" }, "description": "Method to toggle the visiblity of an overlay." } ], "superclass": { "name": "ModalBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/Modal/ModalBase" }, "customElement": true, "tagName": "s-modal" } ] }, { "kind": "javascript-module", "path": "dist/components/MoneyField/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the money field component.", "name": "MoneyField", "slots": [ { "name": "error" }, { "name": "details" } ], "members": [ { "kind": "field", "name": "value", "type": { "text": "string" } }, { "kind": "field", "name": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "kind": "field", "name": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "kind": "field", "name": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "kind": "field", "name": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "kind": "field", "name": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "kind": "field", "name": "defaultValue", "type": { "text": "string" }, "description": "The default value for the field." }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "kind": "field", "name": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "kind": "field", "name": "autocomplete", "type": { "text": "string" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "kind": "field", "name": "max", "type": { "text": "number" }, "default": "Infinity", "description": "The highest decimal or integer to be accepted for the field. When used with `step` the value will round down to the max number. Note: a user will still be able to use the keyboard to input a number higher than the max. It is up to the developer to add appropriate validation." }, { "kind": "field", "name": "min", "type": { "text": "number" }, "default": "-Infinity", "description": "The lowest decimal or integer to be accepted for the field. When used with `step` the value will round up to the min number. Note: a user will still be able to use the keyboard to input a number lower than the min. It is up to the developer to add appropriate validation." }, { "kind": "field", "name": "currencyCode", "type": { "text": "\"auto\" | \"USD\" | \"EUR\" | \"GBP\" | \"CAD\" | \"AFN\" | \"ALL\" | \"DZD\" | \"AOA\" | \"ARS\" | \"AMD\" | \"AWG\" | \"AUD\" | \"BBD\" | \"AZN\" | \"BDT\" | \"BSD\" | \"BHD\" | \"BIF\" | \"BZD\" | \"BMD\" | \"BTN\" | \"BAM\" | \"BRL\" | \"BOB\" | \"BWP\" | \"BND\" | \"BGN\" | \"MMK\" | \"KHR\" | \"CVE\" | \"KYD\" | \"XAF\" | \"CLP\" | \"CNY\" | \"COP\" | \"KMF\" | \"CDF\" | \"CRC\" | \"HRK\" | \"CZK\" | \"DKK\" | \"DOP\" | \"XCD\" | \"EGP\" | \"ETB\" | \"XPF\" | \"FJD\" | \"GMD\" | \"GHS\" | \"GTQ\" | \"GYD\" | \"GEL\" | \"HTG\" | \"HNL\" | \"HKD\" | \"HUF\" | \"ISK\" | \"INR\" | \"IDR\" | \"ILS\" | \"IQD\" | \"JMD\" | \"JPY\" | \"JEP\" | \"JOD\" | \"KZT\" | \"KES\" | \"KWD\" | \"KGS\" | \"LAK\" | \"LVL\" | \"LBP\" | \"LSL\" | \"LRD\" | \"LTL\" | \"MGA\" | \"MKD\" | \"MOP\" | \"MWK\" | \"MVR\" | \"MXN\" | \"MYR\" | \"MUR\" | \"MDL\" | \"MAD\" | \"MNT\" | \"MZN\" | \"NAD\" | \"NPR\" | \"ANG\" | \"NZD\" | \"NIO\" | \"NGN\" | \"NOK\" | \"OMR\" | \"PAB\" | \"PKR\" | \"PGK\" | \"PYG\" | \"PEN\" | \"PHP\" | \"PLN\" | \"QAR\" | \"RON\" | \"RUB\" | \"RWF\" | \"WST\" | \"SAR\" | \"RSD\" | \"SCR\" | \"SGD\" | \"SDG\" | \"SYP\" | \"ZAR\" | \"KRW\" | \"SSP\" | \"SBD\" | \"LKR\" | \"SRD\" | \"SZL\" | \"SEK\" | \"CHF\" | \"TWD\" | \"THB\" | \"TZS\" | \"TTD\" | \"TND\" | \"TRY\" | \"TMT\" | \"UGX\" | \"UAH\" | \"AED\" | \"UYU\" | \"UZS\" | \"VUV\" | \"VND\" | \"XOF\" | \"YER\" | \"ZMW\" | \"BYN\" | \"BYR\" | \"DJF\" | \"ERN\" | \"FKP\" | \"GIP\" | \"GNF\" | \"IRR\" | \"KID\" | \"LYD\" | \"MRU\" | \"SLL\" | \"SHP\" | \"SOS\" | \"STD\" | \"STN\" | \"TJS\" | \"TOP\" | \"VED\" | \"VEF\" | \"VES\" | \"XXX\"" }, "default": "'auto'", "description": "The currency code of the field. When set to 'auto', the field will display the currency code of the shop. If no currency code is set for the shop, resolve to 'XXX' the explicit non value. This value will match the global currency code of the shop, so if you need to know the currency code of the field, you can read the value from those APIs." } ], "events": [ { "name": "input", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user makes changes to the field value. This fires before `onChange`." }, { "name": "change", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user has finished editing the field, such as when they blur the field." }, { "name": "focus", "type": { "text": "CustomEvent" }, "description": "A callback fired when the field receives focus." }, { "name": "blur", "type": { "text": "CustomEvent" }, "description": "A callback fired when the field loses focus." } ], "attributes": [ { "name": "value", "fieldName": "value", "type": { "text": "string" } }, { "name": "id", "fieldName": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "name": "details", "fieldName": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "name": "error", "fieldName": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "name": "label", "fieldName": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "name": "required", "fieldName": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "name": "name", "fieldName": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "name": "labelaccessibilityvisibility", "fieldName": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "name": "value", "fieldName": "defaultValue", "type": { "text": "string" }, "description": "The default value for the field." }, { "name": "placeholder", "fieldName": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "name": "readonly", "fieldName": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "name": "autocomplete", "fieldName": "autocomplete", "type": { "text": "string" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "name": "max", "fieldName": "max", "type": { "text": "number" }, "default": "Infinity", "description": "The highest decimal or integer to be accepted for the field. When used with `step` the value will round down to the max number. Note: a user will still be able to use the keyboard to input a number higher than the max. It is up to the developer to add appropriate validation." }, { "name": "min", "fieldName": "min", "type": { "text": "number" }, "default": "-Infinity", "description": "The lowest decimal or integer to be accepted for the field. When used with `step` the value will round up to the min number. Note: a user will still be able to use the keyboard to input a number lower than the min. It is up to the developer to add appropriate validation." }, { "name": "currencycode", "fieldName": "currencyCode", "type": { "text": "\"auto\" | \"USD\" | \"EUR\" | \"GBP\" | \"CAD\" | \"AFN\" | \"ALL\" | \"DZD\" | \"AOA\" | \"ARS\" | \"AMD\" | \"AWG\" | \"AUD\" | \"BBD\" | \"AZN\" | \"BDT\" | \"BSD\" | \"BHD\" | \"BIF\" | \"BZD\" | \"BMD\" | \"BTN\" | \"BAM\" | \"BRL\" | \"BOB\" | \"BWP\" | \"BND\" | \"BGN\" | \"MMK\" | \"KHR\" | \"CVE\" | \"KYD\" | \"XAF\" | \"CLP\" | \"CNY\" | \"COP\" | \"KMF\" | \"CDF\" | \"CRC\" | \"HRK\" | \"CZK\" | \"DKK\" | \"DOP\" | \"XCD\" | \"EGP\" | \"ETB\" | \"XPF\" | \"FJD\" | \"GMD\" | \"GHS\" | \"GTQ\" | \"GYD\" | \"GEL\" | \"HTG\" | \"HNL\" | \"HKD\" | \"HUF\" | \"ISK\" | \"INR\" | \"IDR\" | \"ILS\" | \"IQD\" | \"JMD\" | \"JPY\" | \"JEP\" | \"JOD\" | \"KZT\" | \"KES\" | \"KWD\" | \"KGS\" | \"LAK\" | \"LVL\" | \"LBP\" | \"LSL\" | \"LRD\" | \"LTL\" | \"MGA\" | \"MKD\" | \"MOP\" | \"MWK\" | \"MVR\" | \"MXN\" | \"MYR\" | \"MUR\" | \"MDL\" | \"MAD\" | \"MNT\" | \"MZN\" | \"NAD\" | \"NPR\" | \"ANG\" | \"NZD\" | \"NIO\" | \"NGN\" | \"NOK\" | \"OMR\" | \"PAB\" | \"PKR\" | \"PGK\" | \"PYG\" | \"PEN\" | \"PHP\" | \"PLN\" | \"QAR\" | \"RON\" | \"RUB\" | \"RWF\" | \"WST\" | \"SAR\" | \"RSD\" | \"SCR\" | \"SGD\" | \"SDG\" | \"SYP\" | \"ZAR\" | \"KRW\" | \"SSP\" | \"SBD\" | \"LKR\" | \"SRD\" | \"SZL\" | \"SEK\" | \"CHF\" | \"TWD\" | \"THB\" | \"TZS\" | \"TTD\" | \"TND\" | \"TRY\" | \"TMT\" | \"UGX\" | \"UAH\" | \"AED\" | \"UYU\" | \"UZS\" | \"VUV\" | \"VND\" | \"XOF\" | \"YER\" | \"ZMW\" | \"BYN\" | \"BYR\" | \"DJF\" | \"ERN\" | \"FKP\" | \"GIP\" | \"GNF\" | \"IRR\" | \"KID\" | \"LYD\" | \"MRU\" | \"SLL\" | \"SHP\" | \"SOS\" | \"STD\" | \"STN\" | \"TJS\" | \"TOP\" | \"VED\" | \"VEF\" | \"VES\" | \"XXX\"" }, "default": "'auto'", "description": "The currency code of the field. When set to 'auto', the field will display the currency code of the shop. If no currency code is set for the shop, resolve to 'XXX' the explicit non value. This value will match the global currency code of the shop, so if you need to know the currency code of the field, you can read the value from those APIs." } ], "superclass": { "name": "MoneyFieldBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/MoneyField/MoneyFieldBase" }, "customElement": true, "tagName": "s-money-field" } ] }, { "kind": "javascript-module", "path": "dist/components/Number/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the number component.", "name": "Number", "slots": [ { "name": "", "description": "The number to display. The component styles the value you pass in — typography, tone, and color — and renders it as given, so format and localize it yourself." } ], "members": [ { "kind": "field", "name": "tone", "type": { "text": "\"auto\" | \"neutral\" | \"info\" | \"success\" | \"caution\" | \"warning\" | \"critical\"" }, "default": "'auto'", "description": "The semantic tone that's applied to the number, which changes its color to convey meaning. - `info`: Informational content or helpful tips (blue). - `success`: Positive outcomes or successful states (green). - `warning`: Important warnings about potential issues (orange). - `critical`: Urgent problems or destructive actions (red). - `auto`: Automatically determined based on context. - `neutral`: General information without specific intent (gray). - `caution`: Advisory notices that need attention (yellow)." }, { "kind": "field", "name": "color", "type": { "text": "\"subdued\" | \"base\"" }, "default": "'base'", "description": "The color emphasis applied to the number. - `base`: Standard emphasis for numeric content. - `subdued`: Deemphasized color for secondary or supporting numeric content." }, { "kind": "field", "name": "fontSize", "type": { "text": "\"base\" | \"auto\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\"" }, "default": "'auto'", "description": "Font size of the number. The named values also apply their matching line-height and letter-spacing." }, { "kind": "field", "name": "fontWeight", "type": { "text": "\"base\" | \"auto\" | \"medium\" | \"semibold\" | \"bold\"" }, "default": "'auto'", "description": "Font weight of the number." }, { "kind": "field", "name": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "kind": "field", "name": "dir", "type": { "text": "\"auto\" | \"ltr\" | \"rtl\"" }, "default": "''", "description": "Indicates the directionality of the element’s text. - `ltr`: languages written from left to right (e.g. English) - `rtl`: languages written from right to left (e.g. Arabic) - `auto`: the user agent determines the direction based on the content - `''`: direction is inherited from parent elements (equivalent to not setting the attribute)" } ], "attributes": [ { "name": "tone", "fieldName": "tone", "type": { "text": "\"auto\" | \"neutral\" | \"info\" | \"success\" | \"caution\" | \"warning\" | \"critical\"" }, "default": "'auto'", "description": "The semantic tone that's applied to the number, which changes its color to convey meaning. - `info`: Informational content or helpful tips (blue). - `success`: Positive outcomes or successful states (green). - `warning`: Important warnings about potential issues (orange). - `critical`: Urgent problems or destructive actions (red). - `auto`: Automatically determined based on context. - `neutral`: General information without specific intent (gray). - `caution`: Advisory notices that need attention (yellow)." }, { "name": "color", "fieldName": "color", "type": { "text": "\"subdued\" | \"base\"" }, "default": "'base'", "description": "The color emphasis applied to the number. - `base`: Standard emphasis for numeric content. - `subdued`: Deemphasized color for secondary or supporting numeric content." }, { "name": "fontsize", "fieldName": "fontSize", "type": { "text": "\"base\" | \"auto\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\"" }, "default": "'auto'", "description": "Font size of the number. The named values also apply their matching line-height and letter-spacing." }, { "name": "fontweight", "fieldName": "fontWeight", "type": { "text": "\"base\" | \"auto\" | \"medium\" | \"semibold\" | \"bold\"" }, "default": "'auto'", "description": "Font weight of the number." }, { "name": "accessibilityvisibility", "fieldName": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "name": "dir", "fieldName": "dir", "type": { "text": "\"auto\" | \"ltr\" | \"rtl\"" }, "default": "''", "description": "Indicates the directionality of the element’s text. - `ltr`: languages written from left to right (e.g. English) - `rtl`: languages written from right to left (e.g. Arabic) - `auto`: the user agent determines the direction based on the content - `''`: direction is inherited from parent elements (equivalent to not setting the attribute)" } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-number" } ] }, { "kind": "javascript-module", "path": "dist/components/NumberField/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the number field component.", "name": "NumberField", "slots": [ { "name": "error" }, { "name": "details" } ], "members": [ { "kind": "field", "name": "value", "type": { "text": "string" } }, { "kind": "field", "name": "inputMode", "type": { "text": "\"decimal\" | \"numeric\"" }, "default": "'decimal'", "description": "The type of virtual keyboard to display on mobile devices. - `decimal`: Shows a numeric keyboard with a decimal point, suitable for prices or measurements. - `numeric`: Shows a numeric keyboard without a decimal point, suitable for whole numbers like quantities. Learn more about the [inputmode attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)." }, { "kind": "field", "name": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "kind": "field", "name": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "kind": "field", "name": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "kind": "field", "name": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "kind": "field", "name": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "kind": "field", "name": "defaultValue", "type": { "text": "string" }, "description": "The default value for the field." }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "kind": "field", "name": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "kind": "field", "name": "autocomplete", "type": { "text": "\"one-time-code\" | \"cc-number\" | \"cc-csc\" | \"on\" | \"off\" | \"shipping one-time-code\" | \"billing one-time-code\" | \"shipping cc-number\" | \"shipping cc-csc\" | \"billing cc-number\" | \"billing cc-csc\"" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "kind": "field", "name": "max", "type": { "text": "number" }, "default": "Infinity", "description": "The highest decimal or integer to be accepted for the field. When used with `step` the value will round down to the max number. Note: a user will still be able to use the keyboard to input a number higher than the max. It is up to the developer to add appropriate validation." }, { "kind": "field", "name": "suffix", "type": { "text": "string" }, "default": "''", "description": "A value to be displayed immediately after the editable portion of the field. This is useful for displaying an implied part of the value, such as \"@shopify.com\", or \"%\". This cannot be edited by the user, and it isn't included in the value of the field. It may not be displayed until the user has interacted with the input. For example, an inline label may take the place of the suffix until the user focuses the input." }, { "kind": "field", "name": "prefix", "type": { "text": "string" }, "default": "''", "description": "A value to be displayed immediately before the editable portion of the field. This is useful for displaying an implied part of the value, such as \"https://\" or \"+353\". This cannot be edited by the user, and it isn't included in the value of the field. It may not be displayed until the user has interacted with the input. For example, an inline label may take the place of the prefix until the user focuses the input." }, { "kind": "field", "name": "min", "type": { "text": "number" }, "default": "-Infinity", "description": "The lowest decimal or integer to be accepted for the field. When used with `step` the value will round up to the min number. Note: a user will still be able to use the keyboard to input a number lower than the min. It is up to the developer to add appropriate validation." }, { "kind": "field", "name": "step", "type": { "text": "number" }, "default": "1", "description": "The amount the value can increase or decrease by. This can be an integer or decimal. If a `max` or `min` is specified with `step` when increasing/decreasing the value via the buttons, the final value will always round to the `max` or `min` rather than the closest valid amount." } ], "events": [ { "name": "input", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user makes changes to the field value. This fires before `onChange`." }, { "name": "change", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user has finished editing the field, such as when they blur the field." }, { "name": "focus", "type": { "text": "CustomEvent" }, "description": "A callback fired when the field receives focus." }, { "name": "blur", "type": { "text": "CustomEvent" }, "description": "A callback fired when the field loses focus." } ], "attributes": [ { "name": "value", "fieldName": "value", "type": { "text": "string" } }, { "name": "inputmode", "fieldName": "inputMode", "type": { "text": "\"decimal\" | \"numeric\"" }, "default": "'decimal'", "description": "The type of virtual keyboard to display on mobile devices. - `decimal`: Shows a numeric keyboard with a decimal point, suitable for prices or measurements. - `numeric`: Shows a numeric keyboard without a decimal point, suitable for whole numbers like quantities. Learn more about the [inputmode attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)." }, { "name": "id", "fieldName": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "name": "details", "fieldName": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "name": "error", "fieldName": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "name": "label", "fieldName": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "name": "required", "fieldName": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "name": "name", "fieldName": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "name": "labelaccessibilityvisibility", "fieldName": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "name": "value", "fieldName": "defaultValue", "type": { "text": "string" }, "description": "The default value for the field." }, { "name": "placeholder", "fieldName": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "name": "readonly", "fieldName": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "name": "autocomplete", "fieldName": "autocomplete", "type": { "text": "\"one-time-code\" | \"cc-number\" | \"cc-csc\" | \"on\" | \"off\" | \"shipping one-time-code\" | \"billing one-time-code\" | \"shipping cc-number\" | \"shipping cc-csc\" | \"billing cc-number\" | \"billing cc-csc\"" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "name": "max", "fieldName": "max", "type": { "text": "number" }, "default": "Infinity", "description": "The highest decimal or integer to be accepted for the field. When used with `step` the value will round down to the max number. Note: a user will still be able to use the keyboard to input a number higher than the max. It is up to the developer to add appropriate validation." }, { "name": "suffix", "fieldName": "suffix", "type": { "text": "string" }, "default": "''", "description": "A value to be displayed immediately after the editable portion of the field. This is useful for displaying an implied part of the value, such as \"@shopify.com\", or \"%\". This cannot be edited by the user, and it isn't included in the value of the field. It may not be displayed until the user has interacted with the input. For example, an inline label may take the place of the suffix until the user focuses the input." }, { "name": "prefix", "fieldName": "prefix", "type": { "text": "string" }, "default": "''", "description": "A value to be displayed immediately before the editable portion of the field. This is useful for displaying an implied part of the value, such as \"https://\" or \"+353\". This cannot be edited by the user, and it isn't included in the value of the field. It may not be displayed until the user has interacted with the input. For example, an inline label may take the place of the prefix until the user focuses the input." }, { "name": "min", "fieldName": "min", "type": { "text": "number" }, "default": "-Infinity", "description": "The lowest decimal or integer to be accepted for the field. When used with `step` the value will round up to the min number. Note: a user will still be able to use the keyboard to input a number lower than the min. It is up to the developer to add appropriate validation." }, { "name": "step", "fieldName": "step", "type": { "text": "number" }, "default": "1", "description": "The amount the value can increase or decrease by. This can be an integer or decimal. If a `max` or `min` is specified with `step` when increasing/decreasing the value via the buttons, the final value will always round to the `max` or `min` rather than the closest valid amount." } ], "superclass": { "name": "NumberFieldBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/NumberField/NumberFieldBase" }, "customElement": true, "tagName": "s-number-field" } ] }, { "kind": "javascript-module", "path": "dist/components/Option/index.js", "declarations": [ { "kind": "class", "description": "Represents a single option within a select component. Use only as a child of s-select components.", "name": "Option", "slots": [ { "name": "", "description": "The text or elements displayed as the option label, which identifies the selectable choice to users in a dropdown or selection list." } ], "members": [ { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the control, disallowing any interaction." }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "The value used in form data when the control is checked." }, { "kind": "field", "name": "selected", "type": { "text": "boolean" }, "default": "false", "description": "Whether the control is active." }, { "kind": "field", "name": "defaultSelected", "type": { "text": "boolean" }, "default": "false", "description": "Whether the control is active by default." } ], "attributes": [ { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the control, disallowing any interaction." }, { "name": "value", "fieldName": "value", "type": { "text": "string" }, "description": "The value used in form data when the control is checked." }, { "name": "selected", "fieldName": "selected", "type": { "text": "boolean" }, "default": "false", "description": "Whether the control is active." }, { "name": "selected", "fieldName": "defaultSelected", "type": { "text": "boolean" }, "default": "false", "description": "Whether the control is active by default." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-option" } ] }, { "kind": "javascript-module", "path": "dist/components/OptionGroup/index.js", "declarations": [ { "kind": "class", "description": "Represents a group of options within a select component. Use only as a child of `s-select` components.", "name": "OptionGroup", "slots": [ { "name": "", "description": "The selectable options displayed in the dropdown list. Accepts option components for individual selectable items within this group." } ], "members": [ { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Whether the options within this group can be selected or not." }, { "kind": "field", "name": "label", "type": { "text": "string" }, "description": "The user-facing label for this group of options." } ], "attributes": [ { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Whether the options within this group can be selected or not." }, { "name": "label", "fieldName": "label", "type": { "text": "string" }, "description": "The user-facing label for this group of options." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-option-group" } ] }, { "kind": "javascript-module", "path": "dist/components/OrderedList/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the ordered list component.", "name": "OrderedList", "slots": [ { "name": "", "description": "The list entries displayed within the ordered list, where each item is numbered sequentially. Only accepts list item components as children. Each list item represents a single numbered entry in the sequence." } ], "members": [ { "kind": "field", "name": "children", "type": { "text": "any" }, "description": "The content of the OrderededList. Accepts only `ListItem` components." }, { "kind": "field", "name": "id", "type": { "text": "string | undefined" }, "description": "A unique identifier for the element." } ], "attributes": [ { "name": "children", "fieldName": "children", "type": { "text": "any" }, "description": "The content of the OrderededList. Accepts only `ListItem` components." }, { "name": "id", "fieldName": "id", "type": { "text": "string | undefined" }, "description": "A unique identifier for the element." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-ordered-list" } ] }, { "kind": "javascript-module", "path": "dist/components/Page/index.js", "declarations": [ { "kind": "class", "description": "Use as the outer wrapper of a page.", "name": "Page", "slots": [ { "name": "", "description": "The main page content displayed within the page component, which serves as the primary container for the page's information and interface elements." }, { "name": "aside", "description": "The content to display in the aside section of the page. This slot is only rendered when `inlineSize` is \"base\"." }, { "name": "primary-action", "description": "The primary action for the page. Only accepts a single button component with a `variant` of `primary`." }, { "name": "secondary-actions", "description": "The secondary actions for the page. Only accepts button group and button components with a `variant` of `secondary` or `auto`." }, { "name": "breadcrumb-actions", "description": "The navigation back actions for the page. Only accepts link components." }, { "name": "supplemental-start", "description": "A slot for content that comes before the main content, such as an `s-banner`." } ], "members": [ { "kind": "field", "name": "inlineSize", "type": { "text": "\"base\" | \"small\" | \"large\"" }, "default": "'base'", "description": "The inline size of the page - `base` corresponds to a set default inline size - `large` full width with whitespace" }, { "kind": "field", "name": "heading", "type": { "text": "string" }, "description": "The main page heading" } ], "attributes": [ { "name": "inlinesize", "fieldName": "inlineSize", "type": { "text": "\"base\" | \"small\" | \"large\"" }, "default": "'base'", "description": "The inline size of the page - `base` corresponds to a set default inline size - `large` full width with whitespace" }, { "name": "heading", "fieldName": "heading", "type": { "text": "string" }, "description": "The main page heading" } ], "superclass": { "name": "PageBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/Page/PageBase" }, "customElement": true, "tagName": "s-page" } ] }, { "kind": "javascript-module", "path": "dist/components/Paragraph/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the paragraph component.", "name": "Paragraph", "slots": [ { "name": "", "description": "The paragraph text content displayed within the paragraph component, which presents a block of related text with appropriate styling." } ], "members": [ { "kind": "field", "name": "color", "type": { "text": "\"subdued\" | \"base\"" }, "description": "Modify the color to be more or less intense." }, { "kind": "field", "name": "tone", "type": { "text": "\"auto\" | \"neutral\" | \"info\" | \"success\" | \"caution\" | \"warning\" | \"critical\"" }, "description": "The semantic tone that's applied to the paragraph text, which changes its color to convey meaning. - `info`: Informational content or helpful tips (blue). - `success`: Positive outcomes or successful states (green). - `warning`: Important warnings about potential issues (orange). - `critical`: Urgent problems or destructive actions (red). - `caution`: Advisory notices that need attention (yellow)." }, { "kind": "field", "name": "fontSize", "type": { "text": "\"base\" | \"auto\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\"" }, "default": "'auto'", "description": "Font size of the paragraph. The named values also apply their matching line-height and letter-spacing." }, { "kind": "field", "name": "fontWeight", "type": { "text": "\"base\" | \"auto\" | \"medium\" | \"semibold\" | \"bold\"" }, "default": "'auto'", "description": "Font weight of the paragraph." }, { "kind": "field", "name": "fontVariantNumeric", "type": { "text": "\"auto\" | \"normal\" | \"tabular-nums\"" }, "description": "Set the numeric properties of the font." }, { "kind": "field", "name": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "kind": "field", "name": "dir", "type": { "text": "\"auto\" | \"ltr\" | \"rtl\"" }, "default": "''", "description": "Indicates the directionality of the element’s text. - `ltr`: languages written from left to right (e.g. English) - `rtl`: languages written from right to left (e.g. Arabic) - `auto`: the user agent determines the direction based on the content - `''`: direction is inherited from parent elements (equivalent to not setting the attribute)" }, { "kind": "field", "name": "lineClamp", "type": { "text": "number" }, "default": "Infinity - no truncation is applied", "description": "Truncates the text content to the specified number of lines." } ], "attributes": [ { "name": "color", "fieldName": "color", "type": { "text": "\"subdued\" | \"base\"" }, "description": "Modify the color to be more or less intense." }, { "name": "tone", "fieldName": "tone", "type": { "text": "\"auto\" | \"neutral\" | \"info\" | \"success\" | \"caution\" | \"warning\" | \"critical\"" }, "description": "The semantic tone that's applied to the paragraph text, which changes its color to convey meaning. - `info`: Informational content or helpful tips (blue). - `success`: Positive outcomes or successful states (green). - `warning`: Important warnings about potential issues (orange). - `critical`: Urgent problems or destructive actions (red). - `caution`: Advisory notices that need attention (yellow)." }, { "name": "fontsize", "fieldName": "fontSize", "type": { "text": "\"base\" | \"auto\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\"" }, "default": "'auto'", "description": "Font size of the paragraph. The named values also apply their matching line-height and letter-spacing." }, { "name": "fontweight", "fieldName": "fontWeight", "type": { "text": "\"base\" | \"auto\" | \"medium\" | \"semibold\" | \"bold\"" }, "default": "'auto'", "description": "Font weight of the paragraph." }, { "name": "fontvariantnumeric", "fieldName": "fontVariantNumeric", "type": { "text": "\"auto\" | \"normal\" | \"tabular-nums\"" }, "description": "Set the numeric properties of the font." }, { "name": "accessibilityvisibility", "fieldName": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "name": "dir", "fieldName": "dir", "type": { "text": "\"auto\" | \"ltr\" | \"rtl\"" }, "default": "''", "description": "Indicates the directionality of the element’s text. - `ltr`: languages written from left to right (e.g. English) - `rtl`: languages written from right to left (e.g. Arabic) - `auto`: the user agent determines the direction based on the content - `''`: direction is inherited from parent elements (equivalent to not setting the attribute)" }, { "name": "lineclamp", "fieldName": "lineClamp", "type": { "text": "number" }, "default": "Infinity - no truncation is applied", "description": "Truncates the text content to the specified number of lines." } ], "superclass": { "name": "ParagraphBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/Paragraph/ParagraphBase" }, "customElement": true, "tagName": "s-paragraph" } ] }, { "kind": "javascript-module", "path": "dist/components/PasswordField/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the password field component.", "name": "PasswordField", "slots": [ { "name": "error" }, { "name": "details" } ], "members": [ { "kind": "field", "name": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "The current value for the field. If omitted, the field will be empty." }, { "kind": "field", "name": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "kind": "field", "name": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "kind": "field", "name": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "kind": "field", "name": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "kind": "field", "name": "defaultValue", "type": { "text": "string" }, "description": "The default value for the field." }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "kind": "field", "name": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "kind": "field", "name": "autocomplete", "type": { "text": "\"current-password\" | \"new-password\" | \"on\" | \"off\" | \"shipping current-password\" | \"shipping new-password\" | \"billing current-password\" | \"billing new-password\"" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "kind": "field", "name": "maxLength", "type": { "text": "number" }, "default": "Infinity", "description": "Specifies the maximum number of characters allowed." }, { "kind": "field", "name": "minLength", "type": { "text": "number" }, "default": "0", "description": "Specifies the min number of characters allowed." } ], "events": [ { "name": "input", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user makes changes to the field value. This fires before `onChange`." }, { "name": "change", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user has finished editing the field, such as when they blur the field." }, { "name": "focus", "type": { "text": "CustomEvent" }, "description": "A callback fired when the field receives focus." }, { "name": "blur", "type": { "text": "CustomEvent" }, "description": "A callback fired when the field loses focus." } ], "attributes": [ { "name": "id", "fieldName": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "name": "name", "fieldName": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "name": "value", "fieldName": "value", "type": { "text": "string" }, "description": "The current value for the field. If omitted, the field will be empty." }, { "name": "details", "fieldName": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "name": "error", "fieldName": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "name": "label", "fieldName": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "name": "required", "fieldName": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "name": "labelaccessibilityvisibility", "fieldName": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "name": "value", "fieldName": "defaultValue", "type": { "text": "string" }, "description": "The default value for the field." }, { "name": "placeholder", "fieldName": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "name": "readonly", "fieldName": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "name": "autocomplete", "fieldName": "autocomplete", "type": { "text": "\"current-password\" | \"new-password\" | \"on\" | \"off\" | \"shipping current-password\" | \"shipping new-password\" | \"billing current-password\" | \"billing new-password\"" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "name": "maxlength", "fieldName": "maxLength", "type": { "text": "number" }, "default": "Infinity", "description": "Specifies the maximum number of characters allowed." }, { "name": "minlength", "fieldName": "minLength", "type": { "text": "number" }, "default": "0", "description": "Specifies the min number of characters allowed." } ], "superclass": { "name": "PasswordFieldBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/PasswordField/PasswordFieldBase" }, "customElement": true, "tagName": "s-password-field" } ] }, { "kind": "javascript-module", "path": "dist/components/Popover/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the popover component.", "name": "Popover", "slots": [ { "name": "", "description": "The content displayed within the popover, which appears in an overlay positioned relative to its trigger element. Typically contains menus, action lists, or supplementary information." } ], "members": [ { "kind": "field", "name": "blockSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "Adjust the block size." }, { "kind": "field", "name": "inlineSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "Adjust the inline size." }, { "kind": "field", "name": "maxBlockSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "Adjust the maximum block size." }, { "kind": "field", "name": "maxInlineSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "Adjust the maximum inline size." }, { "kind": "field", "name": "minBlockSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "Adjust the minimum block size." }, { "kind": "field", "name": "minInlineSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "Adjust the minimum inline size." } ], "events": [ { "name": "hide", "type": { "text": "CustomEvent" }, "description": "A callback fired immediately when the popover starts to hide, before any exit animation. Use to perform cleanup or save state before the popover dismisses." }, { "name": "show", "type": { "text": "CustomEvent" }, "description": "A callback fired immediately when the popover starts to show, before any entrance animation. Use to prepare content or update positioning logic." }, { "name": "afterhide", "type": { "text": "CustomEvent" }, "description": "A callback fired after the popover has fully hidden and any exit animation completes. Use to reset selections or update the trigger button state." }, { "name": "aftershow", "type": { "text": "CustomEvent" }, "description": "A callback fired after the popover has fully shown and any entrance animation completes. Use to focus an element inside the popover or announce content to screen readers." }, { "name": "toggle", "type": { "text": "Event" }, "description": "A callback fired when the popover visibility toggles. Use for unified open/close handling when you don't need separate show and hide logic." }, { "name": "aftertoggle", "type": { "text": "Event" }, "description": "A callback fired after the popover visibility toggle completes and any animation finishes. Use for post-transition updates." } ], "attributes": [ { "name": "blocksize", "fieldName": "blockSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "Adjust the block size." }, { "name": "inlinesize", "fieldName": "inlineSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "Adjust the inline size." }, { "name": "maxblocksize", "fieldName": "maxBlockSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "Adjust the maximum block size." }, { "name": "maxinlinesize", "fieldName": "maxInlineSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "Adjust the maximum inline size." }, { "name": "minblocksize", "fieldName": "minBlockSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "Adjust the minimum block size." }, { "name": "mininlinesize", "fieldName": "minInlineSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "Adjust the minimum inline size." } ], "superclass": { "name": "PreactPopoverElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PreactPopoverElement" }, "customElement": true, "tagName": "s-popover" } ] }, { "kind": "javascript-module", "path": "dist/components/PressButton/index.js", "declarations": [ { "kind": "class", "description": "", "name": "PressButton", "slots": [ { "name": "", "description": "The content of the PressButton." } ], "members": [ { "kind": "field", "name": "tone", "type": { "text": "\"neutral\"" }, "description": "Sets the tone of the Button based on the intention of the information being conveyed." }, { "kind": "field", "name": "icon", "type": { "text": "\"color\" | \"info\" | \"status\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"align-horizontal-centers\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"arrows-out-horizontal-filled\" | \"asterisk\" | \"attachment\" | \"automation\" | \"automation-filled\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"bill\" | \"bill-filled\" | \"blank\" | \"blank-filled\" | \"blog\" | \"blog-filled\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"brain\" | \"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-abandoned-filled\" | \"cart-discount\" | \"cart-down\" | \"cart-down-filled\" | \"cart-sale\" | \"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\" | \"collection-featured\" | \"collection-filled\" | \"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\" | \"delivery\" | \"desktop\" | \"disabled\" | \"discount\" | \"discount-add\" | \"discount-code\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"duplicate\" | \"edit\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"favicon\" | \"file\" | \"file-filled\" | \"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\" | \"gauge-filled\" | \"generated-app\" | \"generated-app-filled\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-asia-filled\" | \"globe-europe\" | \"globe-europe-filled\" | \"globe-filled\" | \"globe-lines\" | \"globe-list\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"icons\" | \"identity-card\" | \"identity-card-filled\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"incomplete\" | \"inheritance\" | \"inventory\" | \"inventory-filled\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layer\" | \"layout-block\" | \"layout-block-ai\" | \"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\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-filled\" | \"location\" | \"location-none\" | \"lock\" | \"logo-apple-tap-to-pay-filled\" | \"magic\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-euro-filled\" | \"markets-rupee\" | \"markets-rupee-filled\" | \"markets-yen\" | \"markets-yen-filled\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"megaphone-filled\" | \"mention\" | \"menu\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-filled\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money\" | \"money-filled\" | \"money-none\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order\" | \"order-batches\" | \"order-draft\" | \"order-draft-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-fulfilled\" | \"package-on-hold\" | \"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\" | \"passkey\" | \"passkey-filled\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-filled\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"price-list\" | \"price-list-filled\" | \"print\" | \"product\" | \"product-add\" | \"product-cost\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"rank-bottom\" | \"rank-top\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-euro-filled\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-pound-filled\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-rupee-filled\" | \"receipt-yen\" | \"receipt-yen-filled\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"replace\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"search\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"select\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-network\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-filled\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"split\" | \"sports\" | \"star\" | \"star-filled\" | \"star-list\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-ai\" | \"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-in-rows-filled\" | \"text-indent\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-cart\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wallet-filled\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-filled\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"empty\"" }, "description": "The type of icon to be displayed in the Button." }, { "kind": "field", "name": "variant", "type": { "text": "\"secondary\" | \"tertiary\"" }, "description": "Changes the visual appearance of the Button." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the Button meaning it cannot be clicked or receive focus." }, { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers. Use this when using only an icon or the Button text is not enough context for users using assistive technologies." }, { "kind": "field", "name": "inlineSize", "type": { "text": "\"auto\" | \"fill\" | \"fit-content\"" }, "default": "'auto'", "description": "The displayed inline width of the Button. - `auto`: the size of the button depends on the surface and context. - `fill`: the button will takes up 100% of the available inline size. - `fit-content`: the button will take up the minimum inline-size required to fit its content." }, { "kind": "field", "name": "loading", "type": { "text": "boolean" }, "default": "false", "description": "Replaces content with a loading indicator while a background action is being performed. This also disables the Button." }, { "kind": "field", "name": "lang", "type": { "text": "string" }, "description": "Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) (\"subtag\" label)" }, { "kind": "field", "name": "pressed", "type": { "text": "boolean" }, "default": "false", "description": "Whether the button is pressed." }, { "kind": "field", "name": "defaultPressed", "type": { "text": "boolean" }, "default": "false", "description": "Whether the button is pressed by default." } ], "events": [ { "name": "click", "type": { "text": "CustomEvent" } }, { "name": "focus", "type": { "text": "CustomEvent" } }, { "name": "blur", "type": { "text": "CustomEvent" } } ], "attributes": [ { "name": "tone", "fieldName": "tone", "type": { "text": "\"neutral\"" }, "description": "Sets the tone of the Button based on the intention of the information being conveyed." }, { "name": "icon", "fieldName": "icon", "type": { "text": "\"color\" | \"info\" | \"status\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"align-horizontal-centers\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"arrows-out-horizontal-filled\" | \"asterisk\" | \"attachment\" | \"automation\" | \"automation-filled\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"bill\" | \"bill-filled\" | \"blank\" | \"blank-filled\" | \"blog\" | \"blog-filled\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"brain\" | \"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-abandoned-filled\" | \"cart-discount\" | \"cart-down\" | \"cart-down-filled\" | \"cart-sale\" | \"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\" | \"collection-featured\" | \"collection-filled\" | \"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\" | \"delivery\" | \"desktop\" | \"disabled\" | \"discount\" | \"discount-add\" | \"discount-code\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"duplicate\" | \"edit\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"favicon\" | \"file\" | \"file-filled\" | \"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\" | \"gauge-filled\" | \"generated-app\" | \"generated-app-filled\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-asia-filled\" | \"globe-europe\" | \"globe-europe-filled\" | \"globe-filled\" | \"globe-lines\" | \"globe-list\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"icons\" | \"identity-card\" | \"identity-card-filled\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"incomplete\" | \"inheritance\" | \"inventory\" | \"inventory-filled\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layer\" | \"layout-block\" | \"layout-block-ai\" | \"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\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-filled\" | \"location\" | \"location-none\" | \"lock\" | \"logo-apple-tap-to-pay-filled\" | \"magic\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-euro-filled\" | \"markets-rupee\" | \"markets-rupee-filled\" | \"markets-yen\" | \"markets-yen-filled\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"megaphone-filled\" | \"mention\" | \"menu\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-filled\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money\" | \"money-filled\" | \"money-none\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order\" | \"order-batches\" | \"order-draft\" | \"order-draft-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-fulfilled\" | \"package-on-hold\" | \"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\" | \"passkey\" | \"passkey-filled\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-filled\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"price-list\" | \"price-list-filled\" | \"print\" | \"product\" | \"product-add\" | \"product-cost\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"rank-bottom\" | \"rank-top\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-euro-filled\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-pound-filled\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-rupee-filled\" | \"receipt-yen\" | \"receipt-yen-filled\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"replace\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"search\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"select\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-network\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-filled\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"split\" | \"sports\" | \"star\" | \"star-filled\" | \"star-list\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-ai\" | \"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-in-rows-filled\" | \"text-indent\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-cart\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wallet-filled\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-filled\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"empty\"" }, "description": "The type of icon to be displayed in the Button." }, { "name": "variant", "fieldName": "variant", "type": { "text": "\"secondary\" | \"tertiary\"" }, "description": "Changes the visual appearance of the Button." }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the Button meaning it cannot be clicked or receive focus." }, { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers. Use this when using only an icon or the Button text is not enough context for users using assistive technologies." }, { "name": "inlinesize", "fieldName": "inlineSize", "type": { "text": "\"auto\" | \"fill\" | \"fit-content\"" }, "default": "'auto'", "description": "The displayed inline width of the Button. - `auto`: the size of the button depends on the surface and context. - `fill`: the button will takes up 100% of the available inline size. - `fit-content`: the button will take up the minimum inline-size required to fit its content." }, { "name": "loading", "fieldName": "loading", "type": { "text": "boolean" }, "default": "false", "description": "Replaces content with a loading indicator while a background action is being performed. This also disables the Button." }, { "name": "lang", "fieldName": "lang", "type": { "text": "string" }, "description": "Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) (\"subtag\" label)" }, { "name": "pressed", "fieldName": "pressed", "type": { "text": "boolean" }, "default": "false", "description": "Whether the button is pressed." }, { "name": "pressed", "fieldName": "defaultPressed", "type": { "text": "boolean" }, "default": "false", "description": "Whether the button is pressed by default." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-press-button" } ] }, { "kind": "javascript-module", "path": "dist/components/Progress/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the progress component.", "name": "Progress", "members": [ { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey what is progressing." }, { "kind": "field", "name": "max", "type": { "text": "number" }, "default": "1", "description": "How much work the task requires in total. Must be greater than `0`." }, { "kind": "field", "name": "tone", "type": { "text": "\"auto\" | \"neutral\" | \"info\" | \"success\" | \"caution\" | \"warning\" | \"critical\"" }, "default": "'auto'", "description": "The semantic meaning and color treatment of the component. - `auto`: Automatically determined based on context. - `neutral`: General information without specific intent. - `info`: Informational content or helpful tips. - `success`: Positive outcomes or successful states. - `caution`: Advisory notices that need attention. - `warning`: Important warnings about potential issues. - `critical`: Urgent problems or destructive actions." }, { "kind": "field", "name": "value", "type": { "text": "number" }, "default": "0", "description": "How much of the task has been completed, as a number between `0` and `max`. Without a `value` the progress is indeterminate: the task is ongoing with no indication of how long it is expected to take." } ], "attributes": [ { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey what is progressing." }, { "name": "max", "fieldName": "max", "type": { "text": "number" }, "default": "1", "description": "How much work the task requires in total. Must be greater than `0`." }, { "name": "tone", "fieldName": "tone", "type": { "text": "\"auto\" | \"neutral\" | \"info\" | \"success\" | \"caution\" | \"warning\" | \"critical\"" }, "default": "'auto'", "description": "The semantic meaning and color treatment of the component. - `auto`: Automatically determined based on context. - `neutral`: General information without specific intent. - `info`: Informational content or helpful tips. - `success`: Positive outcomes or successful states. - `caution`: Advisory notices that need attention. - `warning`: Important warnings about potential issues. - `critical`: Urgent problems or destructive actions." }, { "name": "value", "fieldName": "value", "type": { "text": "number" }, "default": "0", "description": "How much of the task has been completed, as a number between `0` and `max`. Without a `value` the progress is indeterminate: the task is ongoing with no indication of how long it is expected to take." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-progress" } ] }, { "kind": "javascript-module", "path": "dist/components/QueryContainer/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the query container component.", "name": "QueryContainer", "slots": [ { "name": "", "description": "The content displayed within the query container component, which enables container queries for responsive styling based on the container's size rather than the viewport." } ], "members": [ { "kind": "field", "name": "containerName", "type": { "text": "string" }, "default": "''", "description": "An identifier for this container that you can reference in CSS container queries to apply styles based on this specific container's size. All query container components automatically receive a container name of `s-default`. You can omit the container name in your queries, so `@container (inline-size <= 300px)` is equivalent to `@container s-default (inline-size <= 300px)`. When you provide a custom `containerName`, it's added alongside `s-default`. For example, `containerName=\"product-card\"` results in `s-default product-card` being set on the `container-name` CSS property, allowing you to target this container with `@container product-card (inline-size <= 300px)`. Learn more about the [container-name property](https://developer.mozilla.org/en-US/docs/Web/CSS/container-name)." }, { "kind": "field", "name": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." } ], "attributes": [ { "name": "containername", "fieldName": "containerName", "type": { "text": "string" }, "default": "''", "description": "An identifier for this container that you can reference in CSS container queries to apply styles based on this specific container's size. All query container components automatically receive a container name of `s-default`. You can omit the container name in your queries, so `@container (inline-size <= 300px)` is equivalent to `@container s-default (inline-size <= 300px)`. When you provide a custom `containerName`, it's added alongside `s-default`. For example, `containerName=\"product-card\"` results in `s-default product-card` being set on the `container-name` CSS property, allowing you to target this container with `@container product-card (inline-size <= 300px)`. Learn more about the [container-name property](https://developer.mozilla.org/en-US/docs/Web/CSS/container-name)." }, { "name": "id", "fieldName": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-query-container" } ] }, { "kind": "javascript-module", "path": "dist/components/ScrollBox/index.js", "declarations": [ { "kind": "class", "description": "", "name": "ScrollBox", "slots": [ { "name": "", "description": "The content of the ScrollBox." } ], "members": [ { "kind": "field", "name": "overflow", "type": { "text": "\"auto\" | \"hidden\" | \"auto auto\" | \"auto hidden\" | \"hidden auto\" | \"hidden hidden\"" }, "default": "'auto'", "description": "Sets the overflow behavior of the element." }, { "kind": "field", "name": "accessibilityRole", "type": { "text": "\"generic\" | \"region\"" }, "default": "'generic'", "description": "Sets the semantic meaning of the component's content." }, { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label used to describe the scroll container for assistive technologies." }, { "kind": "field", "name": "snapType", "type": { "text": "\"none\" | \"mandatory\" | \"proximity\"" }, "default": "'none'", "description": "Controls scroll snap behavior." }, { "kind": "field", "name": "scrollPadding", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'base'", "description": "Offset for scroll snap alignment points." }, { "kind": "field", "name": "scrollMargin", "type": { "text": "\"0\" | \"0 0\" | \"0 0 0\" | \"0 0 0 0\"" }, "default": "'0'", "description": "Scroll margin for the element (CSS-like 1-to-4-value shorthand syntax)." }, { "kind": "field", "name": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "kind": "field", "name": "background", "type": { "text": "\"subdued\" | \"base\" | \"strong\" | \"transparent\"" }, "default": "'transparent'", "description": "The background color of the component." }, { "kind": "field", "name": "blockSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes). Block size adjusts based on the writing direction: in horizontal layouts, it controls the height; in vertical layouts, it controls the width. This ensures consistent behavior across different text directions. Learn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size)." }, { "kind": "field", "name": "border", "type": { "text": "BorderShorthand" }, "default": "'none'", "description": "A border applied using shorthand syntax to specify width, color, and style in a single property." }, { "kind": "field", "name": "borderColor", "type": { "text": "\"subdued\" | \"base\" | \"strong\"" }, "default": "'' - meaning no override", "description": "The color of the border using the design system's color scale. When set, this overrides the color value specified in the `border` property. Choose from `subdued`, `base`, or `strong` to match the visual emphasis needed." }, { "kind": "field", "name": "borderRadius", "type": { "text": "MaybeAllValuesShorthandProperty" }, "default": "'none'", "description": "The roundedness of the element's corners using the design system's radius scale. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different radii per corner. Use this to create rounded corners or fully rounded elements." }, { "kind": "field", "name": "borderStyle", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty" }, "default": "'' - meaning no override", "description": "The visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different styles per side." }, { "kind": "field", "name": "borderWidth", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty<\"base\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"none\">" }, "default": "'' - meaning no override", "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different widths per side." }, { "kind": "field", "name": "inlineSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The width in horizontal writing modes, or height in vertical writing modes. Use this for flow-relative sizing that adapts to text direction. Learn more about [inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size)." }, { "kind": "field", "name": "maxBlockSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size)." }, { "kind": "field", "name": "maxInlineSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size)." }, { "kind": "field", "name": "minBlockSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size)." }, { "kind": "field", "name": "minInlineSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size)." }, { "kind": "field", "name": "display", "type": { "text": "\"auto\" | \"none\"" }, "default": "'auto'", "description": "The outer [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) type of the component. The outer type sets a component's participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout). - `auto` the component's initial value. The actual value depends on the component and context. - `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers." }, { "kind": "field", "name": "padding", "type": { "text": "MaybeResponsive>" }, "default": "'none'", "description": "The padding applied to all edges of the component. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values: - 1 value applies to all sides - 2 values apply to block (top/bottom) and inline (left/right) - 3 values apply to block-start (top), inline (left/right), and block-end (bottom) - 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) *Examples:** `base`, `large none`, `base large-100 base small` Use `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingBlock", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The block-direction padding (top and bottom in horizontal writing modes). Accepts a single value for both sides or two space-separated values for block-start and block-end. *Example:** `large none` applies `large` to the top and `none` to the bottom. Overrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingBlockStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-start padding (top in horizontal writing modes). Overrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingBlockEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingInline", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The inline-direction padding (left and right in horizontal writing modes). Accepts a single value for both sides or two space-separated values for inline-start and inline-end. *Example:** `large none` applies `large` to the left and `none` to the right. Overrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingInlineStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingInlineEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." } ], "events": [ { "name": "scroll", "type": { "text": "CustomEvent" }, "description": "Callback fired when the scroll container is scrolled." }, { "name": "scrolltoedge", "type": { "text": "CustomEvent" }, "description": "Callback fired when the scroll container reaches an edge." } ], "attributes": [ { "name": "overflow", "fieldName": "overflow", "type": { "text": "\"auto\" | \"hidden\" | \"auto auto\" | \"auto hidden\" | \"hidden auto\" | \"hidden hidden\"" }, "default": "'auto'", "description": "Sets the overflow behavior of the element." }, { "name": "accessibilityrole", "fieldName": "accessibilityRole", "type": { "text": "\"generic\" | \"region\"" }, "default": "'generic'", "description": "Sets the semantic meaning of the component's content." }, { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label used to describe the scroll container for assistive technologies." }, { "name": "snaptype", "fieldName": "snapType", "type": { "text": "\"none\" | \"mandatory\" | \"proximity\"" }, "default": "'none'", "description": "Controls scroll snap behavior." }, { "name": "scrollpadding", "fieldName": "scrollPadding", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'base'", "description": "Offset for scroll snap alignment points." }, { "name": "scrollmargin", "fieldName": "scrollMargin", "type": { "text": "\"0\" | \"0 0\" | \"0 0 0\" | \"0 0 0 0\"" }, "default": "'0'", "description": "Scroll margin for the element (CSS-like 1-to-4-value shorthand syntax)." }, { "name": "accessibilityvisibility", "fieldName": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "name": "background", "fieldName": "background", "type": { "text": "\"subdued\" | \"base\" | \"strong\" | \"transparent\"" }, "default": "'transparent'", "description": "The background color of the component." }, { "name": "blocksize", "fieldName": "blockSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes). Block size adjusts based on the writing direction: in horizontal layouts, it controls the height; in vertical layouts, it controls the width. This ensures consistent behavior across different text directions. Learn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size)." }, { "name": "border", "fieldName": "border", "type": { "text": "BorderShorthand" }, "default": "'none'", "description": "A border applied using shorthand syntax to specify width, color, and style in a single property." }, { "name": "bordercolor", "fieldName": "borderColor", "type": { "text": "\"subdued\" | \"base\" | \"strong\"" }, "default": "'' - meaning no override", "description": "The color of the border using the design system's color scale. When set, this overrides the color value specified in the `border` property. Choose from `subdued`, `base`, or `strong` to match the visual emphasis needed." }, { "name": "borderradius", "fieldName": "borderRadius", "type": { "text": "MaybeAllValuesShorthandProperty" }, "default": "'none'", "description": "The roundedness of the element's corners using the design system's radius scale. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different radii per corner. Use this to create rounded corners or fully rounded elements." }, { "name": "borderstyle", "fieldName": "borderStyle", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty" }, "default": "'' - meaning no override", "description": "The visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different styles per side." }, { "name": "borderwidth", "fieldName": "borderWidth", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty<\"base\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"none\">" }, "default": "'' - meaning no override", "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different widths per side." }, { "name": "inlinesize", "fieldName": "inlineSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The width in horizontal writing modes, or height in vertical writing modes. Use this for flow-relative sizing that adapts to text direction. Learn more about [inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size)." }, { "name": "maxblocksize", "fieldName": "maxBlockSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size)." }, { "name": "maxinlinesize", "fieldName": "maxInlineSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size)." }, { "name": "minblocksize", "fieldName": "minBlockSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size)." }, { "name": "mininlinesize", "fieldName": "minInlineSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size)." }, { "name": "display", "fieldName": "display", "type": { "text": "\"auto\" | \"none\"" }, "default": "'auto'", "description": "The outer [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) type of the component. The outer type sets a component's participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout). - `auto` the component's initial value. The actual value depends on the component and context. - `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers." }, { "name": "padding", "fieldName": "padding", "type": { "text": "MaybeResponsive>" }, "default": "'none'", "description": "The padding applied to all edges of the component. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values: - 1 value applies to all sides - 2 values apply to block (top/bottom) and inline (left/right) - 3 values apply to block-start (top), inline (left/right), and block-end (bottom) - 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) *Examples:** `base`, `large none`, `base large-100 base small` Use `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddingblock", "fieldName": "paddingBlock", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The block-direction padding (top and bottom in horizontal writing modes). Accepts a single value for both sides or two space-separated values for block-start and block-end. *Example:** `large none` applies `large` to the top and `none` to the bottom. Overrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddingblockstart", "fieldName": "paddingBlockStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-start padding (top in horizontal writing modes). Overrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddingblockend", "fieldName": "paddingBlockEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddinginline", "fieldName": "paddingInline", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The inline-direction padding (left and right in horizontal writing modes). Accepts a single value for both sides or two space-separated values for inline-start and inline-end. *Example:** `large none` applies `large` to the left and `none` to the right. Overrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddinginlinestart", "fieldName": "paddingInlineStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddinginlineend", "fieldName": "paddingInlineEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." } ], "superclass": { "name": "ScrollBoxBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/ScrollBox/ScrollBoxBase" }, "customElement": true, "tagName": "s-scroll-box" } ] }, { "kind": "javascript-module", "path": "dist/components/SearchField/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the search field component.", "name": "SearchField", "slots": [ { "name": "error" }, { "name": "details" } ], "members": [ { "kind": "field", "name": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "The current value for the field. If omitted, the field will be empty." }, { "kind": "field", "name": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "kind": "field", "name": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "kind": "field", "name": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "kind": "field", "name": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "kind": "field", "name": "defaultValue", "type": { "text": "string" }, "description": "The default value for the field." }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "kind": "field", "name": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "kind": "field", "name": "autocomplete", "type": { "text": "\"language\" | \"organization\" | \"name\" | \"additional-name\" | \"address-level1\" | \"address-level2\" | \"address-level3\" | \"address-level4\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"country-name\" | \"country\" | \"family-name\" | \"given-name\" | \"honorific-prefix\" | \"honorific-suffix\" | \"nickname\" | \"one-time-code\" | \"organization-title\" | \"postal-code\" | \"sex\" | \"street-address\" | \"transaction-currency\" | \"username\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-given-name\" | \"cc-name\" | \"cc-type\" | \"on\" | \"off\" | \"shipping language\" | \"shipping organization\" | \"shipping name\" | \"shipping additional-name\" | \"shipping address-level1\" | \"shipping address-level2\" | \"shipping address-level3\" | \"shipping address-level4\" | \"shipping address-line1\" | \"shipping address-line2\" | \"shipping address-line3\" | \"shipping country-name\" | \"shipping country\" | \"shipping family-name\" | \"shipping given-name\" | \"shipping honorific-prefix\" | \"shipping honorific-suffix\" | \"shipping nickname\" | \"shipping one-time-code\" | \"shipping organization-title\" | \"shipping postal-code\" | \"shipping sex\" | \"shipping street-address\" | \"shipping transaction-currency\" | \"shipping username\" | \"shipping cc-additional-name\" | \"shipping cc-family-name\" | \"shipping cc-given-name\" | \"shipping cc-name\" | \"shipping cc-type\" | \"billing language\" | \"billing organization\" | \"billing name\" | \"billing additional-name\" | \"billing address-level1\" | \"billing address-level2\" | \"billing address-level3\" | \"billing address-level4\" | \"billing address-line1\" | \"billing address-line2\" | \"billing address-line3\" | \"billing country-name\" | \"billing country\" | \"billing family-name\" | \"billing given-name\" | \"billing honorific-prefix\" | \"billing honorific-suffix\" | \"billing nickname\" | \"billing one-time-code\" | \"billing organization-title\" | \"billing postal-code\" | \"billing sex\" | \"billing street-address\" | \"billing transaction-currency\" | \"billing username\" | \"billing cc-additional-name\" | \"billing cc-family-name\" | \"billing cc-given-name\" | \"billing cc-name\" | \"billing cc-type\"" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "kind": "field", "name": "maxLength", "type": { "text": "number" }, "default": "Infinity", "description": "Specifies the maximum number of characters allowed." }, { "kind": "field", "name": "minLength", "type": { "text": "number" }, "default": "0", "description": "Specifies the min number of characters allowed." } ], "events": [ { "name": "input", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user makes changes to the field value. This fires before `onChange`." }, { "name": "change", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user has finished editing the field, such as when they blur the field." }, { "name": "focus", "type": { "text": "CustomEvent" }, "description": "A callback fired when the field receives focus." }, { "name": "blur", "type": { "text": "CustomEvent" }, "description": "A callback fired when the field loses focus." } ], "attributes": [ { "name": "id", "fieldName": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "name": "name", "fieldName": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "name": "value", "fieldName": "value", "type": { "text": "string" }, "description": "The current value for the field. If omitted, the field will be empty." }, { "name": "details", "fieldName": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "name": "error", "fieldName": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "name": "label", "fieldName": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "name": "required", "fieldName": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "name": "labelaccessibilityvisibility", "fieldName": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "name": "value", "fieldName": "defaultValue", "type": { "text": "string" }, "description": "The default value for the field." }, { "name": "placeholder", "fieldName": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "name": "readonly", "fieldName": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "name": "autocomplete", "fieldName": "autocomplete", "type": { "text": "\"language\" | \"organization\" | \"name\" | \"additional-name\" | \"address-level1\" | \"address-level2\" | \"address-level3\" | \"address-level4\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"country-name\" | \"country\" | \"family-name\" | \"given-name\" | \"honorific-prefix\" | \"honorific-suffix\" | \"nickname\" | \"one-time-code\" | \"organization-title\" | \"postal-code\" | \"sex\" | \"street-address\" | \"transaction-currency\" | \"username\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-given-name\" | \"cc-name\" | \"cc-type\" | \"on\" | \"off\" | \"shipping language\" | \"shipping organization\" | \"shipping name\" | \"shipping additional-name\" | \"shipping address-level1\" | \"shipping address-level2\" | \"shipping address-level3\" | \"shipping address-level4\" | \"shipping address-line1\" | \"shipping address-line2\" | \"shipping address-line3\" | \"shipping country-name\" | \"shipping country\" | \"shipping family-name\" | \"shipping given-name\" | \"shipping honorific-prefix\" | \"shipping honorific-suffix\" | \"shipping nickname\" | \"shipping one-time-code\" | \"shipping organization-title\" | \"shipping postal-code\" | \"shipping sex\" | \"shipping street-address\" | \"shipping transaction-currency\" | \"shipping username\" | \"shipping cc-additional-name\" | \"shipping cc-family-name\" | \"shipping cc-given-name\" | \"shipping cc-name\" | \"shipping cc-type\" | \"billing language\" | \"billing organization\" | \"billing name\" | \"billing additional-name\" | \"billing address-level1\" | \"billing address-level2\" | \"billing address-level3\" | \"billing address-level4\" | \"billing address-line1\" | \"billing address-line2\" | \"billing address-line3\" | \"billing country-name\" | \"billing country\" | \"billing family-name\" | \"billing given-name\" | \"billing honorific-prefix\" | \"billing honorific-suffix\" | \"billing nickname\" | \"billing one-time-code\" | \"billing organization-title\" | \"billing postal-code\" | \"billing sex\" | \"billing street-address\" | \"billing transaction-currency\" | \"billing username\" | \"billing cc-additional-name\" | \"billing cc-family-name\" | \"billing cc-given-name\" | \"billing cc-name\" | \"billing cc-type\"" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "name": "maxlength", "fieldName": "maxLength", "type": { "text": "number" }, "default": "Infinity", "description": "Specifies the maximum number of characters allowed." }, { "name": "minlength", "fieldName": "minLength", "type": { "text": "number" }, "default": "0", "description": "Specifies the min number of characters allowed." } ], "superclass": { "name": "SearchFieldBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/SearchField/SearchFieldBase" }, "customElement": true, "tagName": "s-search-field" } ] }, { "kind": "javascript-module", "path": "dist/components/Section/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the section component.", "name": "Section", "slots": [ { "name": "", "description": "The content displayed within the section component, which groups related elements together in a logical unit with an optional heading." }, { "name": "primary-action", "description": "The primary action button or link, representing the main or most important action available in this context. Typically displayed with higher visual prominence than secondary actions to establish clear hierarchy." }, { "name": "secondary-actions", "description": "Additional action buttons or links that provide alternative or supporting actions. Visually de-emphasized compared to the primary action. A ButtonGroup holding an action and the icon-only activator for its Menu renders as one segmented group with a chevron activator. The group needs an `accessibilityLabel`, and must hold exactly one Button with text followed by one Button with no text that has an `accessibilityLabel` and a `commandFor` opening a Menu, both with a `variant` of `secondary` or `auto`." }, { "name": "graphic", "description": "A decorative visual that reinforces the heading, rendered before it. Accepts a single Icon with a `size` of `base`, or an icon-only Badge (`icon` set, no text content) with a `size` of `large`. The heading identifies the section, so this content is not announced by assistive technologies, and it is not rendered at all when the section has no `heading`." }, { "name": "accessory", "description": "Additional contextual information that qualifies the heading, rendered inline beside the heading text. Only accepts Badge, Icon, Button, Menu, Text, Avatar, Thumbnail, and Tooltip elements. Text must use `tone`, `fontSize`, and `fontWeight` of `auto`; Icon, Avatar, and Thumbnail must use `size=\"base\"`; Badge must use `size=\"base\"` and `color=\"base\"`; Button must use `inlineSize=\"auto\"`. A Tooltip an accessory element's `interestFor` points at can be slotted here beside it." }, { "name": "supplemental", "description": "Status or metadata that describes the section as a whole rather than qualifying its heading, rendered at the inline-end of the header before any actions. This is not an action. Only accepts Badge, Avatar, Text, Icon, and Thumbnail elements, under the same prop constraints as `accessory`." } ], "members": [ { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose." }, { "kind": "field", "name": "heading", "type": { "text": "string" }, "description": "The heading text displayed at the top of the section. This heading provides a title for the section's content and automatically uses the appropriate semantic heading level (h2, h3, h4) based on nesting depth to maintain proper document structure." }, { "kind": "field", "name": "subheading", "type": { "text": "string" }, "description": "Supporting text that expands on the heading, rendered beneath it in a subdued treatment. This is not a heading: it adds no entry to the document outline, doesn't change the heading level of the section's children, and isn't announced as part of the heading. Keep whatever distinguishes this section from another in `heading`, since that is what someone navigating by heading hears." }, { "kind": "field", "name": "padding", "type": { "text": "\"base\" | \"none\"" }, "default": "'base'", "description": "The padding applied to all edges of the element's content. - `base`: applies padding that is appropriate for the element. Note that it might result in no padding if this is the right design decision in a particular context. - `none`: removes all padding from the element's content. This can be useful when elements inside the section need to span to the edge of the section. For example, a full-width image. In this case, rely on `s-box` with a padding of 'base' to bring back the desired padding for the rest of the content. The `heading` and header actions keep their padding, so they can be combined with `none`." } ], "attributes": [ { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose." }, { "name": "heading", "fieldName": "heading", "type": { "text": "string" }, "description": "The heading text displayed at the top of the section. This heading provides a title for the section's content and automatically uses the appropriate semantic heading level (h2, h3, h4) based on nesting depth to maintain proper document structure." }, { "name": "subheading", "fieldName": "subheading", "type": { "text": "string" }, "description": "Supporting text that expands on the heading, rendered beneath it in a subdued treatment. This is not a heading: it adds no entry to the document outline, doesn't change the heading level of the section's children, and isn't announced as part of the heading. Keep whatever distinguishes this section from another in `heading`, since that is what someone navigating by heading hears." }, { "name": "padding", "fieldName": "padding", "type": { "text": "\"base\" | \"none\"" }, "default": "'base'", "description": "The padding applied to all edges of the element's content. - `base`: applies padding that is appropriate for the element. Note that it might result in no padding if this is the right design decision in a particular context. - `none`: removes all padding from the element's content. This can be useful when elements inside the section need to span to the edge of the section. For example, a full-width image. In this case, rely on `s-box` with a padding of 'base' to bring back the desired padding for the rest of the content. The `heading` and header actions keep their padding, so they can be combined with `none`." } ], "superclass": { "name": "SectionBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/Section/SectionBase" }, "customElement": true, "tagName": "s-section" } ] }, { "kind": "javascript-module", "path": "dist/components/Select/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the select component.", "name": "Select", "slots": [ { "name": "", "description": "The selectable options displayed in the dropdown list. Accepts option components for individual selectable items, and option group components to organize related options into logical groups with labels." }, { "name": "error" }, { "name": "details" } ], "members": [ { "kind": "field", "name": "value", "type": { "text": "string" } }, { "kind": "field", "name": "icon", "type": { "text": "\"color\" | \"info\" | \"status\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"align-horizontal-centers\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"arrows-out-horizontal-filled\" | \"asterisk\" | \"attachment\" | \"automation\" | \"automation-filled\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"bill\" | \"bill-filled\" | \"blank\" | \"blank-filled\" | \"blog\" | \"blog-filled\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"brain\" | \"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-abandoned-filled\" | \"cart-discount\" | \"cart-down\" | \"cart-down-filled\" | \"cart-sale\" | \"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\" | \"collection-featured\" | \"collection-filled\" | \"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\" | \"delivery\" | \"desktop\" | \"disabled\" | \"discount\" | \"discount-add\" | \"discount-code\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"duplicate\" | \"edit\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"favicon\" | \"file\" | \"file-filled\" | \"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\" | \"gauge-filled\" | \"generated-app\" | \"generated-app-filled\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-asia-filled\" | \"globe-europe\" | \"globe-europe-filled\" | \"globe-filled\" | \"globe-lines\" | \"globe-list\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"icons\" | \"identity-card\" | \"identity-card-filled\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"incomplete\" | \"inheritance\" | \"inventory\" | \"inventory-filled\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layer\" | \"layout-block\" | \"layout-block-ai\" | \"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\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-filled\" | \"location\" | \"location-none\" | \"lock\" | \"logo-apple-tap-to-pay-filled\" | \"magic\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-euro-filled\" | \"markets-rupee\" | \"markets-rupee-filled\" | \"markets-yen\" | \"markets-yen-filled\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"megaphone-filled\" | \"mention\" | \"menu\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-filled\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money\" | \"money-filled\" | \"money-none\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order\" | \"order-batches\" | \"order-draft\" | \"order-draft-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-fulfilled\" | \"package-on-hold\" | \"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\" | \"passkey\" | \"passkey-filled\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-filled\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"price-list\" | \"price-list-filled\" | \"print\" | \"product\" | \"product-add\" | \"product-cost\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"rank-bottom\" | \"rank-top\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-euro-filled\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-pound-filled\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-rupee-filled\" | \"receipt-yen\" | \"receipt-yen-filled\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"replace\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"search\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"select\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-network\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-filled\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"split\" | \"sports\" | \"star\" | \"star-filled\" | \"star-list\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-ai\" | \"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-in-rows-filled\" | \"text-indent\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-cart\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wallet-filled\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-filled\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"empty\"" }, "description": "The type of icon to be displayed in the field." }, { "kind": "field", "name": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "kind": "field", "name": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "kind": "field", "name": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "kind": "field", "name": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "kind": "field", "name": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." } ], "events": [ { "name": "change", "type": { "text": "CustomEvent" } }, { "name": "input", "type": { "text": "CustomEvent" } }, { "name": "blur", "type": { "text": "CustomEvent" } }, { "name": "focus", "type": { "text": "CustomEvent" } } ], "attributes": [ { "name": "value", "fieldName": "value", "type": { "text": "string" } }, { "name": "icon", "fieldName": "icon", "type": { "text": "\"color\" | \"info\" | \"status\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"align-horizontal-centers\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"arrows-out-horizontal-filled\" | \"asterisk\" | \"attachment\" | \"automation\" | \"automation-filled\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"bill\" | \"bill-filled\" | \"blank\" | \"blank-filled\" | \"blog\" | \"blog-filled\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"brain\" | \"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-abandoned-filled\" | \"cart-discount\" | \"cart-down\" | \"cart-down-filled\" | \"cart-sale\" | \"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\" | \"collection-featured\" | \"collection-filled\" | \"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\" | \"delivery\" | \"desktop\" | \"disabled\" | \"discount\" | \"discount-add\" | \"discount-code\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"duplicate\" | \"edit\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"favicon\" | \"file\" | \"file-filled\" | \"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\" | \"gauge-filled\" | \"generated-app\" | \"generated-app-filled\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-asia-filled\" | \"globe-europe\" | \"globe-europe-filled\" | \"globe-filled\" | \"globe-lines\" | \"globe-list\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"icons\" | \"identity-card\" | \"identity-card-filled\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"incomplete\" | \"inheritance\" | \"inventory\" | \"inventory-filled\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layer\" | \"layout-block\" | \"layout-block-ai\" | \"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\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-filled\" | \"location\" | \"location-none\" | \"lock\" | \"logo-apple-tap-to-pay-filled\" | \"magic\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-euro-filled\" | \"markets-rupee\" | \"markets-rupee-filled\" | \"markets-yen\" | \"markets-yen-filled\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"megaphone-filled\" | \"mention\" | \"menu\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-filled\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money\" | \"money-filled\" | \"money-none\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order\" | \"order-batches\" | \"order-draft\" | \"order-draft-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-fulfilled\" | \"package-on-hold\" | \"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\" | \"passkey\" | \"passkey-filled\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-filled\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"price-list\" | \"price-list-filled\" | \"print\" | \"product\" | \"product-add\" | \"product-cost\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"rank-bottom\" | \"rank-top\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-euro-filled\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-pound-filled\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-rupee-filled\" | \"receipt-yen\" | \"receipt-yen-filled\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"replace\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"search\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"select\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-network\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-filled\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"split\" | \"sports\" | \"star\" | \"star-filled\" | \"star-list\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-ai\" | \"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-in-rows-filled\" | \"text-indent\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-cart\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wallet-filled\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-filled\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"empty\"" }, "description": "The type of icon to be displayed in the field." }, { "name": "id", "fieldName": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "name": "name", "fieldName": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "name": "details", "fieldName": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "name": "error", "fieldName": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "name": "label", "fieldName": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "name": "required", "fieldName": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "name": "labelaccessibilityvisibility", "fieldName": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "name": "placeholder", "fieldName": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." } ], "superclass": { "name": "SelectBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/Select/SelectBase" }, "customElement": true, "tagName": "s-select" } ] }, { "kind": "javascript-module", "path": "dist/components/Spinner/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the spinner component.", "name": "Spinner", "members": [ { "kind": "field", "name": "size", "type": { "text": "\"base\" | \"large\" | \"large-100\"" }, "description": "The size of the loading spinner. - `base`: Default size suitable for inline loading indicators or standard UI contexts. - `large`: Larger spinner for more prominent loading states. - `large-100`: Extra large spinner for full-page or emphasized loading states." }, { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose." } ], "attributes": [ { "name": "size", "fieldName": "size", "type": { "text": "\"base\" | \"large\" | \"large-100\"" }, "description": "The size of the loading spinner. - `base`: Default size suitable for inline loading indicators or standard UI contexts. - `large`: Larger spinner for more prominent loading states. - `large-100`: Extra large spinner for full-page or emphasized loading states." }, { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-spinner" } ] }, { "kind": "javascript-module", "path": "dist/components/Stack/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the stack component.", "name": "Stack", "slots": [ { "name": "", "description": "The child elements displayed within the stack component, which are arranged vertically or horizontally with consistent spacing." } ], "members": [ { "kind": "field", "name": "justifyContent", "type": { "text": "\"normal\" | \"stretch\" | \"center\" | \"start\" | \"end\" | \"unsafe center\" | \"unsafe start\" | \"unsafe end\" | \"safe center\" | \"safe start\" | \"safe end\" | \"space-between\" | \"space-around\" | \"space-evenly\"" }, "default": "'normal'", "description": "Controls the distribution of children along the inline axis (horizontally in horizontal writing modes). Use this to position items along the primary axis of the stack - horizontally for inline stacks or vertically for block stacks when wrapped into multiple lines." }, { "kind": "field", "name": "alignItems", "type": { "text": "\"normal\" | \"stretch\" | \"baseline\" | \"first baseline\" | \"last baseline\" | \"center\" | \"start\" | \"end\" | \"unsafe center\" | \"unsafe start\" | \"unsafe end\" | \"safe center\" | \"safe start\" | \"safe end\"" }, "default": "'normal'", "description": "Controls the alignment of children along the block axis (vertically in horizontal writing modes). Use this to align items perpendicular to the stack direction - vertically for inline stacks or horizontally for block stacks." }, { "kind": "field", "name": "alignContent", "type": { "text": "\"normal\" | \"stretch\" | \"baseline\" | \"first baseline\" | \"last baseline\" | \"center\" | \"start\" | \"end\" | \"unsafe center\" | \"unsafe start\" | \"unsafe end\" | \"safe center\" | \"safe start\" | \"safe end\" | \"space-between\" | \"space-around\" | \"space-evenly\"" }, "default": "'normal'", "description": "Controls the distribution of lines along the block axis when content wraps into multiple lines. This property only affects stacks with wrapping content. For single-line stacks, use `alignItems` instead." }, { "kind": "field", "name": "gap", "type": { "text": "MaybeResponsive>" }, "default": "'none'", "description": "Adjusts spacing between elements. Accepts: - A single [`SpacingKeyword`](/docs/api/polaris/using-polaris-web-components#scale) value applied to both axes, such as `large-100` - A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively - A [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported SpacingKeyword as a query value" }, { "kind": "field", "name": "rowGap", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "Adjusts spacing between elements in the block axis. This overrides the row value of `gap`. Accepts: - A single [`SpacingKeyword`](/docs/api/polaris/using-polaris-web-components#scale) value, such as `large-100` - A [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported SpacingKeyword as a query value" }, { "kind": "field", "name": "columnGap", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`. Accepts: - A single [`SpacingKeyword`](/docs/api/polaris/using-polaris-web-components#scale) value, such as `large-100` - A [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported SpacingKeyword as a query value" }, { "kind": "field", "name": "direction", "type": { "text": "\"block\" | \"inline\"" }, "default": "'block'", "description": "The direction in which the stack's children are placed within the stack. Accepts: - A single value, either `inline` or `block` - A [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported direction values as a query value" }, { "kind": "field", "name": "background", "type": { "text": "\"subdued\" | \"base\" | \"strong\" | \"transparent\"" }, "default": "'transparent'", "description": "The background color of the component." }, { "kind": "field", "name": "border", "type": { "text": "BorderShorthand" }, "default": "'none'", "description": "A border applied using shorthand syntax to specify width, color, and style in a single property." }, { "kind": "field", "name": "borderWidth", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty<\"base\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"none\">" }, "default": "'' - meaning no override", "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different widths per side." }, { "kind": "field", "name": "borderStyle", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty" }, "default": "'' - meaning no override", "description": "The visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different styles per side." }, { "kind": "field", "name": "borderColor", "type": { "text": "\"subdued\" | \"base\" | \"strong\"" }, "default": "'' - meaning no override", "description": "The color of the border using the design system's color scale. When set, this overrides the color value specified in the `border` property. Choose from `subdued`, `base`, or `strong` to match the visual emphasis needed." }, { "kind": "field", "name": "borderRadius", "type": { "text": "MaybeAllValuesShorthandProperty" }, "default": "'none'", "description": "The roundedness of the element's corners using the design system's radius scale. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different radii per corner. Use this to create rounded corners or fully rounded elements." }, { "kind": "field", "name": "padding", "type": { "text": "MaybeResponsive>" }, "default": "'none'", "description": "The padding applied to all edges of the component. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values: - 1 value applies to all sides - 2 values apply to block (top/bottom) and inline (left/right) - 3 values apply to block-start (top), inline (left/right), and block-end (bottom) - 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) *Examples:** `base`, `large none`, `base large-100 base small` Use `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingBlock", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The block-direction padding (top and bottom in horizontal writing modes). Accepts a single value for both sides or two space-separated values for block-start and block-end. *Example:** `large none` applies `large` to the top and `none` to the bottom. Overrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingBlockStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-start padding (top in horizontal writing modes). Overrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingBlockEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingInline", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The inline-direction padding (left and right in horizontal writing modes). Accepts a single value for both sides or two space-separated values for inline-start and inline-end. *Example:** `large none` applies `large` to the left and `none` to the right. Overrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingInlineStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "paddingInlineEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "kind": "field", "name": "display", "type": { "text": "\"auto\" | \"none\"" }, "default": "'auto'", "description": "The outer [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) type of the component. The outer type sets a component's participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout). - `auto` the component's initial value. The actual value depends on the component and context. - `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers." }, { "kind": "field", "name": "blockSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes). Block size adjusts based on the writing direction: in horizontal layouts, it controls the height; in vertical layouts, it controls the width. This ensures consistent behavior across different text directions. Learn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size)." }, { "kind": "field", "name": "minBlockSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size)." }, { "kind": "field", "name": "maxBlockSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size)." }, { "kind": "field", "name": "inlineSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The width in horizontal writing modes, or height in vertical writing modes. Use this for flow-relative sizing that adapts to text direction. Learn more about [inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size)." }, { "kind": "field", "name": "minInlineSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size)." }, { "kind": "field", "name": "maxInlineSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size)." }, { "kind": "field", "name": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "kind": "field", "name": "accessibilityRole", "type": { "text": "\"generic\" | \"main\" | \"header\" | \"footer\" | \"section\" | \"region\" | \"aside\" | \"navigation\" | \"ordered-list\" | \"list-item\" | \"list-item-separator\" | \"unordered-list\" | \"separator\" | \"status\" | \"alert\" | \"presentation\" | \"none\"" }, "default": "'generic'", "description": "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." }, { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. Only use this when the element's content is not enough context for users using assistive technologies." }, { "kind": "field", "name": "overflow", "type": { "text": "\"visible\" | \"hidden\"" }, "default": "'visible'", "description": "Sets the overflow behavior of the element. - `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse. - `visible`: the content that extends beyond the element’s container is visible." } ], "attributes": [ { "name": "justifycontent", "fieldName": "justifyContent", "type": { "text": "\"normal\" | \"stretch\" | \"center\" | \"start\" | \"end\" | \"unsafe center\" | \"unsafe start\" | \"unsafe end\" | \"safe center\" | \"safe start\" | \"safe end\" | \"space-between\" | \"space-around\" | \"space-evenly\"" }, "default": "'normal'", "description": "Controls the distribution of children along the inline axis (horizontally in horizontal writing modes). Use this to position items along the primary axis of the stack - horizontally for inline stacks or vertically for block stacks when wrapped into multiple lines." }, { "name": "alignitems", "fieldName": "alignItems", "type": { "text": "\"normal\" | \"stretch\" | \"baseline\" | \"first baseline\" | \"last baseline\" | \"center\" | \"start\" | \"end\" | \"unsafe center\" | \"unsafe start\" | \"unsafe end\" | \"safe center\" | \"safe start\" | \"safe end\"" }, "default": "'normal'", "description": "Controls the alignment of children along the block axis (vertically in horizontal writing modes). Use this to align items perpendicular to the stack direction - vertically for inline stacks or horizontally for block stacks." }, { "name": "aligncontent", "fieldName": "alignContent", "type": { "text": "\"normal\" | \"stretch\" | \"baseline\" | \"first baseline\" | \"last baseline\" | \"center\" | \"start\" | \"end\" | \"unsafe center\" | \"unsafe start\" | \"unsafe end\" | \"safe center\" | \"safe start\" | \"safe end\" | \"space-between\" | \"space-around\" | \"space-evenly\"" }, "default": "'normal'", "description": "Controls the distribution of lines along the block axis when content wraps into multiple lines. This property only affects stacks with wrapping content. For single-line stacks, use `alignItems` instead." }, { "name": "gap", "fieldName": "gap", "type": { "text": "MaybeResponsive>" }, "default": "'none'", "description": "Adjusts spacing between elements. Accepts: - A single [`SpacingKeyword`](/docs/api/polaris/using-polaris-web-components#scale) value applied to both axes, such as `large-100` - A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively - A [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported SpacingKeyword as a query value" }, { "name": "rowgap", "fieldName": "rowGap", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "Adjusts spacing between elements in the block axis. This overrides the row value of `gap`. Accepts: - A single [`SpacingKeyword`](/docs/api/polaris/using-polaris-web-components#scale) value, such as `large-100` - A [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported SpacingKeyword as a query value" }, { "name": "columngap", "fieldName": "columnGap", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`. Accepts: - A single [`SpacingKeyword`](/docs/api/polaris/using-polaris-web-components#scale) value, such as `large-100` - A [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported SpacingKeyword as a query value" }, { "name": "direction", "fieldName": "direction", "type": { "text": "\"block\" | \"inline\"" }, "default": "'block'", "description": "The direction in which the stack's children are placed within the stack. Accepts: - A single value, either `inline` or `block` - A [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported direction values as a query value" }, { "name": "background", "fieldName": "background", "type": { "text": "\"subdued\" | \"base\" | \"strong\" | \"transparent\"" }, "default": "'transparent'", "description": "The background color of the component." }, { "name": "border", "fieldName": "border", "type": { "text": "BorderShorthand" }, "default": "'none'", "description": "A border applied using shorthand syntax to specify width, color, and style in a single property." }, { "name": "borderwidth", "fieldName": "borderWidth", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty<\"base\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"none\">" }, "default": "'' - meaning no override", "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different widths per side." }, { "name": "borderstyle", "fieldName": "borderStyle", "type": { "text": "\"\" | MaybeAllValuesShorthandProperty" }, "default": "'' - meaning no override", "description": "The visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different styles per side." }, { "name": "bordercolor", "fieldName": "borderColor", "type": { "text": "\"subdued\" | \"base\" | \"strong\"" }, "default": "'' - meaning no override", "description": "The color of the border using the design system's color scale. When set, this overrides the color value specified in the `border` property. Choose from `subdued`, `base`, or `strong` to match the visual emphasis needed." }, { "name": "borderradius", "fieldName": "borderRadius", "type": { "text": "MaybeAllValuesShorthandProperty" }, "default": "'none'", "description": "The roundedness of the element's corners using the design system's radius scale. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) for specifying different radii per corner. Use this to create rounded corners or fully rounded elements." }, { "name": "padding", "fieldName": "padding", "type": { "text": "MaybeResponsive>" }, "default": "'none'", "description": "The padding applied to all edges of the component. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values: - 1 value applies to all sides - 2 values apply to block (top/bottom) and inline (left/right) - 3 values apply to block-start (top), inline (left/right), and block-end (bottom) - 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) *Examples:** `base`, `large none`, `base large-100 base small` Use `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddingblock", "fieldName": "paddingBlock", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The block-direction padding (top and bottom in horizontal writing modes). Accepts a single value for both sides or two space-separated values for block-start and block-end. *Example:** `large none` applies `large` to the top and `none` to the bottom. Overrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddingblockstart", "fieldName": "paddingBlockStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-start padding (top in horizontal writing modes). Overrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddingblockend", "fieldName": "paddingBlockEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddinginline", "fieldName": "paddingInline", "type": { "text": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>" }, "default": "'' - meaning no override", "description": "The inline-direction padding (left and right in horizontal writing modes). Accepts a single value for both sides or two space-separated values for inline-start and inline-end. *Example:** `large none` applies `large` to the left and `none` to the right. Overrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddinginlinestart", "fieldName": "paddingInlineStart", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "paddinginlineend", "fieldName": "paddingInlineEnd", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\" | \"large-200\" | \"large-300\" | \"large-400\" | \"none\" | \"small-500\" | \"small-400\" | \"small-300\" | \"large-500\"" }, "default": "'' - meaning no override", "description": "The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-polaris-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value." }, { "name": "display", "fieldName": "display", "type": { "text": "\"auto\" | \"none\"" }, "default": "'auto'", "description": "The outer [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) type of the component. The outer type sets a component's participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout). - `auto` the component's initial value. The actual value depends on the component and context. - `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers." }, { "name": "blocksize", "fieldName": "blockSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes). Block size adjusts based on the writing direction: in horizontal layouts, it controls the height; in vertical layouts, it controls the width. This ensures consistent behavior across different text directions. Learn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size)." }, { "name": "minblocksize", "fieldName": "minBlockSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size)." }, { "name": "maxblocksize", "fieldName": "maxBlockSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size)." }, { "name": "inlinesize", "fieldName": "inlineSize", "type": { "text": "\"auto\" | \"0\"" }, "default": "'auto'", "description": "The width in horizontal writing modes, or height in vertical writing modes. Use this for flow-relative sizing that adapts to text direction. Learn more about [inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size)." }, { "name": "mininlinesize", "fieldName": "minInlineSize", "type": { "text": "\"0\"" }, "default": "'0'", "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size. Learn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size)." }, { "name": "maxinlinesize", "fieldName": "maxInlineSize", "type": { "text": "\"none\" | \"0\"" }, "default": "'none'", "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size. Learn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size)." }, { "name": "accessibilityvisibility", "fieldName": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "name": "accessibilityrole", "fieldName": "accessibilityRole", "type": { "text": "\"generic\" | \"main\" | \"header\" | \"footer\" | \"section\" | \"region\" | \"aside\" | \"navigation\" | \"ordered-list\" | \"list-item\" | \"list-item-separator\" | \"unordered-list\" | \"separator\" | \"status\" | \"alert\" | \"presentation\" | \"none\"" }, "default": "'generic'", "description": "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." }, { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. Only use this when the element's content is not enough context for users using assistive technologies." }, { "name": "overflow", "fieldName": "overflow", "type": { "text": "\"visible\" | \"hidden\"" }, "default": "'visible'", "description": "Sets the overflow behavior of the element. - `hidden`: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse. - `visible`: the content that extends beyond the element’s container is visible." } ], "superclass": { "name": "BoxElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/BoxElement" }, "customElement": true, "tagName": "s-stack" } ] }, { "kind": "javascript-module", "path": "dist/components/Switch/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the switch component.", "name": "Switch", "members": [ { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "The value used in form data when the control is checked." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the control, disallowing any interaction." }, { "kind": "field", "name": "accessibilityLabel", "type": { "text": "string" }, "description": "A label used for users using assistive technologies like screen readers. When set, any children or `label` supplied will not be announced. This can also be used to display a control without a visual label, while still providing context to users using screen readers." }, { "kind": "field", "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Whether the control is active." }, { "kind": "field", "name": "defaultChecked", "type": { "text": "boolean" }, "default": "false", "description": "Whether the control is active by default." }, { "kind": "field", "name": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "kind": "field", "name": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "kind": "field", "name": "label", "type": { "text": "any" }, "description": "Visual content to use as the control label." }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "An identifier for the control that is unique within the nearest containing `Form` component." }, { "kind": "field", "name": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." } ], "events": [ { "name": "change", "type": { "text": "CustomEvent" }, "description": "A callback fired when the switch state changes and the user has finished interacting with it." }, { "name": "input", "type": { "text": "CustomEvent" }, "description": "A callback fired when the switch state changes, including intermediate states during user interaction." }, { "name": "blur", "type": { "text": "CustomEvent" } } ], "attributes": [ { "name": "value", "fieldName": "value", "type": { "text": "string" }, "description": "The value used in form data when the control is checked." }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the control, disallowing any interaction." }, { "name": "accessibilitylabel", "fieldName": "accessibilityLabel", "type": { "text": "string" }, "description": "A label used for users using assistive technologies like screen readers. When set, any children or `label` supplied will not be announced. This can also be used to display a control without a visual label, while still providing context to users using screen readers." }, { "name": "checked", "fieldName": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Whether the control is active." }, { "name": "checked", "fieldName": "defaultChecked", "type": { "text": "boolean" }, "default": "false", "description": "Whether the control is active by default." }, { "name": "details", "fieldName": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "name": "error", "fieldName": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "name": "label", "fieldName": "label", "type": { "text": "any" }, "description": "Visual content to use as the control label." }, { "name": "required", "fieldName": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "name": "name", "fieldName": "name", "type": { "text": "string" }, "description": "An identifier for the control that is unique within the nearest containing `Form` component." }, { "name": "labelaccessibilityvisibility", "fieldName": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." } ], "superclass": { "name": "SwitchBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/Switch/SwitchBase" }, "customElement": true, "tagName": "s-switch" } ] }, { "kind": "javascript-module", "path": "dist/components/Table/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the table component.", "name": "Table", "slots": [ { "name": "", "description": "The table structure displayed within the table component, including table headers, rows, and cells that organize data in a grid format." }, { "name": "filters", "description": "Additional filters to display in the table, such as search fields or other input components that allow users to narrow down the displayed data." } ], "members": [ { "kind": "field", "name": "variant", "type": { "text": "\"auto\" | \"list\"" }, "default": "'auto'", "description": "The layout variant of the table component. - `list`: Always displays as a list layout. - `auto`: Automatically displays as a table on wide screens and as a list on narrow screens." }, { "kind": "field", "name": "loading", "type": { "text": "boolean" }, "default": "false", "description": "Whether the table is in a loading state, such as initial page load or loading the next page in a paginated table. When true, the table could be in an inert state, which prevents user interaction." }, { "kind": "field", "name": "paginate", "type": { "text": "boolean" }, "default": "false", "description": "Whether to use pagination controls." }, { "kind": "field", "name": "hasPreviousPage", "type": { "text": "boolean" }, "default": "false", "description": "Whether there's a previous page of data." }, { "kind": "field", "name": "hasNextPage", "type": { "text": "boolean" }, "default": "false", "description": "Whether there's an additional page of data." } ], "events": [ { "name": "nextpage", "type": { "text": "Event" }, "description": "Called when the next page button is clicked." }, { "name": "previouspage", "type": { "text": "Event" }, "description": "Called when the previous page button is clicked." } ], "attributes": [ { "name": "variant", "fieldName": "variant", "type": { "text": "\"auto\" | \"list\"" }, "default": "'auto'", "description": "The layout variant of the table component. - `list`: Always displays as a list layout. - `auto`: Automatically displays as a table on wide screens and as a list on narrow screens." }, { "name": "loading", "fieldName": "loading", "type": { "text": "boolean" }, "default": "false", "description": "Whether the table is in a loading state, such as initial page load or loading the next page in a paginated table. When true, the table could be in an inert state, which prevents user interaction." }, { "name": "paginate", "fieldName": "paginate", "type": { "text": "boolean" }, "default": "false", "description": "Whether to use pagination controls." }, { "name": "haspreviouspage", "fieldName": "hasPreviousPage", "type": { "text": "boolean" }, "default": "false", "description": "Whether there's a previous page of data." }, { "name": "hasnextpage", "fieldName": "hasNextPage", "type": { "text": "boolean" }, "default": "false", "description": "Whether there's an additional page of data." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-table" } ] }, { "kind": "javascript-module", "path": "dist/components/TableBody/index.js", "declarations": [ { "kind": "class", "description": "The table body component represents the main content area of a table, containing the data rows. Use table body as a child of table to structure your table data, with each table row within the body representing a single record or entry. Table body must contain table row components, which in turn contain table cell components for the actual data values.", "name": "TableBody", "slots": [ { "name": "", "description": "The rows containing the main data content of the table. In the `table` variant, this represents the semantic table body. In the `list` variant, this might not have semantic meaning but still contains the data rows." } ], "members": [ { "kind": "field", "name": "children", "type": { "text": "any" }, "description": "The rows containing the main data content of the table. In the `table` variant, this represents the semantic table body. In the `list` variant, this might not have semantic meaning but still contains the data rows." }, { "kind": "field", "name": "id", "type": { "text": "string | undefined" }, "description": "A unique identifier for the element." } ], "attributes": [ { "name": "children", "fieldName": "children", "type": { "text": "any" }, "description": "The rows containing the main data content of the table. In the `table` variant, this represents the semantic table body. In the `list` variant, this might not have semantic meaning but still contains the data rows." }, { "name": "id", "fieldName": "id", "type": { "text": "string | undefined" }, "description": "A unique identifier for the element." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-table-body" } ] }, { "kind": "javascript-module", "path": "dist/components/TableCell/index.js", "declarations": [ { "kind": "class", "description": "The table cell component represents a single data cell within a table row. Use table cell as a child of table row to display individual data values, with each cell corresponding to a column in the table. Table cell automatically inherits styling and alignment from its parent table structure and supports text content or other inline components.", "name": "TableCell", "slots": [ { "name": "", "description": "The content displayed within the table cell, which represents a single data point in the table's grid structure." } ], "members": [ { "kind": "field", "name": "children", "type": { "text": "any" }, "description": "The content displayed within the table cell, which represents a single data point in the table's grid structure." }, { "kind": "field", "name": "id", "type": { "text": "string | undefined" }, "description": "A unique identifier for the element." } ], "attributes": [ { "name": "children", "fieldName": "children", "type": { "text": "any" }, "description": "The content displayed within the table cell, which represents a single data point in the table's grid structure." }, { "name": "id", "fieldName": "id", "type": { "text": "string | undefined" }, "description": "A unique identifier for the element." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-table-cell" } ] }, { "kind": "javascript-module", "path": "dist/components/TableHeader/index.js", "declarations": [ { "kind": "class", "description": "The table header component represents a single column header within a table header row. Use table header as a child of table header row to define column headings and optionally enable column sorting. Table header provides semantic meaning for screen readers and can include sorting controls when configured. Each header corresponds to a column in the table body.", "name": "TableHeader", "slots": [ { "name": "", "description": "The heading of the column in the `table` variant, and the label of its data in `list` variant." } ], "members": [ { "kind": "field", "name": "listSlot", "type": { "text": "\"primary\" | \"secondary\" | \"inline\" | \"kicker\" | \"labeled\"" }, "default": "'labeled'", "description": "The content designation for this column when the table displays in list variant on mobile devices." }, { "kind": "field", "name": "format", "type": { "text": "\"base\" | \"numeric\" | \"currency\"" }, "default": "'base'", "description": "The format of the column that controls styling and alignment of cell content." } ], "attributes": [ { "name": "listslot", "fieldName": "listSlot", "type": { "text": "\"primary\" | \"secondary\" | \"inline\" | \"kicker\" | \"labeled\"" }, "default": "'labeled'", "description": "The content designation for this column when the table displays in list variant on mobile devices." }, { "name": "format", "fieldName": "format", "type": { "text": "\"base\" | \"numeric\" | \"currency\"" }, "default": "'base'", "description": "The format of the column that controls styling and alignment of cell content." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-table-header" } ] }, { "kind": "javascript-module", "path": "dist/components/TableHeaderRow/index.js", "declarations": [ { "kind": "class", "description": "The table header row component represents the header row of a table, containing column headings. Use table header row as the first child of table (before table body) to define the table structure and provide column labels. Table header row must contain table header components for each column. These headers provide context for the data columns and can support sorting functionality.", "name": "TableHeaderRow", "slots": [ { "name": "", "description": "The header cells that define the columns of the table. Only accepts table header components as children, with each header representing a column and providing its label." } ], "members": [ { "kind": "field", "name": "children", "type": { "text": "any" }, "description": "The header cells that define the columns of the table. Only accepts table header components as children, with each header representing a column and providing its label." }, { "kind": "field", "name": "id", "type": { "text": "string | undefined" }, "description": "A unique identifier for the element." } ], "attributes": [ { "name": "children", "fieldName": "children", "type": { "text": "any" }, "description": "The header cells that define the columns of the table. Only accepts table header components as children, with each header representing a column and providing its label." }, { "name": "id", "fieldName": "id", "type": { "text": "string | undefined" }, "description": "A unique identifier for the element." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-table-header-row" } ] }, { "kind": "javascript-module", "path": "dist/components/TableRow/index.js", "declarations": [ { "kind": "class", "description": "The table row component represents a single row of data within a table body. Use table row as a child of table body to structure individual records or entries in the table. Table row must contain table cell components, with each cell representing a data value for the corresponding column. The number of cells should match the number of headers in the table.", "name": "TableRow", "slots": [ { "name": "", "description": "The data cells displayed within this table row, with each cell containing content for its corresponding column. Only accepts table cell components as children." } ], "members": [ { "kind": "field", "name": "children", "type": { "text": "any" }, "description": "The data cells displayed within this table row, with each cell containing content for its corresponding column. Only accepts table cell components as children." }, { "kind": "field", "name": "clickDelegate", "type": { "text": "string | undefined" }, "description": "The ID of an interactive element, such as `s-link`, in the row that will be the target of the click when the row is clicked. This is the primary action for the row; it should not be used for secondary actions. This is a click-only affordance, and does not introduce any keyboard or screen reader affordances. Which is why the target element must be in the table; so that keyboard and screen reader users can interact with it normally." } ], "attributes": [ { "name": "children", "fieldName": "children", "type": { "text": "any" }, "description": "The data cells displayed within this table row, with each cell containing content for its corresponding column. Only accepts table cell components as children." }, { "name": "clickdelegate", "fieldName": "clickDelegate", "type": { "text": "string | undefined" }, "description": "The ID of an interactive element, such as `s-link`, in the row that will be the target of the click when the row is clicked. This is the primary action for the row; it should not be used for secondary actions. This is a click-only affordance, and does not introduce any keyboard or screen reader affordances. Which is why the target element must be in the table; so that keyboard and screen reader users can interact with it normally." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-table-row" } ] }, { "kind": "javascript-module", "path": "dist/components/Text/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the text component.", "name": "Text", "slots": [ { "name": "", "description": "The text content displayed within the text component, which applies semantic meaning and styling appropriate to the specified text type." } ], "members": [ { "kind": "field", "name": "color", "type": { "text": "\"subdued\" | \"base\"" }, "description": "Modify the color to be more or less intense." }, { "kind": "field", "name": "type", "type": { "text": "\"strong\" | \"address\" | \"redundant\" | \"generic\"" }, "default": "'generic'", "description": "The semantic type and styling treatment for the text content. Other presentation properties on text override the default styling. - `strong`: Emphasizes the text with strong importance, typically displayed in bold. - `generic`: Standard text with no special semantic meaning or styling. - `address`: Marks the text as contact information, such as a physical or email address. - `redundant`: Indicates the text is redundant or duplicated information for screen reader context." }, { "kind": "field", "name": "tone", "type": { "text": "\"auto\" | \"neutral\" | \"info\" | \"success\" | \"caution\" | \"warning\" | \"critical\"" }, "default": "'auto'", "description": "The semantic tone that's applied to the text, which changes its color to convey meaning. - `info`: Informational content or helpful tips (blue). - `success`: Positive outcomes or successful states (green). - `warning`: Important warnings about potential issues (orange). - `critical`: Urgent problems or destructive actions (red). - `auto`: Automatically determined based on context. - `neutral`: General information without specific intent (gray). - `caution`: Advisory notices that need attention (yellow)." }, { "kind": "field", "name": "fontVariantNumeric", "type": { "text": "\"auto\" | \"normal\" | \"tabular-nums\"" }, "description": "Set the numeric properties of the font." }, { "kind": "field", "name": "fontSize", "type": { "text": "\"base\" | \"auto\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\"" }, "default": "'auto'", "description": "Font size of the text. The named values also apply their matching line-height and letter-spacing." }, { "kind": "field", "name": "fontWeight", "type": { "text": "\"base\" | \"auto\" | \"medium\" | \"semibold\" | \"bold\"" }, "default": "'auto'", "description": "Font weight of the text." }, { "kind": "field", "name": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "kind": "field", "name": "dir", "type": { "text": "\"auto\" | \"ltr\" | \"rtl\"" }, "default": "''", "description": "Indicates the directionality of the element’s text. - `ltr`: languages written from left to right (e.g. English) - `rtl`: languages written from right to left (e.g. Arabic) - `auto`: the user agent determines the direction based on the content - `''`: direction is inherited from parent elements (equivalent to not setting the attribute)" }, { "kind": "field", "name": "interestFor", "type": { "text": "string" }, "description": "ID of a component that should respond to interest (e.g. hover and focus) on this component." } ], "attributes": [ { "name": "color", "fieldName": "color", "type": { "text": "\"subdued\" | \"base\"" }, "description": "Modify the color to be more or less intense." }, { "name": "type", "fieldName": "type", "type": { "text": "\"strong\" | \"address\" | \"redundant\" | \"generic\"" }, "default": "'generic'", "description": "The semantic type and styling treatment for the text content. Other presentation properties on text override the default styling. - `strong`: Emphasizes the text with strong importance, typically displayed in bold. - `generic`: Standard text with no special semantic meaning or styling. - `address`: Marks the text as contact information, such as a physical or email address. - `redundant`: Indicates the text is redundant or duplicated information for screen reader context." }, { "name": "tone", "fieldName": "tone", "type": { "text": "\"auto\" | \"neutral\" | \"info\" | \"success\" | \"caution\" | \"warning\" | \"critical\"" }, "default": "'auto'", "description": "The semantic tone that's applied to the text, which changes its color to convey meaning. - `info`: Informational content or helpful tips (blue). - `success`: Positive outcomes or successful states (green). - `warning`: Important warnings about potential issues (orange). - `critical`: Urgent problems or destructive actions (red). - `auto`: Automatically determined based on context. - `neutral`: General information without specific intent (gray). - `caution`: Advisory notices that need attention (yellow)." }, { "name": "fontvariantnumeric", "fieldName": "fontVariantNumeric", "type": { "text": "\"auto\" | \"normal\" | \"tabular-nums\"" }, "description": "Set the numeric properties of the font." }, { "name": "fontsize", "fieldName": "fontSize", "type": { "text": "\"base\" | \"auto\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\"" }, "default": "'auto'", "description": "Font size of the text. The named values also apply their matching line-height and letter-spacing." }, { "name": "fontweight", "fieldName": "fontWeight", "type": { "text": "\"base\" | \"auto\" | \"medium\" | \"semibold\" | \"bold\"" }, "default": "'auto'", "description": "Font weight of the text." }, { "name": "accessibilityvisibility", "fieldName": "accessibilityVisibility", "type": { "text": "\"visible\" | \"hidden\" | \"exclusive\"" }, "default": "'visible'", "description": "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." }, { "name": "dir", "fieldName": "dir", "type": { "text": "\"auto\" | \"ltr\" | \"rtl\"" }, "default": "''", "description": "Indicates the directionality of the element’s text. - `ltr`: languages written from left to right (e.g. English) - `rtl`: languages written from right to left (e.g. Arabic) - `auto`: the user agent determines the direction based on the content - `''`: direction is inherited from parent elements (equivalent to not setting the attribute)" }, { "name": "interestfor", "fieldName": "interestFor", "type": { "text": "string" }, "description": "ID of a component that should respond to interest (e.g. hover and focus) on this component." } ], "superclass": { "name": "TextBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/Text/TextBase" }, "customElement": true, "tagName": "s-text" } ] }, { "kind": "javascript-module", "path": "dist/components/TextArea/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the text area component.", "name": "TextArea", "slots": [ { "name": "error" }, { "name": "details" } ], "members": [ { "kind": "field", "name": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "The current value for the field. If omitted, the field will be empty." }, { "kind": "field", "name": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "kind": "field", "name": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "kind": "field", "name": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "kind": "field", "name": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "kind": "field", "name": "defaultValue", "type": { "text": "string" }, "description": "The default value for the field." }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "kind": "field", "name": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "kind": "field", "name": "autocomplete", "type": { "text": "\"language\" | \"organization\" | \"name\" | \"additional-name\" | \"address-level1\" | \"address-level2\" | \"address-level3\" | \"address-level4\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"country-name\" | \"country\" | \"family-name\" | \"given-name\" | \"honorific-prefix\" | \"honorific-suffix\" | \"nickname\" | \"one-time-code\" | \"organization-title\" | \"postal-code\" | \"sex\" | \"street-address\" | \"transaction-currency\" | \"username\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-given-name\" | \"cc-name\" | \"cc-type\" | \"on\" | \"off\" | \"shipping language\" | \"shipping organization\" | \"shipping name\" | \"shipping additional-name\" | \"shipping address-level1\" | \"shipping address-level2\" | \"shipping address-level3\" | \"shipping address-level4\" | \"shipping address-line1\" | \"shipping address-line2\" | \"shipping address-line3\" | \"shipping country-name\" | \"shipping country\" | \"shipping family-name\" | \"shipping given-name\" | \"shipping honorific-prefix\" | \"shipping honorific-suffix\" | \"shipping nickname\" | \"shipping one-time-code\" | \"shipping organization-title\" | \"shipping postal-code\" | \"shipping sex\" | \"shipping street-address\" | \"shipping transaction-currency\" | \"shipping username\" | \"shipping cc-additional-name\" | \"shipping cc-family-name\" | \"shipping cc-given-name\" | \"shipping cc-name\" | \"shipping cc-type\" | \"billing language\" | \"billing organization\" | \"billing name\" | \"billing additional-name\" | \"billing address-level1\" | \"billing address-level2\" | \"billing address-level3\" | \"billing address-level4\" | \"billing address-line1\" | \"billing address-line2\" | \"billing address-line3\" | \"billing country-name\" | \"billing country\" | \"billing family-name\" | \"billing given-name\" | \"billing honorific-prefix\" | \"billing honorific-suffix\" | \"billing nickname\" | \"billing one-time-code\" | \"billing organization-title\" | \"billing postal-code\" | \"billing sex\" | \"billing street-address\" | \"billing transaction-currency\" | \"billing username\" | \"billing cc-additional-name\" | \"billing cc-family-name\" | \"billing cc-given-name\" | \"billing cc-name\" | \"billing cc-type\"" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "kind": "field", "name": "maxLength", "type": { "text": "number" }, "default": "Infinity", "description": "Specifies the maximum number of characters allowed." }, { "kind": "field", "name": "minLength", "type": { "text": "number" }, "default": "0", "description": "Specifies the min number of characters allowed." }, { "kind": "field", "name": "rows", "type": { "text": "number" }, "default": "2", "description": "A number of visible text lines." } ], "events": [ { "name": "input", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user makes changes to the field value. This fires before `onChange`." }, { "name": "change", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user has finished editing the field, such as when they blur the field." }, { "name": "focus", "type": { "text": "CustomEvent" }, "description": "A callback fired when the field receives focus." }, { "name": "blur", "type": { "text": "CustomEvent" }, "description": "A callback fired when the field loses focus." } ], "attributes": [ { "name": "id", "fieldName": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "name": "name", "fieldName": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "name": "value", "fieldName": "value", "type": { "text": "string" }, "description": "The current value for the field. If omitted, the field will be empty." }, { "name": "details", "fieldName": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "name": "error", "fieldName": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "name": "label", "fieldName": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "name": "required", "fieldName": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "name": "labelaccessibilityvisibility", "fieldName": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "name": "value", "fieldName": "defaultValue", "type": { "text": "string" }, "description": "The default value for the field." }, { "name": "placeholder", "fieldName": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "name": "readonly", "fieldName": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "name": "autocomplete", "fieldName": "autocomplete", "type": { "text": "\"language\" | \"organization\" | \"name\" | \"additional-name\" | \"address-level1\" | \"address-level2\" | \"address-level3\" | \"address-level4\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"country-name\" | \"country\" | \"family-name\" | \"given-name\" | \"honorific-prefix\" | \"honorific-suffix\" | \"nickname\" | \"one-time-code\" | \"organization-title\" | \"postal-code\" | \"sex\" | \"street-address\" | \"transaction-currency\" | \"username\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-given-name\" | \"cc-name\" | \"cc-type\" | \"on\" | \"off\" | \"shipping language\" | \"shipping organization\" | \"shipping name\" | \"shipping additional-name\" | \"shipping address-level1\" | \"shipping address-level2\" | \"shipping address-level3\" | \"shipping address-level4\" | \"shipping address-line1\" | \"shipping address-line2\" | \"shipping address-line3\" | \"shipping country-name\" | \"shipping country\" | \"shipping family-name\" | \"shipping given-name\" | \"shipping honorific-prefix\" | \"shipping honorific-suffix\" | \"shipping nickname\" | \"shipping one-time-code\" | \"shipping organization-title\" | \"shipping postal-code\" | \"shipping sex\" | \"shipping street-address\" | \"shipping transaction-currency\" | \"shipping username\" | \"shipping cc-additional-name\" | \"shipping cc-family-name\" | \"shipping cc-given-name\" | \"shipping cc-name\" | \"shipping cc-type\" | \"billing language\" | \"billing organization\" | \"billing name\" | \"billing additional-name\" | \"billing address-level1\" | \"billing address-level2\" | \"billing address-level3\" | \"billing address-level4\" | \"billing address-line1\" | \"billing address-line2\" | \"billing address-line3\" | \"billing country-name\" | \"billing country\" | \"billing family-name\" | \"billing given-name\" | \"billing honorific-prefix\" | \"billing honorific-suffix\" | \"billing nickname\" | \"billing one-time-code\" | \"billing organization-title\" | \"billing postal-code\" | \"billing sex\" | \"billing street-address\" | \"billing transaction-currency\" | \"billing username\" | \"billing cc-additional-name\" | \"billing cc-family-name\" | \"billing cc-given-name\" | \"billing cc-name\" | \"billing cc-type\"" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "name": "maxlength", "fieldName": "maxLength", "type": { "text": "number" }, "default": "Infinity", "description": "Specifies the maximum number of characters allowed." }, { "name": "minlength", "fieldName": "minLength", "type": { "text": "number" }, "default": "0", "description": "Specifies the min number of characters allowed." }, { "name": "rows", "fieldName": "rows", "type": { "text": "number" }, "default": "2", "description": "A number of visible text lines." } ], "superclass": { "name": "TextAreaBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/TextArea/TextAreaBase" }, "customElement": true, "tagName": "s-text-area" } ] }, { "kind": "javascript-module", "path": "dist/components/TextField/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the text field component.", "name": "TextField", "slots": [ { "name": "accessory", "description": "Additional content displayed alongside the text field, typically an icon or button that provides related functionality like opening a help tooltip or triggering a modal." }, { "name": "error" }, { "name": "details" } ], "members": [ { "kind": "field", "name": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "The current value for the field. If omitted, the field will be empty." }, { "kind": "field", "name": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "kind": "field", "name": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "kind": "field", "name": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "kind": "field", "name": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "kind": "field", "name": "defaultValue", "type": { "text": "string" }, "description": "The default value for the field." }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "kind": "field", "name": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "kind": "field", "name": "autocomplete", "type": { "text": "\"language\" | \"organization\" | \"name\" | \"additional-name\" | \"address-level1\" | \"address-level2\" | \"address-level3\" | \"address-level4\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"country-name\" | \"country\" | \"family-name\" | \"given-name\" | \"honorific-prefix\" | \"honorific-suffix\" | \"nickname\" | \"one-time-code\" | \"organization-title\" | \"postal-code\" | \"sex\" | \"street-address\" | \"transaction-currency\" | \"username\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-given-name\" | \"cc-name\" | \"cc-type\" | \"on\" | \"off\" | \"shipping language\" | \"shipping organization\" | \"shipping name\" | \"shipping additional-name\" | \"shipping address-level1\" | \"shipping address-level2\" | \"shipping address-level3\" | \"shipping address-level4\" | \"shipping address-line1\" | \"shipping address-line2\" | \"shipping address-line3\" | \"shipping country-name\" | \"shipping country\" | \"shipping family-name\" | \"shipping given-name\" | \"shipping honorific-prefix\" | \"shipping honorific-suffix\" | \"shipping nickname\" | \"shipping one-time-code\" | \"shipping organization-title\" | \"shipping postal-code\" | \"shipping sex\" | \"shipping street-address\" | \"shipping transaction-currency\" | \"shipping username\" | \"shipping cc-additional-name\" | \"shipping cc-family-name\" | \"shipping cc-given-name\" | \"shipping cc-name\" | \"shipping cc-type\" | \"billing language\" | \"billing organization\" | \"billing name\" | \"billing additional-name\" | \"billing address-level1\" | \"billing address-level2\" | \"billing address-level3\" | \"billing address-level4\" | \"billing address-line1\" | \"billing address-line2\" | \"billing address-line3\" | \"billing country-name\" | \"billing country\" | \"billing family-name\" | \"billing given-name\" | \"billing honorific-prefix\" | \"billing honorific-suffix\" | \"billing nickname\" | \"billing one-time-code\" | \"billing organization-title\" | \"billing postal-code\" | \"billing sex\" | \"billing street-address\" | \"billing transaction-currency\" | \"billing username\" | \"billing cc-additional-name\" | \"billing cc-family-name\" | \"billing cc-given-name\" | \"billing cc-name\" | \"billing cc-type\"" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "kind": "field", "name": "icon", "type": { "text": "\"cart-filled\" | \"channels-filled\" | \"home-filled\" | \"order-filled\" | \"person-filled\" | \"product-filled\" | \"color\" | \"info\" | \"status\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"align-horizontal-centers\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"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\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"brain\" | \"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-sale\" | \"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\" | \"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\" | \"delivery\" | \"desktop\" | \"disabled\" | \"discount\" | \"discount-add\" | \"discount-code\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"duplicate\" | \"edit\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"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\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"incomplete\" | \"inheritance\" | \"inventory\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layer\" | \"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\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"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-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money\" | \"money-none\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order\" | \"order-batches\" | \"order-draft\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-fulfilled\" | \"package-on-hold\" | \"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\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"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\" | \"price-list\" | \"print\" | \"product\" | \"product-add\" | \"product-cost\" | \"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-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"replace\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"search\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"select\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"split\" | \"sports\" | \"star\" | \"star-filled\" | \"star-list\" | \"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-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-cart\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant\" | \"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\" | \"empty\" | \"alert-triangle-filled\" | \"arrow-down-right\" | \"battery-low\" | \"broom\" | \"cart-send\" | \"complete\" | \"delivered\" | \"disabled-filled\" | \"discount-automatic\" | \"discount-remove\" | \"drawer\" | \"fav\" | \"geolocation\" | \"gift\" | \"graduation-hat\" | \"info-filled\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"keypad\" | \"live-critical\" | \"live-none\" | \"menu-filled\" | \"money-split\" | \"package-cancel\" | \"package-reassign\" | \"partially-complete\" | \"phablet\" | \"point-of-sale-register\" | \"receipt-folded\" | \"reorder\" | \"savings\" | \"scan-qr-code\" | \"shipping-label-cancel\" | \"star-circle\" | \"star-half\" | \"text-indent-remove\" | \"transaction-fee-add\" | \"truck\" | \"x-circle-filled\"" }, "default": "''", "description": "The type of icon to be displayed in the field." }, { "kind": "field", "name": "maxLength", "type": { "text": "number" }, "default": "Infinity", "description": "Specifies the maximum number of characters allowed." }, { "kind": "field", "name": "minLength", "type": { "text": "number" }, "default": "0", "description": "Specifies the min number of characters allowed." }, { "kind": "field", "name": "suffix", "type": { "text": "string" }, "default": "''", "description": "A value to be displayed immediately after the editable portion of the field. This is useful for displaying an implied part of the value, such as \"@shopify.com\", or \"%\". This cannot be edited by the user, and it isn't included in the value of the field. It may not be displayed until the user has interacted with the input. For example, an inline label may take the place of the suffix until the user focuses the input." }, { "kind": "field", "name": "prefix", "type": { "text": "string" }, "default": "''", "description": "A value to be displayed immediately before the editable portion of the field. This is useful for displaying an implied part of the value, such as \"https://\" or \"+353\". This cannot be edited by the user, and it isn't included in the value of the field. It may not be displayed until the user has interacted with the input. For example, an inline label may take the place of the prefix until the user focuses the input." } ], "events": [ { "name": "input", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user makes changes to the field value. This fires before `onChange`." }, { "name": "change", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user has finished editing the field, such as when they blur the field." }, { "name": "focus", "type": { "text": "CustomEvent" }, "description": "A callback fired when the field receives focus." }, { "name": "blur", "type": { "text": "CustomEvent" }, "description": "A callback fired when the field loses focus." } ], "attributes": [ { "name": "id", "fieldName": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "name": "name", "fieldName": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "name": "value", "fieldName": "value", "type": { "text": "string" }, "description": "The current value for the field. If omitted, the field will be empty." }, { "name": "details", "fieldName": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "name": "error", "fieldName": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "name": "label", "fieldName": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "name": "required", "fieldName": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "name": "labelaccessibilityvisibility", "fieldName": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "name": "value", "fieldName": "defaultValue", "type": { "text": "string" }, "description": "The default value for the field." }, { "name": "placeholder", "fieldName": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "name": "readonly", "fieldName": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "name": "autocomplete", "fieldName": "autocomplete", "type": { "text": "\"language\" | \"organization\" | \"name\" | \"additional-name\" | \"address-level1\" | \"address-level2\" | \"address-level3\" | \"address-level4\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"country-name\" | \"country\" | \"family-name\" | \"given-name\" | \"honorific-prefix\" | \"honorific-suffix\" | \"nickname\" | \"one-time-code\" | \"organization-title\" | \"postal-code\" | \"sex\" | \"street-address\" | \"transaction-currency\" | \"username\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-given-name\" | \"cc-name\" | \"cc-type\" | \"on\" | \"off\" | \"shipping language\" | \"shipping organization\" | \"shipping name\" | \"shipping additional-name\" | \"shipping address-level1\" | \"shipping address-level2\" | \"shipping address-level3\" | \"shipping address-level4\" | \"shipping address-line1\" | \"shipping address-line2\" | \"shipping address-line3\" | \"shipping country-name\" | \"shipping country\" | \"shipping family-name\" | \"shipping given-name\" | \"shipping honorific-prefix\" | \"shipping honorific-suffix\" | \"shipping nickname\" | \"shipping one-time-code\" | \"shipping organization-title\" | \"shipping postal-code\" | \"shipping sex\" | \"shipping street-address\" | \"shipping transaction-currency\" | \"shipping username\" | \"shipping cc-additional-name\" | \"shipping cc-family-name\" | \"shipping cc-given-name\" | \"shipping cc-name\" | \"shipping cc-type\" | \"billing language\" | \"billing organization\" | \"billing name\" | \"billing additional-name\" | \"billing address-level1\" | \"billing address-level2\" | \"billing address-level3\" | \"billing address-level4\" | \"billing address-line1\" | \"billing address-line2\" | \"billing address-line3\" | \"billing country-name\" | \"billing country\" | \"billing family-name\" | \"billing given-name\" | \"billing honorific-prefix\" | \"billing honorific-suffix\" | \"billing nickname\" | \"billing one-time-code\" | \"billing organization-title\" | \"billing postal-code\" | \"billing sex\" | \"billing street-address\" | \"billing transaction-currency\" | \"billing username\" | \"billing cc-additional-name\" | \"billing cc-family-name\" | \"billing cc-given-name\" | \"billing cc-name\" | \"billing cc-type\"" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "name": "icon", "fieldName": "icon", "type": { "text": "\"cart-filled\" | \"channels-filled\" | \"home-filled\" | \"order-filled\" | \"person-filled\" | \"product-filled\" | \"color\" | \"info\" | \"status\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"align-horizontal-centers\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"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\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"brain\" | \"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-sale\" | \"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\" | \"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\" | \"delivery\" | \"desktop\" | \"disabled\" | \"discount\" | \"discount-add\" | \"discount-code\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"duplicate\" | \"edit\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"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\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"incomplete\" | \"inheritance\" | \"inventory\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layer\" | \"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\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"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-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money\" | \"money-none\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order\" | \"order-batches\" | \"order-draft\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-fulfilled\" | \"package-on-hold\" | \"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\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"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\" | \"price-list\" | \"print\" | \"product\" | \"product-add\" | \"product-cost\" | \"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-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"replace\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"search\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"select\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"split\" | \"sports\" | \"star\" | \"star-filled\" | \"star-list\" | \"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-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-cart\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant\" | \"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\" | \"empty\" | \"alert-triangle-filled\" | \"arrow-down-right\" | \"battery-low\" | \"broom\" | \"cart-send\" | \"complete\" | \"delivered\" | \"disabled-filled\" | \"discount-automatic\" | \"discount-remove\" | \"drawer\" | \"fav\" | \"geolocation\" | \"gift\" | \"graduation-hat\" | \"info-filled\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"keypad\" | \"live-critical\" | \"live-none\" | \"menu-filled\" | \"money-split\" | \"package-cancel\" | \"package-reassign\" | \"partially-complete\" | \"phablet\" | \"point-of-sale-register\" | \"receipt-folded\" | \"reorder\" | \"savings\" | \"scan-qr-code\" | \"shipping-label-cancel\" | \"star-circle\" | \"star-half\" | \"text-indent-remove\" | \"transaction-fee-add\" | \"truck\" | \"x-circle-filled\"" }, "default": "''", "description": "The type of icon to be displayed in the field." }, { "name": "maxlength", "fieldName": "maxLength", "type": { "text": "number" }, "default": "Infinity", "description": "Specifies the maximum number of characters allowed." }, { "name": "minlength", "fieldName": "minLength", "type": { "text": "number" }, "default": "0", "description": "Specifies the min number of characters allowed." }, { "name": "suffix", "fieldName": "suffix", "type": { "text": "string" }, "default": "''", "description": "A value to be displayed immediately after the editable portion of the field. This is useful for displaying an implied part of the value, such as \"@shopify.com\", or \"%\". This cannot be edited by the user, and it isn't included in the value of the field. It may not be displayed until the user has interacted with the input. For example, an inline label may take the place of the suffix until the user focuses the input." }, { "name": "prefix", "fieldName": "prefix", "type": { "text": "string" }, "default": "''", "description": "A value to be displayed immediately before the editable portion of the field. This is useful for displaying an implied part of the value, such as \"https://\" or \"+353\". This cannot be edited by the user, and it isn't included in the value of the field. It may not be displayed until the user has interacted with the input. For example, an inline label may take the place of the prefix until the user focuses the input." } ], "superclass": { "name": "TextFieldBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/TextField/TextFieldBase" }, "customElement": true, "tagName": "s-text-field" } ] }, { "kind": "javascript-module", "path": "dist/components/Thumbnail/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the thumbnail component.", "name": "Thumbnail", "members": [ { "kind": "field", "name": "size", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\"" }, "description": "The size of the product thumbnail image. - `small-200`: Smallest thumbnail size, ideal for compact product lists or tables. - `small-100`: Very small thumbnail, suitable for dense layouts. - `small`: Small thumbnail for space-constrained contexts. - `base`: Default size that balances visibility and space efficiency. - `large`: Larger thumbnail for featured products or detailed views. - `large-100`: Extra large thumbnail for prominent product display." }, { "kind": "field", "name": "src", "type": { "text": "string" }, "description": "The image source (either a remote URL or a local file resource). When the image is loading or no `src` is provided, a placeholder will be rendered." }, { "kind": "field", "name": "alt", "type": { "text": "string" }, "default": "`''`", "description": "An alternative text description that describe the image for the reader to understand what it is about. It is extremely useful for both users using assistive technology and sighted users. A well written description provides people with visual impairments the ability to participate in consuming non-text content. When a screen readers encounters an `s-image`, the description is read and announced aloud. If an image fails to load, potentially due to a poor connection, the `alt` is displayed on screen instead. This has the benefit of letting a sighted buyer know an image was meant to load here, but as an alternative, they’re still able to consume the text content. Read [considerations when writing alternative text](https://www.shopify.com/ca/blog/image-alt-text#4) to learn more." } ], "events": [ { "name": "load", "type": { "text": "CustomEvent" }, "description": "A callback fired when the thumbnail image loads successfully." }, { "name": "error", "type": { "text": "CustomEvent" }, "description": "A callback fired when the thumbnail image fails to load." } ], "attributes": [ { "name": "size", "fieldName": "size", "type": { "text": "\"base\" | \"small-200\" | \"small-100\" | \"small\" | \"large\" | \"large-100\"" }, "description": "The size of the product thumbnail image. - `small-200`: Smallest thumbnail size, ideal for compact product lists or tables. - `small-100`: Very small thumbnail, suitable for dense layouts. - `small`: Small thumbnail for space-constrained contexts. - `base`: Default size that balances visibility and space efficiency. - `large`: Larger thumbnail for featured products or detailed views. - `large-100`: Extra large thumbnail for prominent product display." }, { "name": "src", "fieldName": "src", "type": { "text": "string" }, "description": "The image source (either a remote URL or a local file resource). When the image is loading or no `src` is provided, a placeholder will be rendered." }, { "name": "alt", "fieldName": "alt", "type": { "text": "string" }, "default": "`''`", "description": "An alternative text description that describe the image for the reader to understand what it is about. It is extremely useful for both users using assistive technology and sighted users. A well written description provides people with visual impairments the ability to participate in consuming non-text content. When a screen readers encounters an `s-image`, the description is read and announced aloud. If an image fails to load, potentially due to a poor connection, the `alt` is displayed on screen instead. This has the benefit of letting a sighted buyer know an image was meant to load here, but as an alternative, they’re still able to consume the text content. Read [considerations when writing alternative text](https://www.shopify.com/ca/blog/image-alt-text#4) to learn more." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-thumbnail" } ] }, { "kind": "javascript-module", "path": "dist/components/Tooltip/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the tooltip component.", "name": "Tooltip", "slots": [ { "name": "", "description": "The informational text or elements displayed within the tooltip overlay, providing helpful context or explanations when users interact with the associated element. Only accepts text, paragraph components, and raw `textContent`." } ], "members": [ { "kind": "field", "name": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." } ], "attributes": [ { "name": "id", "fieldName": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." } ], "superclass": { "name": "PreactOverlayElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PreactOverlayElement" }, "customElement": true, "tagName": "s-tooltip" } ] }, { "kind": "javascript-module", "path": "dist/components/UnorderedList/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the unordered list component.", "name": "UnorderedList", "slots": [ { "name": "", "description": "The list entries displayed within the unordered list, where each item is marked with a bullet point. Only accepts list item components as children. Each list item represents a single bulleted entry in the list." } ], "members": [ { "kind": "field", "name": "children", "type": { "text": "any" }, "description": "The content of the UnorderededList. Accepts only `ListItem` components." }, { "kind": "field", "name": "id", "type": { "text": "string | undefined" }, "description": "A unique identifier for the element." } ], "attributes": [ { "name": "children", "fieldName": "children", "type": { "text": "any" }, "description": "The content of the UnorderededList. Accepts only `ListItem` components." }, { "name": "id", "fieldName": "id", "type": { "text": "string | undefined" }, "description": "A unique identifier for the element." } ], "superclass": { "name": "PolarisCustomElement", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/foundational/classes/PolarisCustomElement" }, "customElement": true, "tagName": "s-unordered-list" } ] }, { "kind": "javascript-module", "path": "dist/components/URLField/index.js", "declarations": [ { "kind": "class", "description": "Configure the following properties on the URL field component.", "name": "URLField", "slots": [ { "name": "error" }, { "name": "details" } ], "members": [ { "kind": "field", "name": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "The current value for the field. If omitted, the field will be empty." }, { "kind": "field", "name": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "kind": "field", "name": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "kind": "field", "name": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "kind": "field", "name": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "kind": "field", "name": "defaultValue", "type": { "text": "string" }, "description": "The default value for the field." }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "kind": "field", "name": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "kind": "field", "name": "autocomplete", "type": { "text": "\"photo\" | \"url\" | \"impp\" | \"home impp\" | \"mobile impp\" | \"fax impp\" | \"pager impp\" | \"on\" | \"off\" | \"shipping photo\" | \"shipping url\" | \"shipping impp\" | \"shipping home impp\" | \"shipping mobile impp\" | \"shipping fax impp\" | \"shipping pager impp\" | \"billing photo\" | \"billing url\" | \"billing impp\" | \"billing home impp\" | \"billing mobile impp\" | \"billing fax impp\" | \"billing pager impp\"" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "kind": "field", "name": "maxLength", "type": { "text": "number" }, "default": "Infinity", "description": "Specifies the maximum number of characters allowed." }, { "kind": "field", "name": "minLength", "type": { "text": "number" }, "default": "0", "description": "Specifies the min number of characters allowed." } ], "events": [ { "name": "input", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user makes changes to the field value. This fires before `onChange`." }, { "name": "change", "type": { "text": "CustomEvent" }, "description": "A callback fired when the user has finished editing the field, such as when they blur the field." }, { "name": "focus", "type": { "text": "CustomEvent" }, "description": "A callback fired when the field receives focus." }, { "name": "blur", "type": { "text": "CustomEvent" }, "description": "A callback fired when the field loses focus." } ], "attributes": [ { "name": "id", "fieldName": "id", "type": { "text": "string" }, "description": "A unique identifier for the element." }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the field, disallowing any interaction." }, { "name": "name", "fieldName": "name", "type": { "text": "string" }, "description": "An identifier for the field that is unique within the nearest containing form." }, { "name": "value", "fieldName": "value", "type": { "text": "string" }, "description": "The current value for the field. If omitted, the field will be empty." }, { "name": "details", "fieldName": "details", "type": { "text": "any" }, "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users." }, { "name": "error", "fieldName": "error", "type": { "text": "any" }, "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately." }, { "name": "label", "fieldName": "label", "type": { "text": "any" }, "description": "Content to use as the field label." }, { "name": "required", "fieldName": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property." }, { "name": "labelaccessibilityvisibility", "fieldName": "labelAccessibilityVisibility", "type": { "text": "\"visible\" | \"exclusive\"" }, "default": "'visible'", "description": "Changes the visibility of the component's label. - `visible`: the label is visible to all users. - `exclusive`: the label is visually hidden but remains in the accessibility tree." }, { "name": "value", "fieldName": "defaultValue", "type": { "text": "string" }, "description": "The default value for the field." }, { "name": "placeholder", "fieldName": "placeholder", "type": { "text": "string" }, "description": "A short hint that describes the expected value of the field." }, { "name": "readonly", "fieldName": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "The field cannot be edited by the user. It is focusable will be announced by screen readers." }, { "name": "autocomplete", "fieldName": "autocomplete", "type": { "text": "\"photo\" | \"url\" | \"impp\" | \"home impp\" | \"mobile impp\" | \"fax impp\" | \"pager impp\" | \"on\" | \"off\" | \"shipping photo\" | \"shipping url\" | \"shipping impp\" | \"shipping home impp\" | \"shipping mobile impp\" | \"shipping fax impp\" | \"shipping pager impp\" | \"billing photo\" | \"billing url\" | \"billing impp\" | \"billing home impp\" | \"billing mobile impp\" | \"billing fax impp\" | \"billing pager impp\"" }, "default": "'tel' for PhoneField", "description": "A hint as to the intended content of the field. When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents. When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill." }, { "name": "maxlength", "fieldName": "maxLength", "type": { "text": "number" }, "default": "Infinity", "description": "Specifies the maximum number of characters allowed." }, { "name": "minlength", "fieldName": "minLength", "type": { "text": "number" }, "default": "0", "description": "Specifies the min number of characters allowed." } ], "superclass": { "name": "URLFieldBase", "module": "//app/libraries/javascript/polaris/admin-ui-components/src/components/URLField/URLFieldBase" }, "customElement": true, "tagName": "s-url-field" } ] } ] }